n3tr / react-playground Goto Github PK

We can get error stack for bold compile error and component runtime error then format to readable text. mount a ErrorComponent would be a good idea.

Take a look at https://github.com/stacktracejs/stackframe, or https://github.com/csnover/TraceKit for normalize error text

Also make better Bottom Console Panel like in Xcode Panel and allows user to toggle open/close panel.

Every run we will remove all LineWidget (which is iframe with mounting DOM inside) from CodeMirror's editor and mount a new one.

Better we can reuse mount DOM inside the iframe.

make it auto run after stop typing (maybe 2s).

need to finish #1 first since we dun want to re-render mounted dom without change

Right now we support only React inside scope. we can add some popular 3rd party libs such as

• Redux, React-Redux
• Styled-component
• Styled-JSX (not support for Babel-standalone, custom build needed)

bonus: if we can do lazy load 3rd party since including all in will make bundle too big.

https://github.com/tomkp/react-split-pane

Currently, We use run function to preview inline component. Better we can use expression call instead.

The idea is create Babel plugins to transform JSXElement expression into CallExpression expression (do not forget to add line number inside function args)

https://astexplorer.net/#/gist/223df6308d2599596751e7c976a5a274/3be0418daec5e283eb2dfbecfd0a84faf007b830