Merge pull request #1773 from NullVoxPopuli/run-live-code-extraction-…

…after-remark-plugins

Run live code extraction after remark plugins

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

@@ -219,19 +219,6 @@ function sanitizeForGlimmer(/* options */) {
 function buildCompiler(options: ParseMarkdownOptions) {
   let compiler = unified().use(remarkParse).use(remarkGfm);
 
-  // TODO: we only want to do this when we have pre > code.
-  //       code can exist inline.
-  compiler = compiler.use(liveCodeExtraction, {
-    snippets: {
-      classList: ['glimdown-snippet', 'relative'],
-    },
-    demo: {
-      classList: ['glimdown-render'],
-    },
-    copyComponent: options?.CopyComponent,
-    shadowComponent: options?.ShadowComponent,
-  });
-
   /**
    * If this were "use"d after `remarkRehype`,
    * remark is gone, and folks would need to work with rehype trees
@@ -246,6 +233,19 @@ function buildCompiler(options: ParseMarkdownOptions) {
     });
   }
 
+  // TODO: we only want to do this when we have pre > code.
+  //       code can exist inline.
+  compiler = compiler.use(liveCodeExtraction, {
+    snippets: {
+      classList: ['glimdown-snippet', 'relative'],
+    },
+    demo: {
+      classList: ['glimdown-render'],
+    },
+    copyComponent: options?.CopyComponent,
+    shadowComponent: options?.ShadowComponent,
+  });
+
   // .use(() => (tree) => visit(tree, (node) => console.log('i', node)))
   // remark rehype is needed to convert markdown to HTML
   // However, it also changes all the nodes, so we need another pass

packages/ember-repl/test-app/ember-cli-build.js

@@ -1,10 +1,16 @@
 'use strict';
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const path = require('path');
 
 module.exports = function (defaults) {
+  const sideWatch = require('@embroider/broccoli-side-watch');
+
   const app = new EmberApp(defaults, {
     // Add options here
+    trees: {
+      app: sideWatch('app', { watching: [path.join(__dirname, '../addon/dist')] }),
+    },
     'ember-cli-babel': {
       enableTypeScriptTransform: true,
     },

packages/ember-repl/test-app/package.json

@@ -39,6 +39,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.2.1",
     "@ember/test-waiters": "^3.1.0",
+    "@embroider/broccoli-side-watch": "0.0.2-unstable.ba9fd29",
     "@embroider/compat": "3.5.3",
     "@embroider/core": "3.4.12",
     "@embroider/test-setup": "4.0.0",

packages/ember-repl/test-app/tests/rendering/compile-gjs-test.gts

@@ -1,13 +1,18 @@
 import { assert as debugAssert } from '@ember/debug';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { module, test } from 'qunit';
+import QUnit, { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
 import { stripIndent } from 'common-tags';
 import { compile } from 'ember-repl';
 
 import type { ComponentLike } from '@glint/template';
 
+function unexpectedErrorHandler(error: unknown) {
+  console.error(error);
+  QUnit.assert.notOk(`CHECK CONSOLE: did not expect error: ${error}`);
+}
+
 module('Rendering | compile()', function (hooks) {
   setupRenderingTest(hooks);
 
@@ -21,6 +26,8 @@ module('Rendering | compile()', function (hooks) {
         import Component from '@glimmer/component';
         import { on } from '@ember/modifier';
 
+        const { console } = globalThis;
+
         <template>
           <button {{on "click" console.log}}>Click</button>
         </template>
@@ -31,7 +38,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'gjs',
         onSuccess: (comp) => (component = comp),
-        onError: () => assert.notOk('did not expect error'),
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },

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

@@ -1,6 +1,6 @@
 import { assert as debugAssert } from '@ember/debug';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { module, test } from 'qunit';
+import QUnit, { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
 import { stripIndent } from 'common-tags';
@@ -15,6 +15,11 @@ import type { Parent } from 'unist';
 type UnifiedPlugin = PluggableList[0];
 type Build = (plugin?: UnifiedPlugin) => Promise<void>;
 
+function unexpectedErrorHandler(error: unknown) {
+  console.error(error);
+  QUnit.assert.notOk(`CHECK CONSOLE: did not expect error: ${error}`);
+}
+
 module('Rendering | compile()', function (hooks) {
   setupRenderingTest(hooks);
 
@@ -36,7 +41,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'glimdown',
         onSuccess: (comp) => (component = comp),
-        onError: () => assert.notOk('did not expect error'),
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },
@@ -66,7 +71,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'glimdown',
         onSuccess: (comp) => (component = comp),
-        onError: () => assert.notOk('did not expect error'),
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },
@@ -123,7 +128,7 @@ module('Rendering | compile()', function (hooks) {
                 format: 'glimdown',
                 remarkPlugins: [plugin],
                 onSuccess: (comp) => (component = comp),
-                onError: (e) => assert.notOk('did not expect error. ' + e),
+                onError: unexpectedErrorHandler,
                 onCompileStart: () => {
                   /* not used */
                 },
@@ -183,7 +188,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'glimdown',
         onSuccess: (comp) => (component = comp),
-        onError: () => assert.notOk('did not expect error'),
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },
@@ -221,10 +226,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'glimdown',
         onSuccess: (comp) => (component = comp),
-        onError: (e) => {
-          console.error(e);
-          assert.notOk('did not expect error');
-        },
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },
@@ -253,10 +255,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'glimdown',
         onSuccess: (comp) => (component = comp),
-        onError: (e) => {
-          console.error(e);
-          assert.notOk('did not expect error');
-        },
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },
@@ -284,6 +283,64 @@ module('Rendering | compile()', function (hooks) {
 
       assert.dom('h2').containsText('Hello');
     });
+
+    test('plugins can add code snippets', async function (assert) {
+      setupOnerror((e) => {
+        console.error(e);
+        assert.notOk('This should not error');
+      });
+
+      let snippet = `# Hello
+
+\`\`\`gjs live
+<template>not a greeting</template>
+\`\`\`
+
+<Greeting />
+`;
+
+      let component: ComponentLike | undefined;
+
+      await compile(snippet, {
+        format: 'glimdown',
+        onSuccess: (comp) => (component = comp),
+        onError: unexpectedErrorHandler,
+        onCompileStart: () => {
+          /* not used */
+        },
+
+        remarkPlugins: [
+          function codeSwapper(/* options */) {
+            return (tree: Parameters<typeof visit>[0]) => {
+              visit(tree, ['html'], function (node, index, parent: Parent) {
+                if (!parent) return;
+                if (undefined === index) return;
+                if (!('value' in node)) return;
+                if (node.value !== '<Greeting />') return;
+
+                parent.children[index] = {
+                  type: 'code',
+                  lang: 'gjs',
+                  meta: 'live',
+                  value: `
+                    <template><p class="greeting">a greeting</p></template>
+                  `,
+                  // where is the type for a code node?
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                } as any;
+              });
+            };
+          },
+        ],
+      });
+
+      debugAssert(`[BUG]`, component);
+
+      await render(component);
+
+      assert.dom('p').containsText('a greeting');
+    });
+
     test('adding a rehype plugin', async function (assert) {
       setupOnerror((e) => {
         console.error(e);
@@ -297,10 +354,7 @@ module('Rendering | compile()', function (hooks) {
       await compile(snippet, {
         format: 'glimdown',
         onSuccess: (comp) => (component = comp),
-        onError: (e) => {
-          console.error(e);
-          assert.notOk('did not expect error');
-        },
+        onError: unexpectedErrorHandler,
         onCompileStart: () => {
           /* not used */
         },