replace react-live with react-runner (#847)

Co-authored-by: Neo Nie <gongwu.nie@revolut.com>
Co-authored-by: Evan Jacobs <570070+probablyup@users.noreply.github.com>

components/CodeBlock.js

@@ -1,15 +1,19 @@
 import React from 'react';
-import { Editor } from 'react-live';
+import { CodeBlock as Code } from 'react-live-runner';
 import styled from 'styled-components';
 import { darkGrey } from '../utils/colors';
 import { monospace } from '../utils/fonts';
 import rem from '../utils/rem';
 import { Note } from './Note';
 
-const CodeBlock = styled((props) => {
-  const language = (props.language || 'clike').toLowerCase().trim();
+const CodeBlock = styled(({ code, ...rest }) => {
+  const language = (rest.language || 'clike').toLowerCase().trim();
 
-  return <Editor {...props} disabled language={language} />;
+  return (
+    <Code {...rest} disabled language={language}>
+      {code}
+    </Code>
+  );
 })`
   background: ${darkGrey};
   border-radius: ${rem(3)};

components/LiveEdit.js

@@ -1,18 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
-import styled, {
-  createGlobalStyle,
-  css,
-  keyframes,
-  StyleSheetManager,
-  ThemeProvider,
-  withTheme,
-} from 'styled-components';
-import stylisRTLPlugin from 'stylis-plugin-rtl';
+import React from 'react';
+import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live-runner';
+import styled, { css } from 'styled-components';
 import { darkGrey, red } from '../utils/colors';
 import { headerFont, monospace } from '../utils/fonts';
 import { phone } from '../utils/media';
 import rem from '../utils/rem';
+import baseScope from '../utils/scope';
 
 const StyledProvider = styled(LiveProvider)`
   box-shadow: ${rem(1)} ${rem(1)} ${rem(20)} rgba(20, 20, 20, 0.27);
@@ -89,35 +82,20 @@ export const StyledError = styled(LiveError)`
   white-space: pre;
 `;
 
-const LiveEdit = ({ noInline, code, scope = {} }) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
+const LiveEdit = ({ code, scope = {} }) => {
   return (
     <StyledProvider
       code={code}
-      noInline={noInline}
-      mountStylesheet={false}
       scope={{
+        ...baseScope,
         ...scope,
-        createGlobalStyle,
-        css,
-        keyframes,
-        styled,
-        ThemeProvider,
-        StyleSheetManager,
-        withTheme,
-        stylisRTLPlugin,
       }}
     >
       <Row>
         <Code>
           <StyledEditor />
         </Code>
-
-        {/* because react-live uses a different babel compiler, the classnames it generates aren't stable and a remount is needed after SSR */}
-        <StyledPreview className="notranslate" key={mounted ? 'preview-client' : 'preview-ssr'} />
+        <StyledPreview className="notranslate" />
       </Row>
 
       <StyledError />

package.json

@@ -38,7 +38,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "react-live": "^2.3.0",
+    "react-live-runner": "^1.0.0-rc.2",
     "react-transition-group": "^4.4.2",
     "styled-components": "^5.3.3",
     "styled-theming": "^2.2.0",

pages/_document.js

@@ -2,6 +2,7 @@ import Document, { Head, Html, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
 import { bodyFont } from '../utils/fonts';
+import { reset } from '../utils/scope';
 
 const resetStyles = `
   *,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{text-decoration:none;color:inherit;background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default}
@@ -78,6 +79,8 @@ export default class MyDocument extends Document {
 
   render() {
     const { styleElements } = this.props;
+    // reset counter for SSR
+    reset();
 
     return (
       <Html lang="en">

pages/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import NextLink from '../components/Link';
 import styled, { css } from 'styled-components';
-import { LiveProvider, LiveEditor, LivePreview } from 'react-live';
+import { LiveProvider, LiveEditor, LivePreview } from 'react-live-runner';
 
 import rem from '../utils/rem';
 import { blmGrey, blmMetal, blmBlack } from '../utils/colors';
@@ -16,6 +16,7 @@ import Nav from '../components/Nav';
 import { sortedCompanies, sortedProjects } from '../companies-manifest';
 import UsersLogos from '../components/UsersLogos';
 import SmallShowcase from '../components/SmallShowcase';
+import baseScope from '../utils/scope';
 
 const Tagline = styled.h1`
   font-weight: 600;
@@ -190,7 +191,7 @@ class Index extends PureComponent {
 
         <Wrapper>
           <Content hero>
-            <LiveProvider code={headerCode} noInline mountStylesheet={false} scope={{ React, styled, css, rem, Link }}>
+            <LiveProvider code={headerCode} scope={{ styled: baseScope.styled, css, rem, Link }}>
               <Logo />
 
               <Title>