repl-sdk 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "repl-sdk",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "exports": {
     ".": {
@@ -85,8 +85,8 @@
     "resolve.imports": "^2.0.3",
     "tarparser": "^0.0.5",
     "codemirror-lang-glimdown": "2.0.1",
-    "codemirror-lang-glimmer-js": "2.0.1",
-    "codemirror-lang-glimmer": "2.0.1"
+    "codemirror-lang-glimmer": "2.0.1",
+    "codemirror-lang-glimmer-js": "2.0.1"
   },
   "volta": {
     "extends": "../../package.json"

package/src/compilers/ember/gjs.js

@@ -1,4 +1,5 @@
-import { makeOwner } from './owner.js';
+// import { makeOwner } from './owner.js';
+import { renderApp } from './render-app-island.js';
 
 let elementId = 0;
 
@@ -167,12 +168,43 @@ export async function compiler(config, api) {
 
       element.setAttribute(attribute, '');
 
-      const { renderComponent } = await compiler.tryResolve('@ember/renderer');
-
-      const owner = makeOwner(config.owner);
-      const result = renderComponent(compiled, { into: element, owner });
-
-      return () => result.destroy();
+      // ------------------------------------------------
+      // 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,
+        },
+      });
     },
     handlers: {
       js: async (text) => {

package/src/compilers/ember/gmd.js

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

package/src/compilers/ember/hbs.js

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

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

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