ember-repl 3.0.0-beta.0 → 3.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-repl",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.2",
   "description": "Addon for enabling REPL and Playground creation with Ember/Glimmer",
   "keywords": [
     "ember-addon"
@@ -14,6 +14,12 @@
   "author": "NullVoxPopuli",
   "typesVersions": {
     "*": {
+      "test-support": [
+        "dist/test-support/index.d.ts"
+      ],
+      "markdown/parse": [
+        "./dist/browser/compile/markdown-to-ember.d.ts"
+      ],
       "*": [
         "dist/browser/*",
         "dist/browser/*/index.d.ts"
@@ -23,9 +29,11 @@
   "exports": {
     ".": "./dist/browser/index.js",
     "./esm": "./dist/browser/esm/index.js",
+    "./markdown/parse": "./dist/browser/compile/markdown-to-ember.js",
     "./ember-cli": {
       "require": "./src/build/ember-cli.cjs"
     },
+    "./test-support": "./dist/test-support/index.js",
     "./addon-main.js": "./addon-main.cjs"
   },
   "files": [
@@ -36,24 +44,32 @@
   "dependencies": {
     "@babel/helper-plugin-utils": "^7.21.5",
     "@babel/standalone": "^7.21.8",
-    "@embroider/addon-shim": "^1.8.4",
-    "@embroider/macros": "^1.10.0",
+    "@embroider/addon-shim": "1.8.5",
+    "@embroider/macros": "1.11.0",
     "babel-import-util": "^1.3.0",
-    "babel-plugin-ember-template-compilation": "^2.0.2",
+    "babel-plugin-ember-template-compilation": "^2.0.3",
     "broccoli-file-creator": "^2.1.1",
     "change-case": "^4.1.2",
     "common-tags": "^1.8.2",
     "line-column": "^1.0.2",
     "magic-string": "^0.30.0",
+    "mdast": "^3.0.0",
     "parse-static-imports": "^1.1.0",
-    "uuid": "^9.0.0"
+    "rehype-raw": "^6.1.1",
+    "rehype-stringify": "^9.0.3",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^4.1.2",
+    "uuid": "^9.0.0",
+    "vfile": "^5.3.7"
   },
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@babel/types": "^7.21.5",
     "@ember/test-helpers": "^2.9.3",
     "@ember/test-waiters": "^3.0.2",
-    "@embroider/addon-dev": "^3.0.0",
+    "@embroider/addon-dev": "3.1.0",
     "@glimmer/compiler": "^0.84.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/interfaces": "^0.84.3",
@@ -71,20 +87,25 @@
     "@types/babel__core": "^7.20.0",
     "@types/babel__standalone": "^7.1.4",
     "@types/babel__traverse": "^7.18.5",
+    "@types/hast": "^2.3.4",
+    "@types/mdast": "^3.0.11",
+    "@types/unist": "^2.0.6",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "concurrently": "^8.0.1",
-    "ember-source": "^4.12.0",
+    "ember-resources": "^6.1.0",
+    "ember-source": "^5.0.0",
     "ember-template-imports": "^3.4.2",
     "ember-template-lint": "^5.7.3",
-    "eslint": "^8.40.0",
-    "eslint-plugin-ember": "^11.5.2",
+    "eslint": "^8.41.0",
+    "eslint-plugin-ember": "^11.7.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.8",
     "prettier-plugin-ember-template-tag": "^0.3.2",
-    "rollup": "^3.21.6",
+    "publint": "^0.1.12",
+    "rollup": "~3.21.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-glimmer-template-tag": "^0.4.1",
     "rollup-plugin-ts": "^3.2.0",
@@ -107,7 +128,9 @@
     "@glimmer/compiler": "^0.84.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/syntax": "^0.84.3",
-    "ember-source": "^4.12.0"
+    "@glint/template": "^1.0.2",
+    "ember-resources": "^6.1.0",
+    "ember-source": "^5.0.0"
   },
   "scripts": {
     "build": "rollup --config",
@@ -115,6 +138,7 @@
     "lint:fix": "pnpm -w exec lint fix",
     "start": "rollup --config --watch",
     "lint": "pnpm -w exec lint",
+    "lint:package": "pnpm publint",
     "lint:js": "pnpm -w exec lint js",
     "lint:js:fix": "pnpm -w exec lint js:fix",
     "lint:hbs": "pnpm -w exec lint hbs",

package/src/browser/compile/formats.ts

@@ -0,0 +1,170 @@
+import { invocationName } from '../utils';
+
+import type { CompileResult } from '../types';
+import type { ExtractedCode } from './markdown-to-ember';
+import type { EvalImportMap, ScopeMap } from './types';
+
+async function compileAll(js: { code: string }[], importMap?: EvalImportMap) {
+  let modules = await Promise.all(
+    js.map(async ({ code }) => {
+      return await compileGJS(code, importMap);
+    })
+  );
+
+  return modules;
+}
+
+export async function compileGJS(
+  gjsInput: string,
+  importMap?: EvalImportMap
+): Promise<CompileResult> {
+  try {
+    let { compileJS } = await import('../js');
+
+    return await compileJS(gjsInput, importMap);
+  } catch (error) {
+    return { error: error as Error, name: 'unknown' };
+  }
+}
+
+export async function compileHBS(
+  hbsInput: string,
+  options?: {
+    moduleName?: string;
+    scope?: Record<string, unknown>;
+  }
+): Promise<CompileResult> {
+  try {
+    let { compileHBS } = await import('../hbs');
+
+    return compileHBS(hbsInput, options);
+  } catch (error) {
+    return { error: error as Error, name: 'unknown' };
+  }
+}
+
+async function extractScope(
+  liveCode: ExtractedCode[],
+  importMap?: EvalImportMap
+): Promise<CompileResult[]> {
+  let scope: CompileResult[] = [];
+
+  let hbs = liveCode.filter((code) => code.lang === 'hbs');
+  let js = liveCode.filter((code) => ['js', 'gjs'].includes(code.lang));
+
+  if (js.length > 0) {
+    let compiled = await compileAll(js, importMap);
+
+    await Promise.all(
+      compiled.map(async (info) => {
+        // using web worker + import maps is not available yet (need firefox support)
+        // (and to somehow be able to point at npm)
+        //
+        // if ('importPath' in info) {
+        //   return scope.push({
+        //     moduleName: name,
+        //     component: await import(/* webpackIgnore: true */ info.importPath),
+        //   });
+        // }
+
+        return scope.push(info);
+      })
+    );
+  }
+
+  for (let { code } of hbs) {
+    let compiled = await compileHBS(code);
+
+    scope.push(compiled);
+  }
+
+  return scope;
+}
+
+export async function compileMD(
+  glimdownInput: string,
+  options?: {
+    importMap?: EvalImportMap;
+    topLevelScope?: ScopeMap;
+    CopyComponent?: string;
+    ShadowComponent?: string;
+  }
+): Promise<CompileResult & { rootTemplate?: string }> {
+  let importMap = options?.importMap;
+  let topLevelScope = options?.topLevelScope ?? {};
+  let rootTemplate: string;
+  let liveCode: ExtractedCode[];
+  let scope: CompileResult[] = [];
+
+  /**
+   * Step 1: Convert Markdown To HTML (Ember).
+   *
+   *         The remark plugin, remark-code-extra also extracts
+   *         and transforms the code blocks we care about.
+   *
+   *         These blocks will be compiled through babel and eval'd so the
+   *         compiled rootTemplate can invoke them
+   */
+  try {
+    let { parseMarkdown } = await import('./markdown-to-ember');
+    let { templateOnlyGlimdown, blocks } = await parseMarkdown(glimdownInput, {
+      CopyComponent: options?.CopyComponent,
+      ShadowComponent: options?.ShadowComponent,
+    });
+
+    rootTemplate = templateOnlyGlimdown;
+    liveCode = blocks;
+  } catch (error) {
+    return { error: error as Error, name: 'unknown' };
+  }
+
+  /**
+   * Step 2: Compile the live code samples
+   */
+  if (liveCode.length > 0) {
+    try {
+      scope = await extractScope(liveCode, importMap);
+    } catch (error) {
+      console.info({ scope });
+      console.error(error);
+
+      return { error: error as Error, rootTemplate, name: 'unknown' };
+    }
+  }
+
+  /**
+   * Make sure non of our snippets errored
+   *
+   * TODO: for these errors, report them differently so that we
+   * can render the 'Ember' and still highlight the correct line?
+   * or maybe there is a way to highlight in the editor instead?
+   */
+  for (let { error, component } of scope) {
+    if (!component) {
+      if (error) {
+        return { error, rootTemplate, name: 'unknown' };
+      }
+    }
+  }
+
+  /**
+   * Step 4: Compile the Ember Template
+   */
+  try {
+    let localScope = scope.reduce((accum, { component, name }) => {
+      accum[invocationName(name)] = component;
+
+      return accum;
+    }, {} as Record<string, unknown>);
+
+    return await compileHBS(rootTemplate, {
+      moduleName: 'DynamicRootTemplate',
+      scope: {
+        ...topLevelScope,
+        ...localScope,
+      },
+    });
+  } catch (error) {
+    return { error: error as Error, rootTemplate, name: 'unknown' };
+  }
+}

package/src/browser/compile/index.ts

@@ -0,0 +1,132 @@
+import { cell, resource, resourceFactory } from 'ember-resources';
+
+import { nameFor } from '../utils';
+import {
+  compileGJS as processGJS,
+  compileHBS as processHBS,
+  compileMD as processMD,
+} from './formats';
+
+import type { CompileResult } from '../types';
+import type { EvalImportMap, ScopeMap } from './types';
+import type { ComponentLike } from '@glint/template';
+type Format = 'glimdown' | 'gjs' | 'hbs';
+
+export const CACHE = new Map<string, ComponentLike>();
+
+const SUPPORTED_FORMATS = ['glimdown', 'gjs', 'hbs'];
+
+/**
+ * This compileMD is a more robust version of the raw compiling used in "formats".
+ * This function manages cache, and has events for folks building UIs to hook in to
+ */
+export async function compile(
+  text: string,
+  {
+    format,
+    onSuccess,
+    onError,
+    onCompileStart,
+    ...options
+  }: {
+    format: Format;
+    onSuccess: (component: ComponentLike) => Promise<unknown> | unknown;
+    onError: (error: string) => Promise<unknown> | unknown;
+    onCompileStart: () => Promise<unknown> | unknown;
+    importMap?: EvalImportMap;
+    CopyComponent?: string;
+    ShadowComponent?: string;
+    topLevelScope?: ScopeMap;
+  }
+) {
+  let id = nameFor(text);
+
+  let existing = CACHE.get(id);
+
+  if (existing) {
+    onSuccess(existing);
+
+    return;
+  }
+
+  if (!SUPPORTED_FORMATS.includes(format)) {
+    await onError(`Unsupported format: ${format}. Supported formats: ${SUPPORTED_FORMATS}`);
+
+    return;
+  }
+
+  await onCompileStart();
+
+  if (!text) {
+    await onError('No Input Document yet');
+
+    return;
+  }
+
+  let result: CompileResult;
+
+  if (format === 'glimdown') {
+    result = await processMD(text, options);
+  } else if (format === 'gjs') {
+    result = await processGJS(text, options.importMap);
+  } else if (format === 'hbs') {
+    result = await processHBS(text, {
+      scope: options.topLevelScope,
+    });
+  } else {
+    await onError(`Unsupported format: ${format}. Supported formats: ${SUPPORTED_FORMATS}`);
+
+    return;
+  }
+
+  if (result.error) {
+    await onError(result.error.message || `${result.error}`);
+
+    return;
+  }
+
+  CACHE.set(id, result.component as ComponentLike);
+
+  await onSuccess(result.component as ComponentLike);
+}
+
+type Input = string | undefined | null;
+
+/**
+ * By default, this compiles to `glimdown`. A Markdown format which
+ * extracts `live` tagged code snippets and compiles them to components.
+ */
+export const Compiled = resourceFactory(
+  (markdownText: Input | (() => Input), format?: Format | (() => Format)) => {
+    return resource(() => {
+      let _format: Format = (typeof format === 'function' ? format() : format) || 'glimdown';
+      let input = typeof markdownText === 'function' ? markdownText() : markdownText;
+      let ready = cell(false);
+      let error = cell();
+      let result = cell<ComponentLike>();
+
+      if (input) {
+        compile(input, {
+          format: _format,
+          onSuccess: async (component) => {
+            result.current = component;
+            ready.set(true);
+            error.set(null);
+          },
+          onError: async (e) => {
+            error.set(e);
+          },
+          onCompileStart: async () => {
+            ready.set(false);
+          },
+        });
+      }
+
+      return () => ({
+        isReady: ready.current,
+        error: error.current,
+        component: result.current,
+      });
+    });
+  }
+);