Separate components into SourceViewer and CompletionViewer

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,45 +1,26 @@
-import React from "react";
+import React, { useState, useLayoutEffect } from "react";
-import Highlight, { defaultProps } from "prism-react-renderer";
 
-import { sourceMapping } from "./logic/sourceMapping";
+import { SourceViewer } from "./components/SourceViewer";
+import { CompletionViewer } from "./components/CompletionViewer";
+import { completionMapping } from "./logic/completionMapping";
+import { runEngine } from "./logic/runEngine";
 
 import "./tailwind.output.css";
-
 import "./App.css";
 
-const exampleCode = `var test = \`asd
+const sampleInputCode = `var test = \`asd
 World!\`; abc()`;
 
 function App() {
+  const [inputCode, setInputCode] = useState<string>(sampleInputCode);
+
+  useLayoutEffect(() => {
+    runEngine(inputCode);
+  }, [inputCode]);
+
   return (
     <div>
-      <Highlight {...defaultProps} code={exampleCode} language="jsx">
+      <SourceViewer code={inputCode} onChangeCode={setInputCode} />
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          sourceMapping.reset(),
-          (
-            <pre className={className} style={style}>
-              {tokens.map((line, i) => (
-                <div
-                  data-line={JSON.stringify(line)}
-                  {...getLineProps({ line, key: i })}
-                >
-                  {line.map(function (token, key) {
-                    const refFn = sourceMapping.registerToken(token);
-                    return (
-                      <span
-                        ref={refFn}
-                        data-token={JSON.stringify(token)}
-                        {...getTokenProps({ token, key })}
-                      />
-                    );
-                  })}
-                  {(sourceMapping.registerLineEnd(), null)}
-                </div>
-              ))}
-            </pre>
-          )
-        )}
-      </Highlight>
     </div>
   );
 }

src/components/CompletionViewer/CompletionViewer.tsx

@@ -0,0 +1 @@
+export function CompletionViewer() {}

src/components/CompletionViewer/index.ts

@@ -0,0 +1,3 @@
+import { CompletionViewer } from "./CompletionViewer";
+
+export { CompletionViewer };

src/components/SourceViewer/SourceViewer.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+import { sourceMapping } from "../../logic/sourceMapping";
+
+import "./SourceViewer.css";
+
+interface ISourceViewerProps {
+  code: string;
+  onChangeCode(newCode: string): void;
+}
+
+export function SourceViewer(props: ISourceViewerProps) {
+  const { code } = props;
+  return (
+    <Highlight {...defaultProps} code={code} language="jsx">
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        // eslint-disable-next-line no-sequences
+        sourceMapping.reset(),
+        (
+          <pre className={className} style={style}>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map(function (token, key) {
+                  const refFn = sourceMapping.registerToken(token);
+                  return (
+                    <span ref={refFn} {...getTokenProps({ token, key })} />
+                  );
+                })}
+                {(sourceMapping.registerLineEnd(), null)}
+              </div>
+            ))}
+          </pre>
+        )
+      )}
+    </Highlight>
+  );
+}

src/components/SourceViewer/index.ts

@@ -0,0 +1,3 @@
+import { SourceViewer } from "./SourceViewer";
+
+export { SourceViewer };