repl-sdk 0.0.0 → 1.0.1

package/src/compilers/react.js

@@ -0,0 +1,59 @@
+/**
+ * @type {import('../types.ts').CompilerConfig}
+ */
+export const jsx = {
+  codemirror: {
+    lang: async () => {
+      const { javascript } = await import('@codemirror/lang-javascript');
+
+      return javascript({ jsx: true });
+    },
+  },
+  resolve: (id) => {
+    /**
+     * NOTE: react still only publishes CJS to NPM
+     */
+    switch (id) {
+      case 'react':
+        return `https://esm.sh/react@19.2.3/es2022/react.development.mjs`;
+      case 'react/jsx-dev-runtime':
+        return `https://esm.sh/react@19.2.3/es2022/jsx-dev-runtime.development.mjs`;
+      case 'react-dom/client':
+        return `https://esm.sh/react-dom@19.2.3/es2022/client.development.mjs`;
+      case '@babel/standalone':
+        return `https://esm.sh/@babel/standalone`;
+    }
+  },
+  compiler: async (config, api) => {
+    const [reactDom, babel] = await api.tryResolveAll(['react-dom/client', '@babel/standalone']);
+
+    const { createRoot } = reactDom;
+
+    return {
+      async compile(text) {
+        const result = babel.transform(text, {
+          filename: `repl.js`,
+          presets: [
+            [
+              babel.availablePresets.react,
+              {
+                // useBuiltIns: true,
+              },
+            ],
+          ],
+        });
+
+        return result.code;
+      },
+      async render(element, component) {
+        const root = createRoot(element);
+
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        root.render(component);
+
+        // Wait for react-dom to render
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      },
+    };
+  },
+};

package/src/compilers/svelte.js

@@ -0,0 +1,116 @@
+import { esmSh } from '../cdn.js';
+
+/**
+ * @type {import('../types.ts').CompilerConfig}
+ */
+export const svelte = {
+  codemirror: {
+    lang: async () => {
+      const { svelte } = await import('@replit/codemirror-lang-svelte');
+
+      return svelte();
+    },
+  },
+
+  /**
+   * Default config, known to work with how the compiler and render functions are configured.
+   */
+  resolve: (id) => {
+    // This is basically an importmap.
+    // Because Svelte 5 is no longer bundled, we need another service to provide
+    // these.
+    //
+    // Svelte 5 has a tooooon of modules, and repl-sdk (at the time of writing)
+    // runs out of memory and crashes the browser while loading everything.
+    //
+    // There are optimizations to be had, for sure.
+    // But this is good for now.
+    //
+    // See also: https://github.com/sveltejs/svelte/discussions/15658
+    if (['svelte'].some((x) => id.startsWith(x))) {
+      return (
+        esmSh(
+          {
+            svelte: '5.35.7',
+          },
+          id,
+          false
+        ) +
+        // + '?target=esnext';
+        '?dev&target=esnext&keep-names'
+      );
+    }
+
+    // dependencies of svelte / the compiler
+    if (
+      [
+        'zimmerframe',
+        'locate-character',
+        'acorn',
+        'clsx',
+        'magic-string',
+        '@ampproject/remapping',
+        '@jridgewell/sourcemap-codec',
+        'axobject-query',
+        'esrap',
+        'is-reference',
+        'aria-query',
+        '@sveltejs/acorn-typescript',
+      ].some((x) => id.startsWith(x))
+    ) {
+      return esmSh({}, id, false);
+    }
+  },
+  compiler: async (config, api) => {
+    const [svelte, compiler] = await api.tryResolveAll(['svelte', 'svelte/compiler']);
+
+    return {
+      compile: async (text, options) => {
+        /**
+         * source: https://github.com/sveltejs/svelte/blob/26e328689950b390189c6da31c32283d217df4b4/packages/svelte/src/compiler/index.js#L22
+         *
+         * Usages:
+         * https://github.com/sveltejs/svelte/blob/main/playgrounds/sandbox/run.js#L75
+         */
+        const output = await compiler.compile(text, {
+          /* this errors if unexpected options are passed */
+          generate: 'client',
+          fragments: 'html',
+          // Placeholder for now until multiple files are supported
+          filename: 'repl-sdk.svelte',
+          dev: true,
+          runes: true,
+          // experimental: {
+          //   async: true,
+          // },
+        });
+
+        return { compiled: output.js.code, css: output.css?.code };
+      },
+      render: async (element, component, { css }) => {
+        const div = document.createElement('div');
+
+        if (css) {
+          const style = document.createElement('style');
+
+          style.innerHTML = /** @type {string} */ (css);
+          element.appendChild(style);
+        }
+
+        element.appendChild(div);
+
+        requestAnimationFrame(() => {
+          // @ts-ignore
+          svelte.mount(component, {
+            target: element,
+            props: {
+              /* no props */
+            },
+          });
+
+          api.announce('info', 'Done');
+        });
+      },
+    };
+  },
+};

package/src/compilers/vue.js

@@ -0,0 +1,58 @@
+/**
+ * @type {import('../types.ts').CompilerConfig}
+ */
+export const vue = {
+  codemirror: {
+    lang: async () => {
+      const { vue } = await import('@codemirror/lang-vue');
+
+      return vue();
+    },
+  },
+  /**
+   * Default config, known to work with how the compiler and render functions are configured.
+   */
+  resolve: (id) => {
+    switch (id) {
+      case 'vue':
+        return `https://cdn.jsdelivr.net/npm/vue@3.5.16/+esm`;
+      case '@vue/repl':
+        return `https://cdn.jsdelivr.net/npm/@vue/repl@4.5.1/+esm`;
+    }
+  },
+  compiler: async (config, api) => {
+    const [{ createApp }, { compileFile, useStore }] = await api.tryResolveAll([
+      'vue',
+      '@vue/repl',
+    ]);
+
+    const store = useStore();
+
+    return {
+      compile: async (text, options) => {
+        const output = { js: '', css: '', ssr: '' };
+
+        await compileFile(store, {
+          code: text,
+          filename: options.fileName,
+          language: 'vue',
+          compiled: output,
+        });
+
+        return { compiled: output.js, css: output.css };
+      },
+      render: async (element, component, { css }, compiler) => {
+        const div = document.createElement('div');
+        const style = document.createElement('style');
+
+        style.innerHTML = /** @type {string} */ (css);
+
+        element.appendChild(div);
+        element.appendChild(style);
+
+        createApp(component).mount(div);
+        compiler.announce('info', 'Done');
+      },
+    };
+  },
+};

package/src/compilers.js

@@ -0,0 +1,108 @@
+import * as ember from './compilers/ember.js';
+import { js } from './compilers/js.js';
+import * as markdown from './compilers/markdown.js';
+import { mermaid } from './compilers/mermaid.js';
+import * as react from './compilers/react.js';
+import { svelte } from './compilers/svelte.js';
+import { vue } from './compilers/vue.js';
+
+/**
+ * @type {import('./types').Options['formats']}
+ */
+export const compilers = {
+  hbs: {
+    /**
+     * ember has historically used a subset of HBS, and then built its own features on top of.
+     *
+     * It is not "handlebars", but does share a lot of similarities.
+     * (and these continue in ember's new gjs and gts formats)
+     *
+     */
+    ember: ember.hbs,
+  },
+  /**
+   * Markdown, but every code fense can be a live "Island"
+   * if `live` is in the codefence's meta tag and the compiler
+   * is registered here, or by the user of repl-sdk.
+   */
+  md: markdown.md,
+
+  /**
+   * Glimmer-flavored Markdown.
+   *
+   * Like the markdow renderer, but the resulting HTML
+   * is a Glimmer Component, rather than just plain HTML.
+   *
+   * https://emberjs.com
+   * https://repl.nullvoxpopuli.com
+   * https://kolay.nullvoxpopuli.com
+   * https://tutorial.glimdown.com
+   * https://limber.glimdown.com
+   */
+  gmd: ember.gmd,
+  /**
+   * Glimmer-Flavored JavaScript
+   *
+   * https://emberjs.com
+   */
+  gjs: ember.gjs,
+  /**
+   * TODO:
+   * Glimmer-flavored TypeScript
+   *
+   * https://emberjs.com
+   */
+  // gts: ember.gts,
+
+  /**
+   * Just vanilla JS.
+   */
+  js,
+
+  /**
+   * JSX is too overloaded to treat one way.
+   * We need to split this, and then make folks choose which one to use
+   * - jsx-react
+   * - jsx-vue
+   * - jsx-solid
+   * - (etc)
+   *
+   * This means that as a generic compiler, we can't just have jsx support.
+   * And in markdown, we'll need to support choosing which flavor of jsx
+   * via meta tags on the codefences.
+   *
+   * For example:
+   * ```jsx solid
+   * export default <></>;
+   * ```
+   *
+   * or
+   * ```jsx react
+   * export default <></>;
+   * ```
+   */
+  jsx: {
+    /**
+     * https://react.dev/
+     */
+    react: react.jsx,
+
+    /**
+     * TODO:
+     * https://www.solidjs.com/
+     */
+    // solid: solid.jsx,
+  },
+  /**
+   * https://mermaid.js.org/
+   */
+  mermaid,
+  /**
+   * https://svelte.dev/
+   */
+  svelte,
+  /**
+   * https://vuejs.org/
+   */
+  vue,
+};

package/src/es-module-shim.js

@@ -0,0 +1,53 @@
+/**
+ * es-module-shim can only be initialized once.
+ * it freezes its caches and options passed to it.
+ *
+ * So... here we are. Making stuff dynamic so we can have es-module-shims
+ * deal with the "most recent" intance of the compiler
+ * (since the compiler holds state,
+ *  and our tests share all globals as they run in the same browser window).
+ */
+
+/**
+ * @type {{
+ *   resolve: (id: string, parentUrl: string, parentResolve: (id: string, parentUrl: string) => string) => string
+ *   fetch: (id: string, options: RequestInit) => Promise<Response>
+ * }}
+ */
+export const STABLE_REFERENCE = {
+  resolve: () => {
+    throw new Error(
+      `'resolve' not implemented in STABLE_REFERENCE. Has the Compiler been set up correctly?`
+    );
+  },
+  fetch: async () => {
+    throw new Error(
+      `'fetch' not implemented in STABLE_REFERENCE. Has the Compiler been set up correctly?`
+    );
+  },
+};
+
+globalThis.esmsInitOptions = {
+  shimMode: true,
+  // skip: [`https://esm.sh`, 'https://jspm.dev/', 'https://cdn.jsdelivr.net/'],
+  revokeBlobURLs: true, // default false
+  mapOverrides: true, // default false
+
+  /**
+   * @param {string} id
+   * @param {string} parentUrl
+   * @param {(id: string, parentUrl: string) => string} resolve
+   * @returns {string}
+   */
+  resolve: (id, parentUrl, resolve) => STABLE_REFERENCE.resolve(id, parentUrl, resolve),
+  // NOTE: may need source hook
+  //       https://github.com/guybedford/es-module-shims?tab=readme-ov-file#source-hook
+  //
+
+  /**
+   * @param {string} url
+   * @param {RequestInit} options
+   * @returns {Promise<Response>}
+   */
+  fetch: (url, options) => STABLE_REFERENCE.fetch(url, options),
+};

package/src/index.d.ts

@@ -1,10 +1,59 @@
-import type { Options } from "./types.ts";
+import type { CompilerConfig, Options } from './types.ts';
+import type { EditorView } from 'codemirror';
 
-export const defaultFormats: Options['formats'];
+export type { ErrorMessage, InfoMessage, Message, Options } from './types.ts';
+
+export const defaultFormats: keyof Options['formats'];
 export const defaults: Options;
 
 export class Compiler {
-  constructor(options?: Options);
+  constructor(options?: Partial<Options>);
+
+  compile(
+    format: string,
+    text: string,
+    options?: {
+      flavor?: string;
+      fileName?: string;
+    }
+  ): Promise<{ element: HTMLElement; destroy: () => void }>;
+
+  optionsFor(format: string, flavor?: string): Omit<CompilerConfig, 'compiler'>;
+
+  /**
+   * Cretes a codemirror editor instance
+   */
+  createEditor(
+    /**
+     * The element that the editor will be mounted on to and within
+     */
+    element: HTMLElement,
+
+    options: {
+      /**
+       * Initial text
+       */
+      text?: string | null | undefined;
+
+      /**
+       * Initial file format
+       */
+      format?: string | null | undefined;
+
+      /**
+       * When the editor's text is typed in, this callback is triggered.
+       * Can be used to update external state (such as a URL or some other storage).
+       */
+      handleUpdate?: (updatedText: string) => void;
+    }
+  ): Promise<{
+    view: EditorView;
+    setText: (text: string, format: string) => Promise<void>;
+    setFormat: (format: string) => Promise<void>;
+  }>;
 
-  compile(format: string, text: string): Promise<HTMLElement>;
+  /**
+   * Clear promise, npm, tarball, (etc) caches
+   */
+  static clearCache: () => void;
 }