@manyducks.co/dolla 2.0.0-alpha.26 → 2.0.0-alpha.28

package/README.md

@@ -7,102 +7,15 @@
 
 Dolla is a batteries-included JavaScript frontend framework covering the needs of moderate-to-complex single page apps:
 
-- ⚡ Reactive DOM updates with [State](). Inspired by Signals, but with more explicit tracking.
-- 📦 Reusable components with [Views](#section-views).
-- 🔀 Built in [routing]() with nested routes and middleware support (check login status, preload data, etc).
-- 🐕 Built in [HTTP]() client with middleware support (set auth headers, etc).
-- 📍 Built in [localization]() system (store translated strings in JSON files and call the `t` function to get them).
-- 🍳 Build system optional. Write views in JSX or use `html` tagged template literals.
+- ⚡ Reactive DOM updates with [State](./docs/state.md). Inspired by Signals, but with more explicit tracking.
+- 📦 Reusable components with [Views](./docs/views.md).
+- 🔀 Built in [routing](./docs/router.md) with nested routes and middleware support (check login status, preload data, etc).
+- 🐕 Built in [HTTP](./docs/http.md) client with middleware support (set auth headers, etc).
+- 📍 Built in [localization](./docs/i18n.md) system (store translated strings in JSON files and call the `t` function to get them).
+- 🍳 Build system optional. [Write views in JSX](./docs/setup.md) or use `html` tagged template literals.
 
 Let's first get into some examples.
 
-## State
-
-### Basic State API
-
-```js
-import { createState, derive } from "@manyducks.co/dolla";
-
-const [$count, setCount] = createState(72);
-
-// Get value
-$count.get(): // 72
-
-// Replace the stored value with something else
-setCount(300);
-$count.get(); // 300
-
-// You can also pass a function that takes the current value and returns a new one
-setCount((current) => current + 1);
-$count.get(); // 301
-```
-
-Now that you have a state you can derive more states from that one. Derived states automatically stay in sync with the values of their dependencies.
-
-```js
-// Pass and array of one or more states followed by a function that computes a new value.
-const $doubled = derive([$count], (count) => count * 2);
-
-$doubled.get(); // 602
-
-setCount(500);
-
-$doubled.get(); // 1000
-```
-
-### In Views
-
-```jsx
-
-```
-
-States also come in a settable variety that includes the setter on the same object. Sometimes you want to pass around a two-way binding and this is what SettableState is for.
-
-```jsx
-import { createSettableState, fromSettable, toSettable } from "@manyducks.co/dolla";
-
-// Settable states can be set by passing a value when they are called.
-const $$value = createSettableState("Test");
-$$value(); // "Test"
-$$value("New Value");
-$$value(); // "New Value"
-
-// They can also be split into a State and Setter
-const [$value, setValue] = fromSettableState($$value);
-
-// And a State and Setter can be combined into a SettableState.
-const $$otherValue = toSettableState($value, setValue);
-
-// Or discard the setter and make it read-only using the good old toState function:
-const $value = toState($$value);
-```
-
-You can also do weird proxy things like this:
-
-```jsx
-// Create an original place for the state to live
-const [$value, setValue] = createState(5);
-
-// Derive a state that doubles the value
-const $doubled = derive([$value], (value) => value * 2);
-
-// Create a setter that takes the doubled value and sets the original $value accordingly.
-const setDoubled = createSetter($doubled, (next, current) => {
-  setValue(next / 2);
-});
-
-// Bundle the derived state and setter into a SettableState to pass around.
-const $$doubled = toSettableState($doubled, setDoubled);
-
-// Setting the doubled state...
-$$doubled(100);
-
-// ... will be reflected everywhere.
-$$doubled(); // 100
-$doubled(); // 100
-$value(); // 50
-```
-
 <h2 id="section-views">Views</h2>
 
 A basic view:

package/dist/core/context.d.ts

@@ -0,0 +1,88 @@
+import type { Emitter } from "@manyducks.co/emitter";
+import type { Store, StoreFactory } from "./store";
+import type { Dolla } from "./dolla";
+interface ContextEmitterEvents {
+    [eventName: string | symbol]: [ContextEvent<any>];
+}
+export interface ElementContext {
+    /**
+     * The root Dolla instance this element belongs to.
+     */
+    root: Dolla;
+    /**
+     * Storage for context variables.
+     */
+    data: Record<string | symbol, unknown>;
+    /**
+     * Event emitter for this context.
+     */
+    emitter: Emitter<ContextEmitterEvents>;
+    /**
+     * Stores attached to this context.
+     */
+    stores: Map<string, Store<any, any>>;
+    /**
+     * A reference to the parent context.
+     */
+    parent?: ElementContext;
+    /**
+     * Whether to create DOM nodes in the SVG namespace. An `<svg>` element will set this to true and pass it down to children.
+     */
+    isSVG?: boolean;
+    /**
+     * The name of the nearest parent view.
+     */
+    viewName?: string;
+}
+export interface ComponentContext {
+    /**
+     * Sets a context variable and returns its value.
+     */
+    set<T>(key: string | symbol, value: T): T;
+    /**
+     * Gets the value of a context variable. Returns null if the variable is not set.
+     */
+    get<T>(key: string | symbol): T | null;
+    /**
+     * Adds a listener to be called when `eventName` is emitted.
+     */
+    on<T = unknown>(eventName: string, listener: (event: ContextEvent<T>) => void): void;
+    /**
+     * Removes a listener from the list to be called when `eventName` is emitted.
+     */
+    off<T = unknown>(eventName: string, listener: (event: ContextEvent<T>) => void): void;
+    /**
+     * Adds a listener to be called when `eventName` is emitted. The listener is immediately removed after being called once.
+     */
+    once<T = unknown>(eventName: string, listener: (event: ContextEvent<T>) => void): void;
+    /**
+     * Emits a new event to all listeners.
+     */
+    emit<T = unknown>(eventName: string, detail: T): boolean;
+}
+/**
+ * A context capable of hosting stores.
+ */
+export interface StorableContext extends ComponentContext {
+    /**
+     * Attaches a new store to this context.
+     */
+    attachStore(store: Store<any, any>): void;
+    /**
+     * Gets the closest instance of a store. Throws an error if the store isn't provided higher in the tree.
+     */
+    useStore<Value>(factory: StoreFactory<any, Value>): Value;
+}
+/**
+ * An event emitted from and received by a Dolla context. These are separate from DOM events.
+ */
+export declare class ContextEvent<T> {
+    #private;
+    type: string;
+    detail: T;
+    get propagationStopped(): boolean;
+    constructor(type: string, detail: T);
+    stopPropagation(): void;
+    get [Symbol.toStringTag](): string;
+}
+export {};

package/dist/core/dolla.d.ts

@@ -1,11 +1,14 @@
+import { HTTP } from "../modules/http.js";
+import { I18n } from "../modules/i18n.js";
+import { Router } from "../modules/router.js";
 import { type CrashViewProps } from "../views/default-crash-view.js";
 import { Batch } from "./batch.js";
+import { ContextEvent, type StorableContext } from "./context.js";
 import { type Markup, type MarkupElement } from "./markup.js";
 import { type ViewElement, type ViewFunction } from "./nodes/view.js";
-import { createRef, createState, createWatcher, derive, isRef, isState, toState, toValue } from "./state.js";
-import { HTTP } from "../modules/http.js";
-import { I18n } from "../modules/i18n.js";
-import { Router } from "../modules/router.js";
+import { createRef, isRef } from "./ref.js";
+import { createState, createWatcher, derive, isState, toState, toValue } from "./state.js";
+import { type Store, type StoreFactory } from "./store.js";
 export type Environment = "development" | "production";
 /**
  * Log type toggles. Each message category can be turned on or off or enabled only in a specific environment.
@@ -39,13 +42,10 @@ export type LoggerOptions = {
      */
     uid?: string;
 };
-export interface DollaModuleConfig<Options = never> {
-    root: Dolla;
-    options: Options;
-}
-export declare class Dolla {
+export declare class Dolla implements StorableContext {
     #private;
     readonly batch: Batch;
+    private readonly stats;
     readonly http: HTTP;
     readonly i18n: I18n;
     readonly router: Router;
@@ -86,9 +86,6 @@ export declare class Dolla {
      * Returns the top level view Dolla is rendering inside the root element. This will return undefined until Dolla.mount() is called.
      */
     getRootView(): ViewElement | undefined;
-    /**
-     * Registers a Dolla module.
-     */
     /**
      * Sets a context variable and returns its value. Context variables are accessible on the app and in child views.
      */
@@ -100,7 +97,30 @@ export declare class Dolla {
     /**
      * Returns an object of all context variables stored at the app level.
      */
-    getAll(): Record<string | symbol, unknown>;
+    /**
+     * Adds a listener to be called when `eventName` is emitted.
+     */
+    on<T = unknown>(eventName: string, listener: (event: ContextEvent<T>) => void): void;
+    /**
+     * Removes a listener from the list to be called when `eventName` is emitted.
+     */
+    off<T = unknown>(eventName: string, listener: (event: ContextEvent<T>) => void): void;
+    /**
+     * Adds a listener to be called when `eventName` is emitted. The listener is immediately removed after being called once.
+     */
+    once<T = unknown>(eventName: string, listener: (event: ContextEvent<T>) => void): void;
+    /**
+     * Emits a new event to all listeners.
+     */
+    emit<T = unknown>(eventName: string, detail: T): boolean;
+    /**
+     * Attaches a new store to this context.
+     */
+    attachStore(store: Store<any, any>): void;
+    /**
+     * Gets the nearest instance of a store. Throws an error if the store isn't provided higher in the tree.
+     */
+    useStore<Value>(factory: StoreFactory<any, Value>): Value;
     mount(selector: string, view?: ViewFunction<any>): Promise<void>;
     mount(element: HTMLElement, view?: ViewFunction<any>): Promise<void>;
     unmount(): Promise<void>;

package/dist/core/markup.d.ts

@@ -1,25 +1,7 @@
-import type { Renderable, Stringable } from "../types.js";
-import type { Dolla } from "./dolla.js";
+import type { Renderable } from "../types.js";
+import type { ElementContext } from "./context.js";
 import { type ViewContext, type ViewFunction, type ViewResult } from "./nodes/view.js";
-import { MaybeState, type State } from "./state.js";
-export interface ElementContext {
-    /**
-     * The root Dolla instance this element belongs to.
-     */
-    root: Dolla;
-    /**
-     * Storage for context variables.
-     */
-    data: Record<string | symbol, unknown>;
-    /**
-     * A reference to the parent context.
-     */
-    parent?: ElementContext;
-    /**
-     * Whether to create DOM nodes in the SVG namespace. An `<svg>` element will set this to true and pass it down to children.
-     */
-    isSVG?: boolean;
-}
+import { type MaybeState, type State } from "./state.js";
 /**
  * Markup is a set of element metadata that hasn't been constructed into a MarkupElement yet.
  */
@@ -47,6 +29,7 @@ export interface MarkupElement {
     mount(parent: Node, after?: Node): void;
     /**
      * Disconnect from the DOM and clean up. If parentIsUnmounting, DOM operations are skipped.
+     * parentIsUnmounting is set for all children by HTML nodes when they unmount.
      */
     unmount(parentIsUnmounting?: boolean): void;
 }
@@ -55,7 +38,7 @@ export declare function isMarkupElement(value: any): value is MarkupElement;
 export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
 export interface MarkupAttributes {
     $text: {
-        value: MaybeState<Stringable>;
+        value: any;
     };
     $repeat: {
         $items: State<any[]>;
@@ -94,7 +77,7 @@ export declare function cond(predicate: MaybeState<any>, thenContent?: Renderabl
  */
 export declare function repeat<T>(items: MaybeState<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult): Markup;
 /**
- * Render `content` into a `parent` node anywhere in the page, rather than at its position in the view.
+ * Renders `content` into a `parent` node anywhere in the page, rather than its usual position in the view.
  */
 export declare function portal(parent: Node, content: Renderable): Markup;
 /**

package/dist/core/nodes/dom.d.ts

@@ -0,0 +1,13 @@
+import type { MarkupElement } from "../markup";
+import { IS_MARKUP_ELEMENT } from "../symbols";
+/**
+ * Wraps any plain DOM node in a MarkupElement interface.
+ */
+export declare class DOMNode implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    node: Node;
+    get isMounted(): boolean;
+    constructor(node: Node);
+    mount(parent: Node, after?: Node): void;
+    unmount(parentIsUnmounting?: boolean): void;
+}

package/dist/core/nodes/html.d.ts

@@ -1,6 +1,8 @@
-import { type ElementContext, type Markup, type MarkupElement } from "../markup.js";
-import { type Ref, type State, type StopFunction } from "../state.js";
-import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import { type ElementContext } from "../context.js";
+import { type Markup, type MarkupElement } from "../markup.js";
+import { type Ref } from "../ref.js";
+import { type State, type StopFunction } from "../state.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
 type HTMLOptions = {
     elementContext: ElementContext;
     tag: string;
@@ -8,9 +10,10 @@ type HTMLOptions = {
     children?: Markup[];
 };
 export declare class HTML implements MarkupElement {
-    [TYPE_MARKUP_ELEMENT]: boolean;
+    [IS_MARKUP_ELEMENT]: boolean;
     node: HTMLElement | SVGElement;
     props: Record<string, any>;
+    childMarkup: Markup[];
     children: MarkupElement[];
     stopCallbacks: StopFunction[];
     elementContext: ElementContext;

package/dist/core/nodes/observer.d.ts

@@ -1,7 +1,8 @@
 import type { Renderable } from "../../types.js";
-import { type ElementContext, type MarkupElement } from "../markup.js";
+import type { ElementContext } from "../context.js";
+import { type MarkupElement } from "../markup.js";
 import { type MaybeState } from "../state.js";
-import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
 interface ObserverOptions {
     elementContext: ElementContext;
     sources: MaybeState<any>[];
@@ -12,7 +13,7 @@ interface ObserverOptions {
  * Used when a State is passed as a child in a view template.
  */
 export declare class Observer implements MarkupElement {
-    [TYPE_MARKUP_ELEMENT]: boolean;
+    [IS_MARKUP_ELEMENT]: boolean;
     node: Text;
     children: MarkupElement[];
     renderFn: (...values: any) => Renderable;

package/dist/core/nodes/outlet.d.ts

@@ -1,11 +1,11 @@
 import { type MarkupElement } from "../markup.js";
 import { type MaybeState, type StopFunction } from "../state.js";
-import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
 /**
  * Manages several MarkupElements as one.
  */
 export declare class Outlet implements MarkupElement {
-    [TYPE_MARKUP_ELEMENT]: boolean;
+    [IS_MARKUP_ELEMENT]: boolean;
     node: Text;
     isMounted: boolean;
     source: MaybeState<MarkupElement[]>;

package/dist/core/nodes/portal.d.ts

@@ -1,6 +1,7 @@
-import { type Renderable } from "../../types.js";
-import { type ElementContext, type MarkupElement } from "../markup.js";
-import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import type { Renderable } from "../../types.js";
+import type { ElementContext } from "../context.js";
+import { type MarkupElement } from "../markup.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
 interface PortalConfig {
     content: Renderable;
     parent: Node;
@@ -10,7 +11,7 @@ interface PortalConfig {
  * Renders content into a specified parent node.
  */
 export declare class Portal implements MarkupElement {
-    [TYPE_MARKUP_ELEMENT]: boolean;
+    [IS_MARKUP_ELEMENT]: boolean;
     config: PortalConfig;
     element?: MarkupElement;
     get isMounted(): boolean;

package/dist/core/nodes/repeat.d.ts

@@ -1,6 +1,7 @@
-import { type ElementContext, type MarkupElement } from "../markup.js";
+import { type ElementContext } from "../context.js";
+import { type MarkupElement } from "../markup.js";
 import { type Setter, type State, type StopFunction } from "../state.js";
-import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
 import { type ViewContext, type ViewResult } from "./view.js";
 interface RepeatOptions<T> {
     elementContext: ElementContext;
@@ -17,7 +18,7 @@ type ConnectedItem<T> = {
     element: MarkupElement;
 };
 export declare class Repeat<T> implements MarkupElement {
-    [TYPE_MARKUP_ELEMENT]: boolean;
+    [IS_MARKUP_ELEMENT]: boolean;
     node: Text;
     $items: State<T[]>;
     stopCallback?: StopFunction;

package/dist/core/nodes/view.d.ts

@@ -1,12 +1,14 @@
+import { Emitter } from "@manyducks.co/emitter";
+import { type ElementContext, type StorableContext } from "../context.js";
 import type { Logger } from "../dolla.js";
-import { type ElementContext, type Markup, type MarkupElement } from "../markup.js";
+import { type Markup, type MarkupElement } from "../markup.js";
 import { type MaybeState, type State, type StateValues, type StopFunction } from "../state.js";
-import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
 /**
  * Any valid value that a View can return.
  */
 export type ViewResult = Node | State<any> | Markup | Markup[] | null;
-export type ViewFunction<P> = (props: P, context: ViewContext) => ViewResult;
+export type ViewFunction<P> = (this: ViewContext, props: P, context: ViewContext) => ViewResult;
 /**
  * A view that has been constructed into DOM nodes.
  */
@@ -16,23 +18,14 @@ export interface ViewElement extends MarkupElement {
      */
     setChildView(view: ViewFunction<{}>): ViewElement;
 }
-export interface ViewContext extends Logger {
+export interface ViewContext extends Logger, StorableContext {
     /**
      * An ID unique to this view.
      */
     readonly uid: string;
-    /**
-     * Sets a context variable and returns its value. Context variables are accessible on the same context and from those of child views.
-     */
-    set<T>(key: string | symbol, value: T): T;
-    /**
-     * Gets the value of a context variable. Returns null if the variable is not set.
-     */
-    get<T>(key: string | symbol): T | null;
     /**
      * Returns an object of all variables stored on this context.
      */
-    getAll(): Record<string | symbol, unknown>;
     /**
      * Sets the name of the view's built in logger.
      */
@@ -63,8 +56,15 @@ export interface ViewContext extends Logger {
      */
     outlet(): Markup;
 }
+export declare function createView<Props extends Record<string, any> = Record<string, unknown>>(fn: ViewFunction<Props>): ViewFunction<Props>;
+type ViewEvents = {
+    beforeMount: [];
+    mounted: [];
+    beforeUnmount: [];
+    unmounted: [];
+};
 export declare class View<P> implements ViewElement {
-    [TYPE_MARKUP_ELEMENT]: boolean;
+    [IS_MARKUP_ELEMENT]: boolean;
     uniqueId: string;
     _elementContext: ElementContext;
     _logger: Logger;
@@ -75,15 +75,13 @@ export declare class View<P> implements ViewElement {
     _$children: State<MarkupElement[]>;
     _setChildren: import("../state.js").Setter<MarkupElement[], MarkupElement[]>;
     _watcher: import("../state.js").StateWatcher;
-    _beforeMountCallbacks: (() => any)[];
-    _onMountCallbacks: (() => any)[];
-    _beforeUnmountCallbacks: (() => any)[];
-    _onUnmountCallbacks: (() => any)[];
+    _emitter: Emitter<ViewEvents>;
     constructor(elementContext: ElementContext, view: ViewFunction<P>, props: P, children?: Markup[]);
     get node(): Node;
     isMounted: boolean;
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
     setChildView(fn: ViewFunction<{}>): View<{}>;
-    initialize(): void;
+    private _initialize;
 }
+export {};

package/dist/core/ref.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A `Ref` is a function that stores a value when called with a single argument,
+ * and returns the most recently stored value when called with no arguments.
+ */
+export interface Ref<T> {
+    /**
+     * Get: returns the current value stored in the ref (or undefined).
+     */
+    (): T | undefined;
+    /**
+     * Set: stores a new `value` in the ref.
+     */
+    <T>(value: T | undefined): void;
+}
+/**
+ * A Ref is a function that returns the last argument it was called with.
+ * Calling it with no arguments will simply return the latest value.
+ * Calling it with an argument will store that value and immediately return it.
+ *
+ * @param value - An (optional) initial value to store.
+ *
+ * @example
+ * const ref = createRef(5);
+ * ref(); // 5
+ * ref(500);
+ * ref(); // 500
+ */
+export declare function createRef<T>(value?: T): Ref<T>;
+export declare function isRef<T extends Node>(value: any): value is Ref<T>;

package/dist/core/state.d.ts

@@ -1,5 +1,5 @@
 import { strictEqual } from "../utils";
-import { TYPE_STATE } from "./symbols";
+import { IS_STATE } from "./symbols";
 /**
  * Stops the observer that created it when called.
  */
@@ -25,7 +25,7 @@ export interface CreateStateOptions<T> {
 export interface WatchOptions<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 state's current value.
+     * Callback is immediately called with the state's current value by default.
      */
     lazy?: boolean;
 }
@@ -49,34 +49,7 @@ export type SetFunction<I, O = I> = (current: I) => O;
 /** Callback that updates the value of a state. */
 export type Setter<I, O = I> = (value: SetAction<I, O>) => void;
 export type MaybeState<T> = State<T> | T;
-/**
- * A state and setter in one. Useful for passing states that are intended to be updated by subviews.
- */
-export interface SettableState<I, O = I> extends State<I> {
-    /**
-     * Updates the state's value.
-     */
-    set(next: O): void;
-    /**
-     * Takes a callback that recieves the state's current value and returns a new one.
-     */
-    set(callback: (current: I) => O): void;
-}
-/**
- *
- */
-export interface Ref<T> {
-    /**
-     * Get: returns the current value stored in the ref (or undefined).
-     */
-    (): T | undefined;
-    /**
-     * Set: stores a new `value` in the ref.
-     */
-    <T>(value: T | undefined): void;
-}
 export declare function isState<T>(value: any): value is State<T>;
-export declare function isRef<T extends Node>(value: any): value is Ref<T>;
 /**
  * Retrieves a plain value from a variable that may be a state.
  */
@@ -85,6 +58,11 @@ export declare function toValue<T>(source: MaybeState<T>): T;
  * Ensures a variable that may be a state or plain value is a state.
  */
 export declare function toState<T>(value: MaybeState<T>): State<T>;
+/**
+ * ValueHolder implements the core functionality of a State.
+ * It holds a value, which can be retrieved with `get`, updated with `set` and observed with `watch`.
+ * The user-facing API splits up access into a read-only State and a setter function.
+ */
 export declare class ValueHolder<T> implements State<T> {
     value: T;
     watchers: ((value: T) => void)[];
@@ -94,8 +72,11 @@ export declare class ValueHolder<T> implements State<T> {
     set(action: T | SetFunction<T>): void;
     watch(callback: (value: T) => void, options?: WatchOptions<T>): () => void;
 }
+/**
+ * Signal is the implementation of a read-only State.
+ */
 export declare class Signal<T> implements State<T> {
-    [TYPE_STATE]: boolean;
+    [IS_STATE]: boolean;
     __value: State<T>;
     constructor(value: State<T>);
     get(): T;
@@ -128,20 +109,6 @@ export interface DeriveOptions {
  * const $hello = derive([$greeting, name], (greeting, name) => `${greeting}, ${name}!`);
  */
 export declare function derive<Sources extends MaybeState<any>[], T>(sources: [...Sources], fn: (...values: StateValues<Sources>) => T | State<T>, options?: DeriveOptions): State<T>;
-/**
- * A Ref is a function that returns the last argument it was called with.
- * Calling it with no arguments will simply return the latest value.
- * Calling it with an argument will store that value and immediately return it.
- *
- * @param value - An (optional) initial value to store.
- *
- * @example
- * const ref = createRef(5);
- * ref(); // 5
- * ref(500);
- * ref(); // 500
- */
-export declare function createRef<T>(value?: T): Ref<T>;
 export interface StateWatcher {
     /**
      * Watch one or more states, calling the provided `fn` each time one of their values changes.