feature: suspense api

Author: lifeart

src/components/Application.gts

@@ -3,6 +3,7 @@ import {
   runDestructors,
   Component,
   tracked,
+  getRoot,
 } from '@lifeart/gxt';
 import { PageOne } from './pages/PageOne.gts';
 import { PageTwo } from './pages/PageTwo.gts';
@@ -11,8 +12,10 @@ import { Benchmark } from './pages/Benchmark.gts';
 import { NestedRouter } from './pages/NestedRouter.gts';
 import { router } from './../services/router';
 
+let version = 0;
 export class Application extends Component {
   router = router;
+  version = version++;
   @tracked
   now = Date.now();
   rootNode!: HTMLElement;
@@ -23,7 +26,7 @@ export class Application extends Component {
     benchmark: Benchmark,
   };
   async destroy() {
-    await Promise.all(runDestructors(this));
+    await Promise.all(runDestructors(getRoot()!));
     this.rootNode.innerHTML = '';
     this.rootNode = null!;
   }

src/components/Fallback.gts

@@ -0,0 +1,11 @@
+import { Component } from '@lifeart/gxt';
+
+export default class Fallback extends Component {
+  <template>
+    <div class='inline-flex flex-col items-center'>
+      <div
+        class='w-28 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse mt-2 mb-1'
+      ></div>
+    </div>
+  </template>
+}

src/components/LoadMeAsync.gts

@@ -0,0 +1,29 @@
+import { context } from '@/utils/context';
+import { SUSPENSE_CONTEXT } from '@/utils/suspense';
+import { Component } from '@lifeart/gxt';
+
+export default class LoadMeAsync extends Component<{
+  Args: { name: string };
+}> {
+  constructor() {
+    // @ts-ignore
+    super(...arguments);
+    console.log('LoadMeAsync created');
+    this.suspense?.start();
+  }
+  @context(SUSPENSE_CONTEXT) suspense!: {
+    start: () => void;
+    end: () => void;
+  };
+  loadData = (_: HTMLElement) => {
+    setTimeout(() => {
+      this.suspense?.end();
+      console.log('Data loaded');
+    }, 2000);
+  };
+  <template>
+    {{log 'loadMeAsync rendered'}}
+    <div {{this.loadData}} class='inline-flex flex-col items-center'>Async
+      component "{{@name}}"</div>
+  </template>
+}

src/components/pages/PageOne.gts

@@ -1,6 +1,10 @@
-import { Component, cell } from '@lifeart/gxt';
+import { cell } from '@lifeart/gxt';
 import { Smile } from './page-one/Smile';
 import { Table } from './page-one/Table.gts';
+import { Suspense, lazy } from '@/utils/suspense';
+import Fallback from '@/components/Fallback';
+
+const LoadMeAsync = lazy(() => import('@/components/LoadMeAsync'));
 
 function Controls() {
   const color = cell('red');
@@ -28,7 +32,21 @@ export function PageOne() {
     <div class='text-white p-3'>
       <Controls />
       <br />
-
+      <Suspense @fallback={{Fallback}}>
+        <LoadMeAsync @name='foo' />
+        <Suspense @fallback={{Fallback}}>
+          <LoadMeAsync @name='bar' />
+          <Suspense @fallback={{Fallback}}>
+            <LoadMeAsync @name='baz' />
+            <Suspense @fallback={{Fallback}}>
+              <LoadMeAsync @name='boo' />
+              <Suspense @fallback={{Fallback}}>
+                <LoadMeAsync @name='doo' />
+              </Suspense>
+            </Suspense>
+          </Suspense>
+        </Suspense>
+      </Suspense>
       <div>Imagine a world where the robust, mature ecosystems of development
         tools meet the cutting-edge performance of modern compilers. That's what
         we're building here! Our platform takes the best of established

src/utils/benchmark/benchmark.ts

@@ -3,26 +3,35 @@ import { withRehydration } from '@/utils/ssr/rehydration';
 import { getDocument } from '@/utils/dom-api';
 import { measureRender } from '@/utils/benchmark/measure-render';
 import { setResolveRender } from '@/utils/runtime';
+import { runDestructors } from '@/utils/component';
+import { getRoot, resetRoot } from '@/utils/dom';
 
 export function createBenchmark() {
   return {
     async render() {
       await measureRender('render', 'renderStart', 'renderEnd', () => {
         const root = getDocument().getElementById('app')!;
+        let appRef: Application | null = null; 
         if (root.childNodes.length > 1) {
           try {
             // @ts-expect-error
             withRehydration(function () {
-              return new Application(root);
+              appRef = new Application(root);
+              return appRef;
             }, root);
             console.info('Rehydration successful');
           } catch (e) {
-            console.error('Rehydration failed, fallback to normal render', e);
-            root.innerHTML = '';
-            new Application(root);
+            (async() => {
+              console.error('Rehydration failed, fallback to normal render', e);
+              await runDestructors(getRoot()!);
+              resetRoot();
+              root.innerHTML = '';
+              appRef = new Application(root);
+            })();
+           
           }
         } else {
-          new Application(root);
+          appRef = new Application(root);
         }
       });
 

src/utils/context.ts

@@ -1,23 +1,39 @@
 import { registerDestructor } from './glimmer/destroyable';
 import { Component } from './component';
-import { PARENT_GRAPH } from './shared';
-import { getRoot } from './dom';
+import { $args, PARENT_GRAPH } from './shared';
+import { $PARENT_SYMBOL, getRoot } from './dom';
 
 const CONTEXTS = new WeakMap<Component<any>, Map<symbol, any>>();
 
-export function context(contextKey: symbol): (klass: any, key: string, descriptor?: PropertyDescriptor & { initializer?: () => any } ) => void {
+export function getAnyContext<T>(ctx: Component<any>, key: symbol): T | null {
+  return (
+    getContext(ctx, key) ||
+    getContext(ctx[$args][$PARENT_SYMBOL], key) ||
+    getContext(getRoot()!, key)
+  );
+}
+
+export function context(
+  contextKey: symbol,
+): (
+  klass: any,
+  key: string,
+  descriptor?: PropertyDescriptor & { initializer?: () => any },
+) => void {
   return function contextDecorator(
     _: any,
     __: string,
     descriptor?: PropertyDescriptor & { initializer?: () => any },
   ) {
     return {
       get() {
-        return getContext(this, contextKey) || getContext(getRoot()!, contextKey) || descriptor!.initializer?.call(this);
+        return (
+          getAnyContext(this, contextKey) || descriptor!.initializer?.call(this)
+        );
       },
-    }
-  }
-};
+    };
+  };
+}
 
 export function getContext<T>(ctx: Component<any>, key: symbol): T | null {
   let current: Component<any> | null = ctx;

src/utils/control-flow/if.ts

@@ -22,6 +22,8 @@ import {
 } from '@/utils/shared';
 import { opcodeFor } from '@/utils/vm';
 
+export type IfFunction = () => boolean;
+
 export class IfCondition {
   isDestructorRunning = false;
   prevComponent: GenericReturnType | null = null;
@@ -33,15 +35,15 @@ export class IfCondition {
   placeholder: Comment;
   throwedError: Error | null = null;
   destroyPromise: Promise<any> | null = null;
-  trueBranch: (ifContext: Component<any>) => GenericReturnType;
-  falseBranch: (ifContext: Component<any>) => GenericReturnType;
+  trueBranch: (ifContext: IfCondition) => GenericReturnType;
+  falseBranch: (ifContext: IfCondition) => GenericReturnType;
   constructor(
     parentContext: Component<any>,
-    maybeCondition: Cell<boolean>,
+    maybeCondition: Cell<boolean> | IfFunction | MergedCell,
     target: DocumentFragment | HTMLElement,
     placeholder: Comment,
-    trueBranch: (ifContext: Component<any>) => GenericReturnType,
-    falseBranch: (ifContext: Component<any>) => GenericReturnType,
+    trueBranch: (ifContext: IfCondition) => GenericReturnType,
+    falseBranch: (ifContext: IfCondition) => GenericReturnType,
   ) {
     this.target = target;
     this.placeholder = placeholder;
@@ -111,7 +113,7 @@ export class IfCondition {
     this.renderBranch(nextBranch, this.runNumber);
   }
   renderBranch(
-    nextBranch: (ifContext: Component<any>) => GenericReturnType,
+    nextBranch: (ifContext: IfCondition) => GenericReturnType,
     runNumber: number,
   ) {
     if (this.destroyPromise) {
@@ -162,11 +164,11 @@ export class IfCondition {
     this.destroyPromise = destroyElement(branch);
     await this.destroyPromise;
   }
-  renderState(nextBranch: (ifContext: Component<any>) => GenericReturnType) {
+  renderState(nextBranch: (ifContext: IfCondition) => GenericReturnType) {
     if (IS_DEV_MODE) {
       $DEBUG_REACTIVE_CONTEXTS.push(`if:${String(this.lastValue)}`);
     }
-    this.prevComponent = nextBranch(this as unknown as Component<any>);
+    this.prevComponent = nextBranch(this);
     if (IS_DEV_MODE) {
       $DEBUG_REACTIVE_CONTEXTS.pop();
     }
@@ -178,6 +180,9 @@ export class IfCondition {
     return;
   }
   async destroy() {
+    if (this.isDestructorRunning) {
+      throw new Error('Already destroying');
+    }
     this.isDestructorRunning = true;
     if (this.placeholder.isConnected) {
       // should be handled on the top level
@@ -186,7 +191,7 @@ export class IfCondition {
     await this.destroyBranch();
     await Promise.all(this.destructors.map((destroyFn) => destroyFn()));
   }
-  setupCondition(maybeCondition: Cell<boolean>) {
+  setupCondition(maybeCondition: Cell<boolean> | IfFunction | MergedCell) {
     if (isFn(maybeCondition)) {
       this.condition = formula(
         () => {

src/utils/dom.ts

@@ -45,8 +45,8 @@ import {
 } from './shared';
 import { isRehydrationScheduled } from './ssr/rehydration';
 import { createHotReload } from './hmr';
-import { IfCondition } from './control-flow/if';
 import { CONSTANTS } from '../../plugins/symbols';
+import { IfCondition, type IfFunction } from './control-flow/if';
 
 type RenderableType = Node | ComponentReturnType | string | number;
 type ShadowRootMode = 'open' | 'closed' | null;
@@ -69,14 +69,15 @@ type Props = [TagProp[], TagAttr[], TagEvent[], FwType?];
 
 type Fn = () => unknown;
 type InElementFnArg = () => HTMLElement;
-type BranchCb = () => ComponentReturnType | Node;
+type BranchCb = (ctx: IfCondition) => ComponentReturnType | Node | null;
 
 // EMPTY DOM PROPS
 export const $_edp = [[], [], []] as Props;
 export const $_emptySlot = Object.seal(Object.freeze({}));
 
 export const $SLOTS_SYMBOL = Symbol('slots');
 export const $PROPS_SYMBOL = Symbol('props');
+export const $PARENT_SYMBOL = Symbol('parent');
 
 const $_className = 'className';
 
@@ -657,7 +658,7 @@ export function $_inElement(
 export function $_ucw(
   roots: (context: Component<any>) => (Node | ComponentReturnType)[],
   ctx: any,
-) {
+): ComponentReturnType {
   return component(
     function UnstableChildWrapper(this: Component<any>) {
       if (IS_DEV_MODE) {
@@ -668,7 +669,7 @@ export function $_ucw(
     } as unknown as Component<any>,
     {},
     ctx,
-  );
+  ) as ComponentReturnType;
 }
 
 if (IS_DEV_MODE) {
@@ -854,6 +855,8 @@ function _component(
       comp = comp.value;
     }
   }
+  // @ts-expect-error index type
+  args[$PARENT_SYMBOL] = ctx;
   let instance =
     // @ts-expect-error construct signature
     comp.prototype === undefined
@@ -1086,8 +1089,9 @@ function toNodeReturnType(
   };
 }
 
+
 function ifCond(
-  cell: Cell<boolean>,
+  cell: Cell<boolean> | MergedCell | IfFunction,
   trueBranch: BranchCb,
   falseBranch: BranchCb,
   ctx: Component<any>,

src/utils/ssr/rehydration-dom-api.ts

@@ -1,4 +1,4 @@
-import { getNodeCounter, incrementNodeCounter } from '@/utils/dom';
+import { getNodeCounter, getRoot, incrementNodeCounter } from '@/utils/dom';
 
 import { getDocument } from '@/utils/dom-api';
 import {
@@ -156,6 +156,10 @@ export const api = {
     targetIndex: number = 0,
   ) {
     if (isRehydrationScheduled()) {
+      if (!parent) {
+        console.log(getRoot());
+        // debugger;
+      }
       // in this case likely child is a text node, and we don't need to append it, we need to prepend it
       const childNodes = Array.from(parent.childNodes);
       const maybeIndex = childNodes.indexOf(child as any);

src/utils/ssr/rehydration.ts

@@ -164,6 +164,7 @@ export function withRehydration(
     withRehydrationStack.length = 0;
     nodesMap.clear();
     resetNodeCounter();
+    console.log('rollbackDOMAPI');
     rollbackDOMAPI();
     throw e;
   }