easy-signal 2.0.1 → 3.0.1

package/.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: 'es5',
+  semi: true,
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+};

package/.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "svelte"
+  ]
+}

package/README.md

@@ -1,10 +1,10 @@
 # Easy Signal
 
-A simple interface for creating a defined event or action that can be triggered and listened to by any number of
-subscribers. Producing a single function that can be used to subscribe to the events, subscribe to errors, and dispatch
-events and errors.
+Two simple interfaces for creating two types of signals. The first (and original signal in this module) is a defined
+event that can be triggered and listened to with a single function. The second is a defined data store that allows you
+to react to changes to that data (popularized by solid-js). These two are `EventSignal` and `ReactiveSignal`.
 
-Full type safety with TypeScript providing good autocomplete.
+Full type safety with TypeScript with both use-cases.
 
 ## Installation
 
@@ -12,24 +12,24 @@ Full type safety with TypeScript providing good autocomplete.
 npm install easy-signal
 ```
 
-## Usage
+## EventSignal Usage
 
-A signal is a function that represents a single event. The function can be used to subscribe to be notified of the
-events as well as to trigger them.
+An EventSignal is a function that represents a single event. The function can be used to subscribe to be notified of
+the events as well as to trigger them.
 
-Signals offer similar functionality as the browser's `eventDispatcher` API, but rather than a general API for any event,
-each event would use its own signal. This allows each signal to have a specific function signature as opposed to the
-browser's generic `event` object. This is a great system in TypeScript being able to see the exact data each event
+EventSignals offer similar functionality as the browser's `eventDispatcher` API, but rather than a general API for any
+event, each event would use its own signal. This allows each signal to have a specific function signature as opposed to
+the browser's generic `event` object. This is a great system in TypeScript being able to see the exact data each event
 produces.
 
-### Basic Usage
+### EventSignal Basic Usage
 
 ```ts
 // file seconds.ts
-import { signal } from 'easy-signal';
+import { eventSignal } from 'easy-signal';
 
 // Create the signal and export it for use. Optionally provide the subscriber signature
-export const onSecond = signal<number>();
+export const onSecond = eventSignal<number>();
 
 // Passing a non-function value will dispatch the event
 setInterval(() => {
@@ -51,9 +51,9 @@ Errors may also be listened to from the signal by passing `ForErrors` as the sec
 and errors may be dispatched by passing an Error object to the signal method.
 
 ```ts
-import { signal, ForErrors } from 'easy-signal';
+import { eventSignal, ForErrors } from 'easy-signal';
 
-const dataStream = signal();
+const dataStream = eventSignal();
 
 dataStream(data => console.log('data is:' data));
 dataStream(error => console.log('Error is:' error), ForErrors);
@@ -65,11 +65,10 @@ stream.on('error', err => dataStream(err));
 To get a subscriber-only method for external use, pass in the `GetOnSignal` constant.
 
 ```ts
-import { signal, GetOnSignal } from 'easy-signal';
-
+import { eventSignal, GetOnSignal } from 'easy-signal';
 
 function getMyAPI() {
-  const doSomething = signal();
+  const doSomething = eventSignal();
 
   // doSomething() will trigger subscribers that were added in onSomething(...). This protects the signal from being
   // triggered/dispatched outside of `getMyAPI`. Sometimes you may want more control to prevent just anyone from
@@ -81,7 +80,6 @@ function getMyAPI() {
 }
 ```
 
-
 To clear the listeners from the signal, pass in the `ClearSignal` constant.
 
 ```ts
@@ -91,3 +89,85 @@ const onSomething = signal();
 
 onSomething(ClearSignal); // clears signal
 ```
+
+## ReactiveSignal Usage
+
+A ReactiveSignal is a function that represents a single piece of data. The function can be used to get the data, set the
+data, and update the data with an updater function. To subscribe to changes use the separate `subscribe` function. The
+ReactiveSignal allows for Observers to be created, which are functions that will be rerun whenever any ReactiveSignals
+they access are updated, and ComputedSignals which are read-only signals whose value is derived from other signals and
+which will be updated whenever they are.
+
+### ReactiveSignal Basic Usage
+
+Here we will use an example similar to the EventSignal, but unlike the EventSignal, the current seconds since epoch will
+be stored and can be accessed any time, whereas the EventSignal only fires an event with the data provided. This
+particular example isn't very compelling.
+
+```ts
+// file seconds.ts
+import { reactiveSignal } from 'easy-signal';
+
+// Create the signal and export it for use. Optionally provide the subscriber signature
+export const onSecond = reactiveSignal(0);
+
+// Passing a non-function value will dispatch the event
+setInterval(() => {
+  const currentSecond = Math.floor(Date.now() / 1000);
+  onSecond(currentSecond);
+  // or onSecond(currentValue => newValue) to update
+});
+```
+
+```ts
+import { onSecond, subscribe } from './seconds.ts';
+
+// Get the value of onSecond() at any time
+console.log(onSecond(), 'since epoc');
+
+// Typescript knows that seconds is a number because of the concrete type definition in seconds.ts
+const unsubscribe = subscribe(onSecond, seconds => {
+  console.log(seconds, 'since epoc');
+});
+```
+
+### Observer Basic Usage
+
+To take action whenever data changes, you can observe or more signals by accessing them in a function call. You can also
+prevent that function from being called too often when data changes by using the Timings. Below, we update the content
+of the DOM whenever the user or billing data is updated, but we only do it after an animation frame to prevent the DOM
+updates from being too frequent. Providing no Timing will call the function immediately after any data is changed.
+
+Because `user()` and `billing()` are called the first time the observe function is run, it automatically subscribes to
+know when they are changed so that the function may be rerun.
+
+```ts
+import { reactiveSignal, observe, Timing } from 'easy-signal';
+
+const user = reactiveSignal(userData);
+const billing = reactiveSignal(billingData);
+
+const unobserve = observe(() => {
+  document.body.innerText = `${user().name} has the plan ${billing().plan}`;
+}, Timing.AnimationFrame);
+```
+
+### ComputedSignal Basic Usage
+
+Create read-only signals whose value is derived from other signals and which will be updated whenever they are.
+
+```ts
+import { computedSignal, subscribe } from 'easy-signal';
+import { user, billing } from 'my-other-signals';
+
+const delinquent = computedSignal(() => {
+  if (user().subscribed) {
+    return billing().status === 'delinquent';
+  }
+  return false;
+});
+
+subscribe(delinquent, delinquent => {
+  console.log(`The user is${delinquent ? '' : ' not'} delinquent`);
+});
+```

package/eventSignal.d.ts

@@ -0,0 +1,36 @@
+declare type Args<T> = T extends (...args: infer A) => any ? A : never;
+export declare type EventSignalSubscriber = (...args: any[]) => any;
+export declare type ErrorSubscriber = (error: Error) => any;
+export declare type Unsubscriber = () => void;
+export declare type OnSignal<T extends EventSignalSubscriber = EventSignalSubscriber> = {
+    (subscriber: T): Unsubscriber;
+    (errorListener: ErrorSubscriber, what: typeof ForErrors): Unsubscriber;
+};
+export declare type EventSignal<T extends EventSignalSubscriber = EventSignalSubscriber> = OnSignal<T> & {
+    (...args: Args<T>): void;
+    (data: Error): void;
+    (data: typeof ClearSignal): void;
+    (data: typeof GetOnSignal): OnSignal<T>;
+};
+export declare const ClearSignal: unique symbol;
+export declare const GetOnSignal: unique symbol;
+export declare const ForErrors: unique symbol;
+/**
+ * Creates a signal, a function that can be used to subscribe to events. The signal can be called with a subscriber
+ * function, which will be called when the signal is dispatched. The signal can also be called with data, which will
+ * dispatch to all subscribers. An optional second argument can be passed to subscribe to errors instead. When the
+ * signal is called with an instance of Error, it will dispatch to all error listeners.
+ * The signal can also be called with `ClearSignal`, which will clear all subscribers.
+ * @example
+ * const onLoad = signal();
+ *
+ * // Subscribe to data
+ * onLoad((data) => console.log('loaded', data));
+ * onLoad((error) => console.error('error', error), true);
+ *
+ * // Dispatch data
+ * onLoad('data'); // logs 'loaded data'
+ * onLoad(new Error('error')); // logs 'error Error: error'
+ */
+export declare function eventSignal<T extends EventSignalSubscriber = EventSignalSubscriber>(): EventSignal<T>;
+export {};

package/eventSignal.js

@@ -0,0 +1,51 @@
+export const ClearSignal = Symbol();
+export const GetOnSignal = Symbol();
+export const ForErrors = Symbol();
+/**
+ * Creates a signal, a function that can be used to subscribe to events. The signal can be called with a subscriber
+ * function, which will be called when the signal is dispatched. The signal can also be called with data, which will
+ * dispatch to all subscribers. An optional second argument can be passed to subscribe to errors instead. When the
+ * signal is called with an instance of Error, it will dispatch to all error listeners.
+ * The signal can also be called with `ClearSignal`, which will clear all subscribers.
+ * @example
+ * const onLoad = signal();
+ *
+ * // Subscribe to data
+ * onLoad((data) => console.log('loaded', data));
+ * onLoad((error) => console.error('error', error), true);
+ *
+ * // Dispatch data
+ * onLoad('data'); // logs 'loaded data'
+ * onLoad(new Error('error')); // logs 'error Error: error'
+ */
+export function eventSignal() {
+    const subscribers = new Set();
+    const errorListeners = new Set();
+    function onSignal(subscriber, what) {
+        const listeners = what === ForErrors ? errorListeners : subscribers;
+        listeners.add(subscriber);
+        return () => {
+            listeners.delete(subscriber);
+        };
+    }
+    function signal(...args) {
+        const arg = args[0];
+        if (typeof arg === 'function') {
+            return onSignal(arg);
+        }
+        else if (arg === ClearSignal) {
+            subscribers.clear();
+            errorListeners.clear();
+        }
+        else if (arg === GetOnSignal) {
+            return onSignal;
+        }
+        else if (arg instanceof Error) {
+            errorListeners.forEach(listener => listener(arg));
+        }
+        else {
+            subscribers.forEach(listener => listener(...args));
+        }
+    }
+    return signal;
+}

package/eventSignal.ts

@@ -0,0 +1,74 @@
+type Args<T> = T extends (...args: infer A) => any ? A : never;
+export type EventSignalSubscriber = (...args: any[]) => any;
+export type ErrorSubscriber = (error: Error) => any;
+export type Unsubscriber = () => void;
+
+export type OnSignal<T extends EventSignalSubscriber = EventSignalSubscriber> = {
+  (subscriber: T): Unsubscriber;
+  (errorListener: ErrorSubscriber, what: typeof ForErrors): Unsubscriber;
+};
+
+export type EventSignal<T extends EventSignalSubscriber = EventSignalSubscriber> = OnSignal<T> & {
+  (...args: Args<T>): void;
+  (data: Error): void;
+  (data: typeof ClearSignal): void;
+  (data: typeof GetOnSignal): OnSignal<T>;
+};
+
+export const ClearSignal = Symbol();
+export const GetOnSignal = Symbol();
+export const ForErrors = Symbol();
+
+/**
+ * Creates a signal, a function that can be used to subscribe to events. The signal can be called with a subscriber
+ * function, which will be called when the signal is dispatched. The signal can also be called with data, which will
+ * dispatch to all subscribers. An optional second argument can be passed to subscribe to errors instead. When the
+ * signal is called with an instance of Error, it will dispatch to all error listeners.
+ * The signal can also be called with `ClearSignal`, which will clear all subscribers.
+ * @example
+ * const onLoad = signal();
+ *
+ * // Subscribe to data
+ * onLoad((data) => console.log('loaded', data));
+ * onLoad((error) => console.error('error', error), true);
+ *
+ * // Dispatch data
+ * onLoad('data'); // logs 'loaded data'
+ * onLoad(new Error('error')); // logs 'error Error: error'
+ */
+export function eventSignal<T extends EventSignalSubscriber = EventSignalSubscriber>(): EventSignal<T> {
+  const subscribers = new Set<EventSignalSubscriber>();
+  const errorListeners = new Set<EventSignalSubscriber>();
+
+  function onSignal(subscriber: T | ErrorSubscriber, what?: typeof ForErrors): Unsubscriber {
+    const listeners = what === ForErrors ? errorListeners : subscribers;
+    listeners.add(subscriber);
+    return () => {
+      listeners.delete(subscriber);
+    };
+  }
+
+  function signal(...args: Args<T>): void;
+  function signal(error: Error): void;
+  function signal(data: typeof ClearSignal): void;
+  function signal(data: typeof GetOnSignal): OnSignal<T>;
+  function signal(subscriber: T): Unsubscriber;
+  function signal(errorListener: EventSignalSubscriber, what: typeof ForErrors): Unsubscriber;
+  function signal(...args: any[]): Unsubscriber | OnSignal<T> | void {
+    const arg = args[0];
+    if (typeof arg === 'function') {
+      return onSignal(arg);
+    } else if (arg === ClearSignal) {
+      subscribers.clear();
+      errorListeners.clear();
+    } else if (arg === GetOnSignal) {
+      return onSignal as OnSignal<T>;
+    } else if (arg instanceof Error) {
+      errorListeners.forEach(listener => listener(arg));
+    } else {
+      subscribers.forEach(listener => listener(...args));
+    }
+  }
+
+  return signal;
+}

package/index.d.ts

@@ -1,36 +1,3 @@
-declare type Args<T> = T extends (...args: infer A) => any ? A : never;
-export declare type Subscriber = (...args: any[]) => any;
-export declare type ErrorSubscriber = (error: Error) => any;
-export declare type Unsubscriber = () => void;
-export declare type OnSignal<T extends Subscriber = Subscriber> = {
-    (subscriber: T): Unsubscriber;
-    (errorListener: ErrorSubscriber, what: typeof ForErrors): Unsubscriber;
-};
-export declare type Signal<T extends Subscriber = Subscriber> = OnSignal<T> & {
-    (...args: Args<T>): void;
-    (data: Error): void;
-    (data: typeof ClearSignal): void;
-    (data: typeof GetOnSignal): OnSignal<T>;
-};
-export declare const ClearSignal: unique symbol;
-export declare const GetOnSignal: unique symbol;
-export declare const ForErrors: unique symbol;
-/**
- * Creates a signal, a function that can be used to subscribe to events. The signal can be called with a subscriber
- * function, which will be called when the signal is dispatched. The signal can also be called with data, which will
- * dispatch to all subscribers. An optional second argument can be passed to subscribe to errors instead. When the
- * signal is called with an instance of Error, it will dispatch to all error listeners.
- * The signal can also be called with `ClearSignal`, which will clear all subscribers.
- * @example
- * const onLoad = signal();
- *
- * // Subscribe to data
- * onLoad((data) => console.log('loaded', data));
- * onLoad((error) => console.error('error', error), true);
- *
- * // Dispatch data
- * onLoad('data'); // logs 'loaded data'
- * onLoad(new Error('error')); // logs 'error Error: error'
- */
-export declare function signal<T extends Subscriber = Subscriber>(): Signal<T>;
-export {};
+export * from './eventSignal';
+export * from './reactiveSignal';
+export * from './signalStore';

package/index.js

@@ -1,51 +1,3 @@
-export const ClearSignal = Symbol();
-export const GetOnSignal = Symbol();
-export const ForErrors = Symbol();
-/**
- * Creates a signal, a function that can be used to subscribe to events. The signal can be called with a subscriber
- * function, which will be called when the signal is dispatched. The signal can also be called with data, which will
- * dispatch to all subscribers. An optional second argument can be passed to subscribe to errors instead. When the
- * signal is called with an instance of Error, it will dispatch to all error listeners.
- * The signal can also be called with `ClearSignal`, which will clear all subscribers.
- * @example
- * const onLoad = signal();
- *
- * // Subscribe to data
- * onLoad((data) => console.log('loaded', data));
- * onLoad((error) => console.error('error', error), true);
- *
- * // Dispatch data
- * onLoad('data'); // logs 'loaded data'
- * onLoad(new Error('error')); // logs 'error Error: error'
- */
-export function signal() {
-    const subscribers = new Set();
-    const errorListeners = new Set();
-    function onSignal(subscriber, what) {
-        const listeners = what === ForErrors ? errorListeners : subscribers;
-        listeners.add(subscriber);
-        return () => {
-            listeners.delete(subscriber);
-        };
-    }
-    function signal(...args) {
-        const arg = args[0];
-        if (typeof arg === 'function') {
-            return onSignal(arg);
-        }
-        else if (arg === ClearSignal) {
-            subscribers.clear();
-            errorListeners.clear();
-        }
-        else if (arg === GetOnSignal) {
-            return onSignal;
-        }
-        else if (arg instanceof Error) {
-            errorListeners.forEach(listener => listener(arg));
-        }
-        else {
-            subscribers.forEach(listener => listener(...args));
-        }
-    }
-    return signal;
-}
+export * from './eventSignal';
+export * from './reactiveSignal';
+export * from './signalStore';

package/index.ts

@@ -1,75 +1,3 @@
-type Args<T> = T extends (...args: infer A) => any ? A : never;
-export type Subscriber = (...args: any[]) => any;
-export type ErrorSubscriber = (error: Error) => any;
-export type Unsubscriber = () => void;
-
-export type OnSignal<T extends Subscriber = Subscriber> = {
-  (subscriber: T): Unsubscriber;
-  (errorListener: ErrorSubscriber, what: typeof ForErrors): Unsubscriber;
-}
-
-export type Signal<T extends Subscriber = Subscriber> = OnSignal<T> & {
-  (...args: Args<T>): void;
-  (data: Error): void;
-  (data: typeof ClearSignal): void;
-  (data: typeof GetOnSignal): OnSignal<T>;
-}
-
-export const ClearSignal = Symbol();
-export const GetOnSignal = Symbol();
-export const ForErrors = Symbol();
-
-
-/**
- * Creates a signal, a function that can be used to subscribe to events. The signal can be called with a subscriber
- * function, which will be called when the signal is dispatched. The signal can also be called with data, which will
- * dispatch to all subscribers. An optional second argument can be passed to subscribe to errors instead. When the
- * signal is called with an instance of Error, it will dispatch to all error listeners.
- * The signal can also be called with `ClearSignal`, which will clear all subscribers.
- * @example
- * const onLoad = signal();
- *
- * // Subscribe to data
- * onLoad((data) => console.log('loaded', data));
- * onLoad((error) => console.error('error', error), true);
- *
- * // Dispatch data
- * onLoad('data'); // logs 'loaded data'
- * onLoad(new Error('error')); // logs 'error Error: error'
- */
-export function signal<T extends Subscriber = Subscriber>(): Signal<T> {
-  const subscribers = new Set<Subscriber>();
-  const errorListeners = new Set<Subscriber>();
-
-  function onSignal(subscriber: T | ErrorSubscriber, what?: typeof ForErrors): Unsubscriber {
-    const listeners = what === ForErrors ? errorListeners : subscribers;
-      listeners.add(subscriber);
-      return () => {
-        listeners.delete(subscriber);
-      };
-  }
-
-  function signal(...args: Args<T>): void;
-  function signal(error: Error): void;
-  function signal(data: typeof ClearSignal): void;
-  function signal(data: typeof GetOnSignal): OnSignal<T>;
-  function signal(subscriber: T): Unsubscriber;
-  function signal(errorListener: Subscriber, what: typeof ForErrors): Unsubscriber;
-  function signal(...args: any[]): Unsubscriber | OnSignal<T> | void {
-    const arg = args[0];
-    if (typeof arg === 'function') {
-      return onSignal(arg);
-    } else if (arg === ClearSignal) {
-      subscribers.clear();
-      errorListeners.clear();
-    } else if (arg === GetOnSignal) {
-      return onSignal as OnSignal<T>;
-    } else if (arg instanceof Error) {
-      errorListeners.forEach(listener => listener(arg));
-    } else {
-      subscribers.forEach(listener => listener(...args));
-    }
-  }
-
-  return signal;
-}
+export * from './eventSignal';
+export * from './reactiveSignal';
+export * from './signalStore';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-signal",
-  "version": "2.0.1",
+  "version": "3.0.1",
   "description": "A tiny (25 LOC), simple utility for alerting subscribers when an event happens, allowing for error handling and clearing.",
   "main": "index.js",
   "scripts": {

package/reactiveSignal.d.ts

@@ -0,0 +1,102 @@
+export interface SignalOptions<T> {
+    equals?: false | ((prev: T, next: T) => boolean);
+}
+export declare type Unsubscribe = () => void;
+export declare type Cancel = () => void;
+export declare const Timing: {
+    Tick: (fn: () => void) => void;
+    AnimationFrame: (fn: () => void) => void;
+};
+/**
+ * A Signal is a single getter/setter function that holds a value and notifies subscribers when the value changes
+ * The signal function can be called with no arguments to get the current value, with a function argument to run an
+ * update function which should receive the value and return a new one, or with a value argument which will replace the
+ * signal's current value. The signal function always returns the current value.
+ *
+ * The optional second argument, `set`, can be used to force the first argument as the new value. This is useful when
+ * the first argument is a function or `undefined` since the signal will assume any function is an updater function and
+ * any `undefined` value is a request to get the current value.
+ */
+export declare type ReactiveSignal<T> = {
+    (): T;
+    (value: T | ReactiveSignalUpdater<T>, set?: false): T;
+    (value: T, set: true): T;
+};
+/**
+ * A Computed Signal is a signal that is the result of a function that depends on other signals. The function is called
+ * whenever the computed signal is accessed if there are no subscribers, or whenever its dependent signals change if
+ * there are subscribers so that subscribers to the computed signal can be informed.
+ */
+export declare type ComputedSignal<T> = () => T;
+/**
+ * A Signal Subscriber is a function that will be called whenever the signal's value changes. The subscriber will be
+ * called with the new value. The subscriber can be used to update the DOM or trigger other side effects.
+ */
+export declare type ReactiveSignalSubscriber<T> = (value: T) => void;
+/**
+ * A Signal Updater is a function that will be called with the current value of the signal and should return a new
+ * value. The updater can be used to update the signal's value based on its current value.
+ */
+export declare type ReactiveSignalUpdater<T> = (prev: T) => T;
+/**
+ * An Observer is a function that will be called whenever any of the signals it depends on change. The observer can be
+ * used to update the DOM or trigger other side effects.
+ * The observer will be called immediately (or after certain a timing option) and whenever any of the signals it depends
+ * on change.
+ */
+export declare type ReactiveSignalObserver = () => void;
+/**
+ * A Timing is a function that will be called with a function to execute. The timing function should execute the passed
+ * function at some point in the future. The default timing is `Timing.Immediate` which executes the function
+ * immediately.
+ */
+export declare type Timing = (fn: () => void) => Cancel;
+/**
+ * A Subscription Change is a function that will be called whenever the signal's subscribers changes from none to some
+ * or some to none. The subscription change will be called with a boolean indicating whether there are any subscribers.
+ */
+export declare type SubscriptionChange = (hasSubscribers: boolean) => void;
+/**
+ * Create a Signal with an initial value and optional options. The options can include an `equals` function which will
+ * be used to determine if the new value is different from the current value. If the new value is different, the signal
+ * will be updated and all subscribers will be notified.
+ * The returned signal function can be called with no arguments to get the current value, with a function argument to
+ * run an update function which should receive the value and return a new one, or with a value argument which will
+ * replace the signal's current value. The signal function always returns the current value.
+ */
+export declare function reactiveSignal<T>(value: T, options?: SignalOptions<T>): ReactiveSignal<T>;
+/**
+ * Subscribe to be notified whenever a Signal's value changes. The Subscriber function will be called immediately with
+ * the current value of the Signal and again whenever the Signal's value changes.
+ *
+ * The optional third argument, `timing`, can be used to specify when the function should be called. The default is
+ * `Timing.Immediate` which executes the function immediately.
+ *
+ * The returned function can be called to unsubscribe from the Signal.
+ */
+export declare function subscribe<T>(signal: ReactiveSignal<T>, subscriber: ReactiveSignalSubscriber<T>, timing?: Timing): Unsubscribe;
+/**
+ * Get notified when a Signal's subscribers changes from none to some or some to none.
+ */
+export declare function onSubscriptionChange(signal: ReactiveSignal<any>, onChange: (hasSubscribers: boolean) => void): Unsubscribe;
+/**
+ * Calls an Observer function after Timing amount of time (default is immediate, but can be on the next tick or the next
+ * animation frame) and again after Timing whenever any of the signals it depends on change.
+ * The Observer function will be called immediately (or after the timing) and again whenever any of the signals it
+ * depends on change.
+ * The returned function can be called to unsubscribe from the signals that are called when the effect is run.
+ *
+ * The optional second argument, `timing`, can be used to specify when the function should be called. The default is
+ * undefined which executes the function immediately.
+ */
+export declare function observe(fn: ReactiveSignalObserver, timing?: Timing): Unsubscribe;
+/**
+ * Create a Computed Signal which is a signal that is the result of a function that depends on other signals. The
+ * function is called immediately whenever the computed signal is accessed if there are no subscribers, or whenever its
+ * dependent signals change if there are subscribers so that subscribers to the computed signal can be informed.
+ *
+ * The optional second argument, `when`, can be used to specify when updater function should be called. The default is
+ * undefined which executes the function immediately after any change to any signal it relies on. This can
+ * prevent unnecessary updates if the function is expensive to run.
+ */
+export declare function computedSignal<T>(fn: ReactiveSignalUpdater<T>, when?: Timing): ComputedSignal<T>;

package/reactiveSignal.js

@@ -0,0 +1,210 @@
+// Different timings for when to execute an observer observing a signal
+export const Timing = {
+    // Execute the function on the next tick of the event loop
+    Tick: (fn) => {
+        Promise.resolve(fn);
+    },
+    // Execute the function on the next animation frame
+    AnimationFrame: (fn) => {
+        globalThis.requestAnimationFrame(fn);
+    },
+};
+// The context for the current run and its unsubscribes
+let context = null;
+// A map to keep track of listeners to subscription changes
+const onSubscriptionChanges = new WeakMap();
+/**
+ * Create a Signal with an initial value and optional options. The options can include an `equals` function which will
+ * be used to determine if the new value is different from the current value. If the new value is different, the signal
+ * will be updated and all subscribers will be notified.
+ * The returned signal function can be called with no arguments to get the current value, with a function argument to
+ * run an update function which should receive the value and return a new one, or with a value argument which will
+ * replace the signal's current value. The signal function always returns the current value.
+ */
+export function reactiveSignal(value, options) {
+    // A map to keep track of subscribers
+    const subscribers = new Map();
+    // The signal is a function that will return a value when called without arguments, or update the value when called
+    // with an argument. The update value can be a new value or an updater function.
+    const signal = ((newValue, set) => {
+        // If no new value is provided, subscribe the current run to this signal and return the current value
+        if (!set && newValue === undefined) {
+            // If there is a context (an observer is running), add the observer's subscriber to the signal
+            if (context) {
+                const { subscriber: run, unsubscribes } = context;
+                let unsubscribe = subscribers.get(run);
+                // If the run is not already subscribed, subscribe it
+                if (!unsubscribe) {
+                    // Create the unsubscribe function
+                    unsubscribe = () => {
+                        subscribers.delete(run);
+                        // If there are no more subscribers, notify the subscription changes
+                        if (subscribers.size === 0) {
+                            const onChanges = onSubscriptionChanges.get(signal);
+                            if (onChanges)
+                                onChanges.forEach(onChange => onChange(false));
+                        }
+                    };
+                    // Add the unsubscribe function to the signal's subscribers
+                    subscribers.set(run, unsubscribe);
+                    // If this changed the number of subscribers from 0 to 1, notify any subscription change subscribers
+                    if (subscribers.size === 1) {
+                        const onChanges = onSubscriptionChanges.get(signal);
+                        if (onChanges)
+                            onChanges.forEach(onChange => onChange(true));
+                    }
+                }
+                // Add the unsubscribe function to the run's unsubscribes
+                unsubscribes.add(unsubscribe);
+            }
+            // Return the current value
+            return value;
+        }
+        // If the new value is a function, call it with the current value as an argument
+        if (!set && typeof newValue === 'function') {
+            newValue = newValue(value);
+        }
+        // If the new value is different from the current value (according to the equals function if provided), update the
+        // value and notify all subscribers
+        if (options?.equals ? !options.equals(value, newValue) : value !== newValue) {
+            value = newValue;
+            subscribers.forEach((_, run) => run(value));
+        }
+        return value;
+    });
+    // Return the signal function
+    return signal;
+}
+/**
+ * Subscribe to be notified whenever a Signal's value changes. The Subscriber function will be called immediately with
+ * the current value of the Signal and again whenever the Signal's value changes.
+ *
+ * The optional third argument, `timing`, can be used to specify when the function should be called. The default is
+ * `Timing.Immediate` which executes the function immediately.
+ *
+ * The returned function can be called to unsubscribe from the Signal.
+ */
+export function subscribe(signal, subscriber, timing) {
+    if (timing) {
+        let queued = false;
+        const subFn = subscriber;
+        subscriber = () => {
+            if (!queued) {
+                queued = true;
+                timing(() => {
+                    queued = false;
+                    subFn(signal());
+                });
+            }
+        };
+    }
+    // Set the current context so we can get the unsubscribe
+    context = { subscriber, unsubscribes: new Set() };
+    // Get the current value of the signal
+    const value = signal();
+    // Get the unsubscribe function for the subscriber
+    const unsubscribe = context.unsubscribes.values().next().value;
+    // Clear the current context
+    context = null;
+    // Call the subscriber with the current value
+    subscriber(value);
+    // Return the unsubscribe function
+    return unsubscribe;
+}
+/**
+ * Get notified when a Signal's subscribers changes from none to some or some to none.
+ */
+export function onSubscriptionChange(signal, onChange) {
+    // Get the set of onChange functions for the signal
+    let onChanges = onSubscriptionChanges.get(signal);
+    // If there is no set, create one and add it to the map
+    if (!onChanges)
+        onSubscriptionChanges.set(signal, (onChanges = new Set()));
+    // Add the onChange function to the set
+    onChanges.add(onChange);
+    // Return a function that removes the onChange function from the set
+    return () => {
+        onChanges.delete(onChange);
+    };
+}
+/**
+ * Calls an Observer function after Timing amount of time (default is immediate, but can be on the next tick or the next
+ * animation frame) and again after Timing whenever any of the signals it depends on change.
+ * The Observer function will be called immediately (or after the timing) and again whenever any of the signals it
+ * depends on change.
+ * The returned function can be called to unsubscribe from the signals that are called when the effect is run.
+ *
+ * The optional second argument, `timing`, can be used to specify when the function should be called. The default is
+ * undefined which executes the function immediately.
+ */
+export function observe(fn, timing) {
+    let dirty = true;
+    let unsubscribes = new Set();
+    // Subscribe to all the signals that are called when the effect is run
+    const subscriber = () => {
+        if (dirty)
+            return;
+        dirty = true;
+        if (timing)
+            timing(() => onChange());
+        else
+            onChange();
+    };
+    // Called immediately and whenever any of the signals it depends on change (after the timing)
+    const onChange = () => {
+        if (!dirty)
+            return;
+        dirty = false;
+        // Set the context for the effect
+        context = { subscriber, unsubscribes: new Set() };
+        // Run the effect collecting all the unsubscribes from the signals that are called when it is run
+        fn();
+        // Filter out unchanged unsubscribes, leaving only those which no longer apply
+        context.unsubscribes.forEach(u => unsubscribes.delete(u));
+        // Unsubscribe from all the signals that are no longer needed
+        unsubscribes.forEach(u => u());
+        // Set the new unsubscribes
+        unsubscribes = context.unsubscribes;
+        // Clear the context
+        context = null;
+    };
+    // Call immediately (or on the next timing)
+    if (timing)
+        timing(() => onChange());
+    else
+        onChange();
+    // Return a function that unsubscribes from all the signals that are called when the effect is run
+    return () => unsubscribes.forEach(u => u());
+}
+/**
+ * Create a Computed Signal which is a signal that is the result of a function that depends on other signals. The
+ * function is called immediately whenever the computed signal is accessed if there are no subscribers, or whenever its
+ * dependent signals change if there are subscribers so that subscribers to the computed signal can be informed.
+ *
+ * The optional second argument, `when`, can be used to specify when updater function should be called. The default is
+ * undefined which executes the function immediately after any change to any signal it relies on. This can
+ * prevent unnecessary updates if the function is expensive to run.
+ */
+export function computedSignal(fn, when) {
+    // Create the signal
+    const signal = reactiveSignal(undefined);
+    // Store the unsubscribe function from the observer. We will only observe the function when there are subscribers to
+    // this computed signal.
+    let unsubscribe = null;
+    // Subscribe to the signal's subscription changes so we know when to start and stop observing
+    onSubscriptionChange(signal, hasSubscribers => {
+        // If there are subscribers, start observing the function
+        if (hasSubscribers) {
+            if (!unsubscribe)
+                unsubscribe = observe(() => signal(fn), when);
+        }
+        else if (unsubscribe) {
+            // If there are no subscribers, stop observing the function
+            unsubscribe();
+            unsubscribe = null;
+        }
+    });
+    const computed = () => (unsubscribe ? signal() : signal(fn));
+    // Return the signal
+    return computed;
+}

package/reactiveSignal.ts

@@ -0,0 +1,311 @@
+// The options for a Signal
+export interface SignalOptions<T> {
+  equals?: false | ((prev: T, next: T) => boolean);
+}
+
+// The types for an unsubscribe and cancel function
+export type Unsubscribe = () => void;
+export type Cancel = () => void;
+
+// Different timings for when to execute an observer observing a signal
+export const Timing = {
+  // Execute the function on the next tick of the event loop
+  Tick: (fn: () => void) => {
+    Promise.resolve(fn);
+  },
+  // Execute the function on the next animation frame
+  AnimationFrame: (fn: () => void) => {
+    (globalThis as any).requestAnimationFrame(fn);
+  },
+};
+
+// The context for the current run and its unsubscribes
+let context: { subscriber: ReactiveSignalSubscriber<any>; unsubscribes: Set<Unsubscribe> } | null = null;
+
+// A map to keep track of listeners to subscription changes
+const onSubscriptionChanges = new WeakMap<ReactiveSignal<any>, Set<SubscriptionChange>>();
+
+/**
+ * A Signal is a single getter/setter function that holds a value and notifies subscribers when the value changes
+ * The signal function can be called with no arguments to get the current value, with a function argument to run an
+ * update function which should receive the value and return a new one, or with a value argument which will replace the
+ * signal's current value. The signal function always returns the current value.
+ *
+ * The optional second argument, `set`, can be used to force the first argument as the new value. This is useful when
+ * the first argument is a function or `undefined` since the signal will assume any function is an updater function and
+ * any `undefined` value is a request to get the current value.
+ */
+export type ReactiveSignal<T> = {
+  (): T;
+  (value: T | ReactiveSignalUpdater<T>, set?: false): T;
+  (value: T, set: true): T;
+};
+
+/**
+ * A Computed Signal is a signal that is the result of a function that depends on other signals. The function is called
+ * whenever the computed signal is accessed if there are no subscribers, or whenever its dependent signals change if
+ * there are subscribers so that subscribers to the computed signal can be informed.
+ */
+export type ComputedSignal<T> = () => T;
+
+/**
+ * A Signal Subscriber is a function that will be called whenever the signal's value changes. The subscriber will be
+ * called with the new value. The subscriber can be used to update the DOM or trigger other side effects.
+ */
+export type ReactiveSignalSubscriber<T> = (value: T) => void;
+
+/**
+ * A Signal Updater is a function that will be called with the current value of the signal and should return a new
+ * value. The updater can be used to update the signal's value based on its current value.
+ */
+export type ReactiveSignalUpdater<T> = (prev: T) => T;
+
+/**
+ * An Observer is a function that will be called whenever any of the signals it depends on change. The observer can be
+ * used to update the DOM or trigger other side effects.
+ * The observer will be called immediately (or after certain a timing option) and whenever any of the signals it depends
+ * on change.
+ */
+export type ReactiveSignalObserver = () => void;
+
+/**
+ * A Timing is a function that will be called with a function to execute. The timing function should execute the passed
+ * function at some point in the future. The default timing is `Timing.Immediate` which executes the function
+ * immediately.
+ */
+export type Timing = (fn: () => void) => Cancel;
+
+/**
+ * A Subscription Change is a function that will be called whenever the signal's subscribers changes from none to some
+ * or some to none. The subscription change will be called with a boolean indicating whether there are any subscribers.
+ */
+export type SubscriptionChange = (hasSubscribers: boolean) => void;
+
+/**
+ * Create a Signal with an initial value and optional options. The options can include an `equals` function which will
+ * be used to determine if the new value is different from the current value. If the new value is different, the signal
+ * will be updated and all subscribers will be notified.
+ * The returned signal function can be called with no arguments to get the current value, with a function argument to
+ * run an update function which should receive the value and return a new one, or with a value argument which will
+ * replace the signal's current value. The signal function always returns the current value.
+ */
+export function reactiveSignal<T>(value: T, options?: SignalOptions<T>): ReactiveSignal<T> {
+  // A map to keep track of subscribers
+  const subscribers = new Map<ReactiveSignalSubscriber<T>, Unsubscribe>();
+
+  // The signal is a function that will return a value when called without arguments, or update the value when called
+  // with an argument. The update value can be a new value or an updater function.
+  const signal = ((newValue?: T | ReactiveSignalUpdater<T>, set?: boolean) => {
+    // If no new value is provided, subscribe the current run to this signal and return the current value
+    if (!set && newValue === undefined) {
+      // If there is a context (an observer is running), add the observer's subscriber to the signal
+      if (context) {
+        const { subscriber: run, unsubscribes } = context;
+        let unsubscribe = subscribers.get(run);
+
+        // If the run is not already subscribed, subscribe it
+        if (!unsubscribe) {
+          // Create the unsubscribe function
+          unsubscribe = () => {
+            subscribers.delete(run);
+
+            // If there are no more subscribers, notify the subscription changes
+            if (subscribers.size === 0) {
+              const onChanges = onSubscriptionChanges.get(signal);
+              if (onChanges) onChanges.forEach(onChange => onChange(false));
+            }
+          };
+
+          // Add the unsubscribe function to the signal's subscribers
+          subscribers.set(run, unsubscribe);
+
+          // If this changed the number of subscribers from 0 to 1, notify any subscription change subscribers
+          if (subscribers.size === 1) {
+            const onChanges = onSubscriptionChanges.get(signal);
+            if (onChanges) onChanges.forEach(onChange => onChange(true));
+          }
+        }
+
+        // Add the unsubscribe function to the run's unsubscribes
+        unsubscribes.add(unsubscribe);
+      }
+
+      // Return the current value
+      return value;
+    }
+
+    // If the new value is a function, call it with the current value as an argument
+    if (!set && typeof newValue === 'function') {
+      newValue = (newValue as ReactiveSignalUpdater<T>)(value);
+    }
+
+    // If the new value is different from the current value (according to the equals function if provided), update the
+    // value and notify all subscribers
+    if (options?.equals ? !options.equals(value!, newValue as T) : value !== newValue) {
+      value = newValue as T;
+      subscribers.forEach((_, run) => run(value!));
+    }
+    return value;
+  }) as ReactiveSignal<T>;
+
+  // Return the signal function
+  return signal;
+}
+
+/**
+ * Subscribe to be notified whenever a Signal's value changes. The Subscriber function will be called immediately with
+ * the current value of the Signal and again whenever the Signal's value changes.
+ *
+ * The optional third argument, `timing`, can be used to specify when the function should be called. The default is
+ * `Timing.Immediate` which executes the function immediately.
+ *
+ * The returned function can be called to unsubscribe from the Signal.
+ */
+export function subscribe<T>(
+  signal: ReactiveSignal<T>,
+  subscriber: ReactiveSignalSubscriber<T>,
+  timing?: Timing
+): Unsubscribe {
+  if (timing) {
+    let queued = false;
+    const subFn = subscriber;
+    subscriber = () => {
+      if (!queued) {
+        queued = true;
+        timing(() => {
+          queued = false;
+          subFn(signal());
+        });
+      }
+    };
+  }
+
+  // Set the current context so we can get the unsubscribe
+  context = { subscriber, unsubscribes: new Set() };
+
+  // Get the current value of the signal
+  const value = signal();
+
+  // Get the unsubscribe function for the subscriber
+  const unsubscribe = context.unsubscribes.values().next().value;
+
+  // Clear the current context
+  context = null;
+
+  // Call the subscriber with the current value
+  subscriber(value);
+
+  // Return the unsubscribe function
+  return unsubscribe;
+}
+
+/**
+ * Get notified when a Signal's subscribers changes from none to some or some to none.
+ */
+export function onSubscriptionChange(
+  signal: ReactiveSignal<any>,
+  onChange: (hasSubscribers: boolean) => void
+): Unsubscribe {
+  // Get the set of onChange functions for the signal
+  let onChanges = onSubscriptionChanges.get(signal);
+
+  // If there is no set, create one and add it to the map
+  if (!onChanges) onSubscriptionChanges.set(signal, (onChanges = new Set()));
+
+  // Add the onChange function to the set
+  onChanges.add(onChange);
+
+  // Return a function that removes the onChange function from the set
+  return () => {
+    onChanges!.delete(onChange);
+  };
+}
+
+/**
+ * Calls an Observer function after Timing amount of time (default is immediate, but can be on the next tick or the next
+ * animation frame) and again after Timing whenever any of the signals it depends on change.
+ * The Observer function will be called immediately (or after the timing) and again whenever any of the signals it
+ * depends on change.
+ * The returned function can be called to unsubscribe from the signals that are called when the effect is run.
+ *
+ * The optional second argument, `timing`, can be used to specify when the function should be called. The default is
+ * undefined which executes the function immediately.
+ */
+export function observe(fn: ReactiveSignalObserver, timing?: Timing): Unsubscribe {
+  let dirty = true;
+  let unsubscribes = new Set<Unsubscribe>();
+
+  // Subscribe to all the signals that are called when the effect is run
+  const subscriber = () => {
+    if (dirty) return;
+    dirty = true;
+    if (timing) timing(() => onChange());
+    else onChange();
+  };
+
+  // Called immediately and whenever any of the signals it depends on change (after the timing)
+  const onChange = () => {
+    if (!dirty) return;
+    dirty = false;
+
+    // Set the context for the effect
+    context = { subscriber, unsubscribes: new Set() };
+
+    // Run the effect collecting all the unsubscribes from the signals that are called when it is run
+    fn();
+
+    // Filter out unchanged unsubscribes, leaving only those which no longer apply
+    context.unsubscribes.forEach(u => unsubscribes.delete(u));
+
+    // Unsubscribe from all the signals that are no longer needed
+    unsubscribes.forEach(u => u());
+
+    // Set the new unsubscribes
+    unsubscribes = context.unsubscribes;
+
+    // Clear the context
+    context = null;
+  };
+
+  // Call immediately (or on the next timing)
+  if (timing) timing(() => onChange());
+  else onChange();
+
+  // Return a function that unsubscribes from all the signals that are called when the effect is run
+  return () => unsubscribes.forEach(u => u());
+}
+
+/**
+ * Create a Computed Signal which is a signal that is the result of a function that depends on other signals. The
+ * function is called immediately whenever the computed signal is accessed if there are no subscribers, or whenever its
+ * dependent signals change if there are subscribers so that subscribers to the computed signal can be informed.
+ *
+ * The optional second argument, `when`, can be used to specify when updater function should be called. The default is
+ * undefined which executes the function immediately after any change to any signal it relies on. This can
+ * prevent unnecessary updates if the function is expensive to run.
+ */
+export function computedSignal<T>(fn: ReactiveSignalUpdater<T>, when?: Timing): ComputedSignal<T> {
+  // Create the signal
+  const signal = reactiveSignal<T>(undefined as T);
+
+  // Store the unsubscribe function from the observer. We will only observe the function when there are subscribers to
+  // this computed signal.
+  let unsubscribe: Unsubscribe | null = null;
+
+  // Subscribe to the signal's subscription changes so we know when to start and stop observing
+  onSubscriptionChange(signal, hasSubscribers => {
+    // If there are subscribers, start observing the function
+    if (hasSubscribers) {
+      if (!unsubscribe) unsubscribe = observe(() => signal(fn), when);
+    } else if (unsubscribe) {
+      // If there are no subscribers, stop observing the function
+      unsubscribe();
+      unsubscribe = null;
+    }
+  });
+
+  const computed = () => (unsubscribe ? signal() : signal(fn));
+
+  // Return the signal
+  return computed;
+}

package/signalStore.d.ts

@@ -0,0 +1,11 @@
+import { ReactiveSignal, ReactiveSignalSubscriber } from './reactiveSignal';
+/**
+ * A store wrapper around a reactive signal. The store can be used to get, set, update, and subscribe to the signal.
+ * This is for use in Svelte 3-4.
+ */
+export declare function signalStore<T>(signal: ReactiveSignal<T>): {
+    get: ReactiveSignal<T>;
+    set: ReactiveSignal<T>;
+    update: ReactiveSignal<T>;
+    subscribe: (sub: ReactiveSignalSubscriber<T>) => import("./reactiveSignal").Unsubscribe;
+};

package/signalStore.js

@@ -0,0 +1,13 @@
+import { subscribe } from './reactiveSignal';
+/**
+ * A store wrapper around a reactive signal. The store can be used to get, set, update, and subscribe to the signal.
+ * This is for use in Svelte 3-4.
+ */
+export function signalStore(signal) {
+    return {
+        get: signal,
+        set: signal,
+        update: signal,
+        subscribe: (sub) => subscribe(signal, sub),
+    };
+}

package/signalStore.ts

@@ -0,0 +1,14 @@
+import { ReactiveSignal, ReactiveSignalSubscriber, subscribe } from './reactiveSignal';
+
+/**
+ * A store wrapper around a reactive signal. The store can be used to get, set, update, and subscribe to the signal.
+ * This is for use in Svelte 3-4.
+ */
+export function signalStore<T>(signal: ReactiveSignal<T>) {
+  return {
+    get: signal,
+    set: signal,
+    update: signal,
+    subscribe: (sub: ReactiveSignalSubscriber<T>) => subscribe(signal, sub),
+  };
+}