Merge pull request #106 from slipHQ/package-readme

feat: added README to packages

packages/run-wasm-python/README.md

@@ -0,0 +1,119 @@
+<p align="center">
+<a href="https://www.runwasm.com">
+<img src="https://user-images.githubusercontent.com/22961671/135009624-47470419-7e17-47b5-99ed-0f15b8123dd0.png" width=600 />
+  </a>
+</p>
+
+# run-wasm
+
+[run-wasm](https://www.runwasm.com) is an easy to use tool for running WASM based code executions in the browser.
+
+Brought to you by [Slip](https://www.slip.so) and our amazing OSS contributors.
+
+## Install
+
+npm
+
+```bash
+npm i @run-wasm/run-wasm
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/run-wasm
+```
+
+## Usage - Python
+
+After installing run-wasm you'll need to import the run-wasm python package
+
+Install run-wasm python package
+
+```bash
+npm i @run-wasm/python
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/python
+```
+
+`@run-wasm/python` uses Pyodide to execute Python. We recommend using the latest version of Pyodide and bringing it into your project via a script.
+
+[Next.js example](https://github.com/slipHQ/run-wasm/blob/main/example-nextjs/pages/index.tsx)
+
+```jsx
+import React, { useEffect, useState, useRef } from 'react'
+import { createPythonClient } from '@run-wasm/python'
+import Script from 'next/script'
+import CodeRunnerUI from '../components/CodeRunnerUI'
+
+declare global {
+  // <- [reference](https://stackoverflow.com/a/56458070/11542903)
+  interface Window {
+    pyodide: any
+    languagePluginLoader: any
+    loadPyodide: Function
+  }
+}
+
+const initialCode = `# Implementation of the Sieve of Eratosthenes
+# https://stackoverflow.com/questions/3939660/sieve-of-eratosthenes-finding-primes-python
+# Finds all prime numbers up to n
+def eratosthenes(n):
+    multiples = []
+    for i in range(2, n+1):
+        if i not in multiples:
+            print (i)
+            for j in range(i*i, n+1, i):
+                multiples.append(j)
+eratosthenes(100)`
+
+function App() {
+  const [pyodide, setPyodide] = useState(null)
+
+  async function runCode(code: string) {
+    let pythonClient = createPythonClient(pyodide)
+    return await pythonClient.run({ code })
+  }
+
+  // Note that window.loadPyodide comes from the beforeInteractive pyodide.js Script
+  useEffect(() => {
+    window
+      .loadPyodide({
+        indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/',
+      })
+      .then((pyodide) => {
+        setPyodide(pyodide)
+      })
+  }, [])
+
+  return (
+    <>
+      <Script
+        src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"
+        strategy="beforeInteractive"
+      />
+      <CodeRunnerUI
+        initialCode={initialCode}
+        onRunCode={runCode}
+        languageLabel="Python"
+        isLoading={!pyodide}
+        defaultLanguage="python"
+      />
+    </>
+  )
+}
+
+export default App
+```
+
+## Goal of the project
+
+The goal of this project is to build an easy way to execute various programming languages in the browser via WebAssembly.
+
+People should be able to use this project to embed executable code snippets on their websites easily!
+
+We're building this as a new component to be used inside the [Slip](https://www.slip.so) authoring tool.

packages/run-wasm-ts/README.md

@@ -0,0 +1,133 @@
+<p align="center">
+<a href="https://www.runwasm.com">
+<img src="https://user-images.githubusercontent.com/22961671/135009624-47470419-7e17-47b5-99ed-0f15b8123dd0.png" width=600 />
+  </a>
+</p>
+
+# run-wasm
+
+[run-wasm](https://www.runwasm.com) is an easy to use tool for running WASM based code executions in the browser.
+
+Brought to you by [Slip](https://www.slip.so) and our amazing OSS contributors.
+
+## Install
+
+npm
+
+```bash
+npm i @run-wasm/run-wasm
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/run-wasm
+```
+
+## Usage - Typescript
+
+After installing run-wasm you'll need to import the run-wasm Typescript package
+
+Install run-wasm Typescript package
+
+```bash
+npm i @run-wasm/ts
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/ts
+```
+
+[Next.js example](https://github.com/slipHQ/run-wasm/blob/main/example-nextjs/pages/ts.tsx)
+
+```jsx
+import React, { useEffect, useState, useRef } from 'react'
+import { createTSClient } from '@run-wasm/ts'
+import Script, { initScriptLoader } from 'next/script'
+import CodeRunnerUI from '../components/CodeRunnerUI'
+
+declare global {
+  interface Window {
+    ts: any
+  }
+}
+
+const tsScript = 'https://unpkg.com/typescript@latest/lib/typescriptServices.js'
+const initialCode = `// TypeScript code goes here
+let a: number;
+let b: number;
+a = 12;
+b = 3;
+console.log(a + b);`
+
+function App() {
+  const [errors, setErrors] = useState<Array<string>>([])
+  const [tsClient, setTsClient] = useState<any>(null)
+
+  function initialiseTsClient() {
+    const tsClient = createTSClient(window.ts)
+    tsClient.fetchLibs(['es5', 'dom']).then(() => {
+      setTsClient(tsClient)
+    })
+  }
+
+  useEffect(() => {
+    // handle client side navigation whenever that comes
+    if (typeof window.ts === 'undefined') {
+      initScriptLoader([
+        {
+          src: tsScript,
+          onLoad: initialiseTsClient,
+        },
+      ])
+    } else {
+      initialiseTsClient()
+    }
+  }, [])
+
+  async function runCode(code: string) {
+    const { errors, output } = await tsClient.run({ code })
+    setErrors(errors)
+    return 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}
+      >
+        {errors.length > 0 && (
+          <div>
+            <label className="block pt-8 text-sm font-medium text-gray-700 dark:text-gray-450">
+              Errors
+            </label>
+            {errors.map((error, index) => (
+              <div key={index} className="mt-1">
+                <p className="text-sm text-red-500">{error}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </CodeRunnerUI>
+    </>
+  )
+}
+
+export default App
+```
+
+## Goal of the project
+
+The goal of this project is to build an easy way to execute various programming languages in the browser via WebAssembly.
+
+People should be able to use this project to embed executable code snippets on their websites easily!
+
+We're building this as a new component to be used inside the [Slip](https://www.slip.so) authoring tool.

packages/run-wasm/README.md

@@ -0,0 +1,119 @@
+<p align="center">
+<a href="https://www.runwasm.com">
+<img src="https://user-images.githubusercontent.com/22961671/135009624-47470419-7e17-47b5-99ed-0f15b8123dd0.png" width=600 />
+  </a>
+</p>
+
+# run-wasm
+
+[run-wasm](https://www.runwasm.com) is an easy to use tool for running WASM based code executions in the browser.
+
+Brought to you by [Slip](https://www.slip.so) and our amazing OSS contributors.
+
+## Install
+
+npm
+
+```bash
+npm i @run-wasm/run-wasm
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/run-wasm
+```
+
+## Usage - Python
+
+After installing run-wasm you'll need to import the run-wasm python package
+
+Install run-wasm python package
+
+```bash
+npm i @run-wasm/python
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/python
+```
+
+`@run-wasm/python` uses Pyodide to execute Python. We recommend using the latest version of Pyodide and bringing it into your project via a script.
+
+[Next.js example](https://github.com/slipHQ/run-wasm/blob/main/example-nextjs/pages/index.tsx)
+
+```jsx
+import React, { useEffect, useState, useRef } from 'react'
+import { createPythonClient } from '@run-wasm/python'
+import Script from 'next/script'
+import CodeRunnerUI from '../components/CodeRunnerUI'
+
+declare global {
+  // <- [reference](https://stackoverflow.com/a/56458070/11542903)
+  interface Window {
+    pyodide: any
+    languagePluginLoader: any
+    loadPyodide: Function
+  }
+}
+
+const initialCode = `# Implementation of the Sieve of Eratosthenes
+# https://stackoverflow.com/questions/3939660/sieve-of-eratosthenes-finding-primes-python
+# Finds all prime numbers up to n
+def eratosthenes(n):
+    multiples = []
+    for i in range(2, n+1):
+        if i not in multiples:
+            print (i)
+            for j in range(i*i, n+1, i):
+                multiples.append(j)
+eratosthenes(100)`
+
+function App() {
+  const [pyodide, setPyodide] = useState(null)
+
+  async function runCode(code: string) {
+    let pythonClient = createPythonClient(pyodide)
+    return await pythonClient.run({ code })
+  }
+
+  // Note that window.loadPyodide comes from the beforeInteractive pyodide.js Script
+  useEffect(() => {
+    window
+      .loadPyodide({
+        indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/',
+      })
+      .then((pyodide) => {
+        setPyodide(pyodide)
+      })
+  }, [])
+
+  return (
+    <>
+      <Script
+        src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"
+        strategy="beforeInteractive"
+      />
+      <CodeRunnerUI
+        initialCode={initialCode}
+        onRunCode={runCode}
+        languageLabel="Python"
+        isLoading={!pyodide}
+        defaultLanguage="python"
+      />
+    </>
+  )
+}
+
+export default App
+```
+
+## Goal of the project
+
+The goal of this project is to build an easy way to execute various programming languages in the browser via WebAssembly.
+
+People should be able to use this project to embed executable code snippets on their websites easily!
+
+We're building this as a new component to be used inside the [Slip](https://www.slip.so) authoring tool.