[experiment]: Demo app for glimmer-next renderer

babel.config.mjs

@@ -6,32 +6,34 @@
   test suite.
 */
 
-import { resolve, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
+// import { resolve, dirname } from 'node:path';
+// import { fileURLToPath } from 'node:url';
 
 export default {
   plugins: [
-    [
-      '@babel/plugin-transform-typescript',
-      {
-        allowDeclareFields: true,
-      },
-    ],
+    // [
+    //   '@babel/plugin-transform-typescript',
+    //   {
+    //     allowDeclareFields: true,
+    //     allExtensions: true,
+    //     onlyRemoveTypeImports: true,
+    //   },
+    // ],
     [
       'module:decorator-transforms',
       {
         runEarly: true,
         runtime: { import: 'decorator-transforms/runtime' },
       },
     ],
-    [
-      'babel-plugin-ember-template-compilation',
-      {
-        compilerPath: resolve(
-          dirname(fileURLToPath(import.meta.url)),
-          './broccoli/glimmer-template-compiler'
-        ),
-      },
-    ],
+    // [
+    //   'babel-plugin-ember-template-compilation',
+    //   {
+    //     compilerPath: resolve(
+    //       dirname(fileURLToPath(import.meta.url)),
+    //       './broccoli/glimmer-template-compiler'
+    //     ),
+    //   },
+    // ],
   ],
 };

package.json

@@ -58,6 +58,7 @@
     "unlink:all": "node bin/unlink-all.mjs"
   },
   "dependencies": {
+    "@lifeart/gxt": "0.0.53",
     "@babel/core": "^7.24.4",
     "@ember/edition-utils": "^1.2.0",
     "@glimmer/compiler": "0.92.0",

packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

@@ -28,7 +28,7 @@
 import type { Reference } from '@glimmer/reference';
 import { childRefFor, createComputeRef, createPrimitiveRef, valueForRef } from '@glimmer/reference';
 import { reifyPositional } from '@glimmer/runtime';
-import { EMPTY_ARRAY, unwrapTemplate } from '@glimmer/util';
+import { unwrapTemplate } from '@glimmer/utils';
 import {
   beginTrackFrame,
   beginUntrackFrame,
@@ -54,6 +54,7 @@
 
 export const ARGS = enumerableSymbol('ARGS');
 export const HAS_BLOCK = enumerableSymbol('HAS_BLOCK');
+const EMPTY_ARRAY  = [];
 
 export const DIRTY_TAG = Symbol('DIRTY_TAG');
 export const IS_DISPATCHING_ATTRS = Symbol('IS_DISPATCHING_ATTRS');
@@ -232,7 +233,7 @@
       return null;
     }
 
     return { positional: EMPTY_ARRAY as readonly Reference[], named };
   }
 
   /*

packages/@ember/-internals/glimmer/lib/component-managers/mount.ts

@@ -21,7 +21,7 @@
 import { capabilityFlagsFrom } from '@glimmer/manager';
 import type { Reference } from '@glimmer/reference';
 import { createConstRef, valueForRef } from '@glimmer/reference';
-import { unwrapTemplate } from '@glimmer/util';
+import { unwrapTemplate } from '@glimmer/utils';
 import type RuntimeResolver from '../resolver';
 
 interface EngineState {

packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts

@@ -21,7 +21,7 @@
 import type { Reference } from '@glimmer/reference';
 import { createConstRef, valueForRef } from '@glimmer/reference';
 import { EMPTY_ARGS } from '@glimmer/runtime';
-import { unwrapTemplate } from '@glimmer/util';
+import { unwrapTemplate } from '@glimmer/utils';
 
 import type { DynamicScope } from '../renderer';
 import type { OutletState } from '../utils/outlet';

packages/@ember/-internals/glimmer/lib/components/internal.ts

@@ -15,9 +15,20 @@
 } from '@glimmer/interfaces';
 import { setComponentTemplate, setInternalComponentManager } from '@glimmer/manager';
 import type { Reference } from '@glimmer/reference';
-import { createConstRef, isConstRef, valueForRef } from '@glimmer/reference';
+import { reference } from '@lifeart/gxt/glimmer-compatibility';
+// import { createConstRef, isConstRef, valueForRef } from '@glimmer/reference';
 import { untrack } from '@glimmer/validator';
 
+const { createConstRef } = reference;
+function isConstRef() {
+  return true;
+}
+function valueForRef(ref) {
+  if (!ref) {
+    debugger;
+  }
+  return ref.value;
+}
 function NOOP(): void {}
 
 export type EventListener = (event: Event) => void;

packages/@ember/-internals/glimmer/lib/renderer.ts

@@ -4,6 +4,7 @@
 import { getOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
 import { getViewElement, getViewId } from '@ember/-internals/views';
+import { destroyElementSync, renderComponent } from '@lifeart/gxt';
 import { assert } from '@ember/debug';
 import { _backburner, _getCurrentRunLoop } from '@ember/runloop';
 import { destroy } from '@glimmer/destroyable';
@@ -31,14 +32,14 @@
 import type { CurriedValue } from '@glimmer/runtime';
 import {
   clientBuilder,
-  curry,
+  // curry,
   DOMChanges,
   DOMTreeConstruction,
   inTransaction,
   renderMain,
   runtimeContext,
 } from '@glimmer/runtime';
-import { unwrapTemplate } from '@glimmer/util';
+import { unwrapTemplate } from '@glimmer/utils';
 import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
 import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
 import RSVP from 'rsvp';
@@ -64,6 +65,23 @@
   [BOUNDS]: Bounds | null;
 }
 
+function curry(
+  type: T,
+  spec: object | string | any,
+  owner: any,
+  args: any | null,
+  resolved = false
+) {
+  console.log('curry');
+  return {
+    type,
+    spec,
+    owner,
+    args,
+    resolved,
+  };
+}
+
 export class DynamicScope implements GlimmerDynamicScope {
   constructor(public view: View | null, public outletState: Reference<OutletState | undefined>) {}
 
@@ -129,13 +147,13 @@
   constructor(
     public root: Component | OutletView,
     public runtime: RuntimeContext,
-    context: CompileTimeCompilationContext,
+    _context: CompileTimeCompilationContext,
     owner: InternalOwner,
     template: Template,
     self: Reference<unknown>,
     parentElement: SimpleElement,
-    dynamicScope: DynamicScope,
-    builder: IBuilder
+    _dynamicScope: DynamicScope,
+    _builder: IBuilder
   ) {
     assert(
       `You cannot render \`${valueForRef(self)}\` without a template.`,
@@ -146,23 +164,16 @@
     this.result = undefined;
     this.destroyed = false;
 
-    this.render = errorLoopTransaction(() => {
-      let layout = unwrapTemplate(template).asLayout();
-
-      let iterator = renderMain(
-        runtime,
-        context,
-        owner,
-        self,
-        builder(runtime.env, { element: parentElement, nextSibling: null }),
-        layout,
-        dynamicScope
-      );
-
-      let result = (this.result = iterator.sync());
+    // console.log(layout);
 
-      // override .render function after initial render
-      this.render = errorLoopTransaction(() => result.rerender({ alwaysRevalidate: false }));
+    this.render = errorLoopTransaction(() => {
+      let layout = unwrapTemplate(template).asLayout().compile();
+      const layoutInstance = new layout(this);
+      // @ts-expect-error fine
+      this.result = renderComponent(layoutInstance, parentElement, owner);
+      this.render = errorLoopTransaction(() => {
+        // fine
+      });
     });
   }
 
@@ -195,7 +206,12 @@
 
        */
 
-      inTransaction(env, () => destroy(result!));
+      inTransaction(env, () => {
+        // @ts-expect-error foo-bar
+        destroyElementSync(result);
+        // runDestructors(result.ctx);
+        destroy(result!);
+      });
     }
   }
 }
@@ -370,6 +386,7 @@
   // renderer HOOKS
 
   appendOutletView(view: OutletView, target: SimpleElement): void {
+    console.log('appendOutletView', view, target);
     let definition = createRootOutlet(view);
     this._appendDefinition(
       view,

packages/@ember/-internals/glimmer/lib/templates/empty.ts

@@ -1,5 +1,4 @@
-import { precompileTemplate } from '@ember/template-compilation';
-export default precompileTemplate('', {
-  moduleName: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs',
-  strictMode: true,
-});
+import { hbs } from '@lifeart/gxt';
+export default function emptyTemplate() {
+  return hbs``;
+};

packages/@ember/-internals/glimmer/lib/templates/input.ts

@@ -1,7 +1,6 @@
-import { precompileTemplate } from '@ember/template-compilation';
-import { on } from '@ember/modifier';
-export default precompileTemplate(
-  `<input
+import { hbs } from '@lifeart/gxt';
+export default function InputTemplate() {
+  return hbs`<input
   {{!-- for compatibility --}}
   id={{this.id}}
   class={{this.class}}
@@ -17,12 +16,5 @@ export default precompileTemplate(
   {{on "keyup" this.keyUp}}
   {{on "paste" this.valueDidChange}}
   {{on "cut" this.valueDidChange}}
-/>`,
-  {
-    moduleName: 'packages/@ember/-internals/glimmer/lib/templates/input.hbs',
-    strictMode: true,
-    scope() {
-      return { on };
-    },
-  }
-);
+/>`;
+}

packages/@ember/-internals/glimmer/lib/templates/link-to.ts

@@ -1,30 +1,21 @@
-import { precompileTemplate } from '@ember/template-compilation';
-import { on } from '@ember/modifier';
+import { hbs } from '@lifeart/gxt';
 
-export default precompileTemplate(
-  `<a
-  {{!-- for compatibility --}}
-  id={{this.id}}
-  class={{this.class}}
+export default function LinkToTemplate() {
+  return hbs`<a
+    {{!-- for compatibility --}}
+    id={{this.id}}
+    class={{this.class}}
 
-  {{!-- deprecated attribute bindings --}}
-  role={{this.role}}
-  title={{this.title}}
-  rel={{this.rel}}
-  tabindex={{this.tabindex}}
-  target={{this.target}}
+    {{!-- deprecated attribute bindings --}}
+    role={{this.role}}
+    title={{this.title}}
+    rel={{this.rel}}
+    tabindex={{this.tabindex}}
+    target={{this.target}}
 
-  ...attributes
+    ...attributes
 
-  href={{this.href}}
+    href={{this.href}}
 
-  {{on 'click' this.click}}
->{{yield}}</a>`,
-  {
-    moduleName: 'packages/@ember/-internals/glimmer/lib/templates/link-to.hbs',
-    strictMode: true,
-    scope() {
-      return { on };
-    },
-  }
-);
+    {{on 'click' this.click}} >{{yield}}</a>`;
+}

packages/@ember/-internals/glimmer/lib/templates/outlet-helper-component.gts

@@ -0,0 +1,75 @@
+import { Component, cell } from '@lifeart/gxt';
+
+interface State {
+  outlets: {
+    main: State | undefined,
+  },
+  render: {
+    template():  () => unknown,
+    controller: unknown,
+    name: string,
+  }
+}
+
+export default class OutletHelper extends Component {
+  get state() {
+    let state = this.args.state();
+    if (typeof state === 'function') {
+      state = state();
+    }
+    return state.outlets.main || state;
+  }
+  get nextState() {
+    return () => {
+      return this.hasNext;
+    }
+  }
+  get hasNext() {
+    return this.state.outlets.main;
+  }
+  get canRender() {
+    return !!this?.state?.render;
+  }
+  get MyComponent() {
+
+    const state = this.state;
+    const render = state.render;
+    const tpl = render.template();
+    if (tpl.instance) {
+      tpl.renderCell.update(render.model);
+      return tpl.instance.template;
+    }
+    const renderCell = cell(render.model);
+    // console.log('render.model', render.model);
+    const args = {
+      get model() {
+        return renderCell.value;
+      }
+    }
+
+    render.controller['args'] = args;
+    // render.controller.model = render.model;
+    const tplComponentInstance = new tpl(args);
+    tplComponentInstance.template = tplComponentInstance.template.bind(render.controller);
+    // we need to provide stable refs here to avoid re-renders
+    tpl.instance = tplComponentInstance;
+    tpl.renderCell = renderCell;
+    return tplComponentInstance.template;
+  }
+  get model() {
+    const state = this.state;
+    const render = state.render;
+    console.log('getModel', render.model);
+    return render.model;
+  }
+  <template>
+    {{#if this.canRender}}
+    <this.MyComponent @model={{this.model}}>
+ {{#if this.hasNext}}
+    <OutletHelper @state={{this.nextState}} @root={{false}} />
+    {{/if}}
+    </this.MyComponent>
+
+    {{/if}}
+  </template>
+}