eisisig/react-isolate

React Component Isolation Playground

react-isolate's Issues

Passing functions as props does not work

I'm trying to do something like this on a prop

xTicksFormat: (date) => { return moment(date).format('D MMM'); },

This dosn't work on rerender of component

Allow fixtures to return a promise for async data

Would be good to allow the fixture to return a promise and then render the component again when returned... Useful when data is coming from apis etc...

Missing home button

There is no way to got to router root. So we probably need a "site title" which links to the "/" root

Dosn't work in IE

When opening react-isolate in IE11 I get the following error:

Multiple definitions of a property not allowed in strict mode

UI design

There wasn't any real thought put into the design so It might be a good idea to work on that.

The arrangement of the panels, side-menu, resizable panels etc..

Installing react-isolate as local dependency does not work

Probably few things

• Not finding loaders

Check if the imported file is actually a React Component

Now all js files in components folder get imported and added to the tree. We need to check if it is actually a Component before adding it to the tree.

Format markup preview better

We should probably format the markup a bit better

Things to check

• line wrapping by the CodeMirror editor
• detect total props and display multiline with indentation

Pick up Components tests and provide way to run them

I had already implemented this but it was parsing the tests and was really fragile.

We should probably just pick up the file, store the path and then have a way in the Components view to run it.

We could use something like shell-js/exec and run the test. The have a way (ajax/iframe) to display the results of that call

Allow for webpack config in isolate.config

Allow users to config and overwrite webpack config inside isolate config. Needs to be under the webpackConfig property

{
    webpackConfig: {
        loaders: []
    }
}

Better way to demo Components

I think we need a better way/workflow to demo Components. Some components can be easily demoed with just the fixtures. But some depend on sibling/child components (Tab/TabPane, Accordion/AccordionPane, RadioList/Radio) etc...

Now we pick up all Components and fixtures. So if there is a Demo Component AND a fixture for it we display it. BUT the docs are then from the Demo Component and not the actual Component you are demoing.

We could do some auto-detecting of demo Components with some naming convention so

Accordion.js
AccordionPane.js
AccordionDemo.js
// or ---
Radio.js
RadioList.js
RadioList-demo.js

Then we would attach the demo info to the Component when we are fetching all the Components on start

I'll add to this when I think of something

Make the first fixture be selected by default

When clicking on an new Component, select the first fixture if any. So no need to 2x click to see demo and markup

Dates in the editor are not parsed correctly. They are passed as string on re-render

Dates are always serialized as strings in the editor so when you want to rerender the component they are given strings where there should be dates.

Load only the main component js file from the component's folder

Having more than one js files in the component folder causes issues with the sidebar and loaded fixtures.

Example:

If I have something like this:

src/component/MyList/MyList.js
src/component/MyList/MyListItem.js <-- sometime this is loaded even if is not the main component

Component doesn't render if no props exist

If there is no fixture and no defaultProps in the Component trying to be rendered nothing happends.

We need to check for "defaultProps" property and create an empty Object probably if it doesn't find any

Performance improvements

See if it is possible to improve the speed of initial compile of components

• See if it is possible to improve require.context calls
• Improve loops and break out as soon as possible
• Any loader or plugins unnecessary

Refactor jsx-control-statements plugin out

Less babel plugin dependency

Include state in fixtures

We need to allow state variables in the fixtures which update automatically.

Also update the editor if the you interact with the Component demo which changes the state

Handle functions better in markup preview

Hot reloading seems to be broken in general

Somewhere along the line the hot reloading seems to have broken. This needs to be fixed

See if we can display js in the editor

Now it is json so we can't display methods easily

Upgrade babel to v6

We need to update babel version to the latest v6

But some of the packages that are used are not yet compatible those are

• react-babel-transform

Nice project

Thanks for publishing this

Display markdown readme.md or spec.md in component documentation

Detect if we have a readme or spec file in the Component folder. Display it in the Components documentation panel.

Maybe we need tabs to split up the document/preview panels?