Merge pull request #1668 from NullVoxPopuli/fix-TopLevelScope-ember-repl

[ember-repl] Fix an issue where hbs live blocks did not have scope properly forwarded to them and make errors about missing scope clearer, rather than 'tried to render undefined, how dare you'

Author: NullVoxPopuli

packages/ember-repl/addon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-repl",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.8",
   "description": "Addon for enabling REPL and Playground creation with Ember/Glimmer",
   "keywords": [
     "ember-addon"

packages/ember-repl/addon/src/browser/compile/formats.ts

@@ -5,7 +5,7 @@ import type { ExtractedCode } from './markdown-to-ember.ts';
 import type { UnifiedPlugin } from './types.ts';
 import type { EvalImportMap, ScopeMap } from './types.ts';
 
-async function compileAll(js: { code: string }[], importMap?: EvalImportMap) {
+async function compileGJSArray(js: { code: string }[], importMap?: EvalImportMap) {
   let modules = await Promise.all(
     js.map(async ({ code }) => {
       return await compileGJS(code, importMap);
@@ -46,15 +46,18 @@ export async function compileHBS(
 
 async function extractScope(
   liveCode: ExtractedCode[],
-  importMap?: EvalImportMap
+  options?: {
+    importMap?: EvalImportMap;
+    topLevelScope?: ScopeMap;
+  }
 ): 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);
+    let compiled = await compileGJSArray(js, options?.importMap);
 
     await Promise.all(
       compiled.map(async (info) => {
@@ -74,7 +77,7 @@ async function extractScope(
   }
 
   for (let { code } of hbs) {
-    let compiled = await compileHBS(code);
+    let compiled = await compileHBS(code, { scope: options?.topLevelScope });
 
     scope.push(compiled);
   }
@@ -92,7 +95,6 @@ export async function compileMD(
     ShadowComponent?: string;
   }
 ): Promise<CompileResult & { rootTemplate?: string }> {
-  let importMap = options?.importMap;
   let topLevelScope = options?.topLevelScope ?? {};
   let rootTemplate: string;
   let liveCode: ExtractedCode[];
@@ -126,7 +128,7 @@ export async function compileMD(
    */
   if (liveCode.length > 0) {
     try {
-      scope = await extractScope(liveCode, importMap);
+      scope = await extractScope(liveCode, options);
     } catch (error) {
       console.info({ scope });
       console.error(error);

packages/ember-repl/addon/src/browser/hbs.ts

@@ -75,7 +75,15 @@ function compileTemplate(source: string, { moduleName, scope = {} }: CompileTemp
   // Copied from @glimmer/compiler/lib/compiler#precompile
   let [block, usedLocals] = precompileJSON(source, options);
 
-  let usedScope = usedLocals.map((key: string) => localScope[key]);
+  let usedScope = usedLocals.map((key: string) => {
+    let value = localScope[key];
+
+    if (!value) {
+      throw new Error(`Attempt to use ${key} in compiled hbs, but it was not available in scope.`);
+    }
+
+    return value;
+  });
 
   let blockJSON = JSON.stringify(block);
   let templateJSONObject = {

packages/ember-repl/test-app/tests/rendering/markdown-test.gts

@@ -164,4 +164,80 @@ module('Rendering | compile()', function (hooks) {
       });
     });
   });
+
+  module('passing options', function () {
+    test('adding to top-level scope', async function (assert) {
+      const text = `This is a local component added to topLevelScope`;
+      const LocalComponent = <template>{{text}}</template>;
+
+      setupOnerror(() => {
+        assert.notOk('This should not error');
+      });
+
+      let snippet = stripIndent`
+        <LocalComponent />
+      `;
+
+      let component: ComponentLike | undefined;
+
+      await compile(snippet, {
+        format: 'glimdown',
+        onSuccess: (comp) => (component = comp),
+        onError: () => assert.notOk('did not expect error'),
+        onCompileStart: () => {
+          /* not used */
+        },
+        topLevelScope: {
+          LocalComponent,
+        },
+      });
+
+      debugAssert(`[BUG]`, component);
+
+      await render(component);
+
+      assert.dom().hasText(text);
+    });
+
+    test('adding to top-level scope applies to rendered "hbs" codefences', async function (assert) {
+      const text = `This is a local component added to topLevelScope`;
+      const LocalComponent = <template>{{text}}</template>;
+
+      setupOnerror((e) => {
+        console.error(e);
+        assert.notOk('This should not error');
+      });
+
+      let snippet = stripIndent`
+        Using a live hbs tag is how we can syntax highlighting
+
+        \`\`\`hbs live
+        <LocalComponent />
+        \`\`\`
+      `;
+
+      let component: ComponentLike | undefined;
+
+      await compile(snippet, {
+        format: 'glimdown',
+        onSuccess: (comp) => (component = comp),
+        onError: (e) => {
+          console.error(e);
+          assert.notOk('did not expect error');
+        },
+        onCompileStart: () => {
+          /* not used */
+        },
+        topLevelScope: {
+          LocalComponent,
+        },
+      });
+
+      debugAssert(`[BUG]`, component);
+
+      await render(component);
+
+      assert.dom().containsText(text);
+    });
+  });
 });