repl-sdk 0.0.0 → 1.0.0

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(/* @vite-ignore */ '../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;
+}

package/src/compilers/ember/render-app-island.js

@@ -0,0 +1,83 @@
+/** @type {any} */
+let bootWaiter;
+/** @type {any} */
+let createWaiter;
+
+/**
+ * Wait to boot the app until the Element is in the DOM.
+ * because This old way of making a whole app requires that the element
+ * be present in the app.
+ *
+ * We really need renderComponent(...)
+ *   https://github.com/emberjs/ember.js/pull/20781
+ *
+ * @param {{
+ *  element: Element,
+ *  modules: { [name: string]: any},
+ *  selector: string,
+ *  log: (type: 'error' | 'info', message: string) => void;
+ *  component: unknown
+ * }} options
+ */
+export async function renderApp({ element, modules, selector, component, log }) {
+  const App = modules.application.default;
+  const registerDestructor = modules.destroyable.registerDestructor;
+  const destroy = modules.destroyable.destroy;
+  const Resolver = modules.resolver.default;
+  const Router = modules.router.default;
+  const Route = modules.route.default;
+  const schedule = modules.runloop.schedule;
+
+  bootWaiter ||= modules.testWaiters.buildWaiter('repl-output:waiting-for-boot');
+  createWaiter ||= modules.testWaiters.buildWaiter('repl-output:waiting-for-creation');
+
+  const bootToken = bootWaiter.beginAsync();
+  const createToken = createWaiter.beginAsync();
+
+  class EphemeralApp extends App {
+    modulePrefix = 'ephemeral-render-output';
+    rootElement = element;
+    Resolver = Resolver.withModules({
+      'ephemeral-render-output/templates/application': { default: component },
+      'ephemeral-render-output/routes/application': {
+        default: class Application extends Route {
+          /**
+           * @param {unknown[]} args
+           */
+          constructor(...args) {
+            super(...args);
+
+            registerDestructor(() => {
+              bootWaiter.endAsync(bootToken);
+            });
+          }
+          afterModel() {
+            schedule('afterRender', () => {
+              requestAnimationFrame(() => {
+                log('info', 'Ember Island Rendered');
+                bootWaiter.endAsync(bootToken);
+                createWaiter.endAsync(createToken);
+              });
+            });
+          }
+        },
+      },
+      'ephemeral-render-output/router': {
+        default: class BoilerplateRouter extends Router {
+          location = 'none';
+          rootURL = '/';
+        },
+      },
+    });
+  }
+
+  log('info', 'Booting Ember Island');
+
+  const app = EphemeralApp.create({
+    rootElement: element,
+  });
+
+  return () => {
+    destroy(app);
+  };
+}

package/src/compilers/ember.js

@@ -0,0 +1,166 @@
+/**
+ * @typedef {import('../types.ts').CompilerConfig} CompilerConfig
+ */
+
+/**
+ * Other `@ember` (and `@glimmer`) packages are bundled in ember-source,
+ * and typecilaly use a build plugin to resolve from `@ember/*` imports.
+ */
+const externalPackages = [
+  '@ember/test-helpers',
+  '@ember/string',
+  '@ember/test-waiters',
+  '@ember/render-modifiers',
+  '@glimmer/component',
+];
+
+/**
+ * @param {string} id
+ * @returns {string | undefined | (() => Record<string, unknown>)}
+ */
+function resolve(id) {
+  if (id === '@ember/template-compiler/runtime') {
+    return `https://esm.sh/*ember-source/dist/packages/@ember/template-compiler/runtime.js`;
+  }
+
+  const isExternalEmber = externalPackages.some((name) => id.startsWith(name));
+
+  if (isExternalEmber) {
+    return `https://esm.sh/*${id}`;
+  }
+
+  if (id.startsWith('@ember')) {
+    return `https://esm.sh/*ember-source/dist/packages/${id}`;
+  }
+
+  if (id.startsWith('@glimmer')) {
+    return `https://esm.sh/*ember-source/dist/dependencies/${id}.js`;
+  }
+
+  if (id.startsWith('@embroider/macros')) {
+    return () => ({
+      // passthrough, we are not doing dead-code-elimination
+
+      /**
+       * @param {unknown} x
+       */
+      macroCondition: (x) => Boolean(x),
+      // I *could* actually implement this
+      dependencySatisfies: () => true,
+      isDevelopingApp: () => true,
+      getGlobalConfig: () => ({
+        WarpDrive: {
+          debug: false,
+          env: {
+            DEBUG: false,
+            TESTING: false,
+            PRODUCTION: true,
+          },
+          activeLogging: false,
+          compatWith: '99.0',
+          features: {},
+          deprecations: {},
+          polyfillUUID: false,
+          includeDataAdapter: false,
+        },
+      }),
+    });
+  }
+}
+
+/**
+    Example:
+     
+    Uncaught (in promise) Error: Assertion Failed: You attempted to update `count` on `Demo`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.
+
+    `count` was first used:
+
+    - While rendering:
+      {{outlet}} for -top-level
+        -top-level
+          {{outlet}} for application
+            Demo
+              this.foos.value
+                this.foos
+
+    Stack trace for the update:
+  *
+  * @param {PromiseRejectionEvent} e
+  * @param {(message: string) => void} handle
+  */
+function onUnhandled(e, handle) {
+  if (!e.reason?.message) return;
+
+  let reason = e.reason.message;
+
+  if (reason.includes('Stack trace for the update:')) {
+    reason += ' (see console)';
+  }
+
+  handle(reason);
+}
+
+/**
+ * @type {CompilerConfig}
+ */
+export const gjs = {
+  resolve,
+  onUnhandled,
+  codemirror: {
+    lang: async () => {
+      const { gjs } = await import('codemirror-lang-glimmer-js');
+
+      return gjs();
+    },
+  },
+  compiler: async (...args) => {
+    const gjs = await import('./ember/gjs.js');
+
+    return gjs.compiler(...args);
+  },
+};
+
+/**
+ * @type {CompilerConfig}
+ */
+export const hbs = {
+  resolve,
+  onUnhandled,
+  codemirror: {
+    lang: async () => {
+      const { glimmer } = await import('codemirror-lang-glimmer');
+
+      return glimmer();
+    },
+  },
+  compiler: async (...args) => {
+    const hbs = await import('./ember/hbs.js');
+
+    return hbs.compiler(...args);
+  },
+};
+
+/**
+ * @type {CompilerConfig}
+ */
+export const gmd = {
+  resolve,
+  onUnhandled,
+  codemirror: {
+    lang: async () => {
+      const { glimdown } = await import('codemirror-lang-glimdown');
+
+      return glimdown();
+    },
+    support: async () => {
+      const { gjs } = await import('codemirror-lang-glimmer-js');
+
+      return [gjs().support];
+    },
+  },
+  compiler: async (...args) => {
+    const hbs = await import('./ember/gmd.js');
+
+    return hbs.compiler(...args);
+  },
+};

package/src/compilers/js.js

@@ -0,0 +1,32 @@
+import { assert } from '../utils.js';
+
+/**
+ * @type {import('../types.ts').CompilerConfig}
+ */
+export const js = {
+  codemirror: {
+    lang: async () => {
+      const { javascript } = await import('@codemirror/lang-javascript');
+
+      return javascript();
+    },
+  },
+  compiler: async (config, api) => {
+    return {
+      compile: async (text, options) => {
+        // No compiling needed. Just JS
+        return text;
+      },
+      render: async (element, fun, extra, compiler) => {
+        assert(
+          `js document must have a function for a default export. Instead received: ${typeof fun}`,
+          typeof fun === 'function'
+        );
+
+        await fun(element);
+
+        compiler.announce('info', 'Done');
+      },
+    };
+  },
+};