🚨 [experiment] check signals v1

.github/workflows/perf.yml

@@ -15,8 +15,8 @@ concurrency:
 env:
   EXPERIMENT_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   CONTROL_BRANCH_NAME: "master"
-  FIDELITY: 100
-  THROTTLE: 4
+  FIDELITY: 50
+  THROTTLE: 1
   FORK_NAME: ${{ github.event.pull_request.head.repo.full_name }}
 
 jobs:

package.json

@@ -76,6 +76,9 @@
     "@types/qunit": "^2.19.9",
     "autoprefixer": "^10.4.16",
     "backburner.js": "^2.8.0",
+    "express": "^4.18.2",
+    "glint-environment-gxt": "file:./glint-environment-gxt",
+    "happy-dom": "^13.0.6",
     "nyc": "^15.1.0",
     "postcss": "^8.4.33",
     "prettier": "^3.1.1",
@@ -93,16 +96,14 @@
     "vite-plugin-circular-dependency": "^0.2.1",
     "vite-plugin-dts": "^3.7.0",
     "vitest": "^1.1.1",
-    "zx": "^7.2.3",
-    "express": "^4.18.2",
-    "happy-dom": "^13.0.6",
-    "glint-environment-gxt": "file:./glint-environment-gxt"
+    "zx": "^7.2.3"
   },
   "dependencies": {
     "@babel/core": "^7.23.6",
-    "decorator-transforms": "1.1.0",
     "@babel/preset-typescript": "^7.23.3",
     "@glimmer/syntax": "^0.87.1",
-    "content-tag": "^1.2.2"
+    "content-tag": "^1.2.2",
+    "decorator-transforms": "1.1.0",
+    "signal-polyfill": "^0.1.0"
   }
 }

src/utils/benchmark.ts

@@ -2,7 +2,7 @@ import { Application } from '@/components/Application.gts';
 import { withRehydration } from '@/utils/rehydration';
 import { getDocument } from '@/utils/dom-api';
 import { measureRender } from '@/utils/measure-render';
-import { setResolveRender } from '@/utils/runtime';
+import { setResolveRender } from '@/utils/signals';
 
 export function createBenchmark() {
   return {

src/utils/dom-api.ts

@@ -1,7 +1,7 @@
 import { getNodeCounter, incrementNodeCounter } from '@/utils/dom';
 import { IN_SSR_ENV } from './shared';
 
-let $doc =
+var $doc =
   typeof document !== 'undefined'
     ? document
     : (undefined as unknown as Document);
@@ -11,7 +11,7 @@ export function setDocument(newDocument: Document) {
 export function getDocument() {
   return $doc;
 }
-export const api = {
+export var api = {
   attr(element: HTMLElement, name: string, value: string | null) {
     element.setAttribute(name, value === null ? '' : value);
   },

src/utils/dom.ts

@@ -517,6 +517,7 @@ export function $_inElement(
       } else if (isTagLike(elementRef)) {
         appendRef = elementRef.value;
       } else {
+        // @ts-expect-error
         appendRef = elementRef;
       }
       const destructors: Destructors = [];

src/utils/glimmer-validator.ts

@@ -41,6 +41,7 @@ export function trackedData<T extends object, K extends keyof T>(
   let hasInitializer = typeof initializer === 'function';
 
   function getter(self: T) {
+    // @ts-expect-error
     consumeTag(cellFor(self, key));
 
     let value;

src/utils/if.ts

@@ -83,6 +83,7 @@ export function ifCondition(
       }
     },
     runExistingDestructors,
+    // @ts-expect-error
     opcodeFor(cell, (value) => {
       if (throwedError) {
         Promise.resolve().then(() => {

src/utils/list.ts

@@ -110,6 +110,7 @@ export class BasicListComponent<T extends { id: number }> {
     if (!isTagLike(tag)) {
       if (isArray(tag)) {
         console.warn('iterator for @each should be a cell');
+        // @ts-expect-error
         tag = new Cell(tag, 'list tag');
       } else if (isFn(originalTag)) {
         tag = formula(() => deepFnValue(originalTag), 'list tag');
@@ -297,6 +298,7 @@ export class SyncListComponent<
   constructor(params: ListComponentArgs<T>, outlet: RenderTarget) {
     super(params, outlet);
     associateDestroyable(params.ctx, [
+      // @ts-expect-error
       opcodeFor(this.tag, (value) => {
         this.syncList(value as T[]);
       }),
@@ -331,6 +333,7 @@ export class AsyncListComponent<
   constructor(params: ListComponentArgs<any>, outlet: RenderTarget) {
     super(params, outlet);
     associateDestroyable(params.ctx, [
+      // @ts-expect-error
       opcodeFor(this.tag, async (value) => {
         await this.syncList(value as T[]);
       }),

src/utils/reactive.ts

@@ -3,8 +3,9 @@
   It's related to Glimmer-VM's `@tracked` system, but without invalidation step.
   We explicitly update DOM only when it's needed and only if tags are changed.
 */
-import { scheduleRevalidate } from '@/utils/runtime';
 import { isFn, isTag, isTagLike, debugContext } from '@/utils/shared';
+import { Signal } from "signal-polyfill";
+
 
 export const asyncOpcodes = new WeakSet<tagOp>();
 // List of DOM operations for each tag
@@ -101,38 +102,31 @@ export function setIsRendering(value: boolean) {
   _isRendering = value;
 }
 
-function tracker() {
-  return new Set<Cell>();
-}
 // "data" cell, it's value can be updated, and it's used to create derived cells
 export class Cell<T extends unknown = unknown> {
-  _value!: T;
+  _value!: Signal.State<T>;
   declare toHTML: () => string;
   [Symbol.toPrimitive]() {
     return this.value;
   }
   _debugName?: string | undefined;
   [isTag] = true;
   constructor(value: T, debugName?: string) {
-    this._value = value;
+    this._value = new Signal.State(value);
     if (IS_DEV_MODE) {
       this._debugName = debugContext(debugName);
+      // @ts-expect-error
       DEBUG_CELLS.add(this);
     }
   }
   get value() {
-    if (currentTracker !== null) {
-      currentTracker.add(this);
-    }
-    return this._value;
+    return this._value.get();
   }
   set value(value: T) {
     this.update(value);
   }
   update(value: T) {
-    this._value = value;
-    tagsToRevalidate.add(this);
-    scheduleRevalidate();
+    this._value.set(value);
   }
 }
 
@@ -162,16 +156,9 @@ export function relatedTagsForCell(cell: Cell) {
   return relatedTags.get(cell)!;
 }
 
-function bindAllCellsToTag(cells: Set<Cell>, tag: MergedCell) {
-  cells.forEach((cell) => {
-    const tags = relatedTagsForCell(cell);
-    tags.add(tag);
-  });
-}
-
 // "derived" cell, it's value is calculated from other cells, and it's value can't be updated
 export class MergedCell {
-  fn: Fn | Function;
+  fn:  Fn | Function;
   declare toHTML: () => string;
   isConst: boolean = false;
   isDestroyed = false;
@@ -190,95 +177,18 @@ export class MergedCell {
   }
   destroy() {
     this.isDestroyed = true;
-    opsForTag.delete(this);
-    if (this.relatedCells !== null) {
-      this.relatedCells.forEach((cell) => {
-        const related = relatedTags.get(cell);
-        if (related !== undefined) {
-          related.delete(this);
-          if (related.size === 0) {
-            relatedTags.delete(cell);
-          }
-        }
-      });
-      this.relatedCells.clear();
-    }
     if (IS_DEV_MODE) {
       DEBUG_MERGED_CELLS.delete(this);
     }
   }
   get value() {
-    if (this.isDestroyed) {
-      return;
-    }
-
-    if (this.isConst || !_isRendering || currentTracker !== null) {
-      return this.fn();
-    }
-
-    try {
-      currentTracker = tracker();
-      return this.fn();
-    } finally {
-      bindAllCellsToTag(currentTracker!, this);
-      this.isConst = currentTracker!.size === 0;
-      this.relatedCells = currentTracker;
-      currentTracker = null;
-    }
+    return this.fn();
   }
 }
 
 // this function is called when we need to update DOM, values represented by tags are changed
 export type tagOp = (...values: unknown[]) => Promise<void> | void;
 
-// this is runtime function, it's called when we need to update DOM for a specific tag
-export async function executeTag(tag: Cell | MergedCell) {
-  let opcode: null | tagOp = null;
-  // we always have ops for a tag
-  if (!opsForTag.has(tag)) {
-    return;
-  }
-  const ops = opsFor(tag)!;
-  if (TRY_CATCH_ERROR_HANDLING) {
-    try {
-      const value = tag.value;
-      for (const op of ops) {
-        opcode = op;
-        if (asyncOpcodes.has(op)) {
-          await op(value);
-        } else {
-          op(value);
-        }
-      }
-    } catch (e: any) {
-      if (IS_DEV_MODE) {
-        console.error({
-          message: 'Error executing tag',
-          error: e,
-          tag,
-          opcode: opcode?.toString(),
-        });
-      }
-      if (opcode) {
-        let index = ops.indexOf(opcode);
-        if (index > -1) {
-          ops.splice(index, 1);
-        }
-      }
-    }
-  } else {
-    const value = tag.value;
-    for (const op of ops) {
-      opcode = op;
-      if (asyncOpcodes.has(op)) {
-        await op(value);
-      } else {
-        op(value);
-      }
-    }
-  }
-}
-
 // this is function to create a reactive cell from an object property
 export function cellFor<T extends object, K extends keyof T>(
   obj: T,
@@ -292,6 +202,7 @@ export function cellFor<T extends object, K extends keyof T>(
     obj[key],
     `${obj.constructor.name}.${String(key)}`,
   );
+  // @ts-expect-error
   refs.set(key, cellValue);
   cellsMap.set(obj, refs);
   Object.defineProperty(obj, key, {
@@ -327,10 +238,10 @@ export function cell<T>(value: T, debugName?: string) {
 }
 
 export function inNewTrackingFrame(callback: () => void) {
-  const existingTracker = currentTracker;
-  currentTracker = null;
+  // const existingTracker = currentTracker;
+  // currentTracker = null;
   callback();
-  currentTracker = existingTracker;
+  // currentTracker = existingTracker;
 }
 
 export function getTracker() {

src/utils/rehydration.ts

@@ -2,6 +2,8 @@ import { type ComponentReturnType } from '@/utils/component';
 import { getNodeCounter, resetNodeCounter } from '@/utils/dom';
 import { api as rehydrationDomApi } from '@/utils/rehydration-dom-api';
 import { api as domApi } from '@/utils/dom-api';
+
+var originalDomAPI = { ...domApi };
 const withRehydrationStack: HTMLElement[] = [];
 const commentsToRehydrate: Comment[] = [];
 let rehydrationScheduled = false;
@@ -109,8 +111,8 @@ function pushToStack(node: HTMLElement, isFirst = false) {
   }
 }
 
-const originalDomAPI = { ...domApi };
 function patchDOMAPI() {
+  originalDomAPI = { ...domApi };
   domApi.attr = rehydrationDomApi.attr;
   domApi.comment = rehydrationDomApi.comment;
   // @ts-expect-error