@manyducks.co/dolla 2.0.0-alpha.4 → 2.0.0-alpha.41

package/dist/core/context.d.ts

@@ -0,0 +1,53 @@
+import type { Dolla } from "./dolla";
+import type { Store, StoreFunction } from "./store";
+export interface ElementContext {
+    /**
+     * The root Dolla instance this element belongs to.
+     */
+    root: Dolla;
+    /**
+     * Stores attached to this context.
+     */
+    stores: Map<StoreFunction<any, any>, 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 {
+    /**
+     * A name for debugging purposes. Prepended to log messages.
+     */
+    name: string;
+}
+/**
+ * A context capable of providing stores.
+ */
+export interface StoreProviderContext {
+    /**
+     * Attaches a new store to this context and returns it.
+     */
+    provide<Value>(store: StoreFunction<{}, Value>): Value;
+    /**
+     * Attaches a new store to this context and returns it.
+     */
+    provide<Value>(store: StoreFunction<undefined, Value>): Value;
+    /**
+     * Attaches a new store to this context and returns it.
+     */
+    provide<Options, Value>(store: StoreFunction<Options, Value>, options: Options): Value;
+}
+export interface StoreConsumerContext {
+    /**
+     * Gets the closest instance of a store. Throws an error if the store isn't provided higher in the tree.
+     */
+    get<Value>(store: StoreFunction<any, Value>): Value;
+}

package/dist/{modules → core}/dolla.d.ts

@@ -1,11 +1,11 @@
-import { createRef, isRef, MarkupNode, type Markup } from "../markup.js";
-import { createSettableSignal, createSignal, derive, designalify, signalify, toSettableSignal, watch, type Signal } from "../signals.js";
-import { type ViewFunction, type ViewNode } from "../view.js";
-import { type CrashViewProps } from "../views/default-crash-view.js";
-import { HTTP } from "./http.js";
-import { Language } from "./language.js";
-import { Render } from "./render.js";
-import { Router } from "./router.js";
+import { HTTP } from "../http/index.js";
+import { type Router } from "../router/index.js";
+import { I18n } from "../translate/index.js";
+import type { StoreConsumerContext, StoreProviderContext } from "./context.js";
+import { type Markup, type MarkupElement } from "./markup.js";
+import { type ViewElement, type ViewFunction } from "./nodes/view.js";
+import { StoreFunction } from "./store.js";
+import { type CrashViewProps } from "./views/default-crash-view.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.
@@ -22,6 +22,7 @@ export interface Logger {
     warn(...args: any[]): void;
     error(...args: any[]): void;
     crash(error: Error): void;
+    setName(name: string): Logger;
 }
 export interface LoggerErrorContext {
     error: Error;
@@ -38,22 +39,11 @@ export type LoggerOptions = {
      */
     uid?: string;
 };
-export declare class Dolla {
+export declare class Dolla implements StoreProviderContext, StoreConsumerContext {
     #private;
     readonly http: HTTP;
-    readonly language: Language;
-    readonly render: Render;
-    readonly router: Router;
+    readonly i18n: I18n;
     constructor();
-    createSignal: typeof createSignal;
-    createSettableSignal: typeof createSettableSignal;
-    toSettableSignal: typeof toSettableSignal;
-    signalify: typeof signalify;
-    designalify: typeof designalify;
-    derive: typeof derive;
-    watch: typeof watch;
-    createRef: typeof createRef;
-    isRef: typeof isRef;
     /**
      * True when the app is connected to a DOM node and displayed to the user.
      */
@@ -73,8 +63,34 @@ 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;
-    mount(selector: string, view?: ViewFunction<any>): Promise<void>;
-    mount(element: HTMLElement, view?: ViewFunction<any>): Promise<void>;
+    /**
+     * Returns the HTMLElement Dolla is mounted to. This will return undefined until Dolla.mount() is called.
+     */
+    getRootElement(): Element | undefined;
+    /**
+     * Returns the top level view Dolla is rendering inside the root element. This will return undefined until Dolla.mount() is called.
+     */
+    getRootView(): ViewElement | undefined;
+    /**
+     * Attaches a new store to this context.
+     */
+    provide<Value>(store: StoreFunction<{}, Value>): Value;
+    /**
+     * Attaches a new store to this context.
+     */
+    provide<Value>(store: StoreFunction<undefined, Value>): Value;
+    /**
+     * Attaches a new store to this context.
+     */
+    provide<Options, Value>(store: StoreFunction<Options, Value>, options: Options): Value;
+    /**
+     * Gets the nearest instance of a store. Throws an error if the store isn't provided higher in the tree.
+     */
+    get<Value>(store: StoreFunction<any, Value>): Value;
+    mount(selector: string, router: Router): Promise<void>;
+    mount(selector: string, view: ViewFunction<any>): Promise<void>;
+    mount(element: Element, router: Router): Promise<void>;
+    mount(element: Element, view: ViewFunction<any>): Promise<void>;
     unmount(): Promise<void>;
     /**
      * Registers a `callback` to run after `Dolla.mount` is called, before the app is mounted. If `callback` returns a Promise,
@@ -99,13 +115,14 @@ export declare class Dolla {
      */
     setLoggles(options: Partial<Loggles>): void;
     setLogFilter(filter: string | RegExp): void;
-    createLogger(name: string | Signal<string>, options?: LoggerOptions): Logger;
+    createLogger(name: string, options?: LoggerOptions): Logger;
     /**
      *
      */
-    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;
 }
+export declare function getDefaultConsole(): Console | undefined;

package/dist/core/markup.d.ts

@@ -0,0 +1,90 @@
+import type { Renderable } from "../types.js";
+import type { ElementContext } from "./context.js";
+import { type ViewContext, type ViewFunction, type ViewResult } from "./nodes/view.js";
+import { MaybeReactive, type Reactive } from "./signals.js";
+/**
+ * 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 MarkupElement {
+    readonly node?: Node;
+    readonly isMounted: boolean;
+    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;
+}
+export declare function isMarkup(value: any): value is Markup;
+export declare function isMarkupElement(value: any): value is MarkupElement;
+export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
+export interface MarkupAttributes {
+    $text: {
+        value: any;
+    };
+    $list: {
+        items: Reactive<any[]>;
+        keyFn: (value: any, index: number) => string | number | symbol;
+        renderFn: (item: Reactive<any>, index: Reactive<number>, ctx: ViewContext) => ViewResult;
+    };
+    $dynamic: {
+        source: Reactive<Renderable>;
+    };
+    $outlet: {
+        children: MaybeReactive<MarkupElement[]>;
+    };
+    $node: {
+        value: Node;
+    };
+    $portal: {
+        content: Renderable;
+        parent: Node;
+    };
+    [tag: string]: Record<string, any>;
+}
+export declare function createMarkup<T extends keyof MarkupAttributes>(type: T, attributes: MarkupAttributes[T], ...children: Renderable[]): Markup;
+export declare function createMarkup<I>(type: ViewFunction<I>, attributes?: I, ...children: Renderable[]): Markup;
+/**
+ * Generate markup with HTML in a tagged template literal.
+ */
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => Markup | Markup[];
+/**
+ * Displays content conditionally. When `condition` holds a truthy value, `thenContent` is displayed; when `condition` holds a falsy value, `elseContent` is displayed.
+ */
+export declare function cond(condition: MaybeReactive<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 list<T>(items: MaybeReactive<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: (item: Reactive<T>, index: Reactive<number>, ctx: ViewContext) => ViewResult): Markup;
+/**
+ * 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;
+/**
+ * Construct Markup metadata into a set of MarkupElements.
+ */
+export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]): MarkupElement[];
+/**
+ * Combines one or more MarkupElements into a single MarkupElement.
+ */
+export declare function groupElements(elements: MarkupElement[]): MarkupElement;
+export declare function isRenderable(value: unknown): value is Renderable;

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/dynamic.d.ts

@@ -0,0 +1,28 @@
+import type { Renderable } from "../../types.js";
+import type { ElementContext } from "../context.js";
+import { type MarkupElement } from "../markup.js";
+import { type Reactive } from "../signals.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
+interface DynamicOptions {
+    source: Reactive<Renderable>;
+    elementContext: ElementContext;
+}
+/**
+ * Displays dynamic children without a parent element.
+ * Renders a Reactive value via a render function.
+ */
+export declare class Dynamic implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    node: Text;
+    private children;
+    private elementContext;
+    private source;
+    private unsubscribe?;
+    get isMounted(): boolean;
+    constructor(options: DynamicOptions);
+    mount(parent: Node, after?: Node): void;
+    unmount(parentIsUnmounting?: boolean): void;
+    cleanup(parentIsUnmounting: boolean): void;
+    update(children: Renderable[]): void;
+}
+export {};

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

@@ -0,0 +1,33 @@
+import { type ElementContext } from "../context.js";
+import { type Markup, type MarkupElement } from "../markup.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
+type HTMLOptions = {
+    elementContext: ElementContext;
+    tag: string;
+    props: Record<string, any>;
+    children?: Markup[];
+};
+export declare class HTML implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    node: HTMLElement | SVGElement;
+    private props;
+    private childMarkup;
+    private children;
+    private unsubscribers;
+    private elementContext;
+    private ref?;
+    private canClickAway;
+    get isMounted(): boolean;
+    constructor({ tag, props, children, elementContext }: HTMLOptions);
+    mount(parent: Node, after?: Node): void;
+    unmount(parentIsUnmounting?: boolean): void;
+    private attachProp;
+    private applyProps;
+    private applyStyles;
+    private applyClasses;
+}
+/**
+ * Converts a camelCase string to kebab-case.
+ */
+export declare function camelToKebab(value: string): string;
+export {};

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

@@ -0,0 +1,28 @@
+import { type ElementContext } from "../context.js";
+import { type MarkupElement } from "../markup.js";
+import { type Reactive } from "../signals.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
+import { type ViewContext, type ViewResult } from "./view.js";
+interface ListOptions<T> {
+    elementContext: ElementContext;
+    items: Reactive<T[]>;
+    keyFn: (item: T, index: number) => string | number | symbol;
+    renderFn: (item: Reactive<T>, index: Reactive<number>, ctx: ViewContext) => ViewResult;
+}
+export declare class List<T> implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    node: Text;
+    private items;
+    private unsubscribe;
+    private connectedItems;
+    private elementContext;
+    private renderFn;
+    private keyFn;
+    get isMounted(): boolean;
+    constructor({ elementContext, items, renderFn, keyFn }: ListOptions<T>);
+    mount(parent: Node, after?: Node): void;
+    unmount(parentIsUnmounting?: boolean): void;
+    private _cleanup;
+    private _update;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import { type MarkupElement } from "../markup.js";
+import { type MaybeReactive } from "../signals.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
+/**
+ * Manages several MarkupElements as one.
+ */
+export declare class Outlet implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    node: Text;
+    isMounted: boolean;
+    private source;
+    private elements;
+    private unsubscribe?;
+    constructor(source: MaybeReactive<MarkupElement[]>);
+    mount(parent: Node, after?: Node | undefined): void;
+    unmount(parentIsUnmounting?: boolean): void;
+    private cleanup;
+    private update;
+}

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

@@ -0,0 +1,22 @@
+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;
+    elementContext: ElementContext;
+}
+/**
+ * Renders content into a specified parent node.
+ */
+export declare class Portal implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    private config;
+    private element?;
+    get isMounted(): boolean;
+    constructor(config: PortalConfig);
+    mount(_parent: Node, _after?: Node): void;
+    unmount(parentIsUnmounting?: boolean): void;
+}
+export {};

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

@@ -0,0 +1,78 @@
+import type { ComponentContext, ElementContext, StoreConsumerContext, StoreProviderContext } from "../context.js";
+import type { Logger } from "../dolla.js";
+import { type Markup, type MarkupElement } from "../markup.js";
+import { type EffectCallback, type Reactive, type UnsubscribeFunction } from "../signals.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
+/**
+ * Any valid value that a View can return.
+ */
+export type ViewResult = Node | Reactive<any> | Markup | Markup[] | null;
+export type ViewFunction<P> = (this: ViewContext, props: P, context: ViewContext) => ViewResult;
+/**
+ * A view that has been constructed into DOM nodes.
+ */
+export interface ViewElement extends MarkupElement {
+    /**
+     * Take a ViewFunction and render it as a child of this view.
+     */
+    setChildView(view: ViewFunction<{}>): ViewElement;
+}
+export interface ViewContext extends Omit<Logger, "setName">, ComponentContext, StoreProviderContext, StoreConsumerContext {
+    /**
+     * An ID unique to this view.
+     */
+    readonly uid: string;
+    /**
+     * True while this view is connected to the DOM.
+     */
+    readonly isMounted: boolean;
+    /**
+     * Registers a callback to run just before this view is mounted. DOM nodes are not yet attached to the page.
+     */
+    beforeMount(callback: () => void): void;
+    /**
+     * Registers a callback to run just after this view is mounted.
+     */
+    onMount(callback: () => void): void;
+    /**
+     * Registers a callback to run just before this view is unmounted. DOM nodes are still attached to the page.
+     */
+    beforeUnmount(callback: () => void): void;
+    /**
+     * Registers a callback to run just after this view is unmounted.
+     */
+    onUnmount(callback: () => void): void;
+    /**
+     * Passes a getter function to `callback` that will track reactive states and return their current values.
+     * Callback will be run each time a tracked state gets a new value.
+     */
+    effect(callback: EffectCallback): UnsubscribeFunction;
+    /**
+     * Returns a Markup element that displays this view's children.
+     */
+    outlet(): Markup;
+}
+export declare class View<P> implements ViewElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    uniqueId: string;
+    elementContext: ElementContext;
+    logger: Logger;
+    props: P;
+    fn: ViewFunction<P>;
+    element?: MarkupElement;
+    childMarkup: Markup[];
+    children: import("../signals.js").Atom<MarkupElement[]>;
+    lifecycleListeners: {
+        beforeMount: (() => any)[];
+        mount: (() => any)[];
+        beforeUnmount: (() => any)[];
+        unmount: (() => any)[];
+    };
+    constructor(elementContext: ElementContext, fn: 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<{}>;
+    private _initialize;
+}

package/dist/core/ref.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 number = ref(5);
+ * number(); // 5
+ * number(500);
+ * number(); // 500
+ */
+export declare function ref<T>(value?: T): Ref<T>;

package/dist/core/signals.d.ts

@@ -0,0 +1,127 @@
+import { type Dependency, type Subscriber } from "alien-signals";
+export interface Effect extends Subscriber, Dependency {
+    fn(): void;
+}
+export interface Computed<T = any> extends Signal<T | undefined>, Subscriber {
+    getter: (cachedValue?: T) => T;
+    equals: EqualityFunction<T>;
+}
+export interface Signal<T = any> extends Dependency {
+    currentValue: T;
+}
+/**
+ * A readable reactive state object.
+ */
+export interface Reactive<T> {
+    /**
+     * The current value.
+     */
+    readonly value: T;
+}
+export type MaybeReactive<T> = Reactive<T> | T;
+export type UnsubscribeFunction = () => void;
+export declare function pauseTracking(): void;
+export declare function resumeTracking(): void;
+/**
+ * A function to compare the current and next values. Returning `true` means the value has changed.
+ */
+export type EqualityFunction<T> = (current: T, next: T) => boolean;
+export interface ReactiveOptions<T> {
+    /**
+     * A label for debugging purposes.
+     */
+    name?: string;
+    /**
+     * A function to compare the current and next values. Returning `true` means the value has changed.
+     */
+    equals?: EqualityFunction<T>;
+}
+export declare class Atom<T> implements Reactive<T> {
+    #private;
+    name?: string;
+    constructor(signal: Signal<T>, options?: ReactiveOptions<T>);
+    get value(): T;
+    set value(next: T);
+}
+/**
+ * Determines if a value is reactive.
+ */
+export declare function isReactive<T>(value: any): value is Reactive<T>;
+/**
+ * Creates a simple reactive container that stores a value.
+ * Atom values can be read and updated with the `value` property
+ *
+ * @example
+ * const count = atom(1);
+ * count.value++;
+ * count.value; // 2
+ */
+export declare function atom<T>(): Atom<T | undefined>;
+/**
+ * Creates a simple reactive container that stores a value.
+ * Atom values can be read and updated with the `value` property.
+ *
+ * @example
+ * const count = atom(1);
+ * count.value++;
+ * count.value; // 2
+ */
+export declare function atom<T>(value: T, options?: ReactiveOptions<T>): Atom<T>;
+/**
+ * Creates a simple reactive container that stores a value.
+ * Atom values can be read and updated with the `value` property.
+ *
+ * @example
+ * const count = atom(1);
+ * count.value++;
+ * count.value; // 2
+ */
+export declare function atom<T>(value?: T, options?: ReactiveOptions<T>): Atom<T | undefined>;
+type ComposeCallback<T> = (previousValue?: T) => MaybeReactive<T>;
+/**
+ * Creates a reactive container that derives its value from other reactive values that it tracks.
+ *
+ * @example
+ * const count = atom(1);
+ * const doubled = compose(() => get(count) * 2);
+ */
+export declare function compose<T>(fn: ComposeCallback<T>, options?: ReactiveOptions<T>): Reactive<T>;
+/**
+ * Takes a new value to set, or a callback that receives the current value and returns a new value to set.
+ */
+type Setter<T> = (next: T | ((current: T) => T)) => void;
+export declare function set<T>(atom: Atom<T>): Setter<T>;
+export declare function set<T>(atom: Atom<T>, next: T | ((current: T) => T)): void;
+/**
+ * Returns the current value from a reactive _and track it_ if called in a `compose` or `effect` scope.
+ * If a non-reactive value is passed it will just be returned untracked.
+ *
+ * @example
+ * const count = atom(1);
+ * const value = get(count); // 1
+ *
+ * const value = get(5); // 5
+ */
+export declare function get<T>(value: MaybeReactive<T>): T;
+/**
+ * Returns the current value from a reactive (without tracking).
+ * If a non-reactive value is passed it will be returned.
+ *
+ * @example
+ * ctx.effect(() => {
+ *   const doubled = get(count) * 2; // `count` will be tracked
+ *
+ *   const doubled = peek(count) * 2; // `count` will NOT be tracked
+ * });
+ */
+export declare function peek<T>(value: MaybeReactive<T>): T;
+export type EffectCallback = () => void;
+/**
+ * Creates a tracked scope that re-runs whenever the values of any tracked reactives changes.
+ * Reactives are tracked by accessing their `value` within the body of the function.
+ *
+ * NOTE: You must call the unsubscribe function to stop watching for changes.
+ * If you are using an effect inside a View or Store, use `ctx.effect` instead, which cleans up automatically when the component unmounts.
+ */
+export declare function effect(fn: EffectCallback): UnsubscribeFunction;
+export {};