ember-repl 2.0.63 → 3.0.0-beta.1

package/dist/browser/utils.js

@@ -0,0 +1,46 @@
+import { assert } from '@ember/debug';
+import { pascalCase } from 'change-case';
+import { v5 } from 'uuid';
+
+/**
+ * a namespace is required for uuid v5
+ *
+ * it helps generate stable outputs for for any given input.
+ */
+const NAMESPACE = '926f034a-f480-4112-a363-321244f4e5de';
+const DEFAULT_PREFIX = 'ember-repl';
+
+/**
+ * For any given code block, a reasonably stable name can be
+ * generated.
+ * This can help with cacheing previously compiled components,
+ * and generally allowing a consumer to derive "known references" to user-input
+ */
+function nameFor(code, prefix = DEFAULT_PREFIX) {
+  let id = v5(code, NAMESPACE);
+  return `${prefix ? `${prefix}-` : ''}${id}`;
+}
+
+/**
+ * Returns the text for invoking a component with a given name.
+ * It is assumed the component takes no arguments, as would be the
+ * case in REPLs / Playgrounds for the "root" component.
+ */
+function invocationOf(name) {
+  assert(`You must pass a name to invocationOf. Received: \`${name}\``, typeof name === 'string' && name.length > 0);
+  if (name.length === 0) {
+    throw new Error(`name passed to invocationOf must have non-0 length`);
+  }
+  return `<${invocationName(name)} />`;
+}
+
+/**
+ * Core team does not want to support changes to '@ember/string' (v2 addonification, specifically)
+ * inflection does not support hyphens
+ */
+function invocationName(name) {
+  return pascalCase(name).replaceAll('_', '');
+}
+
+export { invocationName, invocationOf, nameFor };
+//# sourceMappingURL=utils.js.map

package/dist/browser/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/browser/utils.ts"],"sourcesContent":["import { assert } from '@ember/debug';\n\nimport { pascalCase } from 'change-case';\nimport { v5 as uuidv5 } from 'uuid';\n\n/**\n * a namespace is required for uuid v5\n *\n * it helps generate stable outputs for for any given input.\n */\nconst NAMESPACE = '926f034a-f480-4112-a363-321244f4e5de';\nconst DEFAULT_PREFIX = 'ember-repl';\n\n/**\n * For any given code block, a reasonably stable name can be\n * generated.\n * This can help with cacheing previously compiled components,\n * and generally allowing a consumer to derive \"known references\" to user-input\n */\nexport function nameFor(code: string, prefix = DEFAULT_PREFIX) {\n  let id = uuidv5(code, NAMESPACE);\n\n  return `${prefix ? `${prefix}-` : ''}${id}`;\n}\n\n/**\n * Returns the text for invoking a component with a given name.\n * It is assumed the component takes no arguments, as would be the\n * case in REPLs / Playgrounds for the \"root\" component.\n */\nexport function invocationOf(name: string) {\n  assert(\n    `You must pass a name to invocationOf. Received: \\`${name}\\``,\n    typeof name === 'string' && name.length > 0\n  );\n\n  if (name.length === 0) {\n    throw new Error(`name passed to invocationOf must have non-0 length`);\n  }\n\n  return `<${invocationName(name)} />`;\n}\n\n/**\n * Core team does not want to support changes to '@ember/string' (v2 addonification, specifically)\n * inflection does not support hyphens\n */\nexport function invocationName(name: string) {\n  return pascalCase(name).replaceAll('_', '');\n}\n"],"names":["NAMESPACE","DEFAULT_PREFIX","nameFor","code","prefix","id","uuidv5","invocationOf","name","assert","length","Error","invocationName","pascalCase","replaceAll"],"mappings":";;;;AAKA;AACA;AACA;AACA;AACA;AACA,MAAMA,SAAS,GAAG,sCAAsC,CAAA;AACxD,MAAMC,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAACC,IAAY,EAAEC,MAAM,GAAGH,cAAc,EAAE;AAC7D,EAAA,IAAII,EAAE,GAAGC,EAAM,CAACH,IAAI,EAAEH,SAAS,CAAC,CAAA;EAEhC,OAAQ,CAAA,EAAEI,MAAM,GAAI,CAAEA,EAAAA,MAAO,GAAE,GAAG,EAAG,CAAEC,EAAAA,EAAG,CAAC,CAAA,CAAA;AAC7C,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACO,SAASE,YAAYA,CAACC,IAAY,EAAE;AACzCC,EAAAA,MAAM,CACH,CAAA,kDAAA,EAAoDD,IAAK,CAAA,EAAA,CAAG,EAC7D,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,CAACE,MAAM,GAAG,CAC5C,CAAC,CAAA;AAED,EAAA,IAAIF,IAAI,CAACE,MAAM,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,IAAIC,KAAK,CAAE,CAAA,kDAAA,CAAmD,CAAC,CAAA;AACvE,GAAA;AAEA,EAAA,OAAQ,CAAGC,CAAAA,EAAAA,cAAc,CAACJ,IAAI,CAAE,CAAI,GAAA,CAAA,CAAA;AACtC,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAACJ,IAAY,EAAE;EAC3C,OAAOK,UAAU,CAACL,IAAI,CAAC,CAACM,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;AAC7C;;;;"}

package/dist/build/ember-cli.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+const { stripIndents } = require('common-tags');
+
+/**
+ * Builds a file with a single export, COMPONENT_MAP, that
+ * is a map of the provided paths *to* all exported identifiers
+ * from each of the provided paths.
+ *
+ * This is helpful for building a map of imports to force to be included
+ * in the build - a requirement for builds that tend to tree shake.
+ *
+ * @param {string[]} paths - list of import paths for each module that you want availableb to the REPL
+ */
+module.exports.buildComponentMap = function buildComponentMap(paths) {
+  const writeFile = require('broccoli-file-creator');
+  const fileContent = stripIndents`
+    ${paths
+      .map((path, i) => {
+        return `import * as ComponentMapPart${i} from '${path}';`;
+      })
+      .join('\n')}
+
+    export const COMPONENT_MAP = {
+      ${paths
+        .map((path, i) => {
+          return `'${path}': ComponentMapPart${i},`;
+        })
+        .join('\n')}
+    };
+  `;
+
+  const tree = writeFile('/ember-repl/component-map.js', fileContent);
+
+  return tree;
+};

package/dist/test-support/index.d.ts

@@ -0,0 +1,2 @@
+declare function clearCompileCache(): void;
+export { clearCompileCache };

package/dist/test-support/index.js

@@ -0,0 +1,8 @@
+import { CACHE } from '../browser/compile/index.js';
+
+function clearCompileCache() {
+  CACHE.clear();
+}
+
+export { clearCompileCache };
+//# sourceMappingURL=index.js.map

package/dist/test-support/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/test-support/index.ts"],"sourcesContent":["import { CACHE } from '../browser/compile/index';\n\nexport function clearCompileCache() {\n  CACHE.clear();\n}\n"],"names":["clearCompileCache","CACHE","clear"],"mappings":";;AAEO,SAASA,iBAAiBA,GAAG;EAClCC,KAAK,CAACC,KAAK,EAAE,CAAA;AACf;;;;"}

package/package.json

@@ -1,152 +1,149 @@
 {
   "name": "ember-repl",
-  "version": "2.0.63",
+  "version": "3.0.0-beta.1",
   "description": "Addon for enabling REPL and Playground creation with Ember/Glimmer",
   "keywords": [
     "ember-addon"
   ],
-  "repository": "https://github.com/NullVoxPopuli/ember-repl",
+  "repository": {
+    "type": "https",
+    "url": "https://github.com/NullVoxPopuli/limber",
+    "directory": "packages/ember-repl/addon"
+  },
   "license": "MIT",
   "author": "NullVoxPopuli",
-  "directories": {
-    "doc": "doc",
-    "test": "tests"
+  "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"
+      ]
+    }
   },
-  "scripts": {
-    "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
-    "lint:js": "eslint . --cache",
-    "lint:js:fix": "eslint . --fix",
-    "start": "ember serve",
-    "test": "npm-run-all lint test:*",
-    "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each",
-    "prepack": "ember ts:precompile",
-    "postpack": "ember ts:clean"
+  "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": [
+    "src",
+    "dist",
+    "addon-main.cjs"
+  ],
   "dependencies": {
-    "@babel/standalone": "^7.18.13",
-    "@embroider/macros": "^1.8.3",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
+    "@babel/helper-plugin-utils": "^7.21.5",
+    "@babel/standalone": "^7.21.8",
+    "@embroider/addon-shim": "1.8.5",
+    "@embroider/macros": "1.11.0",
+    "babel-import-util": "^1.3.0",
+    "babel-plugin-ember-template-compilation": "^2.0.3",
     "broccoli-file-creator": "^2.1.1",
-    "broccoli-funnel": "^3.0.8",
-    "broccoli-merge-trees": "^4.2.0",
+    "change-case": "^4.1.2",
     "common-tags": "^1.8.2",
-    "ember-auto-import": "2.4.2",
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.0",
-    "ember-cli-typescript": "^5.1.0",
-    "ember-compatibility-helpers": "^1.2.6",
-    "path-browserify": "^1.0.1",
-    "uuid": "8.3.2"
+    "line-column": "^1.0.2",
+    "magic-string": "^0.30.0",
+    "mdast": "^3.0.0",
+    "parse-static-imports": "^1.1.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": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
-    "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.8.1",
+    "@babel/core": "^7.21.8",
+    "@babel/types": "^7.21.5",
+    "@ember/test-helpers": "^2.9.3",
     "@ember/test-waiters": "^3.0.2",
-    "@embroider/test-setup": "^1.8.3",
-    "@glimmer/interfaces": "^0.84.2",
-    "@glimmer/reference": "^0.84.2",
-    "@glimmer/util": "^0.84.2",
-    "@nullvoxpopuli/eslint-configs": "^2.2.49",
-    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/git": "^10.0.1",
-    "@types/babel__core": "^7.1.19",
+    "@embroider/addon-dev": "3.1.0",
+    "@glimmer/compiler": "^0.84.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/interfaces": "^0.84.3",
+    "@glimmer/reference": "^0.84.3",
+    "@glimmer/syntax": "^0.84.3",
+    "@glimmer/tracking": "^1.1.2",
+    "@glimmer/util": "^0.84.3",
+    "@glint/core": "^1.0.2",
+    "@glint/environment-ember-loose": "^1.0.2",
+    "@glint/environment-ember-template-imports": "^1.0.2",
+    "@glint/template": "^1.0.2",
+    "@nullvoxpopuli/eslint-configs": "^3.1.3",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@tsconfig/ember": "^2.0.0",
+    "@types/babel__core": "^7.20.0",
     "@types/babel__standalone": "^7.1.4",
-    "@types/ember-qunit": "^5.0.0",
-    "@types/ember-resolver": "^5.0.11",
-    "@types/ember__application": "^4.0.0",
-    "@types/ember__array": "^4.0.1",
-    "@types/ember__component": "^4.0.8",
-    "@types/ember__controller": "^4.0.0",
-    "@types/ember__debug": "^4.0.1",
-    "@types/ember__destroyable": "^4.0.0",
-    "@types/ember__engine": "^4.0.0",
-    "@types/ember__error": "^4.0.0",
-    "@types/ember__object": "^4.0.2",
-    "@types/ember__polyfills": "^4.0.0",
-    "@types/ember__routing": "^4.0.7",
-    "@types/ember__runloop": "^4.0.1",
-    "@types/ember__service": "^4.0.0",
-    "@types/ember__string": "^3.16.3",
-    "@types/ember__template": "^4.0.0",
-    "@types/ember__test": "^4.0.0",
-    "@types/ember__test-helpers": "^2.6.1",
-    "@types/ember__utils": "^4.0.0",
-    "@types/htmlbars-inline-precompile": "^3.0.0",
-    "@types/qunit": "^2.11.3",
-    "@types/rsvp": "^4.0.4",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
-    "babel-eslint": "^10.1.0",
-    "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~4.6.0",
-    "ember-cli-dependency-checker": "^3.3.1",
-    "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-sri": "^2.1.1",
-    "ember-cli-terser": "^4.0.2",
-    "ember-could-get-used-to-this": "^1.0.1",
-    "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
-    "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
-    "ember-resolver": "^8.0.3",
-    "ember-source": "~4.6.0",
-    "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^4.12.0",
-    "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-decorator-position": "^4.0.1",
-    "eslint-plugin-ember": "^10.6.1",
-    "eslint-plugin-import": "^2.26.0",
+    "@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.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "concurrently": "^8.0.1",
+    "ember-resources": "^6.1.0",
+    "ember-source": "^5.0.0",
+    "ember-template-imports": "^3.4.2",
+    "ember-template-lint": "^5.7.3",
+    "eslint": "^8.41.0",
+    "eslint-plugin-ember": "^11.7.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-qunit": "^7.3.1",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "loader.js": "^4.7.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "qunit": "^2.19.1",
-    "qunit-dom": "^2.0.0",
-    "semantic-release": "^19.0.3",
-    "typescript": "^4.7.4",
-    "webpack": "^5.74.0"
-  },
-  "release": {
-    "branches": [
-      "main",
-      "master"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/changelog",
-      "@semantic-release/npm",
-      "@semantic-release/github",
-      "@semantic-release/git"
-    ]
+    "prettier": "^2.8.8",
+    "prettier-plugin-ember-template-tag": "^0.3.2",
+    "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",
+    "typescript": "^5.0.4",
+    "@nullvoxpopuli/limber-untyped": "0.0.0"
   },
   "volta": {
-    "node": "16.17.0",
-    "yarn": "1.22.19"
-  },
-  "engines": {
-    "node": "12.* || >= 14.*"
+    "extends": "../../../package.json"
   },
   "ember": {
     "edition": "octane"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.cjs",
+    "app-js": {}
+  },
+  "peerDependencies": {
+    "@glimmer/compiler": "^0.84.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/syntax": "^0.84.3",
+    "@glint/template": "^1.0.2",
+    "ember-resources": "^6.1.0",
+    "ember-source": "^5.0.0"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "lint:types": "glint",
+    "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",
+    "lint:hbs:fix": "pnpm -w exec lint hbs:fix",
+    "lint:prettier:fix": "pnpm -w exec lint prettier:fix",
+    "lint:prettier": "pnpm -w exec lint prettier"
   }
-}
+}

package/{addon → src/browser}/cjs/eval.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { modules } from '../known-modules';
 
+import type { ExtraModules } from '../types';
 import type Component from '@glimmer/component';
-import type { ExtraModules } from 'ember-repl/types';
 
 export function evalSnippet(
   compiled: string,
@@ -13,16 +13,20 @@ export function evalSnippet(
 } {
   const exports = {};
 
-  // https://github.com/glimmerjs/glimmer-experimental/blob/master/packages/examples/playground/src/utils/eval-snippet.ts
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
   function require(moduleName: keyof typeof modules): unknown {
     let preConfigured = modules[moduleName] || extraModules[moduleName];
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     return preConfigured || window.require(moduleName);
   }
 
+  // https://github.com/glimmerjs/glimmer-experimental/blob/master/packages/examples/playground/src/utils/eval-snippet.ts
   eval(compiled);
 
-  return exports as { default: Component; services?: { [key: string]: unknown } };
+  return Object.assign(exports, { require }) as {
+    default: Component;
+    services?: { [key: string]: unknown };
+    require: unknown;
+  };
 }

package/src/browser/cjs/index.ts

@@ -0,0 +1,44 @@
+import { preprocess, transform } from '../gjs';
+import { nameFor } from '../utils';
+import { evalSnippet } from './eval';
+
+import type { CompileResult, ExtraModules } from '../types';
+import type { ComponentLike } from '@glint/template';
+
+export interface Info {
+  code: string;
+  name: string;
+}
+
+export async function compileJS(code: string, extraModules?: ExtraModules): Promise<CompileResult> {
+  let name = nameFor(code);
+  let component: undefined | ComponentLike;
+  let error: undefined | Error;
+
+  try {
+    let compiled = await compileGJS({ code: code, name });
+
+    if (!compiled) {
+      throw new Error(`Compiled output is missing`);
+    }
+
+    component = evalSnippet(compiled, extraModules).default as unknown as ComponentLike;
+  } catch (e) {
+    error = e as Error | undefined;
+  }
+
+  return { name, component, error };
+}
+
+async function compileGJS({ code: input, name }: Info) {
+  let preprocessed = preprocess(input, name);
+  let result = await transform(preprocessed, name);
+
+  if (!result) {
+    return;
+  }
+
+  let { code } = result;
+
+  return code;
+}

package/src/browser/compile/formats.ts

@@ -0,0 +1,168 @@
+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;
+  }
+): 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,
+    });
+
+    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' };
+  }
+}