[POC] support live editing

package.json

@@ -27,7 +27,10 @@
     "react-github-btn": "1.2.0",
     "react-helmet": "6.1.0",
     "react-hook-form": "6.0.0-rc.1",
+    "react-hook-form-v7": "npm:react-hook-form@7",
+    "react-runner": "^1.0.0",
     "react-simple-animate": "^3.3.12",
+    "react-simple-code-editor": "^0.11.0",
     "react-simple-img": "2.3.9",
     "react-sortablejs": "1.5.1",
     "sortablejs": "1.10.2"

src/components/CodeArea.module.css

@@ -81,3 +81,36 @@
 .wrapper pre code.showCode {
   display: block;
 }
+
+.liveRunnerWrapper {
+  overflow: auto;
+  margin: 14px 0;
+}
+
+:global(.light) .liveRunnerWrapper {
+  border: 1px solid var(--color-light-grey);
+}
+
+.liveRunner {
+  background: var(--color-purple);
+  color: white;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 14px;
+  white-space: pre;
+  caret-color: #fff;
+  min-width: 100%;
+  float: left;
+}
+
+:global(.light) .liveRunner {
+  background: #fff;
+  color: #000;
+  caret-color: #000;
+}
+
+.liveRunner > textarea,
+.liveRunner > pre {
+  outline: none;
+  white-space: pre !important;
+  line-height: 1.5 !important;
+}

src/components/CodeArea.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import copyClipBoard from "./utils/copyClipBoard"
 import { useStateMachine } from "little-state-machine"
 import generic from "../data/generic"
-import Prism from "prismjs"
+import { LiveRunner } from "./LiveRunner"
 import * as styles from "./CodeArea.module.css"
 
 export const CodeSandBoxLink = ({
@@ -98,15 +98,6 @@ export default function CodeArea({
   const { currentLanguage } =
     language && language.currentLanguage ? language : { currentLanguage: "en" }
 
-  React.useEffect(() => {
-    const highlight = async () => {
-      if (codeAreaRef.current) {
-        Prism.highlightAllUnder(codeAreaRef.current)
-      }
-    }
-    highlight()
-  }, [])
-
   return (
     <section
       style={{
@@ -168,31 +159,9 @@ export default function CodeArea({
         )}
       </div>
 
-      <div className={styles.wrapper} ref={codeAreaRef}>
-        <pre style={style} className="raw-code">
-          <code
-            className={`language-javascript ${
-              currentType === ToggleTypes.js ? styles.showCode : ""
-            }`}
-          >
-            {rawData}
-          </code>
-          <code
-            className={`language-javascript ${
-              currentType === ToggleTypes.ts ? styles.showCode : ""
-            }`}
-          >
-            {tsRawData}
-          </code>
-          <code
-            className={`language-javascript ${
-              currentType === ToggleTypes.types ? styles.showCode : ""
-            }`}
-          >
-            {rawTypes}
-          </code>
-        </pre>
-      </div>
+      <LiveRunner
+        initialCode={currentType === ToggleTypes.js ? rawData : tsRawData}
+      />
     </section>
   )
 }

src/components/LiveRunner.tsx

@@ -0,0 +1,175 @@
+import * as React from "react"
+import * as HookForm from "react-hook-form-v7"
+import { useRunner } from "react-runner"
+import Editor from "react-simple-code-editor"
+import Prism from "prismjs"
+
+import { ShadowRoot } from "./ShadowRoot"
+import * as styles from "./CodeArea.module.css"
+
+const scope = {
+  import: {
+    react: React,
+    "react-hook-form": HookForm,
+  },
+}
+
+const style = `
+body, :host {
+  background: #0e101c;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  padding: 14px;
+}
+
+form {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-weight: 100;
+  color: white;
+  text-align: center;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgb(79, 98, 148);
+}
+
+.form {
+  background: #0e101c;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+p {
+  color: #bf1650;
+}
+
+p::before {
+  display: inline;
+  content: "⚠ ";
+}
+
+input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid white;
+  padding: 10px 15px;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+label {
+  line-height: 2;
+  text-align: left;
+  display: block;
+  margin-bottom: 13px;
+  margin-top: 20px;
+  color: white;
+  font-size: 14px;
+  font-weight: 200;
+}
+
+button[type="submit"],
+input[type="submit"] {
+  background: #ec5990;
+  color: white;
+  text-transform: uppercase;
+  border: none;
+  margin-top: 40px;
+  padding: 20px;
+  font-size: 16px;
+  font-weight: 100;
+  letter-spacing: 10px;
+}
+
+button[type="submit"]:hover,
+input[type="submit"]:hover {
+  background: #bf1650;
+}
+
+button[type="submit"]:active,
+input[type="button"]:active,
+input[type="submit"]:active {
+  transition: 0.3s all;
+  transform: translateY(3px);
+  border: 1px solid transparent;
+  opacity: 0.8;
+}
+
+input:disabled {
+  opacity: 0.4;
+}
+
+input[type="button"]:hover {
+  transition: 0.3s all;
+}
+
+button[type="submit"],
+input[type="button"],
+input[type="submit"] {
+  -webkit-appearance: none;
+}
+
+.App {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+button[type="button"] {
+  display: block;
+  appearance: none;
+  background: #333;
+  color: white;
+  border: none;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  border-radius: 4px;
+}
+
+hr {
+  margin-top: 30px;
+}
+
+button {
+  display: block;
+  appearance: none;
+  margin-top: 40px;
+  border: 1px solid #333;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  border-radius: 4px;
+}`
+
+export const LiveRunner = ({ initialCode }: { initialCode: string }) => {
+  const [code, setCode] = React.useState(initialCode)
+  const { element, error } = useRunner({ code, scope })
+  React.useEffect(() => {
+    setCode(initialCode)
+  }, [initialCode])
+
+  return (
+    <>
+      <div className={styles.liveRunnerWrapper}>
+        <Editor
+          value={code}
+          onValueChange={setCode}
+          padding={15}
+          className={styles.liveRunner}
+          highlight={(code) =>
+            Prism.highlight(code, Prism.languages.javascript)
+          }
+        />
+      </div>
+      <ShadowRoot>
+        {element}
+        {error && <div>{error}</div>}
+        <style>{style}</style>
+      </ShadowRoot>
+    </>
+  )
+}

src/components/ShadowRoot.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { createPortal } from "react-dom"
+
+export const ShadowRoot: React.FC<JSX.IntrinsicElements["div"]> = ({
+  children,
+  ...rest
+}) => {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const [shadowRoot, setShadowRoot] = React.useState<ShadowRoot>()
+
+  React.useEffect(() => {
+    setShadowRoot(ref.current?.attachShadow({ mode: "open" }))
+  }, [])
+
+  return (
+    <div ref={ref} {...rest}>
+      {shadowRoot && createPortal(children, shadowRoot as any)}
+    </div>
+  )
+}

src/components/codeExamples/clearError.ts

@@ -1,7 +1,7 @@
 export default `import * as React from "react";
 import { useForm } from "react-hook-form";
 
-const App = () => {
+export default function App() {
   const { register, formState: { errors }, handleSubmit, clearErrors } = useForm();
   const onSubmit = data => console.log(data);
 

src/components/codeExamples/clearErrorTs.ts

@@ -7,7 +7,7 @@ type FormInputs = {
   username: string;
 };
 
-const App = () => {
+export default function App() {
   const { register, formState: { errors }, handleSubmit, clearErrors } = useForm<FormInputs>();
 
   const onSubmit = (data: FormInputs) => {

src/components/codeExamples/connectForm.ts

@@ -12,7 +12,7 @@ export const DeepNest = () => (
   </ConnectForm>
 );
 
-export const App = () => {
+export export default function App() {
   const methods = useForm();
   
   return (

src/components/codeExamples/getStarted.ts

@@ -75,7 +75,7 @@ const Select = React.forwardRef(({ onChange, onBlur, name, label }, ref) => (
   </>
 ));
 
-const App = () => {
+export default function App() {
   const { register, handleSubmit } = useForm();
 
   const onSubmit = (data) => {
@@ -128,7 +128,7 @@ const Select = React.forwardRef<
   </>
 ));
 
-const App = () => {
+export default function App() {
   const { register, handleSubmit } = useForm<IFormValues>();
 
   const onSubmit: SubmitHandler<IFormValues> = data => {
@@ -207,7 +207,7 @@ import Select from "react-select";
 import { useForm, Controller } from "react-hook-form";
 import Input from "@material-ui/core/Input";
 
-const App = () => {
+export default function App() {
   const { control, handleSubmit } = useForm({
     defaultValues: {
       firstName: '',
@@ -252,7 +252,7 @@ interface IFormInput {
   iceCreamType: {label: string; value: string };
 }
 
-const App = () => {
+export default function App() {
   const { control, handleSubmit } = useForm<IFormInput>();
 
   const onSubmit: SubmitHandler<IFormInput> = data => {
@@ -364,6 +364,8 @@ connect(({ firstName, lastName }) => ({ firstName, lastName }), updateAction)(Yo
 export const errors = `import React from "react";
 import { useForm } from "react-hook-form";
 
+const onSubmit = data => console.log(data);
+
 export default function App() {
   const { register, formState: { errors }, handleSubmit } = useForm();
   

src/components/codeExamples/joiResolver.tsx

@@ -8,7 +8,7 @@ const schema = Joi.object({
   age: Joi.string().required(),
 });
 
-const App = () => {
+export default function App() {
   const { register, handleSubmit } = useForm({
     resolver: joiResolver(schema),
   });

src/components/codeExamples/joiResolverTs.ts

@@ -13,7 +13,7 @@ const schema = Joi.object({
   age: Joi.number().required()
 });
 
-const App = () => {
+export default function App() {
   const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>({
     resolver: joiResolver(schema)
   });