-
Notifications
You must be signed in to change notification settings - Fork 53
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 ? 5 Continue to review full report at Codecov.
|
Generated by 🚫 dangerJS |
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So, are we evaluating now the examples as js code?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, at least till the moment when this issue will be fixed :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
@@ -125,23 +117,22 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE | |||
} | |||
const { themeName } = nextProps | |||
if (this.state.themeName !== themeName) { | |||
this.setState({ themeName }, this.renderSourceCode) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
Outdated
Show resolved
Hide resolved
...knobs, | ||
}, | ||
}), | ||
this.renderSourceCode, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
}), | ||
}} | ||
> | ||
{this.renderExampleFromCode()} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 much cleaner!
docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
Outdated
Show resolved
Hide resolved
<Segment size="small" color="red" basic inverted padded secondary> | ||
<pre>{error}</pre> | ||
</Segment> | ||
<SourceRender.Consumer> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changes look absolutely good to me, just left couple of questions to refine
@@ -297,40 +289,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE | |||
) | |||
} | |||
|
|||
private renderSourceCode = _.debounce(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no debouncing anymore?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, we don't need now it fact. Performance is good enough.
return execute(transpiledCode, { | ||
REACT: React, | ||
REACT_DOM: ReactDOM, | ||
STARDUST_UI_REACT: Stardust, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should add react-dom here
This PR uses
react-source-render
and Babel to render examples from source.This allows to resolve our existing problems with the live editing process.
Before
Blank page on fail.
After