repl-sdk 0.0.0 → 1.0.1

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.transformAsync(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-esm',
+            },
+          },
+        ],
+        // ...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;
+}

package/src/compilers/ember/gmd.js

@@ -0,0 +1,190 @@
+/**
+ * @typedef {import('unified').Plugin} Plugin
+ */
+import { assert, isRecord } from '../../utils.js';
+import { buildCodeFenceMetaUtils } from '../markdown/utils.js';
+import { renderApp } from './render-app-island.js';
+
+let elementId = 0;
+
+/**
+ * @param {unknown} [ options ]
+ * @returns {{
+ *   scope: Record<string, unknown>,
+ *   remarkPlugins: Plugin[],
+ *   rehypePlugins: Plugin[],
+ *   ShadowComponent: string | undefined,
+ *   CopyComponent: string | undefined
+ *   }}
+ */
+export function filterOptions(options) {
+  if (!isRecord(options)) {
+    return {
+      scope: {},
+      remarkPlugins: [],
+      rehypePlugins: [],
+      ShadowComponent: undefined,
+      CopyComponent: undefined,
+    };
+  }
+
+  return {
+    scope: /** @type {Record<string, unknown>}*/ (options?.scope || {}),
+    remarkPlugins: /** @type {Plugin[]}*/ (options?.remarkPlugins || []),
+    rehypePlugins: /** @type {Plugin[]}*/ (options?.rehypePlugins || []),
+    ShadowComponent: /** @type {string}*/ (options?.ShadowComponent),
+    CopyComponent: /** @type {string}*/ (options?.CopyComponent),
+  };
+}
+
+/**
+ * @type {import('../../types.ts').CompilerConfig['compiler']}
+ */
+export async function compiler(config, api) {
+  const userOptions = filterOptions(
+    /** @type {Record<string, unknown>} */ (config.userOptions)?.gmd || config
+  );
+
+  const { isLive, isPreview, needsLive, allowedFormats, getFlavorFromMeta, isBelow } =
+    buildCodeFenceMetaUtils(api);
+
+  const { parseMarkdown } = await import('../markdown/parse.js');
+
+  /**
+   * @type {import('../../types.ts').Compiler}
+   */
+  const gmdCompiler = {
+    compile: async (text, options) => {
+      const compileOptions = filterOptions(options);
+      const result = await parseMarkdown(text, {
+        remarkPlugins: [...userOptions.remarkPlugins, ...compileOptions.remarkPlugins],
+        rehypePlugins: [...userOptions.rehypePlugins, ...compileOptions.rehypePlugins],
+        isLive,
+        isPreview,
+        isBelow,
+        needsLive,
+        ALLOWED_FORMATS: allowedFormats,
+        getFlavorFromMeta,
+      });
+
+      const { template } = await api.tryResolve('@ember/template-compiler/runtime');
+
+      const scope = {
+        ...filterOptions(userOptions).scope,
+        ...filterOptions(options).scope,
+      };
+
+      const component = template(result.text, {
+        scope: () => ({
+          ...scope,
+          // TODO: compile all the components from "result" and add them to scope here
+          //       would this be better than the markdown style multiple islands
+        }),
+      });
+
+      return { compiled: component, ...result, scope };
+    },
+    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-gmd-${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)
+      const destroy = await renderApp({
+        element,
+        selector: `[${attribute}]`,
+        component: compiled,
+        log: compiler.announce,
+        modules: {
+          application,
+          destroyable,
+          resolver,
+          router,
+          route,
+          testWaiters,
+          runloop,
+        },
+      });
+
+      /**
+       * @type {(() => void)[]}
+       */
+      const destroyables = [];
+
+      await Promise.all(
+        /** @type {unknown[]} */ (extra.codeBlocks).map(async (/** @type {unknown} */ info) => {
+          /** @type {Record<string, unknown>} */
+          const infoObj = /** @type {Record<string, unknown>} */ (info);
+
+          if (
+            !api.canCompile(
+              /** @type {string} */ (infoObj.format),
+              /** @type {string} */ (infoObj.flavor)
+            )
+          ) {
+            return;
+          }
+
+          const flavor = /** @type {string} */ (infoObj.flavor);
+          const hasScope =
+            flavor === 'ember' || infoObj.format === 'gjs' || infoObj.format === 'hbs';
+          const subRender = await compiler.compile(
+            /** @type {string} */ (infoObj.format),
+            /** @type {string} */ (infoObj.code),
+            {
+              ...compiler.optionsFor(/** @type {string} */ (infoObj.format), flavor),
+              flavor: flavor,
+              // @ts-ignore
+              ...(hasScope
+                ? {
+                    scope: extra.scope,
+                  }
+                : {}),
+            }
+          );
+
+          const selector = `#${/** @type {string} */ (infoObj.placeholderId)}`;
+          const target = element.querySelector(selector);
+
+          assert(
+            `Could not find placeholder / target element (using selector: \`${selector}\`). ` +
+              `Could not render ${/** @type {string} */ (infoObj.format)} block.`,
+            target
+          );
+
+          destroyables.push(subRender.destroy);
+          target.appendChild(subRender.element);
+        })
+      );
+
+      return () => {
+        for (const subDestroy of destroyables) {
+          subDestroy();
+        }
+
+        destroy();
+      };
+    },
+  };
+
+  return gmdCompiler;
+}

package/src/compilers/ember/hbs.js

@@ -0,0 +1,98 @@
+import { isRecord } from '../../utils.js';
+import { renderApp } from './render-app-island.js';
+
+let elementId = 0;
+
+/**
+ * @param {unknown} [ options ]
+ * @returns {{ scope: Record<string, unknown> }}
+ */
+function filterOptions(options) {
+  if (!isRecord(options)) {
+    return { scope: {} };
+  }
+
+  return {
+    scope: /** @type {Record<string, unknown>}*/ (options?.scope || {}),
+  };
+}
+
+/**
+ * @type {import('../../types.ts').CompilerConfig['compiler']}
+ */
+export async function compiler(config, api) {
+  /**
+   * @type {import('../../types.ts').Compiler}
+   */
+  const hbsCompiler = {
+    compile: async (text, options) => {
+      const { template } = await api.tryResolve('@ember/template-compiler/runtime');
+
+      const component = template(text, {
+        scope: () => ({
+          ...filterOptions(config).scope,
+          ...filterOptions(options).scope,
+        }),
+      });
+
+      /**
+       * Some versions of ember implement the runtime template compiler incorrectly (albeit, correct enough for the constraints at the time).
+       * So we need to wait longer than a microtask queue request could take.
+       *
+       * To make sure that the template is compiled, and "component"
+       * has a value.
+       *
+       * See:
+       * - https://github.com/emberjs/ember.js/issues/20913
+       * - https://github.com/emberjs/ember.js/issues/20914
+       */
+      await new Promise(requestAnimationFrame);
+
+      /**
+       * Is this allowed here? or do I just return text,
+       * and do the above in 'render'
+       */
+      return component;
+    },
+    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-hbs-${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',
+        ]);
+
+      return renderApp({
+        element,
+        selector: `[${attribute}]`,
+        component: compiled,
+        log: compiler.announce,
+        modules: {
+          application,
+          destroyable,
+          resolver,
+          router,
+          route,
+          testWaiters,
+          runloop,
+        },
+      });
+    },
+  };
+
+  return hbsCompiler;
+}