Upgrade React Live to v2 (#800)

* Upgrade React Live to v2 * Fix Code Pane test
FormidableLabs · Jan 14, 2020 · 733617c · 733617c
1 parent fb3e099
commit 733617c
Show file tree

Hide file tree

Showing 6 changed files with 3,019 additions and 1,683 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "normalize.css": "^8.0.1",
     "prismjs": "^1.17.1",
     "react-emotion": "^8.0.8",
-    "react-live": "^1.6",
+    "react-live": "^2.2.2",
     "react-redux": "^5.1.1",
     "react-transition-group": "1.2.1",
     "react-typography": "^0.16.18",

diff --git a/src/components/__snapshots__/code-pane.test.js.snap b/src/components/__snapshots__/code-pane.test.js.snap
@@ -1,38 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CodePane /> should render correctly. 1`] = `
-<CodePane
+<Styled(div)
   className=""
-  contentEditable={false}
-  lang="jsx"
-  source="
-      const myButton = (
-        <CustomButton
-          style={{ background: '#f00' }}
-          onClick={this.action}
-        >
-         Click Me
-        </CustomButton>
-      );
-    "
-  theme="dark"
+  styles={
+    Array [
+      Object {},
+      Object {},
+      undefined,
+    ]
+  }
 >
-  <Styled(div)
-    className=""
-    styles={
-      Array [
-        Object {},
-        Object {},
-        undefined,
-      ]
-    }
-  >
-    <div
-      className="css-0 ep9ila60"
-    >
-      <Styled(Component)
-        className="language-jsx builtin-prism-theme "
-        code="
+  <Styled(Component)
+    className="language-jsx builtin-prism-theme "
+    code="
       const myButton = (
         <CustomButton
           style={{ background: '#f00' }}
@@ -42,75 +23,13 @@ exports[`<CodePane /> should render correctly. 1`] = `
         </CustomButton>
       );
     "
-        contentEditable={false}
-        language="jsx"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        prismTheme="dark;"
-        syntaxStyles={Object {}}
-      >
-        <Component
-          className="language-jsx builtin-prism-theme  css-1rm1mht ep9ila61"
-          code="
-      const myButton = (
-        <CustomButton
-          style={{ background: '#f00' }}
-          onClick={this.action}
-        >
-         Click Me
-        </CustomButton>
-      );
-    "
-          contentEditable={false}
-          language="jsx"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          prismTheme="dark;"
-          syntaxStyles={Object {}}
-        >
-          <Editor
-            className="language-jsx builtin-prism-theme  css-1rm1mht ep9ila61"
-            code="
-      const myButton = (
-        <CustomButton
-          style={{ background: '#f00' }}
-          onClick={this.action}
-        >
-         Click Me
-        </CustomButton>
-      );
-    "
-            contentEditable={false}
-            language="jsx"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-          >
-            <pre
-              className="prism-code language-jsx builtin-prism-theme  css-1rm1mht ep9ila61"
-              contentEditable={false}
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "
-      <span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
-        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
-          <span class=\\"token attr-name\\">style</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> background<span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">'#f00'</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>
-          <span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>action<span class=\\"token punctuation\\">}</span></span>
-        <span class=\\"token punctuation\\">></span></span>
-         Click Me
-        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
-      <span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
-    ",
-                }
-              }
-              spellCheck="false"
-            />
-          </Editor>
-        </Component>
-      </Styled(Component)>
-    </div>
-  </Styled(div)>
-</CodePane>
+    contentEditable={false}
+    language="jsx"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    prismTheme="dark;"
+    syntaxStyles={Object {}}
+  />
+</Styled(div)>
 `;