@figliolia/signals 1.0.0

package/README.md

@@ -0,0 +1,109 @@
+# Signals
+
+A light-weight signals implementation that can be bound to any UI framework or library.
+
+The implementation borrows some of the API from [Angular Signals](https://angular.dev/guide/signals) and the [TC39 Proposal](https://github.com/tc39/proposal-signals) while aiming to yield smaller bundle sizes and better portability between UI frameworks.
+
+To accomplish the portability aspect, changed values are piped through an event emitter that can be consumed anywhere in your code without needing `effects`
+
+## API
+
+### Signals
+
+Signals are primitive reactive values that can be used to store and derive application state from
+
+```typescript
+import { Signal } from "@figliolia/signals";
+
+const signal = new Signal(1);
+
+// get the current value
+signal.get();
+
+// set new values
+signal.set(2);
+
+// transform values
+signal.update(previous => previous + 1);
+
+// subscribe to changes
+const listener = signal.listen(currentValue => {
+  // on value change
+});
+
+// unsubscribe from changes
+listener();
+```
+
+### Computed
+
+Computed signals are readonly signals that derive their value based on a computation of other signals
+
+```typescript
+import { Computed, Signal } from "@figliolia/signals";
+
+const signal1 = new Signal(1);
+const signal2 = new Signal(1);
+
+const computed = new Computed(() => signal1.get() + signal2.get());
+
+// subscribe to changes
+const listener = computed.listen(currentValue => {
+  // on value change
+});
+
+// update the computed value
+signal1.set(2); // computed === 3
+signal2.set(2); // computed === 4
+
+// unsubscribe from changes
+listener();
+```
+
+### Effect
+
+Effects are callback functions that can be executed anytime a signal changes
+
+```typescript
+import { effect, Signal } from "@figliolia/signals";
+
+const signal1 = new Signal(1);
+const signal2 = new Signal(1);
+
+// Your effect callback will run on initialization and anytime
+// a signal inside changes values
+effect(() => {
+  console.log(signal1.get(), signal2.get());
+});
+```
+
+### Binding to frameworks
+
+In this repository you'll find a basic example of how to bind your Signals to a UI framework such as react.
+
+In essence, what you'll want to do is create subscriptions on a signal you wish your framework to be aware of - and derive some unit of state native to the framework anytime that value changes.
+
+In react, this can be done with [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore)
+
+```typescript
+import { Signal } from "@figliolia/signals";
+import { useRef, useCallback, useSyncExternalStore } from "react";
+
+export const useSignal = <T>(initialValue: T) => {
+  const signal = useRef(new Signal(initialValue));
+  const getValue = useCallback(() => signal.current.get(), []);
+  const subscribe = useCallback((fn: () => void) => {
+    return signal.current.listen(fn);
+  }, []);
+  // make react aware of the signal's value
+  const value = useSyncExternalStore(subscribe, getValue);
+  // return the classic react state tuple
+  return [value, signal.current] as const;
+};
+```
+
+## The TC39 Proposal
+
+This implemenation differs from the TC39 proposal and is likely not going to mirror the native implemenation if the proposal passes.
+
+When designing this API, I read the proposal and aimed to build the necessities of the proposal while omitting some of the internals that developers are likely to be using less often

package/dist/index.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_Base = require('./signals/Base.cjs');
+const require_Computed = require('./signals/Computed.cjs');
+const require_Signal = require('./signals/Signal.cjs');
+require('./signals/index.cjs');
+const require_useSignal = require('./react/useSignal.cjs');
+const require_useComputed = require('./react/useComputed.cjs');
+require('./react/index.cjs');
+
+exports.Base = require_Base.Base;
+exports.Computed = require_Computed.Computed;
+exports.Signal = require_Signal.Signal;
+exports.useComputed = require_useComputed.useComputed;
+exports.useSignal = require_useSignal.useSignal;

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+import { Base } from "./signals/Base.cjs";
+import { Computed } from "./signals/Computed.cjs";
+import { Signal } from "./signals/Signal.cjs";
+import { useSignal } from "./react/useSignal.cjs";
+import { useComputed } from "./react/useComputed.cjs";
+export { Base, Computed, Signal, useComputed, useSignal };

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+import { Base } from "./signals/Base.mjs";
+import { Computed } from "./signals/Computed.mjs";
+import { Signal } from "./signals/Signal.mjs";
+import "./signals/index.mjs";
+import { useSignal } from "./react/useSignal.mjs";
+import { useComputed } from "./react/useComputed.mjs";
+import "./react/index.mjs";
+export { Base, Computed, Signal, useComputed, useSignal };

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import { Base } from "./signals/Base.mjs";
+import { Computed } from "./signals/Computed.mjs";
+import { Signal } from "./signals/Signal.mjs";
+import "./signals/index.mjs";
+import { useSignal } from "./react/useSignal.mjs";
+import { useComputed } from "./react/useComputed.mjs";
+import "./react/index.mjs";
+
+export { Base, Computed, Signal, useComputed, useSignal };

package/dist/react/bindToReact.cjs

@@ -0,0 +1,10 @@
+let react = require("react");
+
+//#region src/react/bindToReact.ts
+const bindToReact = (signal) => {
+	const getValue = (0, react.useCallback)(() => signal.get(), [signal]);
+	return [(0, react.useSyncExternalStore)((0, react.useCallback)((fn) => signal.listen(fn), [signal]), getValue), signal];
+};
+
+//#endregion
+exports.bindToReact = bindToReact;

package/dist/react/bindToReact.mjs

@@ -0,0 +1,10 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+//#region src/react/bindToReact.ts
+const bindToReact = (signal) => {
+	const getValue = useCallback(() => signal.get(), [signal]);
+	return [useSyncExternalStore(useCallback((fn) => signal.listen(fn), [signal]), getValue), signal];
+};
+
+//#endregion
+export { bindToReact };

package/dist/react/index.cjs

@@ -0,0 +1,2 @@
+const require_useSignal = require('./useSignal.cjs');
+const require_useComputed = require('./useComputed.cjs');

package/dist/react/index.d.mts

@@ -0,0 +1,2 @@
+import { useSignal } from "./useSignal.mjs";
+import { useComputed } from "./useComputed.mjs";

package/dist/react/index.mjs

@@ -0,0 +1,4 @@
+import { useSignal } from "./useSignal.mjs";
+import { useComputed } from "./useComputed.mjs";
+
+export {  };

package/dist/react/useComputed.cjs

@@ -0,0 +1,14 @@
+const require_Computed = require('../signals/Computed.cjs');
+require('../signals/index.cjs');
+const require_bindToReact = require('./bindToReact.cjs');
+let react = require("react");
+let _figliolia_react_hooks = require("@figliolia/react-hooks");
+
+//#region src/react/useComputed.ts
+const useComputed = (input) => {
+	const signal = (0, _figliolia_react_hooks.useController)(new require_Computed.Computed(input));
+	return (0, react.useMemo)(() => require_bindToReact.bindToReact(signal)[0], [signal]);
+};
+
+//#endregion
+exports.useComputed = useComputed;

package/dist/react/useComputed.d.cts

@@ -0,0 +1,6 @@
+import { Computer } from "../signals/types.cjs";
+
+//#region src/react/useComputed.d.ts
+declare const useComputed: <T>(input: Computer<T>) => T;
+//#endregion
+export { useComputed };

package/dist/react/useComputed.d.mts

@@ -0,0 +1,6 @@
+import { Computer } from "../signals/types.mjs";
+
+//#region src/react/useComputed.d.ts
+declare const useComputed: <T>(input: Computer<T>) => T;
+//#endregion
+export { useComputed };

package/dist/react/useComputed.mjs

@@ -0,0 +1,14 @@
+import { Computed } from "../signals/Computed.mjs";
+import "../signals/index.mjs";
+import { bindToReact } from "./bindToReact.mjs";
+import { useMemo } from "react";
+import { useController } from "@figliolia/react-hooks";
+
+//#region src/react/useComputed.ts
+const useComputed = (input) => {
+	const signal = useController(new Computed(input));
+	return useMemo(() => bindToReact(signal)[0], [signal]);
+};
+
+//#endregion
+export { useComputed };

package/dist/react/useSignal.cjs

@@ -0,0 +1,14 @@
+const require_Signal = require('../signals/Signal.cjs');
+require('../signals/index.cjs');
+const require_bindToReact = require('./bindToReact.cjs');
+let react = require("react");
+let _figliolia_react_hooks = require("@figliolia/react-hooks");
+
+//#region src/react/useSignal.ts
+const useSignal = (input) => {
+	const signal = (0, _figliolia_react_hooks.useController)(new require_Signal.Signal(input));
+	return (0, react.useMemo)(() => require_bindToReact.bindToReact(signal), [signal]);
+};
+
+//#endregion
+exports.useSignal = useSignal;

package/dist/react/useSignal.d.cts

@@ -0,0 +1,6 @@
+import { Signal } from "../signals/Signal.cjs";
+
+//#region src/react/useSignal.d.ts
+declare const useSignal: <T>(input: T) => [T, Signal<T>];
+//#endregion
+export { useSignal };

package/dist/react/useSignal.d.mts

@@ -0,0 +1,7 @@
+import { Signal } from "../signals/Signal.mjs";
+import "../signals/index.mjs";
+
+//#region src/react/useSignal.d.ts
+declare const useSignal: <T>(input: T) => [T, Signal<T>];
+//#endregion
+export { useSignal };

package/dist/react/useSignal.mjs

@@ -0,0 +1,14 @@
+import { Signal } from "../signals/Signal.mjs";
+import "../signals/index.mjs";
+import { bindToReact } from "./bindToReact.mjs";
+import { useMemo } from "react";
+import { useController } from "@figliolia/react-hooks";
+
+//#region src/react/useSignal.ts
+const useSignal = (input) => {
+	const signal = useController(new Signal(input));
+	return useMemo(() => bindToReact(signal), [signal]);
+};
+
+//#endregion
+export { useSignal };

package/dist/signals/Base.cjs

@@ -0,0 +1,43 @@
+const require_Graph = require('./Graph.cjs');
+let _figliolia_event_emitter = require("@figliolia/event-emitter");
+
+//#region src/signals/Base.ts
+var Base = class Base {
+	ID;
+	static Graph = new require_Graph.Graph(void 0);
+	static IDs = new _figliolia_event_emitter.AutoIncrementingID();
+	Emitter = new _figliolia_event_emitter.EventEmitter();
+	static ACTIVE_CONSUMER = null;
+	static RESOLVED_DEPENDENCIES = /* @__PURE__ */ new Set();
+	constructor(value) {
+		this.value = value;
+		this.ID = Base.IDs.get();
+		Base.Graph.register(this);
+	}
+	get() {
+		if (Base.ACTIVE_CONSUMER !== null && !Base.RESOLVED_DEPENDENCIES.has(this.ID)) Base.RESOLVED_DEPENDENCIES.add(this.ID);
+		return this.value;
+	}
+	listen(notifier) {
+		const ID = this.Emitter.on("change", notifier);
+		return () => {
+			this.Emitter.off("change", ID);
+		};
+	}
+	valueOf() {
+		return this.value;
+	}
+	toJSON() {
+		return this.value;
+	}
+	withEmission(func) {
+		return (...args) => {
+			const result = func(...args);
+			this.Emitter.emit("change", this.value);
+			return result;
+		};
+	}
+};
+
+//#endregion
+exports.Base = Base;

package/dist/signals/Base.d.cts

@@ -0,0 +1,23 @@
+import { Graph } from "./Graph.cjs";
+import { EventEmitter } from "@figliolia/event-emitter";
+
+//#region src/signals/Base.d.ts
+declare class Base<T> {
+  protected value: T;
+  ID: string;
+  static Graph: Graph;
+  private static IDs;
+  protected Emitter: EventEmitter<{
+    change: T;
+  }>;
+  protected static ACTIVE_CONSUMER: string | null;
+  protected static RESOLVED_DEPENDENCIES: Set<string>;
+  constructor(value: T);
+  get(): T;
+  listen(notifier: (value: T) => void): () => void;
+  valueOf(): T;
+  toJSON(): T;
+  protected withEmission<F extends (...args: any[]) => any>(func: F): (...args: Parameters<F>) => ReturnType<F>;
+}
+//#endregion
+export { Base };

package/dist/signals/Base.d.mts

@@ -0,0 +1,23 @@
+import { Graph } from "./Graph.mjs";
+import { EventEmitter } from "@figliolia/event-emitter";
+
+//#region src/signals/Base.d.ts
+declare class Base<T> {
+  protected value: T;
+  ID: string;
+  static Graph: Graph;
+  private static IDs;
+  protected Emitter: EventEmitter<{
+    change: T;
+  }>;
+  protected static ACTIVE_CONSUMER: string | null;
+  protected static RESOLVED_DEPENDENCIES: Set<string>;
+  constructor(value: T);
+  get(): T;
+  listen(notifier: (value: T) => void): () => void;
+  valueOf(): T;
+  toJSON(): T;
+  protected withEmission<F extends (...args: any[]) => any>(func: F): (...args: Parameters<F>) => ReturnType<F>;
+}
+//#endregion
+export { Base };

package/dist/signals/Base.mjs

@@ -0,0 +1,43 @@
+import { Graph } from "./Graph.mjs";
+import { AutoIncrementingID, EventEmitter } from "@figliolia/event-emitter";
+
+//#region src/signals/Base.ts
+var Base = class Base {
+	ID;
+	static Graph = new Graph(void 0);
+	static IDs = new AutoIncrementingID();
+	Emitter = new EventEmitter();
+	static ACTIVE_CONSUMER = null;
+	static RESOLVED_DEPENDENCIES = /* @__PURE__ */ new Set();
+	constructor(value) {
+		this.value = value;
+		this.ID = Base.IDs.get();
+		Base.Graph.register(this);
+	}
+	get() {
+		if (Base.ACTIVE_CONSUMER !== null && !Base.RESOLVED_DEPENDENCIES.has(this.ID)) Base.RESOLVED_DEPENDENCIES.add(this.ID);
+		return this.value;
+	}
+	listen(notifier) {
+		const ID = this.Emitter.on("change", notifier);
+		return () => {
+			this.Emitter.off("change", ID);
+		};
+	}
+	valueOf() {
+		return this.value;
+	}
+	toJSON() {
+		return this.value;
+	}
+	withEmission(func) {
+		return (...args) => {
+			const result = func(...args);
+			this.Emitter.emit("change", this.value);
+			return result;
+		};
+	}
+};
+
+//#endregion
+export { Base };

package/dist/signals/Computed.cjs

@@ -0,0 +1,49 @@
+const require_Base = require('./Base.cjs');
+let _figliolia_event_emitter = require("@figliolia/event-emitter");
+
+//#region src/signals/Computed.ts
+var Computed = class Computed extends require_Base.Base {
+	trackingID;
+	dependencies = [];
+	listeners = [];
+	static trackingIDs = new _figliolia_event_emitter.AutoIncrementingID();
+	constructor(computer) {
+		const trackingID = Computed.trackingIDs.get();
+		const [value, dependencies] = Computed.runCompute(trackingID, computer);
+		super(value);
+		this.computer = computer;
+		this.trackingID = trackingID;
+		this.setupDependencyTracking(dependencies);
+	}
+	compute = this.withEmission(() => {
+		const [value, dependencies] = Computed.runCompute(this.trackingID, this.computer);
+		this.value = value;
+		this.setupDependencyTracking(dependencies);
+		return value;
+	});
+	buildDependencyGraph(newDependencies) {
+		const node = require_Base.Base.Graph.get(this.ID);
+		if (node) {
+			for (const signal of this.dependencies) node.remove(signal);
+			for (const signal of newDependencies) node.register(signal);
+		}
+	}
+	setupDependencyTracking(nodeIDs) {
+		while (this.listeners.length) this.listeners.pop()?.();
+		const dependencies = nodeIDs.map((ID) => require_Base.Base.Graph.get(ID).value);
+		this.buildDependencyGraph(dependencies);
+		this.dependencies = dependencies;
+		this.listeners = dependencies.map((d) => d.listen(() => this.compute()));
+	}
+	static runCompute(ID, computer) {
+		require_Base.Base.ACTIVE_CONSUMER = ID;
+		const value = computer();
+		const dependencies = Array.from(require_Base.Base.RESOLVED_DEPENDENCIES);
+		require_Base.Base.ACTIVE_CONSUMER = null;
+		require_Base.Base.RESOLVED_DEPENDENCIES = /* @__PURE__ */ new Set();
+		return [value, dependencies];
+	}
+};
+
+//#endregion
+exports.Computed = Computed;

package/dist/signals/Computed.d.cts

@@ -0,0 +1,18 @@
+import { Computer } from "./types.cjs";
+import { Base } from "./Base.cjs";
+
+//#region src/signals/Computed.d.ts
+declare class Computed<T> extends Base<T> {
+  private readonly computer;
+  private trackingID;
+  private dependencies;
+  private listeners;
+  private static trackingIDs;
+  constructor(computer: Computer<T>);
+  private readonly compute;
+  private buildDependencyGraph;
+  private setupDependencyTracking;
+  private static runCompute;
+}
+//#endregion
+export { Computed };

package/dist/signals/Computed.d.mts

@@ -0,0 +1,18 @@
+import { Computer } from "./types.mjs";
+import { Base } from "./Base.mjs";
+
+//#region src/signals/Computed.d.ts
+declare class Computed<T> extends Base<T> {
+  private readonly computer;
+  private trackingID;
+  private dependencies;
+  private listeners;
+  private static trackingIDs;
+  constructor(computer: Computer<T>);
+  private readonly compute;
+  private buildDependencyGraph;
+  private setupDependencyTracking;
+  private static runCompute;
+}
+//#endregion
+export { Computed };

package/dist/signals/Computed.mjs

@@ -0,0 +1,49 @@
+import { Base } from "./Base.mjs";
+import { AutoIncrementingID } from "@figliolia/event-emitter";
+
+//#region src/signals/Computed.ts
+var Computed = class Computed extends Base {
+	trackingID;
+	dependencies = [];
+	listeners = [];
+	static trackingIDs = new AutoIncrementingID();
+	constructor(computer) {
+		const trackingID = Computed.trackingIDs.get();
+		const [value, dependencies] = Computed.runCompute(trackingID, computer);
+		super(value);
+		this.computer = computer;
+		this.trackingID = trackingID;
+		this.setupDependencyTracking(dependencies);
+	}
+	compute = this.withEmission(() => {
+		const [value, dependencies] = Computed.runCompute(this.trackingID, this.computer);
+		this.value = value;
+		this.setupDependencyTracking(dependencies);
+		return value;
+	});
+	buildDependencyGraph(newDependencies) {
+		const node = Base.Graph.get(this.ID);
+		if (node) {
+			for (const signal of this.dependencies) node.remove(signal);
+			for (const signal of newDependencies) node.register(signal);
+		}
+	}
+	setupDependencyTracking(nodeIDs) {
+		while (this.listeners.length) this.listeners.pop()?.();
+		const dependencies = nodeIDs.map((ID) => Base.Graph.get(ID).value);
+		this.buildDependencyGraph(dependencies);
+		this.dependencies = dependencies;
+		this.listeners = dependencies.map((d) => d.listen(() => this.compute()));
+	}
+	static runCompute(ID, computer) {
+		Base.ACTIVE_CONSUMER = ID;
+		const value = computer();
+		const dependencies = Array.from(Base.RESOLVED_DEPENDENCIES);
+		Base.ACTIVE_CONSUMER = null;
+		Base.RESOLVED_DEPENDENCIES = /* @__PURE__ */ new Set();
+		return [value, dependencies];
+	}
+};
+
+//#endregion
+export { Computed };

package/dist/signals/Graph.cjs

@@ -0,0 +1,28 @@
+
+//#region src/signals/Graph.ts
+var Graph = class Graph {
+	nodes = /* @__PURE__ */ new Map();
+	constructor(value) {
+		this.value = value;
+	}
+	register(node) {
+		this.nodes.set(node.ID, new Graph(node));
+	}
+	remove(node) {
+		this.nodes.delete(node.ID);
+	}
+	get(ID) {
+		return this.nodes.get(ID);
+	}
+	toJSON() {
+		const nodes = {};
+		for (const [id, node] of this.nodes) nodes[id] = node;
+		return {
+			nodes,
+			value: this.value
+		};
+	}
+};
+
+//#endregion
+exports.Graph = Graph;

package/dist/signals/Graph.d.cts

@@ -0,0 +1,17 @@
+import { Base } from "./Base.cjs";
+
+//#region src/signals/Graph.d.ts
+declare class Graph {
+  value: Base<any>;
+  private nodes;
+  constructor(value: Base<any>);
+  register(node: Base<any>): void;
+  remove(node: Base<any>): void;
+  get(ID: string): Graph | undefined;
+  toJSON(): {
+    nodes: Record<string, Graph>;
+    value: Base<any>;
+  };
+}
+//#endregion
+export { Graph };

package/dist/signals/Graph.d.mts

@@ -0,0 +1,17 @@
+import { Base } from "./Base.mjs";
+
+//#region src/signals/Graph.d.ts
+declare class Graph {
+  value: Base<any>;
+  private nodes;
+  constructor(value: Base<any>);
+  register(node: Base<any>): void;
+  remove(node: Base<any>): void;
+  get(ID: string): Graph | undefined;
+  toJSON(): {
+    nodes: Record<string, Graph>;
+    value: Base<any>;
+  };
+}
+//#endregion
+export { Graph };

package/dist/signals/Graph.mjs

@@ -0,0 +1,27 @@
+//#region src/signals/Graph.ts
+var Graph = class Graph {
+	nodes = /* @__PURE__ */ new Map();
+	constructor(value) {
+		this.value = value;
+	}
+	register(node) {
+		this.nodes.set(node.ID, new Graph(node));
+	}
+	remove(node) {
+		this.nodes.delete(node.ID);
+	}
+	get(ID) {
+		return this.nodes.get(ID);
+	}
+	toJSON() {
+		const nodes = {};
+		for (const [id, node] of this.nodes) nodes[id] = node;
+		return {
+			nodes,
+			value: this.value
+		};
+	}
+};
+
+//#endregion
+export { Graph };

package/dist/signals/Signal.cjs

@@ -0,0 +1,14 @@
+const require_Base = require('./Base.cjs');
+
+//#region src/signals/Signal.ts
+var Signal = class extends require_Base.Base {
+	set = this.withEmission((value) => {
+		this.value = value;
+	});
+	update = this.withEmission((updater) => {
+		this.value = updater(this.value);
+	});
+};
+
+//#endregion
+exports.Signal = Signal;

package/dist/signals/Signal.d.cts

@@ -0,0 +1,9 @@
+import { Base } from "./Base.cjs";
+
+//#region src/signals/Signal.d.ts
+declare class Signal<T> extends Base<T> {
+  readonly set: (value: T) => void;
+  readonly update: (updater: (value: T) => T) => void;
+}
+//#endregion
+export { Signal };

package/dist/signals/Signal.d.mts

@@ -0,0 +1,9 @@
+import { Base } from "./Base.mjs";
+
+//#region src/signals/Signal.d.ts
+declare class Signal<T> extends Base<T> {
+  readonly set: (value: T) => void;
+  readonly update: (updater: (value: T) => T) => void;
+}
+//#endregion
+export { Signal };

package/dist/signals/Signal.mjs

@@ -0,0 +1,14 @@
+import { Base } from "./Base.mjs";
+
+//#region src/signals/Signal.ts
+var Signal = class extends Base {
+	set = this.withEmission((value) => {
+		this.value = value;
+	});
+	update = this.withEmission((updater) => {
+		this.value = updater(this.value);
+	});
+};
+
+//#endregion
+export { Signal };

package/dist/signals/index.cjs

@@ -0,0 +1,3 @@
+const require_Base = require('./Base.cjs');
+const require_Computed = require('./Computed.cjs');
+const require_Signal = require('./Signal.cjs');

package/dist/signals/index.d.mts

@@ -0,0 +1,3 @@
+import { Base } from "./Base.mjs";
+import { Computed } from "./Computed.mjs";
+import { Signal } from "./Signal.mjs";

package/dist/signals/index.mjs

@@ -0,0 +1,5 @@
+import { Base } from "./Base.mjs";
+import { Computed } from "./Computed.mjs";
+import { Signal } from "./Signal.mjs";
+
+export {  };

package/dist/signals/types.d.cts

@@ -0,0 +1,5 @@
+//#region src/signals/types.d.ts
+type Computer<T> = () => NotPromise<T>;
+type NotPromise<T> = T extends Promise<any> ? never : T;
+//#endregion
+export { Computer };

package/dist/signals/types.d.mts

@@ -0,0 +1,5 @@
+//#region src/signals/types.d.ts
+type Computer<T> = () => NotPromise<T>;
+type NotPromise<T> = T extends Promise<any> ? never : T;
+//#endregion
+export { Computer };

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@figliolia/signals",
+  "version": "1.0.0",
+  "description": "A signals implemenation loosely based on the TC39 Proposal",
+  "keywords": [
+    "javascript",
+    "signals",
+    "typescript"
+  ],
+  "license": "ISC",
+  "author": "Alex Figliolia",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "oxlint --type-aware --type-check --report-unused-disable-directives --fix && oxfmt"
+  },
+  "devDependencies": {
+    "@figliolia/event-emitter": ">=1.1.0",
+    "@figliolia/react-hooks": ">=1.7.0",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
+    "oxfmt": "^0.28.0",
+    "oxlint": "^1.36.0",
+    "oxlint-tsgolint": "^0.11.4",
+    "react": ">=18.0.0",
+    "tsdown": "^0.20.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@figliolia/event-emitter": ">=1.1.0",
+    "@figliolia/react-hooks": ">=1.7.0",
+    "react": ">=18.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./react";
+export * from "./signals";

package/src/react/bindToReact.ts

@@ -0,0 +1,15 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+import { type Base } from "../signals";
+
+export const bindToReact = <T extends Base<any>>(
+  signal: T,
+): [ReturnType<T["get"]>, T] => {
+  const getValue = useCallback(() => signal.get(), [signal]);
+  const subscribe = useCallback(
+    (fn: () => void) => signal.listen(fn),
+    [signal],
+  );
+  const value = useSyncExternalStore(subscribe, getValue);
+  return [value, signal] as const;
+};

package/src/react/index.ts

@@ -0,0 +1,2 @@
+export * from "./useSignal";
+export * from "./useComputed";

package/src/react/useComputed.ts

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { useController } from "@figliolia/react-hooks";
+
+import type { Computer } from "../signals/types";
+import { Computed } from "../signals";
+
+import { bindToReact } from "./bindToReact";
+
+export const useComputed = <T>(input: Computer<T>) => {
+  const signal = useController(new Computed(input));
+  return useMemo(() => bindToReact(signal)[0], [signal]);
+};

package/src/react/useSignal.ts

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useController } from "@figliolia/react-hooks";
+
+import { Signal } from "../signals";
+
+import { bindToReact } from "./bindToReact";
+
+export const useSignal = <T>(input: T) => {
+  const signal = useController(new Signal(input));
+  return useMemo(() => bindToReact(signal), [signal]);
+};

package/src/signals/Base.ts

@@ -0,0 +1,50 @@
+import { AutoIncrementingID, EventEmitter } from "@figliolia/event-emitter";
+
+import { Graph } from "./Graph";
+
+export class Base<T> {
+  public ID: string;
+  // @ts-ignore
+  public static Graph = new Graph(undefined);
+  private static IDs = new AutoIncrementingID();
+  protected Emitter = new EventEmitter<{ change: T }>();
+  protected static ACTIVE_CONSUMER: string | null = null;
+  protected static RESOLVED_DEPENDENCIES = new Set<string>();
+  constructor(protected value: T) {
+    this.ID = Base.IDs.get();
+    Base.Graph.register(this);
+  }
+
+  public get() {
+    if (
+      Base.ACTIVE_CONSUMER !== null &&
+      !Base.RESOLVED_DEPENDENCIES.has(this.ID)
+    ) {
+      Base.RESOLVED_DEPENDENCIES.add(this.ID);
+    }
+    return this.value;
+  }
+
+  public listen(notifier: (value: T) => void) {
+    const ID = this.Emitter.on("change", notifier);
+    return () => {
+      this.Emitter.off("change", ID);
+    };
+  }
+
+  public valueOf() {
+    return this.value;
+  }
+
+  public toJSON() {
+    return this.value;
+  }
+
+  protected withEmission<F extends (...args: any[]) => any>(func: F) {
+    return (...args: Parameters<F>): ReturnType<F> => {
+      const result = func(...args);
+      this.Emitter.emit("change", this.value);
+      return result;
+    };
+  }
+}

package/src/signals/Computed.ts

@@ -0,0 +1,59 @@
+import { AutoIncrementingID } from "@figliolia/event-emitter";
+
+import type { Computer } from "./types";
+import { Base } from "./Base";
+
+export class Computed<T> extends Base<T> {
+  private trackingID: string;
+  private dependencies: Base<any>[] = [];
+  private listeners: (() => void)[] = [];
+  private static trackingIDs = new AutoIncrementingID();
+  constructor(private readonly computer: Computer<T>) {
+    const trackingID = Computed.trackingIDs.get();
+    const [value, dependencies] = Computed.runCompute(trackingID, computer);
+    super(value);
+    this.trackingID = trackingID;
+    this.setupDependencyTracking(dependencies);
+  }
+
+  private readonly compute = this.withEmission(() => {
+    const [value, dependencies] = Computed.runCompute(
+      this.trackingID,
+      this.computer,
+    );
+    this.value = value;
+    this.setupDependencyTracking(dependencies);
+    return value;
+  });
+
+  private buildDependencyGraph(newDependencies: Base<any>[]) {
+    const node = Base.Graph.get(this.ID);
+    if (node) {
+      for (const signal of this.dependencies) {
+        node.remove(signal);
+      }
+      for (const signal of newDependencies) {
+        node.register(signal);
+      }
+    }
+  }
+
+  private setupDependencyTracking(nodeIDs: string[]) {
+    while (this.listeners.length) {
+      this.listeners.pop()?.();
+    }
+    const dependencies = nodeIDs.map(ID => Base.Graph.get(ID)!.value);
+    this.buildDependencyGraph(dependencies);
+    this.dependencies = dependencies;
+    this.listeners = dependencies.map(d => d.listen(() => this.compute()));
+  }
+
+  private static runCompute<T>(ID: string, computer: () => T) {
+    Base.ACTIVE_CONSUMER = ID;
+    const value = computer();
+    const dependencies = Array.from(Base.RESOLVED_DEPENDENCIES);
+    Base.ACTIVE_CONSUMER = null;
+    Base.RESOLVED_DEPENDENCIES = new Set();
+    return [value, dependencies] as const;
+  }
+}

package/src/signals/Graph.ts

@@ -0,0 +1,26 @@
+import type { Base } from "./Base";
+
+export class Graph {
+  private nodes = new Map<string, Graph>();
+  constructor(public value: Base<any>) {}
+
+  public register(node: Base<any>) {
+    this.nodes.set(node.ID, new Graph(node));
+  }
+
+  public remove(node: Base<any>) {
+    this.nodes.delete(node.ID);
+  }
+
+  public get(ID: string) {
+    return this.nodes.get(ID);
+  }
+
+  public toJSON() {
+    const nodes: Record<string, Graph> = {};
+    for (const [id, node] of this.nodes) {
+      nodes[id] = node;
+    }
+    return { nodes, value: this.value };
+  }
+}

package/src/signals/Signal.ts

@@ -0,0 +1,11 @@
+import { Base } from "./Base";
+
+export class Signal<T> extends Base<T> {
+  public readonly set = this.withEmission((value: T) => {
+    this.value = value;
+  });
+
+  public readonly update = this.withEmission((updater: (value: T) => T) => {
+    this.value = updater(this.value);
+  });
+}

package/src/signals/effect.ts

@@ -0,0 +1,6 @@
+import type { Computer } from "./types";
+import { Computed } from "./Computed";
+
+export const effect = (computer: Computer<void>) => {
+  new Computed(computer);
+};

package/src/signals/index.ts

@@ -0,0 +1,3 @@
+export * from "./Computed";
+export * from "./Signal";
+export * from "./Base";

package/src/signals/scratch.ts

@@ -0,0 +1,29 @@
+import { Signal } from "./Signal";
+import { effect } from "./effect";
+import { Computed } from "./Computed";
+import { Base } from "./Base";
+
+const value1 = new Signal(1);
+const value2 = new Signal(1);
+const value3 = new Signal(1);
+const value4 = new Signal(1);
+
+const computed = new Computed(() => {
+  if (value1.get() < 2) {
+    return value1.get();
+  }
+  return value1.get() + value2.get() + value3.get() + value4.get();
+});
+
+effect(() => {
+  console.log(computed.get());
+});
+
+computed.listen(v => console.log(v));
+
+value1.set(2);
+value2.update(v => v + 1);
+value3.set(2);
+value4.update(v => v + 1);
+
+console.log(JSON.stringify(Base.Graph, null, 2));

package/src/signals/types.ts

@@ -0,0 +1,3 @@
+export type Computer<T> = () => NotPromise<T>;
+
+export type NotPromise<T> = T extends Promise<any> ? never : T;