feature: suspense api

Author: lifeart

plugins/utils.test.ts

@@ -1,7 +1,43 @@
 import { expect, test, describe } from 'vitest';
-import { toSafeJSPath } from './utils';
+import { toSafeJSPath, escapeString } from './utils';
 
 const f = (str: string) => toSafeJSPath(str);
+const e = (str: any) => escapeString(str as string);
+
+
+describe('escapeString', () => {
+  test('works for classic case', () => {
+    expect(e('this.foo.bar.baz')).toEqual(`"this.foo.bar.baz"`);
+  });
+  test('works for string with quotes', () => {
+    expect(e('this.foo.bar.baz"')).toEqual(`"this.foo.bar.baz\\""`);
+  });
+  test('works for string with double quotes', () => {
+    expect(e('"this.foo.bar.baz"')).toEqual(`"this.foo.bar.baz"`);
+  });
+  test('works for string with double quotes #2', () => {
+    expect(e('this.foo.bar"baz')).toEqual(`"this.foo.bar\\"baz"`);
+  });
+  test('works for strings with template literals', () => {
+    expect(e('this.foo.bar`baz`')).toEqual(`"this.foo.bar\`baz\`"`);
+  });
+  test('works for strings like numbers', () => {
+    expect(e('123')).toEqual(`"123"`);
+  });
+  test('works for strings like numbers #2', () => {
+    expect(e('123.123')).toEqual(`"123.123"`);
+  });
+  test('works for strings like numbers #3', () => {
+    expect(e('123.123.123')).toEqual(`"123.123.123"`);
+  });
+  test('throw error if input is not a string', () => {
+    expect(() => e(123)).toThrow('Not a string')
+  });
+  test('skip already escaped strings', () => {
+    expect(e('"this.foo.bar.baz"')).toEqual(`"this.foo.bar.baz"`);
+  });
+});
+
 
 describe('toSafeJSPath', () => {
   test('works for classic case', () => {

plugins/utils.ts

@@ -45,17 +45,16 @@ export function resetContextCounter() {
 }
 
 export function escapeString(str: string) {
-  const lines = str.split('\n');
-  if (lines.length === 1) {
-    if (str.startsWith("'")) {
-      return str;
-    } else if (str.startsWith('"')) {
-      return str;
-    } else {
-      return `"${str}"`;
+  if (typeof str !== 'string') {
+    throw new Error('Not a string');
+  }
+  try {
+    if (typeof JSON.parse(str) !== 'string') {
+      return JSON.stringify(str);
     }
-  } else {
-    return `\`${str}\``;
+    return JSON.stringify(JSON.parse(str));
+  } catch (e) {
+    return JSON.stringify(str);
   }
 }
 

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,7 +1,7 @@
 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>>();
 
@@ -13,7 +13,7 @@ export function context(contextKey: symbol): (klass: any, key: string, descripto
   ) {
     return {
       get() {
-        return getContext(this, contextKey) || getContext(getRoot()!, contextKey) || descriptor!.initializer?.call(this);
+        return getContext(this, contextKey) || getContext(this[$args][$PARENT_SYMBOL], contextKey) || getContext(getRoot()!, contextKey) || descriptor!.initializer?.call(this);
       },
     }
   }

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,14 +180,17 @@ export class IfCondition {
     return;
   }
   async destroy() {
+    if (this.isDestructorRunning) {
+      throw new Error('Already destroying');
+    }
     this.isDestructorRunning = true;
     if (this.placeholder.isConnected) {
       this.placeholder.parentNode!.removeChild(this.placeholder);
     }
     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,7 +45,7 @@ import {
 } from './shared';
 import { isRehydrationScheduled } from './ssr/rehydration';
 import { createHotReload } from './hmr';
-import { IfCondition } from './control-flow/if';
+import { IfCondition, type IfFunction } from './control-flow/if';
 
 type RenderableType = Node | ComponentReturnType | string | number;
 type ShadowRootMode = 'open' | 'closed' | null;
@@ -68,14 +68,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';
 
@@ -539,7 +540,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) {
@@ -550,7 +551,7 @@ export function $_ucw(
     } as unknown as Component<any>,
     {},
     ctx,
-  );
+  ) as ComponentReturnType;
 }
 
 if (IS_DEV_MODE) {
@@ -712,6 +713,8 @@ function _component(
       comp = comp.value;
     }
   }
+  // @ts-expect-error index type
+  args[$PARENT_SYMBOL] = ctx;
   // @ts-expect-error construct signature
   let instance = comp.prototype === undefined ? comp(args, fw) : new (comp as unknown as Component<any>)(args, fw);
   if (isFn(instance)) {
@@ -927,8 +930,9 @@ function toNodeReturnType(outlet: HTMLElement | DocumentFragment, ctx: any = nul
   };
 }
 
+
 function ifCond(
-  cell: Cell<boolean>,
+  cell: Cell<boolean> | MergedCell | IfFunction,
   trueBranch: BranchCb,
   falseBranch: BranchCb,
   ctx: Component<any>,

src/utils/glimmer/destroyable.ts

@@ -4,9 +4,16 @@ export type Destructors = Array<DestructorFn>;
 // destructorsForInstance
 const $dfi: WeakMap<object, Destructors> = new WeakMap();
 const destroyedObjects = new WeakSet<object>();
-
+// const destroyStack = new WeakMap<object, any>();
 export function destroy(ctx: object) {
+  if (destroyedObjects.has(ctx)) {
+    // console.info('Already destroyed', ctx.debugName || ctx.constructor.name);
+    // console.warn(new Error().stack);
+    // console.warn(destroyStack.get(ctx));
+    return;
+  }
   destroyedObjects.add(ctx);
+  // destroyStack.set(ctx, new Error().stack);
   if (!$dfi.has(ctx)) {
     return;
   }