refactor: better signal registry with global

PatrickJS · PatrickJS · commit 368bcd4e4c8e · 2024-11-02T15:00:51.000-07:00
diff --git a/packages/async-framework/component/context-registry.ts b/packages/async-framework/component/context-registry.ts
diff --git a/packages/async-framework/component/context.ts b/packages/async-framework/component/context.ts
@@ -1,21 +1,6 @@
-import type { Signal } from "../signals/signals.ts";
-import { signalRegistry } from "../signals/registry.ts";
-import { contextRegistry } from "./context-registry.ts";
-
-// Why: Manages component context and hook state
-export interface ComponentContext {
-  id: string;
-  hooks: any[];
-  hookIndex: number;
-  signals: Set<Signal<any>>;
-  cleanup: Set<() => void>;
-  mounted: boolean;
-  element: HTMLElement | null;
-  parent?: ComponentContext | null;
-}
-
-const contextStack: ComponentContext[] = [];
-let currentContext: ComponentContext | null = null;
+import { signalRegistry } from "../signals/instance.ts";
+import { contextRegistry, contextStack } from "../context/instance.ts";
+import type { ComponentContext } from "../context/types.ts";
 
 // Why: Generates unique IDs for components and signals
 export function generateId(type: string, parentId?: string): string {
@@ -24,7 +9,7 @@ export function generateId(type: string, parentId?: string): string {
 
 // Why: Manages the current component context
 export function getCurrentContext(): ComponentContext | null {
-  return currentContext;
+  return contextStack.peek() as ComponentContext | null;
 }
 
 // Why: Creates and pushes a new component context
@@ -33,6 +18,7 @@ export function pushContext(
   parentContext?: ComponentContext,
 ): ComponentContext {
   const context: ComponentContext = {
+    type: "component",
     id: generateId("component", parentContext?.id),
     hooks: [],
     hookIndex: 0,
@@ -44,16 +30,12 @@ export function pushContext(
   };
 
   contextStack.push(context);
-  currentContext = context;
   return context;
 }
 
 // Why: Pops and cleans up the current context
 export function popContext(): void {
-  if (currentContext) {
-    contextStack.pop();
-    currentContext = contextStack[contextStack.length - 1] || null;
-  }
+  contextStack.pop();
 }
 
 // Why: Runs cleanup functions for a context
diff --git a/packages/async-framework/context/index.ts b/packages/async-framework/context/index.ts
@@ -0,0 +1,5 @@
+export * from "./registry.ts";
+export * from "./instance.ts";
+
+export * from "./stack.ts";
+export * from "./types.ts";
diff --git a/packages/async-framework/context/instance.ts b/packages/async-framework/context/instance.ts
@@ -0,0 +1,4 @@
+import { ContextRegistry } from "./registry.ts";
+import { ContextStack } from "./stack.ts";
+export const contextStack = ContextStack.getInstance();
+export const contextRegistry = ContextRegistry.getInstance();
diff --git a/packages/async-framework/context/registry.ts b/packages/async-framework/context/registry.ts
@@ -43,17 +43,17 @@ export class ContextRegistry {
 
     // Build the full context path
     const parts: string[] = [];
-    
+
     // Add parent path if it exists
     if (parentId) {
       parts.push(parentId);
     }
-    
+
     // Add this context's ID
     parts.push(`${type}-${count}`);
 
     // Join with dots to create hierarchical ID
-    return parts.join('.');
+    return parts.join(".");
   }
 
   // Why: Store and retrieve contexts
@@ -72,5 +72,3 @@ export class ContextRegistry {
     this.contextTypes.forEach((type) => this.counters.set(type, 0));
   }
 }
-
-export const contextRegistry = ContextRegistry.getInstance();
diff --git a/packages/async-framework/context/stack.ts b/packages/async-framework/context/stack.ts
@@ -28,5 +28,3 @@ export class ContextStack {
     this.stack = [];
   }
 }
-
-export const contextStack = ContextStack.getInstance();
diff --git a/packages/async-framework/context/types.ts b/packages/async-framework/context/types.ts
@@ -14,12 +14,16 @@ export interface ComponentContext extends BaseContext {
   element: HTMLElement | null;
 }
 
-export interface SignalContext extends BaseContext {
-  type: "signal";
+// Create a base value context type
+export interface ValueContext extends BaseContext {
   value: any;
 }
 
-export interface ComputedContext extends SignalContext {
+export interface SignalContext extends ValueContext {
+  type: "signal";
+}
+
+export interface ComputedContext extends ValueContext {
   type: "computed";
   dependencies: Set<string>;
 }
diff --git a/packages/async-framework/hooks/index.ts b/packages/async-framework/hooks/index.ts
@@ -1,20 +1,29 @@
 import { signal } from "../signals/signals.ts";
 import { getCurrentContext } from "../component/context.ts";
+import { contextRegistry } from "../context/registry.ts";
+import type { ComponentContext } from "../context/types.ts";
 
 // Why: Implements useState hook with signal integration
 export function useState<T>(initialValue: T): [T, (value: T) => void] {
   const context = getCurrentContext();
   if (!context) throw new Error("useState must be called within a component");
 
+  // Register hook in context registry
+  const hookId = contextRegistry.generateId("hook", context.id);
   const hookIndex = context.hookIndex++;
 
   if (!context.hooks[hookIndex]) {
     const sig = signal(initialValue);
-    context.hooks[hookIndex] = sig;
+    context.hooks[hookIndex] = { id: hookId, signal: sig };
     context.signals.add(sig);
+
+    // Register cleanup in context
+    context.cleanup.add(() => {
+      context.signals.delete(sig);
+    });
   }
 
-  const sig = context.hooks[hookIndex];
+  const { signal: sig } = context.hooks[hookIndex];
   return [sig.value, (value: T) => sig.set(value)];
 }
 
@@ -23,9 +32,10 @@ export function useEffect(
   effect: () => void | (() => void),
   deps?: any[],
 ): void {
-  const context = getCurrentContext();
+  const context = getCurrentContext() as ComponentContext;
   if (!context) throw new Error("useEffect must be called within a component");
 
+  const hookId = contextRegistry.generateId("hook", context.id);
   const hookIndex = context.hookIndex++;
   const oldDeps = context.hooks[hookIndex];
 
@@ -43,9 +53,17 @@ export function useEffect(
     const cleanup = effect();
     if (typeof cleanup === "function") {
       context.cleanup.add(cleanup);
+
+      // Register in context registry
+      contextRegistry.setContext(hookId, {
+        type: "hook",
+        id: hookId,
+        cleanup: new Set([cleanup]),
+        parent: context,
+      });
     }
 
-    context.hooks[hookIndex] = { deps, cleanup };
+    context.hooks[hookIndex] = { id: hookId, deps, cleanup };
   }
 }
 
diff --git a/packages/async-framework/jsx-runtime.ts b/packages/async-framework/jsx-runtime.ts
@@ -4,6 +4,8 @@ import {
   type JSXChild,
   renderComponent,
 } from "./component/render.ts";
+import { contextRegistry } from "../context/registry.ts";
+import { GlobalContext } from "../context/types.ts";
 
 // Define types for JSX elements and children
 type Signal<T> = {
@@ -25,7 +27,7 @@ type JSXAttributes = Record<
   string,
   string | number | boolean | Signal<any> | ReadSignal<any> | undefined
 >;
-type JSXElement = HTMLElement | DocumentFragment;
+type JSXElement = HTMLElement | Element | DocumentFragment;
 type Component = (props: any) => JSXElement | Signal<any>;
 
 // Why: Provides JSX runtime support with context awareness
diff --git a/packages/async-framework/loader/loader.ts b/packages/async-framework/loader/loader.ts
@@ -1,6 +1,7 @@
 // deno-lint-ignore-file no-explicit-any
 import { escapeSelector, isPromise } from "../utils.ts";
 import type { Signal } from "../signals/signals.ts";
+import { SignalRegistry } from "../signals/registry.ts";
 
 export interface AsyncLoaderContext<T = any, M = any> {
   value: T | undefined | null | Promise<T>;
@@ -111,7 +112,7 @@ export class AsyncLoader {
     this.config = config;
     this.context = config.context || {};
     this.handlerRegistry = config.handlerRegistry;
-    this.signalRegistry = config.signalRegistry;
+    this.signalRegistry = config.signalRegistry || SignalRegistry.getInstance();
     this.templateRegistry = config.templateRegistry;
     this.eventPrefix = config.eventPrefix || "on:";
     this.containerAttribute = config.containerAttribute || "data-container";
diff --git a/packages/async-framework/signals/index.ts b/packages/async-framework/signals/index.ts
@@ -1 +1,3 @@
+export * from "./registry.ts";
+export * from "./instance.ts";
 export * from "./signals.ts";
diff --git a/packages/async-framework/signals/instance.ts b/packages/async-framework/signals/instance.ts
@@ -1,5 +1,6 @@
 import { SignalRegistry } from "./registry.ts";
-export const signalRegistry = new SignalRegistry();
+
+export const signalRegistry = SignalRegistry.getInstance();
 
 if (typeof globalThis !== "undefined") {
   globalThis.signalRegistry = signalRegistry;
diff --git a/packages/async-framework/signals/registry.ts b/packages/async-framework/signals/registry.ts
@@ -6,6 +6,7 @@ export class SignalRegistry {
     string,
     Map<string, Set<(value: any, oldValue: any) => void>>
   >();
+  private signals = new Map<string, Signal<any>>();
   private globalId = "global";
 
   private constructor() {}
@@ -17,6 +18,42 @@ export class SignalRegistry {
     return SignalRegistry.instance;
   }
 
+  register<T>(signal: Signal<T>): void {
+    if (this.signals.has(signal.id)) {
+      console.error(`Signal with id ${signal.id} already registered`);
+      return;
+    }
+    if (signal.id === "global") {
+      console.error(`Signal with id ${signal.id} is reserved`);
+      return;
+    }
+    if (!signal.id) {
+      console.error(`Signal with id ${signal.id} is required`);
+      return;
+    }
+    this.signals.set(signal.id, signal);
+  }
+
+  get<T>(signalId: string): Signal<T> | undefined {
+    if (!signalId) {
+      console.error(`Signal with id ${signalId} is required`);
+      return;
+    }
+    if (signalId === "global") {
+      console.error(`Signal with id ${signalId} is reserved`);
+      return;
+    }
+    if (!this.signals.has(signalId)) {
+      console.error(`Signal with id ${signalId} is not registered`);
+      return;
+    }
+    return this.signals.get(signalId) as Signal<T> | undefined;
+  }
+
+  getAllSignals(): Map<string, Signal<any>> {
+    return new Map(this.signals);
+  }
+
   subscribe<T>(
     signal: Signal<T>,
     callback: (value: T, oldValue: T) => void,
@@ -79,5 +116,3 @@ export class SignalRegistry {
     });
   }
 }
-
-export const signalRegistry = SignalRegistry.getInstance();
diff --git a/packages/async-framework/signals/signals.ts b/packages/async-framework/signals/signals.ts
diff --git a/packages/examples/custom-signals-demo/index.html b/packages/examples/custom-signals-demo/index.html

Original file line number	Diff line number	Diff line change
`@@ -43,17 +43,17 @@ export class ContextRegistry {`
`43`	`43`
`44`	`44`	`// Build the full context path`
`45`	`45`	`const parts: string[] = [];`
`46`		`-`
	`46`	`+`
`47`	`47`	`// Add parent path if it exists`
`48`	`48`	`if (parentId) {`
`49`	`49`	`parts.push(parentId);`
`50`	`50`	`}`
`51`		`-`
	`51`	`+`
`52`	`52`	`// Add this context's ID`
`53`	`53`	parts.push(`${type}-${count}`);
`54`	`54`
`55`	`55`	`// Join with dots to create hierarchical ID`
`56`		`- return parts.join('.');`
	`56`	`+ return parts.join(".");`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`// Why: Store and retrieve contexts`
`@@ -72,5 +72,3 @@ export class ContextRegistry {`
`72`	`72`	`this.contextTypes.forEach((type) => this.counters.set(type, 0));`
`73`	`73`	`}`
`74`	`74`	`}`
`75`		`-`
`76`		`-export const contextRegistry = ContextRegistry.getInstance();`
Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,3 @@ export class ContextStack {`
`28`	`28`	`this.stack = [];`
`29`	`29`	`}`
`30`	`30`	`}`
`31`		`-`
`32`		`-export const contextStack = ContextStack.getInstance();`
Original file line number	Diff line number	Diff line change
`@@ -14,12 +14,16 @@ export interface ComponentContext extends BaseContext {`
`14`	`14`	`element: HTMLElement \| null;`
`15`	`15`	`}`
`16`	`16`
`17`		`-export interface SignalContext extends BaseContext {`
`18`		`- type: "signal";`
	`17`	`+// Create a base value context type`
	`18`	`+export interface ValueContext extends BaseContext {`
`19`	`19`	`value: any;`
`20`	`20`	`}`
`21`	`21`
`22`		`-export interface ComputedContext extends SignalContext {`
	`22`	`+export interface SignalContext extends ValueContext {`
	`23`	`+ type: "signal";`
	`24`	`+}`
	`25`	`+`
	`26`	`+export interface ComputedContext extends ValueContext {`
`23`	`27`	`type: "computed";`
`24`	`28`	`dependencies: Set<string>;`
`25`	`29`	`}`