wip

packages/repl-sdk/README.md

@@ -5,7 +5,7 @@ A Runtime compiler for anything that you could want to build a lighting fast REP
 
 Features:
 - Uses [es-module-shims](https://github.com/guybedford/es-module-shims)
-- Built in support for JavaScript, React, Vue, Svelte, Ember, Markdown
+- Built in support for JavaScript, Mermaid, React, Vue, Svelte, Ember, Markdown
   - On-Demand Runtime: only pay for what you compile for - the async APIs mean that your users only load what they need.
 - Supports nested languages (for markdown) 
 - Add any additional compiler/renderer at any time -- the flexible API allows for new libraries/frameworks to be added easily

packages/repl-sdk/src/index.d.ts

@@ -0,0 +1,10 @@
+import type { Options } from "./types.ts";
+
+export const defaultFormats: Options['formats'];
+export const defaults: Options;
+
+export class Compiler {
+  constructor(options?: Options);
+
+  compile(format: string, text: string): Promise<HTMLElement>;
+}

packages/repl-sdk/src/index.js

@@ -0,0 +1,61 @@
+/**
+ * @typedef {import("./types.ts").Options} Options
+ */
+import { assert } from './utils.js';
+
+export const defaultFormats = {
+  mermaid: {
+    compiler: async () => {
+      return {
+        compile: async (text) => {},
+      };
+    },
+  },
+};
+
+export const defaults = {
+  formats: defaultFormats,
+};
+
+export class Compiler {
+  /** @type {Options} */
+  #options;
+
+  /**
+   * Options may be passed to the compiler to add to its behavior.
+   */
+  constructor(options = defaults) {
+    this.#options = options;
+  }
+
+  /**
+   * @param {string} format
+   * @param {string} text
+   */
+  async compile(format, text) {
+    const config = this.#options.formats[format];
+
+    assert(
+      `${format} is not a configured format. ` +
+        `The currently configured formats are ${Object.keys(this.#options.formats).join(', ')}`,
+      config
+    );
+
+    const compiler = await config.compiler();
+    // TODO: pass this through es-module-shims
+    //       for getting the actual module back
+    const compiledText = await compiler.compile(text);
+
+    const div = this.#createDiv();
+
+    compiler.render(div, compiledText);
+
+    return div;
+  }
+
+  #createDiv() {
+    let div = document.createElement('div');
+    div.setAttribute('data-repl-output', '');
+    return div;
+  }
+}

packages/repl-sdk/src/index.ts → packages/repl-sdk/src/types.ts

@@ -1,21 +1,6 @@
-export const defaultFormats: Options['formats'] = {
-  mermaid: {
-    compiler: async () => {
-      return {
-        compile: async (text) => {
-        }
-      }
-    }
-  }
-};
-
-export const defaults = {
-  formats: defaultFormats,
-};
-
-export interface Options<Extension extends string> {
+export interface Options {
   formats: {
-    [fileExtension: Extension]: {
+    [fileExtension: string]: {
       /**
        * When using this file extension in markdown documents,
        * should we only evaluate the code block if the "live" 
@@ -75,48 +60,3 @@ export interface Options<Extension extends string> {
   }
 }
 
-export class Compiler<Extension> {
-  #options: Options<Extension>;
-
-  /**
-   * Options may be passed to the compiler to add to its behavior.
-   */
-  constructor(options: Options<Extension> = defaults) {
-    this.#options = options;
-  }
-
-  compile = async (format: string, text: string): Promise<HTMLElement> => {
-    const config = this.#options.formats[format];
-
-    assert(
-      `${format} is not a configured format. `
-      + `The currently configured formats are ${Object.keys(this.#options.formats).join(', ')}`,
-      config
-    );
-
-    const compiler = await config.compiler();
-    // TODO: pass this through es-module-shims
-    //       for getting the actual module back
-    const compiledText = await compiler.compile(text);
-
-
-    const div = this.#createDiv();
-
-    compiler.render(div, compiledText);
-
-    return div;
-  }
-
-  #createDiv = () => {
-    let div = document.createElement('div');
-    div.setAttribute('data-repl-output', '');
-    return div;
-  }
-}
-
-
-function assert(message: string, test: unknown): asserts test {
-  if (!test) {
-    throw new Error(message);
-  }
-}

packages/repl-sdk/src/utils.js

@@ -0,0 +1,10 @@
+/**
+ * @param {string} message
+ * @param {unknown} test
+ * @asserts test
+ */
+export function assert(message, test) {
+  if (!test) {
+    throw new Error(message);
+  }
+}

packages/repl-sdk/tests-react/package.json

@@ -12,6 +12,7 @@
     "@swc/wasm-web": "^1.7.0",
     "@testing-library/dom": "^10.3.2",
     "@vitest/browser": "^2.0.3",
+    "vite-plugin-wasm": "^3.3.0",
     "vitest": "^2.0.3",
     "webdriverio": "^8.39.1"
   },

packages/repl-sdk/tests-react/tests/custom-compiler.test.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest'
 import { Compiler } from 'repl-sdk';
+import * as swc from '@swc/wasm-web';
 
 
 function createComplier() {
@@ -8,14 +9,12 @@ function createComplier() {
       jsx: {
         compiler: async () => {
           const { createRoot } = await import('react-dom/client');
-          const swc = await ("@swc/wasm-web");
+          // const swc = await import("@swc/wasm-web");
 
-          // @ts-ignore
-          await swc.init();
+          await swc.default();
 
           return {
             compile: async (text) => {
-              // @ts-ignore
               const result = swc.transformSync(text, {
                 jsc: {
                   parser: {
@@ -48,16 +47,17 @@ function createComplier() {
 }
 
 describe('Custom compiler', () => {
-  test('it works', () => {
+  test('it works', async () => {
     let compiler = createComplier();
-    let element = compiler.compile('jsx', `
+    let element = await compiler.compile('jsx', `
       export default <>
         <h1>Hello World</h1>
 
         GENERAL KENOBI!
       </>;
     `);
 
+    console.log({ element });
     expect(element.querySelector('h1').textContent).toContain('Hello World');
     expect(element.textContent).toContain('Hello World');
   });

packages/repl-sdk/tests-react/vite.config.js

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import wasm from 'vite-plugin-wasm';
+
+const wasmMiddleware = () => {
+  return {
+    name: 'wasm-middleware',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.url.endsWith('.wasm')) {
+          const wasmPath = path.join(__dirname, 'public', req.url);
+          const wasmFile = fs.readFileSync(wasmPath);
+          res.setHeader('Content-Type', 'application/wasm');
+          res.end(wasmFile);
+          return;
+        }
+        next();
+      });
+    },
+  };
+};
+
+export default defineConfig({
+  esbuild: {
+    supported: {
+      'top-level-await': true,
+    },
+  },
+  plugins: [
+    wasmMiddleware,
+    // wasm(),
+  ],
+});

packages/repl-sdk/vite.config.mts

@@ -33,7 +33,7 @@ export default defineConfig({
     sourcemap: true,
     lib: {
       // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, 'src/index.ts'),
+      entry: resolve(__dirname, 'src/index.js'),
       name: 'repl-sdk',
       formats: ['es'],
       // the proper extensions will be added