repl-sdk 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "repl-sdk",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "exports": {
     ".": {
@@ -12,6 +12,11 @@
       "default": "./src/compilers/markdown/parse.js"
     }
   },
+  "repository": {
+    "type": "https",
+    "url": "https://github.com/NullVoxPopuli/limber.git",
+    "directory": "packages/repl-sdk"
+  },
   "ember-addon": {
     "version": 2,
     "type": "addon"
@@ -90,8 +95,8 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
-    "codemirror-lang-glimmer": "^2.0.3",
     "codemirror-lang-glimdown": "^2.0.3",
+    "codemirror-lang-glimmer": "^2.0.3",
     "codemirror-lang-glimmer-js": "^2.0.3"
   },
   "volta": {

package/src/compilers/ember/gjs.js

@@ -1,5 +1,4 @@
-// import { makeOwner } from './owner.js';
-import { renderApp } from './render-app-island.js';
+import { makeOwner } from './owner.js';
 
 let elementId = 0;
 
@@ -27,7 +26,7 @@ const buildDependencies = [
    * because the underlying format / bytecodes / etc is private,
    * and can change between versions of ember-source.
    */
-  'ember-source/dist/ember-template-compiler.js',
+  'ember-source/ember-template-compiler/index.js',
   /**
    * Converts gjs/gts to standard js/ts
    */
@@ -168,43 +167,12 @@ export async function compiler(config, api) {
 
       element.setAttribute(attribute, '');
 
-      // ------------------------------------------------
-      // https://github.com/emberjs/ember.js/issues/21023
-      // ------------------------------------------------
-      //
-      // const { renderComponent } = await compiler.tryResolve('@ember/renderer');
-      //
-      // const owner = makeOwner(config.owner);
-      // const result = renderComponent(compiled, { into: element, owner });
-      //
-      // return () => result.destroy();
-
-      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,
-        },
-      });
+      const { renderComponent } = await compiler.tryResolve('@ember/renderer');
+
+      const owner = makeOwner(config.owner);
+      const result = renderComponent(compiled, { into: element, owner });
+
+      return () => result.destroy();
     },
     handlers: {
       js: async (text) => {

package/src/compilers/ember/gmd.js

@@ -3,7 +3,6 @@
  */
 import { assert, isRecord } from '../../utils.js';
 import { buildCodeFenceMetaUtils } from '../markdown/utils.js';
-import { renderApp } from './render-app-island.js';
 
 let elementId = 0;
 
@@ -97,48 +96,15 @@ export async function compiler(config, api) {
 
       element.setAttribute(attribute, '');
 
-      // ------------------------------------------------
-      // https://github.com/emberjs/ember.js/issues/21023
-      // ------------------------------------------------
-      //
-      // const { renderComponent } = await compiler.tryResolve('@ember/renderer');
-      //
-      // const result = renderComponent(compiled, {
-      //   into: element,
-      //   owner: userOptions.owner,
-      // });
-      //
-      // const destroy = () => result.destroy();
-      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,
-        },
+      const { renderComponent } = await compiler.tryResolve('@ember/renderer');
+
+      const result = renderComponent(compiled, {
+        into: element,
+        owner: userOptions.owner,
       });
 
+      const destroy = () => result.destroy();
+
       /**
        * @type {(() => void)[]}
        */

package/src/compilers/ember/hbs.js

@@ -1,6 +1,5 @@
 import { isRecord } from '../../utils.js';
-// import { makeOwner } from './owner.js';
-import { renderApp } from './render-app-island.js';
+import { makeOwner } from './owner.js';
 
 let elementId = 0;
 
@@ -66,41 +65,11 @@ export async function compiler(config, api) {
 
       element.setAttribute(attribute, '');
 
-      // ------------------------------------------------
-      // https://github.com/emberjs/ember.js/issues/21023
-      // ------------------------------------------------
-      //
-      // const { renderComponent } = await compiler.tryResolve('@ember/renderer');
-      // const owner = makeOwner(config.owner);
-      // const result = renderComponent(compiled, { into: element, owner });
-      //
-      // return () => result.destroy();
-      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',
-        ]);
+      const { renderComponent } = await compiler.tryResolve('@ember/renderer');
+      const owner = makeOwner(config.owner);
+      const result = renderComponent(compiled, { into: element, owner });
 
-      return renderApp({
-        element,
-        selector: `[${attribute}]`,
-        component: compiled,
-        log: compiler.announce,
-        modules: {
-          application,
-          destroyable,
-          resolver,
-          router,
-          route,
-          testWaiters,
-          runloop,
-        },
-      });
+      return () => result.destroy();
     },
   };
 

package/src/compilers/markdown/build-compiler.js

@@ -44,8 +44,8 @@ export function buildCompiler(options) {
   // @ts-ignore - unified processor types are complex and change as plugins are added
   compiler = compiler.use(() => (tree) => {
     visit(tree, 'html', function (node) {
-      // Check if this html node is a PascalCase component
-      if (typeof node.value === 'string' && node.value.match(/^<[A-Z][a-zA-Z0-9]/)) {
+      // Check if this html node is a PascalCase component (opening or closing tag)
+      if (typeof node.value === 'string' && node.value.match(/^<\/?[A-Z][a-zA-Z0-9]/)) {
         // Add a marker to the node's data that remarkRehype will preserve
         // remark-rehype with allowDangerousHtml will turn this into a text node,
         // and the data should be preserved
@@ -63,7 +63,7 @@ export function buildCompiler(options) {
           if (
             child.type === 'html' &&
             typeof child.value === 'string' &&
-            child.value.match(/^<[A-Z][a-zA-Z0-9]/)
+            child.value.match(/^<\/?[A-Z][a-zA-Z0-9]/)
           ) {
             if (!child.data) child.data = {};
             child.data.isPascalCaseComponent = true;
@@ -154,7 +154,7 @@ export function buildCompiler(options) {
         // Pattern: <PascalCaseName followed by whitespace, > or @
         if (
           (nodeObj.type === 'text' || nodeObj.type === 'raw' || nodeObj.type === 'html') &&
-          nodeObj.value.match(/<[A-Z][a-zA-Z0-9]*(\s|>|@)/)
+          nodeObj.value.match(/<\/?[A-Z][a-zA-Z0-9]*(\s|>|@)/)
         ) {
           nodeObj.type = 'glimmer_raw';
 

package/src/compilers/markdown/parse.test.ts

@@ -104,6 +104,33 @@ describe('default features', () => {
       `);
   });
 
+  it('allows components to wrap markdown content', async () => {
+    const result = await parseMarkdown(
+      [
+        `# Title`,
+        '',
+        'Text',
+        '',
+        '<Callout>',
+        '',
+        'Info [text](https://url.url)',
+        '',
+        '</Callout>',
+        '',
+      ].join('\n'),
+      { ...defaults }
+    );
+
+    expect(result.codeBlocks).toMatchInlineSnapshot(`[]`);
+    expect(result.text).toMatchInlineSnapshot(`
+      "<h1 id="title">Title</h1>
+      <p>Text</p>
+      <Callout>
+      <p>Info <a href="https://url.url">text</a></p>
+      </Callout>"
+    `);
+  });
+
   describe('does not', () => {
     it(`mistakenly transform text in codefences (previewed text is transformed though)`, async () => {
       const result = await parseMarkdown(

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

@@ -1,83 +0,0 @@
-/** @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);
-  };
-}