docs: update code examples

slipHQ · Oct 31, 2021 · dd8123e · dd8123e
1 parent dc4592f
commit dd8123e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
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-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}
+      />
       />
     </>
   )