Merge pull request #107 from octokatherine/package-editor-ui

slipHQ · Nov 6, 2021 · ce47d4a · ce47d4a · vercel · Nov 6, 2021
2 parents 60a826b + 078efab
commit ce47d4a
Show file tree

Hide file tree

Showing 15 changed files with 275 additions and 150 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,6 +9,7 @@ module.exports = {
     'import/order': 'off',
     '@typescript-eslint/no-floating-promises': 'off',
     '@typescript-eslint/consistent-type-definitions': 'off',
+    'unicorn/no-abusive-eslint-disable': 'off',
   },
   env: {
     jest: true,

diff --git a/.github/workflows/jest.yml b/.github/workflows/jest.yml
@@ -32,6 +32,11 @@ jobs:
       - name: Bootstrap and run the Build
         run: yarn bootstrap --no-ci
 
+      # Links React dependency
+      - name: Linking dependencies
+        working-directory: ./example-nextjs
+        run: yarn link-react
+
       # Runs the tests
       - name: Run tests
         run: yarn test
diff --git a/example-nextjs/components/CodeRunnerUI.tsx b/example-nextjs/components/CodeRunnerUI.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react'
-import Editor, { Monaco } from '@monaco-editor/react'
 import Script from 'next/script'
 import GithubButton from './GithubButton'
 import Navbar from './Navbar'
-import { addKeyBinding, CustomKeyBinding } from '../utils'
+import { Editor } from '@run-wasm/run-wasm'
 
 interface Props {
   defaultLanguage?: string
@@ -25,10 +24,8 @@ export default function CodeRunnerUI(props: Props) {
     children,
     onRunCode,
   } = props
-  const inputCodeRef = React.useRef(initialCode)
+
   const [output, setOutput] = React.useState('')
-  const editorRef = React.useRef(null)
-  const [monaco, setMonaco] = React.useState<Monaco>(null)
 
   async function runCode(code: string) {
     const output = await onRunCode(code)
@@ -37,24 +34,6 @@ export default function CodeRunnerUI(props: Props) {
     }
   }
 
-  function handleEditorDidMount(editor: any, monaco: Monaco) {
-    editorRef.current = editor
-    setMonaco(monaco)
-  }
-
-  React.useEffect(() => {
-    if (!monaco || isLoading) {
-      return
-    }
-    const runCodeBinding: CustomKeyBinding = {
-      label: 'run',
-      keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-      callback: () => runCode(inputCodeRef.current),
-      editor: editorRef.current,
-    }
-    return addKeyBinding(runCodeBinding)
-  }, [monaco, isLoading])
-
   return (
     <>
       <Navbar current={languageLabel} />
@@ -80,68 +59,18 @@ export default function CodeRunnerUI(props: Props) {
               <GithubButton />
             </div>
           </main>
-
-          <div>
-            <label className="block pb-4 text-sm font-medium text-gray-700 dark:text-gray-450">
-              {languageLabel}
-            </label>
-
-            <div className="mt-1 ">
-              <div className="relative group">
-                <div className="absolute -inset-0.5 dark:bg-gradient-to-r from-indigo-300 to-purple-400 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt" />
-                <Editor
-                  height="20rem"
-                  defaultLanguage={defaultLanguage}
-                  defaultValue={inputCodeRef.current}
-                  onChange={(value) => {
-                    inputCodeRef.current = value
-                  }}
-                  className="block w-1/2  text-white bg-gray-900 border-gray-300 rounded-lg   shadow-sm p-0.5 border   dark:border-purple-300 focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
-                  theme="vs-dark"
-                  options={{ fontSize: 12 }}
-                  onMount={handleEditorDidMount}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="pt-8 ">
-            <div className="grid items-start justify-left">
-              <div className="relative group">
-                <button
-                  className="relative flex items-center py-4 leading-none bg-black divide-x divide-gray-600 rounded-lg px-7 border-gray-300 disabled:bg-gray-700 disabled:cursor-not-allowed"
-                  onClick={() => runCode(inputCodeRef.current)}
-                  disabled={isLoading}
-                >
-                  <span className="text-gray-100 transition duration-200 group-hover:text-gray-100">
-                    {!isLoading ? 'Run Code →' : `Loading ${languageLabel}...`}
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {children}
-
-          {!hideOutputEditor && (
-            <div>
-              <label className="block pt-8 text-sm font-medium text-gray-700 dark:text-gray-450">
-                Output
-              </label>
-
-              <div className="mt-1 dark:text-gray-450">
-                <Editor
-                  value={output?.toString()}
-                  height="20rem"
-                  defaultLanguage="python"
-                  className="block w-1/2  text-white bg-gray-900 border-gray-300 rounded-lg   shadow-sm p-0.5 border   dark:border-purple-300 focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
-                  theme="vs-dark"
-                  options={{ readOnly: true }}
-                />
-              </div>
-            </div>
-          )}
         </div>
+        <Editor
+          initialCode={initialCode}
+          output={output}
+          languageLabel={languageLabel}
+          hideOutputEditor={hideOutputEditor}
+          isLoading={isLoading}
+          defaultLanguage={defaultLanguage}
+          onRunCode={runCode}
+        >
+          {children}
+        </Editor>
       </div>
     </>
   )

diff --git a/example-nextjs/package.json b/example-nextjs/package.json
@@ -3,15 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "yarn run link-react && next dev",
+    "prebuild": "yarn run link-react",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "link-react": "cd ./node_modules/react && yarn link && cd ../../../packages/run-wasm && yarn link \"react\""
   },
   "dependencies": {
     "@headlessui/react": "^1.4.1",
     "@heroicons/react": "^1.0.4",
-    "@monaco-editor/react": "^4.2.2",
     "fathom-client": "^3.0.0",
     "next": "11.1.2",
     "next-themes": "^0.0.15",

diff --git a/example-nextjs/yarn.lock b/example-nextjs/yarn.lock
@@ -131,19 +131,19 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
-"@monaco-editor/loader@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.1.1.tgz#37db648c81a86946d0febd391de00df9c28a0a3d"
-  integrity sha512-mkT4r4xDjIyOG9o9M6rJDSzEIeonwF80sYErxEvAAL4LncFVdcbNli8Qv6NDqF6nyv6sunuKkDzo4iFjxPL+uQ==
+"@monaco-editor/loader@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.2.0.tgz#373fad69973384624e3d9b60eefd786461a76acd"
+  integrity sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==
   dependencies:
     state-local "^1.0.6"
 
 "@monaco-editor/react@^4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.2.2.tgz#636e5b8eb9519ef62f475f9a4a50f62ee0c493a8"
-  integrity sha512-yDDct+f/mZ946tJEXudvmMC8zXDygkELNujpJGjqJ0gS3WePZmS/IwBBsuJ8JyKQQC3Dy/+Ivg1sSpW+UvCv9g==
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.3.1.tgz#d65bcbf174c39b6d4e7fec43d0cddda82b70a12a"
+  integrity sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==
   dependencies:
-    "@monaco-editor/loader" "^1.1.1"
+    "@monaco-editor/loader" "^1.2.0"
     prop-types "^15.7.2"
 
 "@napi-rs/triples@^1.0.3":
@@ -2276,6 +2276,11 @@ modern-normalize@^1.1.0:
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
   integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
 
+monaco-editor@^0.29.1:
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.29.1.tgz#6ee93d8a5320704d48fd7058204deed72429c020"
+  integrity sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"

diff --git a/packages/run-wasm-python/README.md b/packages/run-wasm-python/README.md
@@ -47,8 +47,8 @@ yarn add @run-wasm/python
 ```jsx
 import React, { useEffect, useState, useRef } from 'react'
 import { createPythonClient } from '@run-wasm/python'
+import { Editor } from '@run-wasm/run-wasm
 import Script from 'next/script'
-import CodeRunnerUI from '../components/CodeRunnerUI'
 
 declare global {
   // <- [reference](https://stackoverflow.com/a/56458070/11542903)
@@ -73,10 +73,14 @@ eratosthenes(100)`
 
 function App() {
   const [pyodide, setPyodide] = useState(null)
+  const [output, setOutput] = React.useState('')
 
   async function runCode(code: string) {
     let pythonClient = createPythonClient(pyodide)
-    return await pythonClient.run({ code })
+    const output = await pythonClient.run({ code })
+    if (output) {
+      setOutput(output)
+    }
   }
 
   // Note that window.loadPyodide comes from the beforeInteractive pyodide.js Script
@@ -96,12 +100,14 @@ function App() {
         src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"
         strategy="beforeInteractive"
       />
-      <CodeRunnerUI
+      <Editor
         initialCode={initialCode}
-        onRunCode={runCode}
+        output={output}
         languageLabel="Python"
-        isLoading={!pyodide}
+        hideOutputEditor={hideOutputEditor}
+        isLoading={isLoading}
         defaultLanguage="python"
+        onRunCode={runCode}
       />
     </>
   )

diff --git a/packages/run-wasm-python/tsconfig.json b/packages/run-wasm-python/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "./lib"
+    "outDir": "./lib/esm"
   },
   "include": ["./src"]
 }
diff --git a/packages/run-wasm-ts/README.md b/packages/run-wasm-ts/README.md
@@ -45,8 +45,8 @@ yarn add @run-wasm/ts
 ```jsx
 import React, { useEffect, useState, useRef } from 'react'
 import { createTSClient } from '@run-wasm/ts'
+import { Editor } from '@run-wasm/run-wasm
 import Script, { initScriptLoader } from 'next/script'
-import CodeRunnerUI from '../components/CodeRunnerUI'
 
 declare global {
   interface Window {
@@ -65,6 +65,7 @@ console.log(a + b);`
 function App() {
   const [errors, setErrors] = useState<Array<string>>([])
   const [tsClient, setTsClient] = useState<any>(null)
+  const [output, setOutput] = React.useState('')
 
   function initialiseTsClient() {
     const tsClient = createTSClient(window.ts)
@@ -90,20 +91,24 @@ function App() {
   async function runCode(code: string) {
     const { errors, output } = await tsClient.run({ code })
     setErrors(errors)
-    return output
+    if (output) {
+      setOutput(output)
+    }
   }
 
   return (
     <>
       <Script strategy="beforeInteractive" src={tsScript} />
       <Script src="https://kit.fontawesome.com/137d63e13e.js" />
-      <CodeRunnerUI
-        initialCode={initialCode}
-        languageLabel="TypeScript"
-        defaultLanguage="typescript"
-        onRunCode={runCode}
-        isLoading={!tsClient}
-      >
+      <Editor
+          initialCode={initialCode}
+          output={output}
+          languageLabel="TypeScript"
+          hideOutputEditor={hideOutputEditor}
+          isLoading={isLoading}
+          defaultLanguage="typescript"
+          onRunCode={runCode}
+        >
         {errors.length > 0 && (
           <div>
             <label className="block pt-8 text-sm font-medium text-gray-700 dark:text-gray-450">
@@ -116,7 +121,7 @@ function App() {
             ))}
           </div>
         )}
-      </CodeRunnerUI>
+      </Editor>
     </>
   )
 }

diff --git a/packages/run-wasm/README.md b/packages/run-wasm/README.md
@@ -47,8 +47,8 @@ yarn add @run-wasm/python
 ```jsx
 import React, { useEffect, useState, useRef } from 'react'
 import { createPythonClient } from '@run-wasm/python'
+import { Editor } from '@run-wasm/run-wasm
 import Script from 'next/script'
-import CodeRunnerUI from '../components/CodeRunnerUI'
 
 declare global {
   // <- [reference](https://stackoverflow.com/a/56458070/11542903)
@@ -73,10 +73,14 @@ eratosthenes(100)`
 
 function App() {
   const [pyodide, setPyodide] = useState(null)
+  const [output, setOutput] = React.useState('')
 
   async function runCode(code: string) {
     let pythonClient = createPythonClient(pyodide)
-    return await pythonClient.run({ code })
+    const output = await pythonClient.run({ code })
+    if (output) {
+      setOutput(output)
+    }
   }
 
   // Note that window.loadPyodide comes from the beforeInteractive pyodide.js Script
@@ -96,12 +100,15 @@ function App() {
         src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"
         strategy="beforeInteractive"
       />
-      <CodeRunnerUI
+      <Editor
         initialCode={initialCode}
-        onRunCode={runCode}
+        output={output}
         languageLabel="Python"
-        isLoading={!pyodide}
+        hideOutputEditor={hideOutputEditor}
+        isLoading={isLoading}
         defaultLanguage="python"
+        onRunCode={runCode}
+      />
       />
     </>
   )

diff --git a/packages/run-wasm/package.json b/packages/run-wasm/package.json
@@ -2,18 +2,20 @@
   "name": "@run-wasm/run-wasm",
   "version": "0.0.3",
   "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "types": "./lib/esm/index.d.ts",
+  "module": "./lib/esm/src/index.js",
+  "types": "./lib/esm/src/index.d.ts",
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.2.2",
+    "monaco-editor": "^0.29.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "jest": "^27.2.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "ts-jest": "^27.0.5",
     "typescript": "^4.4.3"
   },