eisisig / react-isolate Goto Github PK
View Code? Open in Web Editor NEWReact Component Isolation Playground
React Component Isolation Playground
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
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...
There is no way to got to router root. So we probably need a "site title" which links to the "/" root
When opening react-isolate in IE11 I get the following error:
Multiple definitions of a property not allowed in strict mode
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..
Probably few things
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.
We should probably format the markup a bit better
Things to check
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 users to config and overwrite webpack config inside isolate config. Needs to be under the webpackConfig property
{
webpackConfig: {
loaders: []
}
}
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
When clicking on an new Component, select the first fixture if any. So no need to 2x click to see demo and markup
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.
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
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
See if it is possible to improve the speed of initial compile of components
Less babel plugin dependency
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
Somewhere along the line the hot reloading seems to have broken. This needs to be fixed
Now it is json so we can't display methods easily
We need to update babel version to the latest v6
But some of the packages that are used are not yet compatible those are
Thanks for publishing this
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.