Refactor runtime package to be a vite library (#256)

taybenlor · Aug 23, 2023 · 34d2512 · 34d2512
1 parent 44962a8
commit 34d2512
Show file tree

Hide file tree

Showing 32 changed files with 246 additions and 33 deletions.
diff --git a/packages/runtime/index.html b/packages/runtime/index.html
@@ -4,18 +4,196 @@
     <meta charset="utf-8" />
 
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-    <script>
-      // Hacky fix for dependencies that expect node global
-      window["global"] = globalThis;
-    </script>
 
     <meta name="Description" content="Runs code in your browser" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
     <title>Runno</title>
   </head>
-  <body class="fullscreen">
-    <runno-run controls class="fullscreen"></runno-run>
+  <body>
+    <main>
+      <article class="prose container mx-auto my-16">
+        <h1 id="programming-examples">Programming Examples</h1>
+
+        <h2>Running code</h2>
+
+        <p>
+          You can create a block of runnable code using the
+          <code>runno-run</code> element. Set the <code>runtime</code> to one of
+          the existing runtimes.
+        </p>
+
+        <runno-run runtime="python" controls editor>
+          print("Hi there!") age = input("How old are you? ") if age == "14":
+          print("Heya, twin!") print("See ya later!")
+        </runno-run>
+
+        <p>
+          You don't have to worry about indentation, Runno will strip any of the
+          common indentation from the block of code.
+        </p>
+
+        <h3>Customising the Element</h3>
+
+        <p>
+          You can customise whether you get an <code>editor</code> and the
+          built-in <code>controls</code> with the respective attributes. This
+          element has no editor (the controls still work).
+        </p>
+
+        <runno-run runtime="python" controls>
+          print("Hi there!") age = input("How old are you? ") if age == "14":
+          print("Heya, twin!") print("See ya later!")
+        </runno-run>
+
+        <p>
+          You can also remove the controls and build your own UI. Call methods
+          directly on the <code>runno-run</code> element. In this example,
+          clicking the button will call <code>element.run()</code>.
+        </p>
+
+        <button
+          onclick="runnoElement.run()"
+          class="
+            bg-gray-300
+            px-4
+            py-2
+            hover:bg-gray-200
+            rounded
+            text-gray-800
+            font-semibold
+          "
+        >
+          My Custom Run Button
+        </button>
+
+        <runno-run id="runnoElement" runtime="python">
+          print("Hi there!") age = input("How old are you? ") if age == "14":
+          print("Heya, twin!") print("See ya later!")
+        </runno-run>
+
+        <h3>Styling</h3>
+
+        <p>TODO: Test for styling with variables</p>
+
+        <h3>Including Files</h3>
+        <p>
+          You can install files into the filesystem with the
+          <code>fs-url</code> attribute. The URL should be a
+          <code>.tar.gz</code> file that includes the files you want. This is
+          useful for including packages that can then be imported and run as
+          part of the example.
+        </p>
+
+        <runno-run
+          runtime="python"
+          fs-url="/python-package.tar.gz"
+          controls
+          editor
+        >
+          from package import say_hello say_hello() print('------') import os
+          print("/package contains", os.listdir('/package'))
+        </runno-run>
+
+        <p>
+          You can also add files directly in HTML with the
+          <code>runno-file</code> element. The file content will have any shared
+          leading whitespace stripped.
+        </p>
+
+        <runno-run runtime="python" controls editor>
+          print('file.txt contains:') print(open("file.txt").read())
+          print('----') print('other-file.txt contains:')
+          print(open("other-file.txt").read())
+
+          <runno-file path="/file.txt">
+            G'day world. Welcome to Runno.
+          </runno-file>
+          <runno-file path="/other-file.txt"> Another file. </runno-file>
+        </runno-run>
+      </article>
+
+      <article class="prose container mx-auto my-16">
+        <h1 id="wasi-examples">WASI Examples</h1>
+
+        <p>
+          Using a <code>runno-wasi</code> element you can run any program
+          compiled to WASI. It can take <code>args</code> as an HTML attribute.
+          <code>env</code> and <code>fs</code> can be set as properties on the
+          element (you'll need to get a handle to it, e.g. with
+          <code>querySelector</code>).
+        </p>
+
+        <pre><code>&lt;runno-wasi src="https://assets.runno.dev/ffmpeg/ffmpeg.wasm" autorun&gt;
+&lt;/runno-wasi&gt;</code></pre>
+
+        <runno-wasi src="/ffmpeg.wasm" autorun></runno-wasi>
+
+        <p>
+          This element is running an ffmpeg binary with no arguments. You could
+          customise this to run it against particular files by configuring the
+          filesystem. Either via the filesystem attributes below, or the
+          <code>fs</code> property on the DOM node.
+        </p>
+
+        <h2>Customising the Filesystem</h2>
+
+        <p>
+          Just like <code>runno-run</code> elements, <code>runno-wasi</code>
+          elements can have the filesystem configured through HTML elements and
+          attributes.
+        </p>
+
+        <pre><code>&lt;runno-wasi
+  src=&quot;/cat.wasi.wasm&quot;
+  fs-url=&quot;/python-package.tar.gz&quot; 
+  args=&quot;/package/__init__.py&quot;
+  controls
+&gt;
+&lt;/runno-wasi&gt;</code></pre>
+
+        <runno-wasi
+          src="/cat.wasi.wasm"
+          fs-url="/python-package.tar.gz"
+          args="/package/__init__.py"
+          controls
+        >
+        </runno-wasi>
+
+        <p>
+          You can also use <code>runno-file</code> elements to create plaintext
+          files straight in the HTML. Or use the <code>url</code> attribute to
+          point to a file.
+        </p>
+
+        <pre><code>&lt;runno-wasi
+  src=&quot;/cat.wasi.wasm&quot;
+  name=&quot;cat&quot;
+  args=&quot;/file.txt /test.txt&quot;
+  fs-url=&quot;/python-package.tar.gz&quot;
+  controls
+&gt;
+  &lt;runno-file path="/file.txt"&gt;
+    G'day world.
+    Welcome to Runno.
+  &lt;/runno-file&gt;
+  &lt;runno-file path="/test.txt" url="/test.txt"&gt;&lt;/runno-file&gt;
+&lt;/runno-wasi&gt;</code></pre>
+
+        <runno-wasi src="/cat.wasi.wasm" args="/file.txt /test.txt" controls>
+          <runno-file path="/file.txt">
+            G'day world. Welcome to Runno.
+          </runno-file>
+          <runno-file path="/test.txt" url="/test.txt"></runno-file>
+        </runno-wasi>
+      </article>
+
+      <article>
+        <h1 id="headless-examples">Headless Examples</h1>
+
+        <p>TODO</p>
+      </article>
+    </main>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/packages/runtime/src/commands.ts → packages/runtime/lib/commands.ts b/packages/runtime/src/commands.ts → packages/runtime/lib/commands.ts
diff --git a/packages/runtime/src/elements/code.ts → packages/runtime/lib/elements/code.ts b/packages/runtime/src/elements/code.ts → packages/runtime/lib/elements/code.ts
diff --git a/packages/runtime/src/elements/controls.ts → packages/runtime/lib/elements/controls.ts b/packages/runtime/src/elements/controls.ts → packages/runtime/lib/elements/controls.ts
diff --git a/packages/runtime/src/elements/editor.ts → packages/runtime/lib/elements/editor.ts b/packages/runtime/src/elements/editor.ts → packages/runtime/lib/elements/editor.ts
diff --git a/packages/runtime/src/elements/file.ts → packages/runtime/lib/elements/file.ts b/packages/runtime/src/elements/file.ts → packages/runtime/lib/elements/file.ts
diff --git a/packages/runtime/src/elements/run.ts → packages/runtime/lib/elements/run.ts b/packages/runtime/src/elements/run.ts → packages/runtime/lib/elements/run.ts
diff --git a/...runtime/src/elements/shared/codemirror.ts → ...runtime/lib/elements/shared/codemirror.ts b/...runtime/src/elements/shared/codemirror.ts → ...runtime/lib/elements/shared/codemirror.ts
diff --git a/packages/runtime/src/elements/terminal.ts → packages/runtime/lib/elements/terminal.ts b/packages/runtime/src/elements/terminal.ts → packages/runtime/lib/elements/terminal.ts
@@ -1,5 +1,5 @@
 import type { RunResult } from "@runno/host";
-import xtermcss from "xterm/css/xterm.css";
+import xtermcss from "xterm/css/xterm.css?inline";
 import { Terminal } from "xterm";
 import { WebLinksAddon } from "xterm-addon-web-links";
 import { FitAddon } from "xterm-addon-fit";

diff --git a/packages/runtime/src/elements/wasi.ts → packages/runtime/lib/elements/wasi.ts b/packages/runtime/src/elements/wasi.ts → packages/runtime/lib/elements/wasi.ts
diff --git a/packages/runtime/src/headless.ts → packages/runtime/lib/headless.ts b/packages/runtime/src/headless.ts → packages/runtime/lib/headless.ts
diff --git a/packages/runtime/src/helpers.ts → packages/runtime/lib/helpers.ts b/packages/runtime/src/helpers.ts → packages/runtime/lib/helpers.ts
diff --git a/packages/runtime/lib/main.ts b/packages/runtime/lib/main.ts
@@ -0,0 +1,10 @@
+export { TerminalElement } from "./elements/terminal";
+export { EditorElement } from "./elements/editor";
+export { CodeElement } from "./elements/code";
+export { ControlsElement } from "./elements/controls";
+export { RunElement } from "./elements/run";
+export { WASIElement } from "./elements/wasi";
+export { FileElement } from "./elements/file";
+export { RunnoProvider } from "./provider";
+export { headlessRunCode, headlessRunFS } from "./headless";
+export { stripWhitespace, fetchWASIFS, elementCodeContent } from "./helpers";
diff --git a/packages/runtime/src/provider.ts → packages/runtime/lib/provider.ts b/packages/runtime/src/provider.ts → packages/runtime/lib/provider.ts
diff --git a/packages/runtime/src/tar.ts → packages/runtime/lib/tar.ts b/packages/runtime/src/tar.ts → packages/runtime/lib/tar.ts
diff --git a/packages/runtime/src/vite-env.d.ts → packages/runtime/lib/vite-env.d.ts b/packages/runtime/src/vite-env.d.ts → packages/runtime/lib/vite-env.d.ts
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -1,5 +1,6 @@
 {
   "name": "@runno/runtime",
+  "type": "module",
   "author": "Ben Taylor <[email protected]>",
   "description": "Runtime for @runno",
   "website": "https://runno.dev",
@@ -16,10 +17,10 @@
     "dist"
   ],
   "main": "./dist/runtime.umd.js",
-  "module": "./dist/runtime.mjs",
+  "module": "./dist/runtime.js",
   "exports": {
     ".": {
-      "import": "./dist/runtime.mjs",
+      "import": "./dist/runtime.js",
       "require": "./dist/runtime.umd.js"
     }
   },
@@ -31,7 +32,7 @@
     "dev": "vite",
     "watch": "vite build --watch",
     "build:docs": "typedoc --options typedoc.config.cjs",
-    "build:package": "tsc && vite build",
+    "build:package": "tsc --noEmit && vite build",
     "build": "npm run build:docs && npm run build:package",
     "serve": "vite preview",
     "lint": "npx eslint src"

diff --git a/packages/runtime/public/cat.wasi.wasm b/packages/runtime/public/cat.wasi.wasm
diff --git a/packages/runtime/public/ffmpeg.wasm b/packages/runtime/public/ffmpeg.wasm
diff --git a/packages/runtime/public/ffprobe.wasm b/packages/runtime/public/ffprobe.wasm
diff --git a/packages/runtime/public/package/__init__.py b/packages/runtime/public/package/__init__.py
@@ -0,0 +1,2 @@
+def say_hello():
+    print("Hello from package")
diff --git a/packages/runtime/public/python-package.tar.gz b/packages/runtime/public/python-package.tar.gz
diff --git a/packages/runtime/public/quickjs.wasi.wasm b/packages/runtime/public/quickjs.wasi.wasm
diff --git a/packages/runtime/public/test.txt b/packages/runtime/public/test.txt
@@ -0,0 +1 @@
+This is a test file.
diff --git a/packages/runtime/public/write.wasi.wasm b/packages/runtime/public/write.wasi.wasm
diff --git a/packages/runtime/src/main.ts b/packages/runtime/src/main.ts
@@ -1,10 +1 @@
-export { TerminalElement } from "./elements/terminal";
-export { EditorElement } from "./elements/editor";
-export { CodeElement } from "./elements/code";
-export { ControlsElement } from "./elements/controls";
-export { RunElement } from "./elements/run";
-export { WASIElement } from "./elements/wasi";
-export { FileElement } from "./elements/file";
-export { RunnoProvider } from "./provider";
-export { headlessRunCode, headlessRunFS } from "./headless";
-export { stripWhitespace, fetchWASIFS, elementCodeContent } from "./helpers";
+import "../lib/main";
diff --git a/packages/runtime/tsconfig.json b/packages/runtime/tsconfig.json
@@ -15,8 +15,9 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "declaration": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "isolatedModules": true
   },
-  "include": ["./src"],
+  "include": ["./lib"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/runtime/typedoc.config.cjs b/packages/runtime/typedoc.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('typedoc').TypeDocOptions} */
 module.exports = {
-  entryPoints: ["./src/main.ts"],
+  entryPoints: ["./lib/main.ts"],
   out: "docs",
   // titleLink: "/",
   sidebarLinks: {

diff --git a/packages/runtime/vite.config.js b/packages/runtime/vite.config.js
@@ -3,17 +3,42 @@ import { resolve } from "path";
 
 import { defineConfig } from "vite";
 
+const crossOriginPolicy = {
+  name: "configure-server",
+
+  configureServer(server) {
+    server.middlewares.use((_req, res, next) => {
+      res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+      next();
+    });
+  },
+};
+
 export default defineConfig({
   build: {
+    copyPublicDir: false, // Public dir contains testing binaries
     lib: {
-      entry: resolve(__dirname, "src/main.ts"),
-      name: "@runno/runtime",
+      entry: resolve(__dirname, "lib/main.ts"),
+      name: "Runtime",
+      fileName: "runtime",
+    },
+  },
+  rollupOptions: {
+    // make sure to externalize deps that shouldn't be bundled
+    // into your library
+    external: [],
+    output: {
+      // Provide global variables to use in the UMD build
+      // for externalized deps
+      globals: {},
     },
   },
   plugins: [
     {
       ...typescript({ outDir: "dist" }),
       apply: "build",
     },
+    crossOriginPolicy,
   ],
 });
diff --git a/packages/wasi/package.json b/packages/wasi/package.json
@@ -29,9 +29,8 @@
     "dev": "vite --port 5173",
     "build:docs": "typedoc --options typedoc.config.cjs",
     "build:tests": "cd programs && cargo wasi build -r && cd .. && cp programs/target/wasm32-wasi/release/*.wasi.wasm public/bin/tests/",
-    "build:types": "tsc",
-    "build:vite": "vite build",
-    "build": "npm run build:docs && npm run build:vite && npm run build:types",
+    "build:vite": "tsc --noEmit && vite build",
+    "build": "npm run build:docs && npm run build:vite",
     "test:server": "vite --port 5173",
     "test:cargo": "cargo install cargo-wasi || echo Please install cargo to run the tests",
     "test:mkdir": "mkdir -p public/bin/languages public/bin/tests",

diff --git a/packages/wasi/tsconfig.json b/packages/wasi/tsconfig.json
@@ -13,10 +13,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "outDir": "./dist",
-    "declaration": true,
-    "emitDeclarationOnly": true
+    "declaration": true
   },
-  "include": ["src", "lib"]
+  "include": ["src", "lib"],
+  "exclude": ["node_modules"]
 }
diff --git a/packages/wasi/vite.config.js b/packages/wasi/vite.config.js
@@ -1,4 +1,5 @@
 // vite.config.js
+import typescript from "@rollup/plugin-typescript";
 import { resolve } from "path";
 import { defineConfig } from "vite";
 
@@ -22,4 +23,10 @@ export default defineConfig({
       },
     },
   },
+  plugins: [
+    {
+      ...typescript({ outDir: "dist" }),
+      apply: "build",
+    },
+  ],
 });