Repository navigation
chore(Editor): make editor fully functional - #473
Conversation
…stardust-ui/react into chore/fix-editor
…stardust-ui/react into chore/fix-editor # Conflicts: # yarn.lock
Codecov Report
@@ Coverage Diff @@
## master #473 +/- ##
=========================================
Coverage ? 87.53%
=========================================
Files ? 46
Lines ? 1532
Branches ? 219
=========================================
Hits ? 1341
Misses ? 186
Partials ? 5Continue to review full report at Codecov.
|
Generated by 🚫 dangerJS |
Oleksandr Fediashov (layershifter)
changed the title
Oleksandr Fediashov (layershifter)
changed the title
| import * as Stardust from '@stardust-ui/react' | ||
|
|
||
| export const babelConfig = { | ||
| plugins: ['proposal-class-properties', ['transform-typescript', { isTSX: true }]], |
There was a problem hiding this comment.
It's strange, but typescript's preset is registered, but not working 🤔
Will fill an issue to Babel's repo.
There was a problem hiding this comment.
So, are we evaluating now the examples as js code?
There was a problem hiding this comment.
yes, at least till the moment when this issue will be fixed :)
There was a problem hiding this comment.
Nope, all TS transforms are applied. I mentioned that use there the plugin:
plugins: [['transform-typescript', { isTSX: true }]],
Instead of the preset:
presets: ['typescript'],
However, everything is works.
| } | ||
| const { themeName } = nextProps | ||
| if (this.state.themeName !== themeName) { | ||
| this.setState({ themeName }, this.renderSourceCode) |
| ...knobs, | ||
| }, | ||
| }), | ||
| this.renderSourceCode, |
| }), | ||
| }} | ||
| > | ||
| {this.renderExampleFromCode()} |
There was a problem hiding this comment.
👍 much cleaner!
| <Segment size="small" color="red" basic inverted padded secondary> | ||
| <pre>{error}</pre> | ||
| </Segment> | ||
| <SourceRender.Consumer> |
There was a problem hiding this comment.
not sure whether context consumer model is the one that fits this case, because as an alternative we might think about storing rendered result in a state and render by consuming stored value. Not sure if this context-driven indirection is necessary here
There was a problem hiding this comment.
Context allows to avoid the storage of render related stuff in the state of ComponentExample and avoid cycling updates like this: render ComponentExample => render source =>update state => render ComponentExample (again).
There was a problem hiding this comment.
sorry, cannot completely understand how it is different with the context.
Lets, for the sake fo simplicity, consider the following case: we have code pane and render pane, where code is mapped to rendered DOM.
Also, suppose that there is ComponentExample component who manages these two.
Initially code and rendered DOM are rendered at the corresponding panes. After that we start editing code:
State-based approach
The following will happen if ComponentExample's state will be used:
`RENDER PANE`
-----------------
`CODE PANE` -> content changed ->`code` evaluated to `state.renderedTree`, RERENDER
Context-based approach
So, one rerendering for state (two if this process will be debounced) - no extra unexpected cycles. How it is different from context-based way? What we will have is the following (under assumption that debouncing is removed, as we have it now):
`RENDER PANE`
-----------------
`CODE PANE` -> content changed -> evaluated to `state.renderedTree`, RERENDER with updated context provider
So, still one update, but why do we need context-based indirection?
Please, help me settle these things in my head. Thank you!
kuzhelov
left a comment
kuzhelov
left a comment
There was a problem hiding this comment.
changes look absolutely good to me, just left couple of questions to refine
kuzhelov
added
needs author feedback
| ) | ||
| } | ||
|
|
||
| private renderSourceCode = _.debounce(() => { |
There was a problem hiding this comment.
Yes, we don't need now it fact. Performance is good enough.
kuzhelov
added
🚀 ready for review
and removed
needs author feedback
| return execute(transpiledCode, { | ||
| REACT: React, | ||
| REACT_DOM: ReactDOM, | ||
| STARDUST_UI_REACT: Stardust, |
There was a problem hiding this comment.
I can't seem to find where are we handling this now...
| '@stardust-ui/react': Stardust, | ||
| lodash: _, | ||
| react: React, | ||
| } |
There was a problem hiding this comment.
We should add react-dom here
5 participants
This PR uses
react-source-renderand Babel to render examples from source.This allows to resolve our existing problems with the live editing process.
Before
Blank page on fail.
After