Checkpoint

.vscode/extensions.json

@@ -2,8 +2,8 @@
   "recommendations": [
     "foxundermoon.shell-format",
     "rohit-gohri.format-code-action",
-    "ghmcadams.lintlens",
-    "wayou.vscode-todo-highlight",
-    "gruntfuggly.todo-tree"
+    "gruntfuggly.todo-tree",
+    "esbenp.prettier-vscode",
+    "mskelton.npm-outdated"
   ]
 }

.vscode/settings.json

@@ -74,6 +74,7 @@
     "pnpm-lock.yaml": true
   },
 
+  "testing.automaticallyOpenPeekView": "never",
   // Try to avoid auto-importing other packages in the mono-repo as relative
   // paths. Instead, use the packaage name.
   "typescript.preferences.importModuleSpecifier": "project-relative",

.vscode/tasks.json

@@ -1,5 +1,22 @@
 {
   "tasks": [
+    {
+      "label": "versionlens npm install",
+      "command": "pnpm",
+      "type": "shell",
+      "args": ["install"],
+      "options": {
+        // sets the cwd to the current file dir
+        "cwd": "${fileDirname}"
+      },
+      // customizable settings
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "panel": "shared",
+        "clear": true,
+      },
+    },    
     {
       "args": ["test:workspace:types"],
       "command": "pnpm",

package.json

@@ -103,46 +103,46 @@
     "@starbeam/core-utils": "workspace:^"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.5",
-    "@babel/plugin-proposal-decorators": "^7.22.5",
+    "@babel/eslint-parser": "^7.22.9",
+    "@babel/plugin-proposal-decorators": "^7.22.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.5",
+    "@babel/runtime": "^7.22.6",
     "@changesets/changelog-git": "^0.1.14",
-    "@changesets/cli": "^2.26.1",
-    "@changesets/config": "^2.3.0",
+    "@changesets/cli": "^2.26.2",
+    "@changesets/config": "^2.3.1",
     "@nrr/pnpm-duplicate-cli": "^0.0.1",
     "@starbeam/eslint-plugin": "workspace:^",
     "@starbeam-dev/build-support": "workspace:*",
-    "@types/eslint": "^8.40.2",
-    "@types/node": "20.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "@vitest/ui": "^0.32.2",
-    "eslint": "^8.43.0",
+    "@types/eslint": "^8.44.1",
+    "@types/node": "20.4.5",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "@vitest/ui": "^0.33.0",
+    "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsonc": "^2.9.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "esno": "^0.16.3",
-    "fast-glob": "^3.2.12",
-    "happy-dom": "^9.20.3",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "esno": "^0.17.0",
+    "fast-glob": "^3.3.1",
+    "happy-dom": "^10.5.2",
     "jsdom": "^22.1.0",
-    "prettier": "^2.8.8",
-    "rollup": "^3.25.3",
-    "tslib": "^2.5.3",
-    "turbo": "^1.10.6",
-    "typescript": "^5.1.3",
-    "vite": "4.3.9",
+    "prettier": "^3.0.0",
+    "rollup": "^3.26.3",
+    "tslib": "^2.6.1",
+    "turbo": "^1.10.12",
+    "typescript": "^5.1.6",
+    "vite": "4.4.7",
     "vite-plugin-babel": "^1.1.3",
-    "vitest": "^0.32.2"
+    "vitest": "^0.33.0"
   },
   "license": "MIT",
   "nodemonConfig": {
@@ -179,12 +179,13 @@
         "vue"
       ],
       "allowedVersions": {
+        "@typescript-eslint/eslint-plugin": "6",
         "typescript": "*"
       }
     }
   },
   "volta": {
     "node": "20.3.1",
-    "pnpm": "8.6.3"
+    "pnpm": "8.6.10"
   }
 }

packages/preact/preact/index.ts

@@ -9,3 +9,4 @@ export {
   useResource,
   useService,
 } from "./src/resource.js";
+export { setupSync } from "./src/sync.js";

packages/preact/preact/package.json

@@ -31,7 +31,7 @@
     "test:types": "tsc -b"
   },
   "dependencies": {
-    "@preact/signals": "^1.1.3",
+    "@preact/signals": "^1.1.5",
     "@starbeam/core-utils": "workspace:^",
     "@starbeam/debug": "workspace:^",
     "@starbeam/interfaces": "workspace:^",
@@ -41,6 +41,7 @@
     "@starbeam/resource": "workspace:^",
     "@starbeam/runtime": "workspace:^",
     "@starbeam/service": "workspace:^",
+    "@starbeam/shared": "workspace:^",
     "@starbeam/tags": "workspace:^",
     "@starbeam/universal": "workspace:^",
     "@starbeam/verify": "workspace:^"

packages/preact/preact/src/frame.ts

@@ -12,17 +12,12 @@ import { initializeFormulaTag } from "@starbeam/tags";
 import { expected, isPresent, verify } from "@starbeam/verify";
 
 export class ComponentFrame {
-  #active: InitializingFormula | null;
-  #frame: FinalizedFormula | null;
-  #tag: FormulaTag;
-  #subscription: Unsubscribe | null;
-
   static #frames = new WeakMap<InternalComponent, ComponentFrame>();
   static #stack: InternalComponent[] = [];
 
   static start(
     component: InternalComponent,
-    description: Description | undefined
+    description: Description | undefined,
   ): void {
     let frame = ComponentFrame.#frames.get(component);
 
@@ -45,22 +40,22 @@ export class ComponentFrame {
     const current = getLast(ComponentFrame.#stack);
     if (!current) {
       throw Error(
-        "You are attempting to use a feature of Starbeam that depends on the current component, but no component is currently active."
+        "You are attempting to use a feature of Starbeam that depends on the current component, but no component is currently active.",
       );
     }
     return current;
   }
 
   static end(
     component: InternalComponent,
-    subscription?: () => void
+    subscription?: () => void,
   ): FinalizedFormula {
     const frame = ComponentFrame.#frames.get(component);
 
     verify(
       frame,
       isPresent,
-      expected.when("in Preact's _diff hook").as("a tracking frame")
+      expected.when("in Preact's _diff hook").as("a tracking frame"),
     );
 
     const end = frame.#end(subscription);
@@ -76,17 +71,22 @@ export class ComponentFrame {
     }
   }
 
+  #active: InitializingFormula | null;
+  #frame: FinalizedFormula | null;
+  #tag: FormulaTag;
+  #subscription: Unsubscribe | null;
+
   private constructor(
     frame: FinalizedFormula | null,
     active: InitializingFormula | null,
     subscribed: Unsubscribe | null,
-    description: Description | undefined
+    description: Description | undefined,
   ) {
     this.#frame = frame;
     this.#active = active;
     const tag = initializeFormulaTag(
       DEBUG?.Desc("formula", description),
-      () => this.#frame?.children() ?? new Set()
+      () => this.#frame?.children() ?? new Set(),
     );
     this.#tag = tag;
     this.#subscription = subscribed;
@@ -105,7 +105,7 @@ export class ComponentFrame {
     verify(
       this.#active,
       isPresent,
-      expected.when("in preact's _diff hook").as("an active tracking frame")
+      expected.when("in preact's _diff hook").as("an active tracking frame"),
     );
 
     const frame = (this.#frame = this.#active.done());

packages/preact/preact/src/options.ts

@@ -4,7 +4,8 @@ import type {
 } from "@starbeam/preact-utils";
 import { Plugin } from "@starbeam/preact-utils";
 import { DEBUG, isReactive } from "@starbeam/reactive";
-import { CONTEXT, RUNTIME } from "@starbeam/runtime";
+import { CONTEXT } from "@starbeam/runtime";
+import { finalize } from "@starbeam/shared";
 import type { ComponentType } from "preact";
 
 import { ComponentFrame } from "./frame.js";
@@ -43,8 +44,8 @@ export const install = Plugin((on) => {
       DEBUG?.Desc(
         "formula",
         componentName(component.fn),
-        "preact.componentWillRender"
-      )
+        "preact.componentWillRender",
+      ),
     );
   });
 
@@ -66,7 +67,7 @@ export const install = Plugin((on) => {
 
   on.component.unmount((component) => {
     ComponentFrame.unmount(component);
-    RUNTIME.finalize(component);
+    finalize(component);
   });
 });
 

packages/preact/preact/src/sync.ts

@@ -0,0 +1,36 @@
+import type { Unsubscribe } from "@starbeam/interfaces";
+import type { Sync } from "@starbeam/resource";
+import { RUNTIME } from "@starbeam/runtime";
+import { onFinalize } from "@starbeam/shared";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+import { getCurrentComponent } from "./options.js";
+
+export function setupSync(sync: Sync): void {
+  const [notify, setNotify] = useState({});
+  const activeSync = useMemo(() => {
+    return sync(getCurrentComponent());
+  }, []);
+  const unsubscribe = useRef(null as null | Unsubscribe);
+  const component = getCurrentComponent();
+
+  useEffect(() => {
+    if (unsubscribe.current === null) {
+      onFinalize(component, () => {
+        console.log("HI");
+      });
+
+      const activeSync = sync(component);
+      unsubscribe.current = RUNTIME.subscribe(
+        activeSync,
+        () => void setNotify({}),
+      );
+    }
+
+    activeSync();
+
+    return () => {
+      unsubscribe.current?.();
+    };
+  }, [notify]);
+}