chore(Editor): make editor fully functional #473

layershifter · 2018-11-14T09:19:01Z

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

…stardust-ui/react into chore/fix-editor

…stardust-ui/react into chore/fix-editor # Conflicts: # yarn.lock

codecov · 2018-11-28T15:15:59Z

Codecov Report

❗ No coverage uploaded for pull request base (master@fa00dc0). Click here to learn what that means.
The diff coverage is n/a.

@@            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.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fa00dc0...4da7e72. Read the comment docs.

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

DustyTheBot · 2018-11-28T15:35:39Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS

…ore/fix-editor

layershifter · 2018-11-29T08:44:46Z

docs/src/components/Playground/renderConfig.ts

+import * as Stardust from '@stardust-ui/react'
+
+export const babelConfig = {
+  plugins: ['proposal-class-properties', ['transform-typescript', { isTSX: true }]],


It's strange, but typescript's preset is registered, but not working 🤔
Will fill an issue to Babel's repo.

So, are we evaluating now the examples as js code?

yes, at least till the moment when this issue will be fixed :)

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.

…ore/fix-editor

kuzhelov · 2018-11-29T15:53:34Z

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -125,23 +117,22 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
    }
    const { themeName } = nextProps
    if (this.state.themeName !== themeName) {
-      this.setState({ themeName }, this.renderSourceCode)


docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

kuzhelov · 2018-11-29T16:02:38Z

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

-          ...knobs,
-        },
-      }),
-      this.renderSourceCode,


mnajdova · 2018-11-29T16:11:25Z

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

+                      }),
+                    }}
+                  >
+                    {this.renderExampleFromCode()}


👍 much cleaner!

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

kuzhelov · 2018-11-29T17:28:13Z

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

-      <Segment size="small" color="red" basic inverted padded secondary>
-        <pre>{error}</pre>
-      </Segment>
+      <SourceRender.Consumer>


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

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).

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

changes look absolutely good to me, just left couple of questions to refine

…ore/fix-editor

kuzhelov · 2018-11-30T11:36:04Z

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -297,40 +289,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
    )
  }

-  private renderSourceCode = _.debounce(() => {


no debouncing anymore?

Yes, we don't need now it fact. Performance is good enough.

mnajdova · 2018-12-03T19:49:16Z

docs/src/utils/evalTypeScript.ts

-  return execute(transpiledCode, {
-    REACT: React,
-    REACT_DOM: ReactDOM,
-    STARDUST_UI_REACT: Stardust,


I can't seem to find where are we handling this now...

mnajdova · 2018-12-03T19:49:58Z

docs/src/components/Playground/renderConfig.ts

+  '@stardust-ui/react': Stardust,
+  lodash: _,
+  react: React,
+}


We should add react-dom here

chore(Editor): fix editor

f096bfc

layershifter requested review from dvdzkwsk, kuzhelov, levithomason, miroslavstastny and mnajdova as code owners November 14, 2018 09:19

layershifter added the 🚧 WIP label Nov 14, 2018

layershifter and others added 6 commits November 14, 2018 13:51

Merge branches 'chore/fix-editor' and 'master' of https://github.com/…

fea0b13

…stardust-ui/react into chore/fix-editor

wip

22a4a8e

Merge branches 'chore/fix-editor' and 'master' of https://github.com/…

cb75d95

…stardust-ui/react into chore/fix-editor # Conflicts: # yarn.lock

regenerate lock

80a6599

update react-source-render, create render config restore functionality

2fe2e57

remove preset

9d152b5

layershifter mentioned this pull request Nov 28, 2018

Docs: improve HTML preview in editor #535

Closed

remove todo

2a63d2b

layershifter commented Nov 28, 2018

View reviewed changes

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx Show resolved Hide resolved

remove obsolete util

20f7f23

layershifter added 3 commits November 28, 2018 18:11

Merge branch 'master' of https://github.com/stardust-ui/react into ch…

749968b

…ore/fix-editor

fix broken things

7ec79ab

bump dependency

80a390c

layershifter changed the title ~~[WIP] chore(Editor): fix editor~~ chore(Editor): fix editor Nov 28, 2018

layershifter changed the title ~~chore(Editor): fix editor~~ chore(Editor): make editor fully functional Nov 28, 2018

layershifter mentioned this pull request Nov 29, 2018

docs(Label): fix examples with icon #540

Merged

layershifter commented Nov 29, 2018

View reviewed changes

Merge branch 'master' of https://github.com/stardust-ui/react into ch…

806eb4d

…ore/fix-editor

layershifter added 🚀 ready for review and removed 🚧 WIP labels Nov 29, 2018

kuzhelov reviewed Nov 29, 2018

View reviewed changes

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx Outdated Show resolved Hide resolved

kuzhelov reviewed Nov 29, 2018

View reviewed changes

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

...knobs,

},

}),

this.renderSourceCode,

Copy link

Contributor

kuzhelov Nov 29, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

mnajdova reviewed Nov 29, 2018

View reviewed changes

kuzhelov reviewed Nov 29, 2018

View reviewed changes

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx Outdated Show resolved Hide resolved

kuzhelov reviewed Nov 29, 2018

View reviewed changes

kuzhelov added needs author feedback Author's opinion is asked and removed 🚀 ready for review labels Nov 29, 2018

Merge branch 'master' of https://github.com/stardust-ui/react into ch…

4f3f561

…ore/fix-editor

kuzhelov reviewed Nov 30, 2018

View reviewed changes

fix review comments

8502a19

kuzhelov added 🚀 ready for review and removed needs author feedback Author's opinion is asked labels Nov 30, 2018

kuzhelov approved these changes Nov 30, 2018

View reviewed changes

layershifter added the ready for merge label Dec 3, 2018

Merge branch 'master' into chore/fix-editor

4da7e72

layershifter merged commit 11e36d5 into master Dec 3, 2018

layershifter deleted the chore/fix-editor branch December 3, 2018 09:25

mnajdova reviewed Dec 3, 2018

View reviewed changes

chore(Editor): make editor fully functional #473

chore(Editor): make editor fully functional #473

Uh oh!

Conversation

layershifter commented Nov 14, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

codecov bot commented Nov 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

DustyTheBot commented Nov 28, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kuzhelov Nov 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

layershifter Nov 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kuzhelov Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

State-based approach

Context-based approach

Uh oh!

kuzhelov left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

layershifter commented Nov 14, 2018 •

edited

Loading

codecov bot commented Nov 28, 2018 •

edited

Loading

kuzhelov Nov 29, 2018 •

edited

Loading

layershifter Nov 29, 2018 •

edited

Loading

kuzhelov Nov 30, 2018 •

edited

Loading