demo-app

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

@@ -28,7 +28,7 @@ import type {
 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 @@ import { processComponentArgs } from '../utils/process-args';
 
 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');

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

@@ -21,7 +21,7 @@ import type { Nullable } from '@ember/-internals/utility-types';
 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 { capabilityFlagsFrom } from '@glimmer/manager';
 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/helpers/internal-helper.ts

@@ -1,7 +1,10 @@
 import type { InternalOwner } from '@ember/-internals/owner';
 import type { Helper, HelperDefinitionState } from '@glimmer/interfaces';
-import { setInternalHelperManager } from '@glimmer/manager';
+// import { setInternalHelperManager } from '@glimmer/manager';
 
 export function internalHelper(helper: Helper<InternalOwner>): HelperDefinitionState {
-  return setInternalHelperManager(helper, {});
+  return function () {
+    console.log('internal helper', this, [...arguments]);
+    return helper(...arguments);
+  }
 }

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

@@ -4,6 +4,7 @@ import type { InternalOwner } from '@ember/-internals/owner';
 import { getOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
 import { getViewElement, getViewId } from '@ember/-internals/views';
+import { renderComponent, runDestructors } from '@lifeart/gxt';
 import { assert } from '@ember/debug';
 import { _backburner, _getCurrentRunLoop } from '@ember/runloop';
 import { destroy } from '@glimmer/destroyable';
@@ -31,14 +32,14 @@ import { createConstRef, UNDEFINED_REFERENCE, valueForRef } from '@glimmer/refer
 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 @@ export interface View {
   [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 @@ class RootState {
   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 @@ class RootState {
     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,11 @@ class RootState {
 
        */
 
-      inTransaction(env, () => destroy(result!));
+      inTransaction(env, () => {
+        // @ts-expect-error foo-bar
+        runDestructors(result.ctx);
+        destroy(result!);
+      });
     }
   }
 }
@@ -370,6 +385,7 @@ export class Renderer {
   // 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/outlet-helper-component.gts

@@ -0,0 +1,64 @@
+import { Component } from '@lifeart/gxt';
+
+interface State {
+  outlets: {
+    main: State | undefined,
+  },
+  render: {
+    template():  () => unknown,
+    controller: unknown,
+    name: string,
+  }
+}
+
+export default class OutletHelper extends Component {
+  get state() {
+    return this.args.state().outlets.main || this.args.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();
+    const args = {
+      get model() {
+        return render.model;
+      }
+    }
+    if (tpl.instance) {
+      return tpl.instance.template;
+    }
+    render.controller['args'] = args;
+    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;
+    return tplComponentInstance.template;
+  }
+  get model() {
+    const state = this.state;
+    const render = state.render;
+    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>
+}

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

@@ -1,10 +1,15 @@
 import { precompileTemplate } from '@ember/template-compilation';
+import { hbs } from '@lifeart/gxt';
 import { outletHelper } from '../syntax/outlet';
+import Outlet from './outlet-helper-component';
 
-export default precompileTemplate(`{{component (outletHelper)}}`, {
-  moduleName: 'packages/@ember/-internals/glimmer/lib/templates/outlet.hbs',
-  strictMode: true,
-  scope() {
-    return { outletHelper };
-  },
-});
+export default (owner) => {
+  console.log('outlet factory', owner);
+
+  return function(args) {
+    console.log('outlet', this, owner, ...arguments);
+    return hbs`{{#let (component Outlet state=(args.state)) as |Outlet|}}
+      <div>[main outlet template]<Outlet /></div>
+    {{/let}}`;
+  }
+}

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

@@ -1,5 +1,22 @@
-import { precompileTemplate } from '@ember/template-compilation';
-export default precompileTemplate(`{{component this}}`, {
-  moduleName: 'packages/@ember/-internals/glimmer/lib/templates/root.hbs',
-  strictMode: true,
-});
+import { hbs, $_fin } from '@lifeart/gxt';
+export default function(owner) {
+  console.log('root-template init', owner);
+  return function(rootState) {
+    // console.log('root-template - render', [this], [...arguments]);
+    // temp1.root.template
+    // console.log(...arguments);
+    // return function() {
+    //   console.log(...arguments);
+    //   return $_fin([...rootState.root.template()], this);
+    // }
+    // debugger;
+    const state = rootState.root.ref;
+    console.log('rootState', state);
+    return hbs`
+      {{log 'root-template-create' this rootState}}
+      {{#let (component rootState.root.template state=state root=true) as |Layout|}}
+        <Layout />
+      {{/let}}
+    `;
+  }
+}

packages/@ember/-internals/glimmer/lib/views/outlet.ts

@@ -8,12 +8,14 @@ import { assert } from '@ember/debug';
 import { schedule } from '@ember/runloop';
 import type { Template, TemplateFactory } from '@glimmer/interfaces';
 import type { Reference } from '@glimmer/reference';
-import { createComputeRef, updateRef } from '@glimmer/reference';
+import { cellFor } from '@lifeart/gxt';
+// import { reference } from '@lifeart/gxt/glimmer-compatibility';
 import { consumeTag, createTag, dirtyTag } from '@glimmer/validator';
 import type { SimpleElement } from '@simple-dom/interface';
 import type { OutletDefinitionState } from '../component-managers/outlet';
 import type { Renderer } from '../renderer';
 import type { OutletState } from '../utils/outlet';
+// const { createComputeRef, updateRef } = reference;
 
 export interface BootEnvironment {
   hasDOM: boolean;
@@ -46,6 +48,7 @@ export default class OutletView {
     application: InternalOwner;
     template: TemplateFactory;
   }): OutletView {
+    console.log('outlet-view create', options);
     let { environment: _environment, application: namespace, template: templateFactory } = options;
     let owner = getOwner(options);
     assert('OutletView is unexpectedly missing an owner', owner);
@@ -75,17 +78,15 @@ export default class OutletView {
         template,
       },
     };
+    console.log('outletStateTag', outletStateTag);
 
-    let ref = (this.ref = createComputeRef(
-      () => {
-        consumeTag(outletStateTag);
-        return outletState;
-      },
-      (state: OutletState) => {
-        dirtyTag(outletStateTag);
-        outletState.outlets['main'] = state;
-      }
-    ));
+    cellFor(outletState.outlets, 'main');
+
+    let ref = (this.ref = outletState);
+
+    console.log('ref', ref);
+
+    // ref.compute();
 
     this.state = {
       ref,
@@ -117,7 +118,10 @@ export default class OutletView {
   }
 
   setOutletState(state: OutletState): void {
-    updateRef(this.ref, state);
+    // debugger;
+    //  @todo - fix re-renders
+    this.ref.outlets['main'] = state;
+    // updateRef(this.ref, state);
   }
 
   destroy(): void {

packages/@ember/-internals/metal/lib/decorator.ts

@@ -76,7 +76,7 @@ export abstract class ComputedDescriptor {
   abstract set(obj: object, keyName: string, value: any | null | undefined): any | null | undefined;
 }
 
-export let COMPUTED_GETTERS: WeakSet<() => unknown>;
+export let COMPUTED_GETTERS: WeakSet<() => unknown> = new WeakSet();
 
 if (DEBUG) {
   COMPUTED_GETTERS = new WeakSet();