@manyducks.co/dolla 0.78.2 → 1.0.1

package/lib/markup.d.ts

@@ -1,5 +1,5 @@
 import { type AppContext, type ElementContext } from "./app.js";
-import { type Readable } from "./state.js";
+import { type Signal, MaybeSignal } from "./signals.js";
 import type { Renderable, Stringable } from "./types.js";
 import { type View, type ViewContext, type ViewResult } from "./view.js";
 /**
@@ -25,24 +25,24 @@ export declare function isDOMHandle(value: unknown): value is DOMHandle;
 export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
 export interface MarkupAttributes {
     $text: {
-        value: Stringable | Readable<Stringable>;
+        value: MaybeSignal<Stringable>;
     };
     $cond: {
-        $predicate: Readable<any>;
+        $predicate: Signal<any>;
         thenContent?: Renderable;
         elseContent?: Renderable;
     };
     $repeat: {
-        $items: Readable<any[]>;
+        $items: Signal<any[]>;
         keyFn: (value: any, index: number) => string | number | symbol;
-        renderFn: ($item: Readable<any>, $index: Readable<number>, c: ViewContext) => ViewResult;
+        renderFn: ($item: Signal<any>, $index: Signal<number>, c: ViewContext) => ViewResult;
     };
     $observer: {
-        readables: Readable<any>[];
+        signals: Signal<any>[];
         renderFn: (...items: any) => Renderable;
     };
     $outlet: {
-        $children: Readable<DOMHandle[]>;
+        $children: Signal<DOMHandle[]>;
     };
     $node: {
         value: Node;
@@ -58,16 +58,24 @@ export declare function m<I>(type: View<I>, attributes?: I, ...children: Rendera
 /**
  * Displays content conditionally. When `predicate` holds a truthy value, `thenContent` is displayed; when `predicate` holds a falsy value, `elseContent` is displayed.
  */
-export declare function cond(predicate: any | Readable<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
+export declare function cond(predicate: MaybeSignal<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
 /**
  * Calls `renderFn` for each item in `items`. Dynamically adds and removes views as items change.
  * The result of `keyFn` is used to compare items and decide if item was added, removed or updated.
  */
-export declare function repeat<T>(items: Readable<T[]> | T[], keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: Readable<T>, $index: Readable<number>, ctx: ViewContext) => ViewResult): Markup;
+export declare function repeat<T>(items: MaybeSignal<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult): Markup;
 /**
  * Render `content` into a `parent` node anywhere in the page, rather than at its position in the view.
  */
 export declare function portal(content: Renderable, parent: Node): Markup;
+/**
+ * A special kind of signal exclusively for storing references to DOM nodes.
+ */
+export declare function ref<T extends Node>(): Ref<T>;
+export declare function isRef<T extends Node>(value: any): value is Ref<T>;
+export interface Ref<T extends Node> extends Signal<T | undefined> {
+    node: T | undefined;
+}
 interface RenderContext {
     appContext: AppContext;
     elementContext: ElementContext;

package/lib/nodes/cond.d.ts

@@ -1,9 +1,9 @@
 import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle, type Markup } from "../markup.js";
-import { type Readable, type StopFunction } from "../state.js";
+import { type Signal, type StopFunction } from "../signals.js";
 import { type Renderable } from "../types.js";
 export interface ConditionalConfig {
-    $predicate: Readable<any>;
+    $predicate: Signal<any>;
     thenContent?: Renderable;
     elseContent?: Renderable;
     appContext: AppContext;
@@ -12,7 +12,7 @@ export interface ConditionalConfig {
 export declare class Conditional implements DOMHandle {
     node: Node;
     endNode: Node;
-    $predicate: Readable<any>;
+    $predicate: Signal<any>;
     stopCallback?: StopFunction;
     thenContent?: Markup[];
     elseContent?: Markup[];

package/lib/nodes/html.d.ts

@@ -1,6 +1,6 @@
 import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle, type Markup } from "../markup.js";
-import { type StopFunction } from "../state.js";
+import { type StopFunction } from "../signals.js";
 type HTMLOptions = {
     appContext: AppContext;
     elementContext: ElementContext;

package/lib/nodes/observer.d.ts

@@ -1,11 +1,11 @@
 import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle } from "../markup.js";
-import { type Readable } from "../state.js";
+import { type Signal } from "../signals.js";
 import type { Renderable } from "../types.js";
 interface ObserverOptions {
     appContext: AppContext;
     elementContext: ElementContext;
-    readables: Readable<any>[];
+    signals: Signal<any>[];
     renderFn: (...values: any) => Renderable;
 }
 /**
@@ -23,7 +23,7 @@ export declare class Observer implements DOMHandle {
         stop: () => void;
     };
     get connected(): boolean;
-    constructor({ readables, renderFn, appContext, elementContext }: ObserverOptions);
+    constructor({ signals, renderFn, appContext, elementContext }: ObserverOptions);
     connect(parent: Node, after?: Node): void;
     disconnect(): void;
     setChildren(): Promise<void>;

package/lib/nodes/outlet.d.ts

@@ -1,8 +1,8 @@
 import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle } from "../markup.js";
-import { type Readable, type StopFunction } from "../state.js";
+import { type Signal, type StopFunction } from "../signals.js";
 export interface OutletConfig {
-    $children: Readable<DOMHandle[]>;
+    $children: Signal<DOMHandle[]>;
     appContext: AppContext;
     elementContext: ElementContext;
 }
@@ -12,7 +12,7 @@ export interface OutletConfig {
 export declare class Outlet implements DOMHandle {
     node: Node;
     endNode: Node;
-    $children: Readable<DOMHandle[]>;
+    $children: Signal<DOMHandle[]>;
     stopCallback?: StopFunction;
     connectedChildren: DOMHandle[];
     appContext: AppContext;

package/lib/nodes/repeat.d.ts

@@ -1,29 +1,31 @@
 import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle } from "../markup.js";
-import { type Readable, type Writable, type StopFunction } from "../state.js";
+import { type Signal, type SignalSetter, type StopFunction } from "../signals.js";
 import { type ViewContext, type ViewResult } from "../view.js";
 interface RepeatOptions<T> {
     appContext: AppContext;
     elementContext: ElementContext;
-    $items: Readable<T[]>;
+    $items: Signal<T[]>;
     keyFn: (value: T, index: number) => string | number | symbol;
-    renderFn: ($value: Readable<T>, $index: Readable<number>, ctx: ViewContext) => ViewResult;
+    renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
 }
 type ConnectedItem<T> = {
     key: any;
-    $$value: Writable<T>;
-    $$index: Writable<number>;
+    $value: Signal<T>;
+    setValue: SignalSetter<T>;
+    $index: Signal<number>;
+    setIndex: SignalSetter<number>;
     handle: DOMHandle;
 };
 export declare class Repeat<T> implements DOMHandle {
     node: Node;
     endNode: Node;
-    $items: Readable<T[]>;
+    $items: Signal<T[]>;
     stopCallback?: StopFunction;
     connectedItems: ConnectedItem<T>[];
     appContext: AppContext;
     elementContext: ElementContext;
-    renderFn: ($value: Readable<T>, $index: Readable<number>, ctx: ViewContext) => ViewResult;
+    renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
     keyFn: (value: T, index: number) => string | number | symbol;
     get connected(): boolean;
     constructor({ appContext, elementContext, $items, renderFn, keyFn }: RepeatOptions<T>);

package/lib/nodes/text.d.ts

@@ -1,14 +1,14 @@
 import { type DOMHandle } from "../markup.js";
-import { type Readable, type StopFunction } from "../state.js";
+import { MaybeSignal, type StopFunction } from "../signals.js";
 interface Stringable {
     toString(): string;
 }
 interface TextOptions {
-    value: Stringable | Readable<Stringable>;
+    value: MaybeSignal<Stringable>;
 }
 export declare class Text implements DOMHandle {
     node: globalThis.Text;
-    value: Stringable | Readable<Stringable>;
+    value: MaybeSignal<Stringable>;
     stopCallback?: StopFunction;
     get connected(): boolean;
     constructor({ value }: TextOptions);

package/lib/signals.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Stops the observer that created it when called.
+ */
+export type StopFunction = () => void;
+type Unwrapped<T> = T extends Signal<infer V> ? V : T;
+/**
+ * Extracts value types from an array of signals.
+ */
+export type SignalValues<T extends MaybeSignal<any>[]> = {
+    [K in keyof T]: Unwrapped<T[K]>;
+};
+export interface SignalCreateOptions<T> {
+    /**
+     * Determines if the `next` value is equal to the `previous` value.
+     * If this function returns true, watchers will be notified of changes. If it returns false, watchers will not be notified.
+     * By default equality is defined as deep equality.
+     *
+     * @param next - The new value being set.
+     * @param previous - The previous value being replaced.
+     */
+    equality?: (next: T, previous: T) => boolean;
+}
+export interface SignalWatchOptions<T> {
+    /**
+     * If true the watch callback will be called for the first time on the next change.
+     * By default the callback is called immediately with the signal's current value.
+     */
+    lazy?: boolean;
+}
+export interface Signal<T> {
+    /**
+     * Returns the current value.
+     */
+    get(): T;
+    /**
+     * Watch this signal's value with a `callback` function.
+     * The `callback` is only called if the value is not equal to the previous value.
+     *
+     * > NOTE: If watching a signal inside a view, use the `.watch` method on the `ViewContext`. That method will automatically
+     * clean up all watchers when the view is disconnected. Watchers created here must be cleaned up manually.
+     */
+    watch(callback: (value: T) => void, options?: SignalWatchOptions<T>): StopFunction;
+}
+export interface SignalSetter<I, O = I> {
+    /**
+     * Updates the signal's value.
+     */
+    (value: O): void;
+    /**
+     * Takes a callback that receives the signal's current value and returns a new one.
+     */
+    (callback: (current: I) => O): void;
+}
+export type MaybeSignal<T> = Signal<T> | T;
+/**
+ * A signal and setter in one. Useful for passing signals that are intended to be updated by subviews.
+ */
+export interface SettableSignal<I, O = I> extends Signal<I> {
+    /**
+     * Updates the signal's value.
+     */
+    set(next: O): void;
+    /**
+     * Takes a callback that recieves the signal's current value and returns a new one.
+     */
+    set(callback: (previous: I) => O): void;
+}
+export declare function isSignal<T>(value: any): value is Signal<T>;
+export declare function isSettableSignal<T>(value: any): value is Signal<T>;
+/**
+ * Retrieves a plain value from a variable that may be a signal.
+ */
+export declare function designalify<T>(value: MaybeSignal<T>): T;
+/**
+ * Ensures a variable that may be a signal or plain value is a signal.
+ */
+export declare function signalify<T>(value: MaybeSignal<T>): Signal<T>;
+export interface signal {
+    /**
+     * Creates a new Signal and setter.
+     */
+    /**
+     * Creates a new Signal and setter.
+     */
+    /**
+     * Creates a SettableSignal with an initial value.
+     */
+    settable<T>(initialValue: T, options?: SignalCreateOptions<T>): SettableSignal<T>;
+    /**
+     * Creates a SettableSignal.
+     */
+    settable<T>(initialValue?: T, options?: SignalCreateOptions<T | undefined>): SettableSignal<T | undefined>;
+    /**
+     * Combines a Signal and setter into a SettableSignal.
+     */
+    toSettable<I, O = I>(signal: Signal<I>, setter: SignalSetter<I, O>): SettableSignal<I>;
+    /**
+     * Creates a SignalSetter with custom logic provided by `callback`.
+     */
+    createSetter<I, O = I>(signal: Signal<I>, callback: (next: O, previous: I) => void): SignalSetter<I, O>;
+}
+export declare function signal<T>(initialValue: T, options?: SignalCreateOptions<T>): [Signal<T>, SignalSetter<T>];
+export declare function signal<T>(initialValue?: T, options?: SignalCreateOptions<T | undefined>): [Signal<T | undefined>, SignalSetter<T | undefined>];
+export declare namespace signal {
+    var settable: typeof createSettableSignal;
+    var toSettable: typeof createSettableSignalFrom;
+    var createSetter: typeof createSignalSetter;
+}
+declare function createSettableSignal<T>(initialValue: T, options?: SignalCreateOptions<T>): SettableSignal<T>;
+declare function createSettableSignal<T>(initialValue?: T, options?: SignalCreateOptions<T | undefined>): SettableSignal<T | undefined>;
+declare function createSettableSignalFrom<I, O = I>(signal: Signal<I>, setter: SignalSetter<I, O>): SettableSignal<I, O>;
+declare function createSignalSetter<I, O = I>(signal: Signal<I>, callback: (next: O, previous: I) => void): SignalSetter<I, O>;
+export interface SignalDeriveOptions {
+    equality?: (next: unknown, previous: unknown) => boolean;
+}
+export declare function derive<Inputs extends MaybeSignal<any>[], T>(signals: [...Inputs], fn: (...currentValues: SignalValues<Inputs>) => T | Signal<T>, options?: SignalDeriveOptions): Signal<T>;
+export declare function watch<I extends MaybeSignal<any>[]>(signals: [...I], fn: (...currentValues: SignalValues<I>) => void): StopFunction;
+export {};

package/lib/signals.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/state.d.ts

@@ -1,10 +1,11 @@
+import { Signal } from "./signals.js";
 declare const OBSERVE: unique symbol;
 /**
  * Stops the observer that created it when called.
  */
 export type StopFunction = () => void;
 type ObserveMethod<T> = (callback: (currentValue: T) => void) => StopFunction;
-type Value<T> = T extends Readable<infer V> ? V : T;
+type Value<T> = T extends Readable<infer V> ? V : T extends Signal<infer V> ? V : T;
 /**
  * Extracts value types from an array of Readables.
  */
@@ -34,7 +35,7 @@ export interface Writable<T> extends Readable<T> {
      */
     update(callback: (currentValue: T) => T): void;
 }
-export type MaybeReadable<T> = Readable<T> | T;
+export type MaybeReadable<T> = Readable<T> | Signal<T> | T;
 export declare function isReadable<T>(value: any): value is Readable<T>;
 export declare function isWritable<T>(value: any): value is Writable<T>;
 export declare function $$<T>(value: Writable<T>): Writable<T>;

package/lib/store.d.ts

@@ -1,6 +1,6 @@
 import { type AppContext, type ElementContext } from "./app.js";
 import { type DebugChannel } from "./classes/DebugHub.js";
-import { type MaybeReadable, type ReadableValues } from "./state.js";
+import { type MaybeSignal, type SignalValues, type StopFunction } from "./signals.js";
 import type { BuiltInStores } from "./types.js";
 export type Store<O, E> = (context: StoreContext<O>) => E | Promise<E>;
 export interface StoreContext<Options = any> extends DebugChannel {
@@ -28,24 +28,7 @@ export interface StoreContext<Options = any> extends DebugChannel {
      * Takes an Error object, unmounts the app and displays its crash page.
      */
     crash(error: Error): void;
-    /**
-     * Observes a readable value while this store is connected. Calls `callback` each time the value changes.
-     */
-    observe<T>(state: MaybeReadable<T>, callback: (currentValue: T) => void): void;
-    /**
-     * Observes a set of readable values while this store is connected.
-     * Calls `callback` with each value in the same order as `readables` each time any of their values change.
-     */
-    observe<T extends MaybeReadable<any>[]>(states: [...T], callback: (...currentValues: ReadableValues<T>) => void): void;
-    observe<I1, I2>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, callback: (value1: I1, value2: I2) => void): void;
-    observe<I1, I2, I3>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, callback: (value1: I1, value2: I2, value3: I3) => void): void;
-    observe<I1, I2, I3, I4>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, callback: (value1: I1, value2: I2, value3: I3, value4: I4) => void): void;
-    observe<I1, I2, I3, I4, I5>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5) => void): void;
-    observe<I1, I2, I3, I4, I5, I6>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6) => void): void;
-    observe<I1, I2, I3, I4, I5, I6, I7>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7) => void): void;
-    observe<I1, I2, I3, I4, I5, I6, I7, I8>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8) => void): void;
-    observe<I1, I2, I3, I4, I5, I6, I7, I8, I9>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9) => void): void;
-    observe<I1, I2, I3, I4, I5, I6, I7, I8, I9, I10>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, state10: MaybeReadable<I10>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9, value10: I10) => void): void;
+    watch<T extends MaybeSignal<any>[]>(signals: [...T], callback: (...values: SignalValues<T>) => void): StopFunction;
     /**
      * Options this store was initialized with.
      */

package/lib/stores/dialog.d.ts

@@ -1,20 +1,22 @@
 import { type DOMHandle } from "../markup.js";
-import { type Writable } from "../state.js";
+import { type SettableSignal } from "../signals.js";
 import { type StoreContext } from "../store.js";
 import { type View } from "../view.js";
 export interface DialogProps {
-    /**
-     * Whether the dialog is currently open.
-     */
-    $$open: Writable<boolean>;
-    /**
-     * Calls `callback` immediately after dialog has been connected.
-     */
-    transitionIn: (callback: () => Promise<void>) => void;
-    /**
-     * Calls `callback` and awaits its Promise before disconnecting the dialog.
-     */
-    transitionOut: (callback: () => Promise<void>) => void;
+    dialog: {
+        /**
+         * Whether the dialog is currently open.
+         */
+        $$open: SettableSignal<boolean>;
+        /**
+         * Calls `callback` immediately after dialog has been connected.
+         */
+        transitionIn: (callback: () => Promise<void>) => void;
+        /**
+         * Calls `callback` and awaits its Promise before disconnecting the dialog.
+         */
+        transitionOut: (callback: () => Promise<void>) => void;
+    };
 }
 export interface OpenDialog {
     instance: DOMHandle;
@@ -26,5 +28,5 @@ export interface OpenDialog {
  * TODO: Describe this better.
  */
 export declare function DialogStore(ctx: StoreContext): {
-    open: <P extends DialogProps>(view: View<P>, props?: Omit<P, keyof DialogProps> | undefined) => () => void;
+    open: <P extends DialogProps>(view: View<P>, props?: Omit<P, "dialog"> | undefined) => () => void;
 };

package/lib/stores/document.d.ts

@@ -2,9 +2,10 @@ import { type StoreContext } from "../store.js";
 type ScreenOrientation = "landscape" | "portrait";
 type ColorScheme = "light" | "dark";
 export declare function DocumentStore(ctx: StoreContext): {
-    $$title: import("../state.js").Writable<string>;
-    $visibility: import("../state.js").Readable<DocumentVisibilityState>;
-    $orientation: import("../state.js").Readable<ScreenOrientation>;
-    $colorScheme: import("../state.js").Readable<ColorScheme>;
+    $title: import("../signals.js").Signal<string>;
+    setTitle: import("../signals.js").SignalSetter<string, string>;
+    $visibility: import("../signals.js").Signal<DocumentVisibilityState>;
+    $orientation: import("../signals.js").Signal<ScreenOrientation>;
+    $colorScheme: import("../signals.js").Signal<ColorScheme>;
 };
 export {};

package/lib/stores/language.d.ts

@@ -1,4 +1,4 @@
-import { type Readable } from "../state.js";
+import { type Signal } from "../signals.js";
 import { type StoreContext } from "../store.js";
 import { type Stringable } from "../types.js";
 /**
@@ -21,8 +21,8 @@ type LanguageOptions = {
 };
 export declare function LanguageStore(ctx: StoreContext<LanguageOptions>): {
     loaded: Promise<void>;
-    $isLoaded: Readable<boolean>;
-    $currentLanguage: Readable<string | undefined>;
+    $isLoaded: Signal<boolean>;
+    $currentLanguage: Signal<string | undefined>;
     supportedLanguages: string[];
     setLanguage: (tag: string) => Promise<void>;
     /**
@@ -31,6 +31,6 @@ export declare function LanguageStore(ctx: StoreContext<LanguageOptions>): {
      * @param key - Key to the translated value.
      * @param values - A map of {{placeholder}} names and the values to replace them with.
      */
-    translate(key: string, values?: Record<string, Stringable | Readable<Stringable>>): Readable<string>;
+    translate(key: string, values?: Record<string, Stringable | Signal<Stringable>>): Signal<string>;
 };
 export {};

package/lib/stores/router.d.ts

@@ -106,19 +106,20 @@ export declare function RouterStore(ctx: StoreContext<RouterStoreOptions>): {
     /**
      * The currently matched route pattern, if any.
      */
-    $pattern: import("../state.js").Readable<string | null>;
+    $pattern: import("../signals.js").Signal<string | null>;
     /**
      * The current URL path.
      */
-    $path: import("../state.js").Readable<string>;
+    $path: import("../signals.js").Signal<string>;
     /**
      * The current named path params.
      */
-    $params: import("../state.js").Readable<ParsedParams>;
+    $params: import("../signals.js").Signal<ParsedParams>;
     /**
      * The current query params. Changes to this object will be reflected in the URL.
      */
-    $$query: import("../state.js").Writable<ParsedQuery>;
+    $query: import("../signals.js").Signal<ParsedQuery>;
+    setQuery: import("../signals.js").SignalSetter<ParsedQuery, ParsedQuery>;
     /**
      * Navigate backward. Pass a number of steps to hit the back button that many times.
      */

package/lib/testing/makeMockFetch._test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/testing/makeMockFetch.test_skip.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/testing/wrapStore._test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/testing/wrapStore.test_skip.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types.d.ts

@@ -1,26 +1,14 @@
 import type * as CSS from "csstype";
-import { type Markup } from "./markup.js";
-import { type Readable, type Writable } from "./state.js";
+import { Ref, type Markup } from "./markup.js";
 import { type Store } from "./store.js";
 import { type DocumentStore } from "./stores/document.js";
 import { type RenderStore } from "./stores/render.js";
-/**
- * Value will be read by the component.
- */
-export type Read<T> = T | Readable<T> | Writable<T>;
-/**
- * Value will be both read and written by the component.
- */
-export type Write<T> = Writable<T>;
-/**
- * Extracts the value from a Read or Write type.
- */
-export type Value<T> = T extends Read<infer U> ? U : T;
+import { SettableSignal, Signal } from "./signals.js";
 /**
  * Represents everything that can be handled as a DOM node.
  * These are all the items considered valid to pass as children to any element.
  */
-export type Renderable = string | number | Markup | false | null | undefined | Readable<any> | (string | number | Markup | false | null | undefined | Readable<any>)[];
+export type Renderable = string | number | Markup | false | null | undefined | Signal<any> | (string | number | Markup | false | null | undefined | Signal<any>)[];
 export type StoreExports<T> = T extends Store<any, infer O> ? O : unknown;
 export interface BuiltInStores {
     document: StoreExports<typeof DocumentStore>;
@@ -29,9 +17,9 @@ export interface BuiltInStores {
 export type Stringable = {
     toString(): string;
 };
-export type MaybeReadable<T> = T | Readable<T> | Readable<T | undefined>;
-type OptionalProperty<T> = T | Readable<T> | Readable<T | undefined>;
-type RequiredProperty<T> = T | Readable<T>;
+type MaybeSignal<T> = T | Signal<T> | Signal<T | undefined>;
+type OptionalProperty<T> = T | Signal<T> | Signal<T | undefined>;
+type RequiredProperty<T> = T | Signal<T>;
 type AutocapitalizeValues = "off" | "on" | "none" | "sentences" | "words" | "characters";
 type ContentEditableValues = true | false | "true" | "false" | "plaintext-only" | "inherit";
 type ClassListValues = string | ClassMap | Array<string | ClassMap | (string | ClassMap)[]>;
@@ -130,7 +118,7 @@ export interface ElementProps {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
      */
-    style?: string | CSSProperties | Readable<string> | Readable<CSSProperties> | Readable<string | CSSProperties> | Readable<string | undefined> | Readable<CSSProperties | undefined> | Readable<string | CSSProperties | undefined>;
+    style?: string | CSSProperties | Signal<string> | Signal<CSSProperties> | Signal<string | CSSProperties> | Signal<string | undefined> | Signal<CSSProperties | undefined> | Signal<string | CSSProperties | undefined>;
     /**
      * Fired when a CSS animation unexpectedly aborts.
      *
@@ -749,6 +737,7 @@ export interface HTMLElementProps extends ElementProps {
     /**
      * TODO: Add support. Currently experimental.
      */
+    role?: OptionalProperty<string>;
     /**
      * This element's position in the tab order, or the order this element will be focused as the user cycles through elements with the tab key.
      *
@@ -1229,7 +1218,7 @@ export type CSSProperties = {
     [K in keyof Styles]: OptionalProperty<Styles[K]>;
 };
 export interface ClassMap {
-    [className: string]: MaybeReadable<any>;
+    [className: string]: MaybeSignal<any>;
 }
 export type EventHandler<E> = (event: E) => void;
 export interface PropertiesOf<E extends HTMLElement> extends HTMLElementProps {
@@ -1238,9 +1227,9 @@ export interface PropertiesOf<E extends HTMLElement> extends HTMLElementProps {
      */
     children?: any;
     /**
-     * A Ref object or function that receives the DOM node when rendered.
+     * A settable signal or callback that receives the DOM node when rendered.
      */
-    ref?: Writable<E> | Writable<HTMLElement> | Writable<Element> | Writable<E | undefined> | Writable<HTMLElement | undefined> | Writable<Element | undefined>;
+    ref?: Ref<E> | Ref<HTMLElement> | Ref<Element> | Ref<Node>;
 }
 /**
  * The following elements are defined based on the WHATWG HTML spec:
@@ -2117,7 +2106,7 @@ interface HTMLMediaElementProps<T extends HTMLMediaElement> extends HTMLElementP
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
      */
-    srcObject?: MediaStream | MediaSource | Blob | File | Readable<MediaStream> | Readable<MediaStream | undefined> | Readable<MediaSource> | Readable<MediaSource | undefined> | Readable<Blob> | Readable<Blob | undefined> | Readable<File> | Readable<File | undefined>;
+    srcObject?: MediaStream | MediaSource | Blob | File | Signal<MediaStream> | Signal<MediaStream | undefined> | Signal<MediaSource> | Signal<MediaSource | undefined> | Signal<Blob> | Signal<Blob | undefined> | Signal<File> | Signal<File | undefined>;
     /**
      * The current audio volume of the media element. Must be a number between 0 and 1.
      *
@@ -2616,7 +2605,7 @@ interface HTMLImageElementProps extends PropertiesOf<HTMLImageElement> {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
      */
-    sizes?: MaybeReadable<string>;
+    sizes?: MaybeSignal<string>;
     /**
      * The image URL.
      *
@@ -3157,16 +3146,12 @@ interface HTMLInputElementProps extends PropertiesOf<HTMLInputElement> {
     popoverTargetAction?: OptionalProperty<"toggle" | "show" | "hide">;
     readOnly?: OptionalProperty<boolean>;
     required?: OptionalProperty<boolean>;
-    size?: OptionalProperty<number>;
+    size?: OptionalProperty<number | string>;
     src?: OptionalProperty<string>;
     step?: OptionalProperty<number>;
     type?: OptionalProperty<InputType>;
     value?: OptionalProperty<string>;
-    /**
-     * Takes a Writable and sets up two-way binding with it.
-     * Any time the user changes the value of this input, that value will be written back to the Writable.
-     */
-    $$value?: Writable<string>;
+    $$value?: SettableSignal<any>;
     width?: OptionalProperty<string | number> | OptionalProperty<string> | OptionalProperty<number>;
     title?: OptionalProperty<string>;
     /**
@@ -3218,7 +3203,7 @@ interface HTMLSelectElementProps extends PropertiesOf<HTMLSelectElement> {
     multiple?: OptionalProperty<boolean>;
     name?: OptionalProperty<string>;
     required?: OptionalProperty<boolean>;
-    size?: OptionalProperty<number>;
+    size?: OptionalProperty<number | string>;
     value?: OptionalProperty<string>;
 }
 interface HTMLOptGroupElementProps extends PropertiesOf<HTMLOptGroupElement> {
@@ -3246,7 +3231,6 @@ interface HTMLTextAreaElementProps extends PropertiesOf<HTMLTextAreaElement> {
     rows?: OptionalProperty<number>;
     wrap?: OptionalProperty<"soft" | "hard">;
     value?: OptionalProperty<string>;
-    $$value?: Writable<string>;
 }
 interface HTMLOutputElementProps extends PropertiesOf<HTMLOutputElement> {
     for?: OptionalProperty<string>;