@manyducks.co/dolla 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/jsx-dev-runtime.js

@@ -1,5 +1,5 @@
-import { r as s } from "./passthrough-Bz5ZF4jn.js";
-import { P as m } from "./passthrough-Bz5ZF4jn.js";
+import { s } from "./passthrough-CBbog_A9.js";
+import { P as m } from "./passthrough-CBbog_A9.js";
 function d(n, r, t, e, a, l) {
   const i = { ...o(["children", "key"], r) }, c = Array.isArray(r.children) ? r.children : [r.children];
   return s(n, i, ...c);

package/dist/jsx-runtime.js

@@ -1,5 +1,5 @@
-import { r as t } from "./passthrough-Bz5ZF4jn.js";
-import { P as l } from "./passthrough-Bz5ZF4jn.js";
+import { s as t } from "./passthrough-CBbog_A9.js";
+import { P as l } from "./passthrough-CBbog_A9.js";
 function d(n, e, r) {
   return t(n, e ? { ...u(["children", "key"], e) } : void 0, e.children);
 }

package/dist/markup.d.ts

@@ -1,7 +1,7 @@
 import type { Dolla } from "./modules/dolla.js";
 import { MaybeState, type State } from "./state.js";
 import type { Renderable, Stringable } from "./types.js";
-import { type ViewFunction, type ViewContext, type ViewResult } from "./view.js";
+import { type ViewContext, type ViewFunction, type ViewResult } from "./view.js";
 export interface ElementContext {
     /**
      * The root Dolla instance this element belongs to.
@@ -21,24 +21,34 @@ export interface ElementContext {
     isSVG?: boolean;
 }
 /**
- * Markup is a set of element metadata that hasn't been constructed into a MarkupNode yet.
+ * Markup is a set of element metadata that hasn't been constructed into a MarkupElement yet.
  */
 export interface Markup {
+    /**
+     * In the case of a view, type will be the View function itself. It can also hold an identifier for special nodes like "$cond", "$repeat", etc.
+     * DOM nodes can be created by name, such as HTML elements like "div", "ul" or "span", SVG elements like ""
+     */
     type: string | ViewFunction<any>;
+    /**
+     * Data that will be passed to a new MarkupElement instance when it is constructed.
+     */
     props?: Record<string, any>;
+    /**
+     *
+     */
     children?: Markup[];
 }
 /**
  * A DOM node that has been constructed from a Markup object.
  */
-export interface MarkupNode {
+export interface MarkupElement {
     readonly node?: Node;
     readonly isMounted: boolean;
     mount(parent: Node, after?: Node): void;
     unmount(): void;
 }
 export declare function isMarkup(value: unknown): value is Markup;
-export declare function isNode(value: unknown): value is MarkupNode;
+export declare function isMarkupElement(value: unknown): value is MarkupElement;
 export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
 export interface MarkupAttributes {
     $text: {
@@ -59,7 +69,7 @@ export interface MarkupAttributes {
         renderFn: (...items: any) => Renderable;
     };
     $outlet: {
-        $children: State<MarkupNode[]>;
+        $children: State<MarkupElement[]>;
     };
     $node: {
         value: Node;
@@ -90,19 +100,11 @@ export declare function repeat<T>(items: MaybeState<T[]>, keyFn: (value: T, inde
  */
 export declare function portal(parent: Node, content: Renderable): Markup;
 /**
- * A special kind of State exclusively for storing references to DOM nodes.
- */
-export declare function createRef<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 State<T | undefined> {
-    node: T | undefined;
-}
-/**
- * Construct Markup metadata into a set of MarkupNodes.
+ * Construct Markup metadata into a set of MarkupElements.
  */
-export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]): MarkupNode[];
+export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]): MarkupElement[];
 /**
- * Combines one or more MarkupNodes into a single MarkupNode.
+ * Combines one or more MarkupElements into a single MarkupElement.
  */
-export declare function mergeNodes(nodes: MarkupNode[]): MarkupNode;
+export declare function mergeElements(nodes: MarkupElement[]): MarkupElement;
 export declare function isRenderable(value: unknown): value is Renderable;

package/dist/modules/dolla.d.ts

@@ -1,6 +1,6 @@
-import { createRef, isRef, MarkupNode, type Markup } from "../markup.js";
-import { createSettableState, createState, derive, toSettableState, toState, valueOf, watch, type State } from "../state.js";
-import { type ViewFunction, type ViewNode } from "../view.js";
+import { type Markup, type MarkupElement } from "../markup.js";
+import { createRef, createSettableState, createState, createWatcher, derive, isRef, toSettableState, toState, valueOf, type State } from "../state.js";
+import { type ViewElement, type ViewFunction } from "../view.js";
 import { type CrashViewProps } from "../views/default-crash-view.js";
 import { HTTP } from "./http.js";
 import { I18n } from "./i18n.js";
@@ -45,13 +45,14 @@ export declare class Dolla {
     readonly render: Render;
     readonly router: Router;
     constructor();
+    watch: <I extends import("../state.js").MaybeState<any>[]>(states: [...I], fn: (...currentValues: import("../state.js").StateValues<I>) => void) => import("../state.js").StopFunction;
     createState: typeof createState;
     createSettableState: typeof createSettableState;
     toSettableState: typeof toSettableState;
     toState: typeof toState;
     valueOf: typeof valueOf;
     derive: typeof derive;
-    watch: typeof watch;
+    createWatcher: typeof createWatcher;
     createRef: typeof createRef;
     isRef: typeof isRef;
     /**
@@ -73,6 +74,18 @@ export declare class Dolla {
      * When a crash is reported the app will be unmounted and replaced with this crash page.
      */
     setCrashView(view: ViewFunction<CrashViewProps>): void;
+    /**
+     * Sets a context variable and returns its value. Context variables are accessible on the app and in 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 context variables stored at the app level.
+     */
+    getAll(): Record<string | symbol, unknown>;
     mount(selector: string, view?: ViewFunction<any>): Promise<void>;
     mount(element: HTMLElement, view?: ViewFunction<any>): Promise<void>;
     unmount(): Promise<void>;
@@ -103,9 +116,9 @@ export declare class Dolla {
     /**
      *
      */
-    constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]): ViewNode;
+    constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]): ViewElement;
     /**
      *
      */
-    constructMarkup(markup: Markup | Markup[]): MarkupNode;
+    constructMarkup(markup: Markup | Markup[]): MarkupElement;
 }

package/dist/modules/i18n.d.ts

@@ -1,9 +1,17 @@
 import { type MaybeState, type State } from "../state.js";
 import type { Dolla } from "./dolla.js";
 /**
- * An object where values are either a translated string or another nested Translation object.
+ * A JSON object of translated strings. Values can be string templates or nested objects.
  */
-type LocalizedStrings = Record<string, string | Record<string, string | Record<string, string | Record<string, string>>>>;
+interface LocalizedStrings extends Record<string, string | LocalizedStrings> {
+}
+/**
+ * A formatter to be applied to a variable.
+ */
+type Format = {
+    name: string;
+    options: Record<string, any>;
+};
 export interface TranslationConfig {
     /**
      * Name of the locale this translation is for (BCP 47 locale names recommended).
@@ -34,6 +42,18 @@ export type TOptions = {
      *
      */
     context?: MaybeState<string>;
+    /**
+     * Override formats specified in the template with the ones in the array for each named variable.
+     *
+     * @example
+     * t("example_key", {
+     *   count: 5,
+     *   formatOverrides: {
+     *     count: [ { name: "datetime", options: { style: "currency", currency: "JPY" } } ]
+     *   }
+     * });
+     */
+    formatOverrides?: MaybeState<Record<string, Record<string, Format[]>>>;
     [value: string]: MaybeState<any>;
 };
 export type Formatter = (locale: string, value: unknown, options: Record<string, any>) => string;

package/dist/modules/router.d.ts

@@ -1,5 +1,5 @@
 import { type Stringable } from "../types.js";
-import { ViewNode, type ViewFunction } from "../view.js";
+import { type ViewElement, type ViewFunction } from "../view.js";
 import type { Dolla } from "./dolla.js";
 export interface RouteMatchContext {
     /**
@@ -100,7 +100,7 @@ export interface RouterSetupOptions {
 }
 export interface RouterElements {
     readonly rootElement?: HTMLElement;
-    readonly rootView?: ViewNode;
+    readonly rootView?: ViewElement;
 }
 export declare class Router {
     #private;

package/dist/nodes/cond.d.ts

@@ -1,4 +1,4 @@
-import { type MarkupNode, type ElementContext, type Markup } from "../markup.js";
+import { type MarkupElement, type ElementContext, type Markup } from "../markup.js";
 import { type State, type StopFunction } from "../state.js";
 import { type Renderable } from "../types.js";
 export interface ConditionalConfig {
@@ -7,14 +7,14 @@ export interface ConditionalConfig {
     elseContent?: Renderable;
     elementContext: ElementContext;
 }
-export declare class Conditional implements MarkupNode {
+export declare class Conditional implements MarkupElement {
     node: Node;
     endNode: Node;
     $predicate: State<any>;
     stopCallback?: StopFunction;
     thenContent?: Markup[];
     elseContent?: Markup[];
-    connectedContent: MarkupNode[];
+    connectedContent: MarkupElement[];
     elementContext: ElementContext;
     initialUpdateHappened: boolean;
     previousValue?: any;

package/dist/nodes/html.d.ts

@@ -1,15 +1,15 @@
-import { type ElementContext, type Markup, type MarkupNode, type Ref } from "../markup.js";
-import { type StopFunction } from "../state.js";
+import { type ElementContext, type Markup, type MarkupElement } from "../markup.js";
+import { type Ref, type State, type StopFunction } from "../state.js";
 type HTMLOptions = {
     elementContext: ElementContext;
     tag: string;
     props: Record<string, any>;
     children?: Markup[];
 };
-export declare class HTML implements MarkupNode {
+export declare class HTML implements MarkupElement {
     node: HTMLElement | SVGElement;
     props: Record<string, any>;
-    children: MarkupNode[];
+    children: MarkupElement[];
     stopCallbacks: StopFunction[];
     elementContext: ElementContext;
     uniqueId: string;
@@ -20,6 +20,7 @@ export declare class HTML implements MarkupNode {
     mount(parent: Node, after?: Node): void;
     unmount(): void;
     getUpdateKey(type: string, value: string | number): string;
+    attachProp<T>(value: State<T> | T, callback: (value: T) => void, updateKey: string): void;
     applyProps(element: HTMLElement | SVGElement, props: Record<string, unknown>): void;
     applyStyles(element: HTMLElement | SVGElement, styles: unknown, stopCallbacks: StopFunction[]): () => void;
     applyClasses(element: HTMLElement | SVGElement, classes: unknown, stopCallbacks: StopFunction[]): () => void;

package/dist/nodes/observer.d.ts

@@ -1,4 +1,4 @@
-import { type ElementContext, type MarkupNode } from "../markup.js";
+import { type ElementContext, type MarkupElement } from "../markup.js";
 import { type State } from "../state.js";
 import type { Renderable } from "../types.js";
 interface ObserverOptions {
@@ -9,16 +9,17 @@ interface ObserverOptions {
 /**
  * Displays dynamic children without a parent element.
  */
-export declare class Observer implements MarkupNode {
+export declare class Observer implements MarkupElement {
     node: Node;
     endNode: Node;
-    connectedViews: MarkupNode[];
+    connectedViews: MarkupElement[];
     renderFn: (...values: any) => Renderable;
     elementContext: ElementContext;
     observerControls: {
         start: () => void;
         stop: () => void;
     };
+    watcher: import("../state.js").StateWatcher;
     get isMounted(): boolean;
     constructor({ states, renderFn, elementContext }: ObserverOptions);
     mount(parent: Node, after?: Node): void;

package/dist/nodes/outlet.d.ts

@@ -1,22 +1,22 @@
-import { type MarkupNode, type ElementContext } from "../markup.js";
+import { type MarkupElement, type ElementContext } from "../markup.js";
 import { type State, type StopFunction } from "../state.js";
 export interface OutletConfig {
-    $children: State<MarkupNode[]>;
+    $children: State<MarkupElement[]>;
     elementContext: ElementContext;
 }
 /**
  * Manages an array of DOMHandles.
  */
-export declare class Outlet implements MarkupNode {
+export declare class Outlet implements MarkupElement {
     node: Node;
     endNode: Node;
-    $children: State<MarkupNode[]>;
+    $children: State<MarkupElement[]>;
     stopCallback?: StopFunction;
-    connectedChildren: MarkupNode[];
+    mountedChildren: MarkupElement[];
     elementContext: ElementContext;
     constructor(config: OutletConfig);
     get isMounted(): boolean;
     mount(parent: Node, after?: Node | undefined): void;
     unmount(): void;
-    update(newChildren: MarkupNode[]): void;
+    update(newChildren: MarkupElement[]): void;
 }

package/dist/nodes/portal.d.ts

@@ -1,4 +1,4 @@
-import { type MarkupNode, type ElementContext } from "../markup.js";
+import { type MarkupElement, type ElementContext } from "../markup.js";
 import { type Renderable } from "../types.js";
 interface PortalConfig {
     content: Renderable;
@@ -8,9 +8,9 @@ interface PortalConfig {
 /**
  * Renders content into a specified parent node.
  */
-export declare class Portal implements MarkupNode {
+export declare class Portal implements MarkupElement {
     config: PortalConfig;
-    handle?: MarkupNode;
+    element?: MarkupElement;
     get isMounted(): boolean;
     constructor(config: PortalConfig);
     mount(_parent: Node, _after?: Node): void;

package/dist/nodes/repeat.d.ts

@@ -1,4 +1,4 @@
-import { type MarkupNode, type ElementContext } from "../markup.js";
+import { type MarkupElement, type ElementContext } from "../markup.js";
 import { type State, type Setter, type StopFunction } from "../state.js";
 import { type ViewContext, type ViewResult } from "../view.js";
 interface RepeatOptions<T> {
@@ -13,9 +13,9 @@ type ConnectedItem<T> = {
     setValue: Setter<T>;
     $index: State<number>;
     setIndex: Setter<number>;
-    handle: MarkupNode;
+    element: MarkupElement;
 };
-export declare class Repeat<T> implements MarkupNode {
+export declare class Repeat<T> implements MarkupElement {
     node: Node;
     endNode: Node;
     $items: State<T[]>;

package/dist/nodes/text.d.ts

@@ -1,4 +1,4 @@
-import { type MarkupNode } from "../markup.js";
+import { type MarkupElement } from "../markup.js";
 import { type MaybeState, type StopFunction } from "../state.js";
 interface Stringable {
     toString(): string;
@@ -6,7 +6,7 @@ interface Stringable {
 interface TextOptions {
     value: MaybeState<Stringable>;
 }
-export declare class Text implements MarkupNode {
+export declare class Text implements MarkupElement {
     node: globalThis.Text;
     value: MaybeState<Stringable>;
     stopCallback?: StopFunction;