repl-sdk 0.0.0 → 1.0.0

package/src/cache.js

@@ -0,0 +1,138 @@
+import { assert } from './utils.js';
+
+export const secretKey = '__repl-sdk__compiler__';
+
+/**
+ * @typedef {object} ResolveIdValue
+ * @property {string} name
+ * @property {string} version
+ * @property {import('./types.ts').RequestAnswer} path
+ *
+ * @typedef {import('./request.js').Request} Request
+ *
+ * @typedef {typeof globalThis & { [secret]?: {
+ *   requestCache?: Map<string, Request>,
+ *   resolveId?: Map<string, ResolveIdValue>,
+ *   tarballs?: Map<string, import('./types.ts').UntarredPackage>,
+ *   resolves?: { [modulePath: string]: unknown },
+ *   promiseCache?: Map<string, Promise<unknown>>,
+ *   fileCache?: Map<string, { code: string, ext: string }>
+ *   caches?: Caches
+ * } }} ExtendedWindow
+ */
+const secret = Symbol.for(secretKey);
+
+function getGlobal() {
+  const global = /** @type {ExtendedWindow} */ (globalThis);
+
+  return global;
+}
+
+assert(
+  `There is already an instance of repl-sdk, and there can only be one. Make sure that your dependency graph is correct.`,
+  !getGlobal()[secret]
+);
+
+class Caches {
+  clear() {
+    delete getGlobal()[secret];
+  }
+
+  /**
+   * Cache of resolved modulePaths to their module "value"
+   *
+   * @type {{ [modulePath: string]: unknown }}
+   */
+  get resolves() {
+    this.#root.resolves ||= {};
+
+    return this.#root.resolves;
+  }
+
+  /**
+   * Cache of untarred tarballs
+   *
+   * @type {Map<string, import('./types.ts').UntarredPackage>}
+   */
+  get tarballs() {
+    this.#root.tarballs ||= new Map();
+
+    return this.#root.tarballs;
+  }
+
+  /**
+   * Cache of request resolutions
+   *
+   * @type {Map<string, ResolveIdValue>}
+   */
+  get resolveId() {
+    this.#root.resolveId ||= new Map();
+
+    return this.#root.resolveId;
+  }
+
+  /**
+   * Cache of request Key to file content string
+   *
+   * @type {Map<string, { code: string, ext: string }>}
+   */
+  get fileCache() {
+    this.#root.fileCache ||= new Map();
+
+    return this.#root.fileCache;
+  }
+
+  /**
+   * For any key, store a promise for resolving later
+   *
+   * @type {Map<string, Promise<unknown>>}
+   */
+  get promiseCache() {
+    this.#root.promiseCache ||= new Map();
+
+    return this.#root.promiseCache;
+  }
+
+  /**
+   * @template Return
+   * @type {(key: string, callback: () => Promise<any>) => Promise<any>}
+   */
+  cachedPromise(key, callback) {
+    const existing = this.promiseCache.get(key);
+
+    if (existing) {
+      return /** @type {Promise<Return>} */ (existing);
+    }
+
+    const promise = callback();
+
+    this.promiseCache.set(key, promise);
+
+    return promise;
+  }
+
+  get requestCache() {
+    this.#root.requestCache ||= new Map();
+
+    return this.#root.requestCache;
+  }
+
+  get #root() {
+    const global = getGlobal();
+
+    global[secret] ||= {};
+    global[secret].caches ||= this;
+
+    return global[secret];
+  }
+}
+
+export function deleteCache() {
+  if (!getGlobal()?.[secret]) {
+    return;
+  }
+
+  delete getGlobal()[secret];
+}
+
+export const cache = new Caches();

package/src/cdn.js

@@ -0,0 +1,93 @@
+import { parseSpecifier } from './specifier.js';
+
+/**
+ * @param {string} importPath
+ * @returns {[string, string]}
+ */
+function splitSubPath(importPath) {
+  const parsed = parseSpecifier(importPath);
+
+  return [parsed.name, parsed.path === '.' ? '' : parsed.path];
+}
+
+/**
+ * Generate an import URL for esm.sh
+ *
+ * @param {Record<string, string>} versions
+ * @param {string} importPath
+ */
+export function esmSh(versions, importPath, allExternal = false) {
+  const [name, subPath] = splitSubPath(importPath);
+
+  const version = versions[name];
+  const subPathExport = subPath.length === 0 || subPath.startsWith('/') ? subPath : `/${subPath}`;
+
+  const externals = allExternal ? '*' : '';
+
+  return version
+    ? `https://esm.sh/${externals}${name}@${version}${subPathExport}`
+    : `https://esm.sh/${externals}${name}${subPathExport}`;
+}
+
+/**
+ * Generate an import URL for esm.run (jsdelivr)
+ *
+ * @param {Record<string, string>} versions
+ * @param {string} importPath
+ */
+export function esmRun(versions, importPath) {
+  const [name, subPath] = splitSubPath(importPath);
+
+  const version = versions[name];
+  const subPathExport = subPath.length === 0 || subPath.startsWith('/') ? subPath : `/${subPath}`;
+
+  return version
+    ? `https://esm.run/${name}@latest${subPathExport}`
+    : `https://esm.run/${name}${subPathExport}`;
+}
+
+export const jsdelivr = {
+  /**
+   * @param {Record<string, string>} versions
+   * @param {string} importPath
+   */
+  async import(versions, importPath) {
+    const url = esmRun(versions, importPath);
+
+    return await import(/* @vite-ignore */ url);
+  },
+  /**
+   * @param {Record<string, string>} versions
+   * @param {string[]} deps the names of deps to pull from esm.sh
+   */
+  async importAll(versions, deps = []) {
+    return await Promise.all(
+      deps.map((dep) => {
+        return jsdelivr.import(versions, dep);
+      })
+    );
+  },
+};
+
+export const esmsh = {
+  /**
+   * @param {Record<string, string>} versions
+   * @param {string} importPath
+   */
+  async import(versions, importPath) {
+    const url = esmSh(versions, importPath);
+
+    return await import(/* @vite-ignore */ url);
+  },
+  /**
+   * @param {Record<string, string>} versions
+   * @param {string[]} deps the names of deps to pull from esm.sh
+   */
+  async importAll(versions, deps = []) {
+    return await Promise.all(
+      deps.map((dep) => {
+        return esmsh.import(versions, dep);
+      })
+    );
+  },
+};

package/src/codemirror.js

@@ -0,0 +1,161 @@
+import { completionKeymap } from '@codemirror/autocomplete';
+import { indentWithTab } from '@codemirror/commands';
+import { markdownKeymap } from '@codemirror/lang-markdown';
+import { Compartment, EditorSelection, EditorState } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+import { basicSetup, EditorView } from 'codemirror';
+// @ts-ignore
+import { foldByIndent } from 'codemirror-lang-mermaid';
+
+/**
+ * Builds and creates a codemirror instance for the given element
+ *
+ * @typedef {any} Extension
+ *
+ * @typedef {object} CodemirrorOptions
+ * @property {HTMLElement} element
+ * @property {string} text
+ * @property {string} format
+ * @property {Extension[]} [ extensions ]
+ * @property {(text: string) => void} handleUpdate
+ * @property {(format: string) => Promise<Extension>} getLang
+ * @property {(format: string) => Promise<Extension>} getSupport
+ *
+ * @param {CodemirrorOptions} options
+ */
+export async function buildCodemirror({
+  element,
+  text,
+  format,
+  extensions,
+  handleUpdate,
+  getLang,
+  getSupport,
+}) {
+  const languageConf = new Compartment();
+  const supportConf = new Compartment();
+  const tabSize = new Compartment();
+
+  const updateListener = EditorView.updateListener.of(({ state, docChanged }) => {
+    if (docChanged) {
+      handleUpdate(state.doc.toString());
+    }
+  });
+
+  /**
+   * @param {string} format
+   */
+  async function languageForFormat(format) {
+    switch (format) {
+      case 'glimdown':
+      case 'gdm':
+      case 'gmd':
+        return getLang('gmd');
+      case 'jsx':
+      case 'jsx|react':
+        return getLang('jsx|react');
+      default:
+        return getLang(format);
+    }
+  }
+
+  /**
+   * @param {string} format
+   */
+  async function supportForFormat(format) {
+    const support = await getSupport(format);
+
+    if (!support) {
+      return [];
+    }
+
+    return Array.isArray(support) ? support : [support];
+  }
+
+  const [language, support] = await Promise.all([
+    languageForFormat(format),
+    supportForFormat(format),
+  ]);
+
+  const editorExtensions = [
+    // features
+    basicSetup,
+    foldByIndent(),
+    // Language
+    languageConf.of(language),
+    supportConf.of(support),
+
+    updateListener,
+    EditorView.lineWrapping,
+    keymap.of([indentWithTab, ...completionKeymap, ...markdownKeymap]),
+
+    // TODO: lsp,
+
+    ...(extensions ?? []),
+  ].filter(Boolean);
+
+  const view = new EditorView({
+    parent: element,
+    state: EditorState.create({
+      extensions: editorExtensions,
+    }),
+  });
+
+  /**
+   * Called from the host app to update the editor.
+   *
+   * @param {string} text
+   * @param {string} format
+   */
+  const setText = async (text, format) => {
+    const [language, support] = await Promise.all([
+      languageForFormat(format),
+      supportForFormat(format),
+    ]);
+
+    console.debug(`Codemirror changing to ${format}: ${language ? 'ok' : 'not ok'}`);
+
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: text,
+      },
+      effects: [languageConf.reconfigure(language), supportConf.reconfigure(support)],
+    });
+  };
+
+  /**
+   * Changes just the format of the editor.
+   *
+   * @param {string} format
+   */
+  const setFormat = async (format) => {
+    const [language, support] = await Promise.all([
+      languageForFormat(format),
+      supportForFormat(format),
+    ]);
+
+    console.debug(`Codemirror changing to ${format}: ${language ? 'ok' : 'not ok'}`);
+
+    view.dispatch({
+      effects: [languageConf.reconfigure(language), supportConf.reconfigure(support)],
+    });
+  };
+
+  view.dispatch(
+    view.state.changeByRange((range) => ({
+      changes: [{ from: range.from, insert: text }],
+      range: EditorSelection.range(range.from, range.to),
+    }))
+  );
+
+  view.dispatch({
+    effects: [
+      tabSize.reconfigure(EditorState.tabSize.of(2)),
+      // languageConf.reconfigure(languageForFormat(format)),
+    ],
+  });
+
+  return { view, setText, setFormat };
+}

package/src/compilers/ember/gjs.js

@@ -0,0 +1,212 @@
+import { cache } from '../../cache.js';
+import { renderApp } from './render-app-island.js';
+
+let elementId = 0;
+
+const buildDependencies = [
+  /**
+   * The only version of babel that is easily runnable in the browser
+   * This includes way too much stuff.
+   */
+  '@babel/standalone',
+  /**
+   * We will be using this decorator transform
+   * instead of the babel one.
+   * The babel transform does way too much transforming.
+   */
+  'decorator-transforms',
+
+  /**
+   * Babel plugin that understands all the different ways
+   * which templates have been authored and what they need to
+   * compile to over the years.
+   */
+  'babel-plugin-ember-template-compilation',
+  /**
+   * The actual template-compiler is ember-sounce-dependent,
+   * because the underlying format / bytecodes / etc is private,
+   * and can change between versions of ember-source.
+   */
+  'ember-source/dist/ember-template-compiler.js',
+  /**
+   * Converts gjs/gts to standard js/ts
+   */
+  'content-tag',
+  /**
+   * Older-style build macros
+   * (before import.meta.env was even a thing)
+   *
+   * These remove `@glimmer/env` and DEBUG usages
+   */
+  'babel-plugin-debug-macros',
+
+  /**
+   * build macros, because the ecosystem isn't standardized on imprt.meta.env?.X
+   * Also, @embroider/macros does dead-code-elimination, which is handy.
+   */
+  // '@embroider/macros/babel',
+];
+
+/**
+ * @type {import('../../types.ts').CompilerConfig['compiler']}
+ */
+export async function compiler(config, api) {
+  const [
+    _babel,
+    _decoratorTransforms,
+    _emberTemplateCompilation,
+    compiler,
+    contentTag,
+    { default: DebugMacros },
+    // embroiderMacros,
+  ] = await api.tryResolveAll(buildDependencies);
+
+  // These libraries are compiled incorrectly for cjs<->ESM compat
+  const decoratorTransforms =
+    'default' in _decoratorTransforms ? _decoratorTransforms.default : _decoratorTransforms;
+
+  const emberTemplateCompilation =
+    'default' in _emberTemplateCompilation
+      ? _emberTemplateCompilation.default
+      : _emberTemplateCompilation;
+
+  const babel = 'availablePlugins' in _babel ? _babel : _babel.default;
+
+  // let macros = embroiderMacros.buildMacros();
+
+  /**
+   * @param {string} text
+   */
+  async function transform(text) {
+    return babel.transform(text, {
+      filename: `dynamic-repl.js`,
+      plugins: [
+        [
+          emberTemplateCompilation,
+          {
+            compiler,
+            transforms: [
+              // ...macros.templateMacros
+            ],
+            targetFormat: 'wire',
+          },
+        ],
+        [
+          // @ts-ignore - we don't care about types here..
+          decoratorTransforms,
+          {
+            runtime: {
+              import: 'decorator-transforms/runtime',
+            },
+          },
+        ],
+        // ...macros.babelMacros,
+        [
+          DebugMacros,
+          {
+            flags: [
+              {
+                source: '@glimmer/env',
+                flags: {
+                  DEBUG: true,
+                  CI: false,
+                },
+              },
+            ],
+            debugTools: {
+              isDebug: true,
+              source: '@ember/debug',
+              assertPredicateIndex: 1,
+            },
+            externalizeHelpers: {
+              module: '@ember/debug',
+            },
+          },
+          '@ember/debug stripping',
+        ],
+        [
+          DebugMacros,
+          {
+            externalizeHelpers: {
+              module: '@ember/application/deprecations',
+            },
+            debugTools: {
+              isDebug: true,
+              source: '@ember/application/deprecations',
+              assertPredicateIndex: 1,
+            },
+          },
+          '@ember/application/deprecations stripping',
+        ],
+      ],
+      presets: [],
+    });
+  }
+
+  const preprocessor = new contentTag.Preprocessor();
+
+  /**
+   * @type {import('../../types.ts').Compiler}
+   */
+  const gjsCompiler = {
+    compile: async (text, options) => {
+      const { code: preprocessed } = preprocessor.process(text, { filename: 'dynamic-repl.js' });
+      const transformed = await transform(preprocessed);
+
+      const code = transformed.code;
+
+      return code;
+    },
+    render: async (element, compiled, extra, compiler) => {
+      /**
+       *
+       * TODO: These will make things easier:
+       *    https://github.com/emberjs/rfcs/pull/1099
+       *    https://github.com/ember-cli/ember-addon-blueprint/blob/main/files/tests/test-helper.js
+       */
+      const attribute = `data-repl-sdk-ember-gjs-${elementId++}`;
+
+      element.setAttribute(attribute, '');
+
+      const [application, destroyable, resolver, router, route, testWaiters, runloop] =
+        await compiler.tryResolveAll([
+          '@ember/application',
+          '@ember/destroyable',
+          'ember-resolver',
+          '@ember/routing/router',
+          '@ember/routing/route',
+          '@ember/test-waiters',
+          '@ember/runloop',
+        ]);
+
+      // We don't want to await here, because we need to early
+      // return the element so that the app can render in to it.
+      // (Ember will only render in to an element if it's present in the DOM)
+      return renderApp({
+        element,
+        selector: `[${attribute}]`,
+        component: compiled,
+        log: compiler.announce,
+        modules: {
+          application,
+          destroyable,
+          resolver,
+          router,
+          route,
+          testWaiters,
+          runloop,
+        },
+      });
+    },
+    handlers: {
+      js: async (text) => {
+        return gjsCompiler.compile(text, {});
+      },
+      mjs: async (text) => {
+        return gjsCompiler.compile(text, {});
+      },
+    },
+  };
+
+  return gjsCompiler;
+}