@manyducks.co/dolla 2.0.0-alpha.54 → 2.0.0-alpha.56

package/README.md

@@ -73,22 +73,11 @@ function Counter(props, ctx) {
         $(() => $count() > 10),
         <span>That's a lot of clicks!</span>,
       )}
-
-      {/* ALT: Or slot a getter function into the DOM and have it conditionally render an element */}
-      {() => {
-        // DEV NOTE
-        // If we get Dynamic to track its rendered elements and diff them by keys
-        // then we may be able to do away with repeat and when and just do things like:
-        //    <ul>{() => items().map(item => <li>{item}</li>)}</ul>
-        if ($count() > 10) {
-          return <span>That's a lot of clicks!</span>;
-        }
-      }}
     </div>
   );
 }
 
-mount(document.body, Counter);
+mount(Counter, document.body);
 ```
 
 > TODO: Show small examples for routing and stores.

package/dist/core/context.d.ts

@@ -1,69 +1,108 @@
-import type { View } from "./nodes/view";
-import type { Source } from "./signals";
-import type { Store, StoreFunction } from "./store";
-export interface ElementContext {
+import type { Store } from "../types";
+import { type Logger, type LoggerOptions } from "./logger";
+import { type EffectFn, type MaybeSignal, type UnsubscribeFn } from "./signals";
+type StoreMap = Map<Store<any, any>, any>;
+export declare enum LifecycleEvent {
+    WILL_MOUNT = 0,
+    DID_MOUNT = 1,
+    WILL_UNMOUNT = 2,
+    DID_UNMOUNT = 3
+}
+type LifecycleListener = () => void;
+declare enum LifecycleState {
+    Unmounted = 0,
+    WillMount = 1,
+    WillMountByDependent = 2,
+    DidMount = 3,
+    DidMountByDependent = 4,
+    WillUnmount = 5,
+    WillUnmountByDependent = 6,
+    DidUnmount = 7
+}
+/**
+ * Manages lifecycle events for a Context.
+ */
+declare class ContextLifecycle {
+    #private;
+    state: LifecycleState;
+    dependents: number;
+    on<E extends LifecycleEvent>(event: E, listener: LifecycleListener): void;
+    off<E extends LifecycleEvent>(event: E, listener: LifecycleListener): void;
+    notify<E extends LifecycleEvent>(event: E): void;
+    emit<E extends LifecycleEvent>(event: E, dependent?: boolean): void;
+    dispose(): void;
+}
+export interface ContextOptions {
+    logger?: LoggerOptions;
+}
+export interface LinkedContextOptions extends ContextOptions {
+    bindLifecycleToParent?: boolean;
+}
+export interface Context extends Logger {
+}
+export declare class Context implements Logger {
+    #private;
+    _name: string;
+    _lifecycle: ContextLifecycle;
+    _parent?: Context;
+    _stores?: StoreMap;
+    _state?: Map<any, any>;
+    get isMounted(): boolean;
     /**
-     * The root Dolla instance this element belongs to.
+     * Returns a new Context with this one as its parent.
      */
+    static linked(parent: Context, name: MaybeSignal<string>, options?: LinkedContextOptions): Context;
+    static emit(event: LifecycleEvent, context: Context): void;
+    constructor(name: MaybeSignal<string>, options?: ContextOptions);
     /**
-     * Stores attached to this context.
+     * Returns the current name of this context.
      */
-    stores: Map<StoreFunction<any, any>, Store<any, any>>;
+    getName(): string;
     /**
-     * The nearest view.
+     * Sets a new name for this context.
      */
-    view?: View<any>;
+    setName(name: MaybeSignal<string>): void;
+    addStore<T>(store: Store<any, T>, options?: any): this;
+    getStore<T>(store: Store<any, T>): T;
     /**
-     * A reference to the parent context.
+     * Schedule a callback function to run just before this context is mounted.
      */
-    parent?: ElementContext;
+    beforeMount(listener: LifecycleListener): () => void;
     /**
-     * Whether to create DOM nodes in the SVG namespace. An `<svg>` element will set this to true and pass it down to children.
+     * Schedule a callback function to run after this context is mounted.
      */
-    isSVG?: boolean;
+    onMount(listener: LifecycleListener): () => void;
     /**
-     * The name of the nearest parent view.
+     * Schedule a callback function to run just before this context is unmounted.
      */
+    beforeUnmount(listener: LifecycleListener): () => void;
     /**
-     * The context of the nearest parent view.
+     * Schedule a callback function to run after this context is unmounted.
      */
+    onUnmount(listener: LifecycleListener): () => void;
+    effect(callback: EffectFn): UnsubscribeFn;
     /**
-     * Current route layer of the nearest view.
+     * Gets the value stored at `key`, or returns the `defaultValue` if none is set.
      */
-    route?: Source<View<{}> | undefined>;
-}
-export interface ComponentContext {
+    getState<T>(key: any, defaultValue: T): T;
     /**
-     * A name for debugging purposes. Prepended to log messages.
+     * Gets the value stored at `key`, or throws an error if none is set.
      */
-    name: string;
-}
-/**
- * A context capable of providing stores.
- */
-export interface StoreProviderContext {
+    getState<T>(key: any): T;
     /**
-     * Attaches a new store to this context and returns it.
+     * Returns a Map containing all state values available to this context.
      */
-    provide<Value>(store: StoreFunction<{}, Value>): Value;
+    getState(): Map<any, any>;
     /**
-     * Attaches a new store to this context and returns it.
+     * Stores `value` at `key` in this context's state.
      */
-    provide<Value>(store: StoreFunction<undefined, Value>): Value;
+    setState<T>(key: any, value: T): void;
     /**
-     * Attaches a new store to this context and returns it.
+     * For each tuple in `entries`, stores `value` at `key` in this context's state.
      */
-    provide<Options, Value>(store: StoreFunction<Options, Value>, options: Options): Value;
+    setState(entries: [key: any, value: any][]): void;
 }
-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;
+export declare function createContext(name: MaybeSignal<string>, options?: ContextOptions): Context;
+export declare class StoreError extends Error {
 }
-type StoreMap = Map<any, any>;
-export declare const globalStores: StoreMap;
-export declare const rootElementContext: {
-    stores: StoreMap;
-};
 export {};

package/dist/core/env.d.ts

@@ -1,9 +1,3 @@
-export type Env = "production" | "development";
-/**
- * Gets the current environment value.
- */
-export declare function getEnv(): Env;
-/**
- * Sets the environment value. Affects which log messages will print and how much debugging info is included in the DOM.
- */
+import type { Env } from "../types";
+export declare function getEnv(): string;
 export declare function setEnv(value: Env): void;

package/dist/core/index.d.ts

@@ -1,20 +1,18 @@
 export { $, effect, get, peek } from "./signals.js";
 export type { MaybeSignal, Signal, Source } from "./signals.js";
+export { createContext } from "./context.js";
+export type { Context } from "./context.js";
+export { m, portal, render, repeat, unless, when } from "./markup.js";
+export type { MarkupNode } from "./markup.js";
+export { type Mixin } from "./nodes/html.js";
 export { ref, type Ref } from "./ref.js";
-export { constructView } from "./nodes/view.js";
+export { mount, type UnmountFn } from "./mount.js";
 export { deepEqual, shallowEqual, strictEqual } from "../utils.js";
-export { Stores, type StoreContext, type StoreFunction } from "./store.js";
-export { type Mixin, type MixinContext } from "./mixin.js";
-export { markup, portal, repeat, unless, when, constructMarkup } from "./markup.js";
-export type { Markup, MarkupElement } from "./markup.js";
 export { getEnv, setEnv } from "./env.js";
-export type { Env } from "./env.js";
 export { createLogger, setLogFilter, setLogLevels } from "./logger.js";
 export type { Logger, LoggerErrorContext, LoggerOptions, LogLevels } from "./logger.js";
-export { mount, type UnmountFn } from "./mount.js";
-export type { ViewContext, ViewElement, ViewFunction } from "./nodes/view.js";
+export type { View, Store, InputType, Renderable, Env } from "../types.js";
 export type { CrashViewProps } from "./views/default-crash-view.js";
-export type { InputType, Renderable } from "../types.js";
 import type { IntrinsicElements as Elements } from "../types.js";
 declare global {
     namespace JSX {

package/dist/core/logger.d.ts

@@ -1,5 +1,5 @@
-import { type Env } from "./env";
-import { type MaybeSignal } from "./signals";
+import type { Env } from "../types.js";
+import { type MaybeSignal } from "./signals.js";
 export interface LogLevels {
     info: boolean | Env;
     log: boolean | Env;
@@ -11,7 +11,7 @@ export interface Logger {
     log(...args: any[]): void;
     warn(...args: any[]): void;
     error(...args: any[]): void;
-    crash(error: Error): void;
+    crash(error: Error): Error;
 }
 export interface LoggerOptions {
     /**

package/dist/core/markup.d.ts

@@ -1,64 +1,68 @@
-import type { Mountable, Renderable } from "../types.js";
-import { type ElementContext } from "./context.js";
-import { View, type ViewContext, type ViewFunction, type ViewResult } from "./nodes/view.js";
+import type { Renderable, View } from "../types.js";
+import { Context } from "./context.js";
+import { KeyFn, RenderFn } from "./nodes/repeat.js";
 import { type MaybeSignal, type Signal } from "./signals.js";
 /**
  * Markup is a set of element metadata that hasn't been constructed into a MarkupElement yet.
  */
-export interface Markup {
+export declare class Markup<P extends Record<any, any> = Record<any, any>> {
     /**
      * 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>;
+    type: string | View<P>;
     /**
-     * Data that will be passed to a new MarkupElement instance when it is constructed.
+     * Data that will be passed to a new MarkupNode instance when it is constructed.
      */
-    props?: Record<string, any>;
+    props: P | undefined;
     /**
      *
      */
-    children?: any[];
+    children: Renderable[];
+    constructor(type: string | View<P>, props?: P, ...children: Renderable[]);
 }
 /**
- * A DOM node that has been constructed from a Markup object.
+ * A mountable node that has been constructed from Markup metadata.
  */
-export interface MarkupElement extends Mountable {
-    readonly domNode?: Node;
+export interface MarkupNode {
+    /**
+     *
+     */
+    readonly root?: Node;
+    /**
+     *
+     */
     readonly isMounted: boolean;
+    /**
+     *
+     */
+    mount(parent: Node, after?: Node): void;
+    /**
+     *
+     */
+    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 declare function constructMarkup(markup: Markup | Markup[]): MarkupElement;
+export declare function isMarkupNode(value: any): value is MarkupNode;
 export declare enum MarkupType {
     Text = "$text",
     Repeat = "$repeat",
     Dynamic = "$dynamic",
-    Outlet = "$outlet",
-    Fragment = "$fragment",
-    Node = "$node",
+    DOM = "$dom",
     Portal = "$portal"
 }
-export interface MarkupAttributes {
+export interface MarkupProps {
     [MarkupType.Text]: {
         value: any;
     };
     [MarkupType.Repeat]: {
         items: Signal<any[]>;
-        keyFn: (value: any, index: number) => string | number | symbol;
-        renderFn: (item: Signal<any>, index: Signal<number>, ctx: ViewContext) => ViewResult;
+        key: KeyFn<any>;
+        render: RenderFn<any>;
     };
     [MarkupType.Dynamic]: {
-        source: Signal<Renderable>;
+        source: Signal<any>;
     };
-    [MarkupType.Outlet]: {
-        view: Signal<View<{}> | undefined>;
-    };
-    [MarkupType.Fragment]: {
-        children: MaybeSignal<MarkupElement[]>;
-    };
-    [MarkupType.Node]: {
+    [MarkupType.DOM]: {
         value: Node;
     };
     [MarkupType.Portal]: {
@@ -67,31 +71,28 @@ export interface MarkupAttributes {
     };
     [tag: string]: Record<string, any>;
 }
-export declare function markup<T extends keyof MarkupAttributes>(type: T, attributes: MarkupAttributes[T], ...children: Renderable[]): Markup;
-export declare function markup<I>(type: ViewFunction<I>, attributes?: I, ...children: any[]): Markup;
+export declare function m<T extends keyof MarkupProps>(type: T, props: MarkupProps[T], ...children: Renderable[]): Markup;
+export declare function m<P extends {}>(type: View<P>, props?: P, ...children: Renderable[]): Markup;
+export declare function m<P>(type: View<P>, props: P, ...children: any[]): Markup;
 /**
- * Displays `thenContent` when `condition` is truthy and `elseContent` when falsy.
+ * If `condition` is truthy, displays `thenContent`, otherwise `elseContent`.
  */
 export declare function when(condition: MaybeSignal<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
 /**
- * Inverted `when`. Displays `thenContent` when `condition` is falsy and `elseContent` when truthy.
+ * Inverted `when`. If `condition` is falsy, displays `thenContent`, otherwise `elseContent`.
  */
 export declare function unless(condition: 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.
+ * Calls `render` for each item in `items`. Dynamically adds and removes views as items change.
+ * The result of `key` is used to compare items and decide if item was added, removed or updated.
  */
-export declare function repeat<T>(items: MaybeSignal<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: (item: Signal<T>, index: Signal<number>, ctx: ViewContext) => ViewResult): Markup;
+export declare function repeat<T>(items: MaybeSignal<T[]>, key: KeyFn<T>, render: RenderFn<T>): 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;
+export declare function render(content: Renderable, context?: Context): MarkupNode;
 /**
- * Construct Markup metadata into a set of MarkupElements.
- */
-export declare function toMarkupElements(elementContext: ElementContext, markup: Markup | Markup[]): MarkupElement[];
-/**
- * Combines one or more MarkupElements into a single MarkupElement.
+ * Convert basically anything into a set of MarkupElements.
  */
-export declare function groupElements(elements: MarkupElement[]): MarkupElement;
-export declare function isRenderable(value: unknown): value is Renderable;
+export declare function toMarkupNodes(context: Context, ...content: any[]): MarkupNode[];

package/dist/core/mount.d.ts

@@ -1,10 +1,15 @@
+import { Router } from "../router/router";
+import type { View } from "../types";
+import { Context } from "./context";
 import { type LoggerErrorContext } from "./logger";
-import { type ViewFunction } from "./nodes/view";
 export type UnmountFn = () => Promise<void>;
 export interface MountOptions {
-    crashView?: ViewFunction<LoggerErrorContext>;
+    crashView?: View<LoggerErrorContext>;
+    /**
+     * An existing Context to use as the root, otherwise a new one will be created.
+     * Use this to provide top-level stores and state to the whole app.
+     */
+    context?: Context;
 }
-export declare function mount(parent: Element, view: any, options?: MountOptions): Promise<UnmountFn>;
-export declare function mount(parent: Element, router: any, options?: MountOptions): Promise<UnmountFn>;
-export declare function mount(parent: string, view: any, options?: MountOptions): Promise<UnmountFn>;
-export declare function mount(parent: string, router: any, options?: MountOptions): Promise<UnmountFn>;
+export declare function mount(view: View<{}>, domNode: Element, options?: MountOptions): Promise<UnmountFn>;
+export declare function mount(router: Router, domNode: Element, options?: MountOptions): Promise<UnmountFn>;

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

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

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

@@ -1,30 +1,28 @@
-import type { Renderable } from "../../types.js";
-import type { ElementContext } from "../context.js";
-import { type MarkupElement } from "../markup.js";
+import type { Context } from "../context.js";
+import { type MarkupNode } from "../markup.js";
 import { Signal } from "../signals.js";
-import { IS_MARKUP_ELEMENT } from "../symbols.js";
-interface DynamicOptions {
-    source: Signal<Renderable>;
-    elementContext: ElementContext;
-}
+import { IS_MARKUP_NODE } from "../symbols.js";
 /**
  * Displays dynamic children without a parent element.
  * Renders a Reactive value via a render function.
  *
  * This is probably the most used element type aside from HTML.
  */
-export declare class Dynamic implements MarkupElement {
-    [IS_MARKUP_ELEMENT]: boolean;
-    domNode: Text;
+export declare class Dynamic implements MarkupNode {
+    [IS_MARKUP_NODE]: boolean;
+    root: Text;
     private children;
-    private elementContext;
-    private source;
+    private context;
+    private $slot;
     private unsubscribe?;
     get isMounted(): boolean;
-    constructor(options: DynamicOptions);
+    constructor(context: Context, $slot: Signal<any>);
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
-    cleanup(parentIsUnmounting: boolean): void;
-    update(children: Renderable[]): void;
+    private cleanup;
+    private update;
+    /**
+     * Move marker node to end of children.
+     */
+    private moveMarker;
 }
-export {};

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

@@ -1,26 +1,19 @@
-import { type ElementContext } from "../context.js";
-import { type MarkupElement } from "../markup.js";
-import { IS_MARKUP_ELEMENT } from "../symbols.js";
-type HTMLOptions = {
-    elementContext: ElementContext;
-    tag: string;
-    props: Record<string, any>;
-    children?: any[];
-};
-export declare class HTML implements MarkupElement {
-    [IS_MARKUP_ELEMENT]: boolean;
-    domNode: SVGElement | HTMLElement;
-    elementContext: ElementContext;
+import { Context } from "../context.js";
+import { type MarkupNode } from "../markup.js";
+import { IS_MARKUP_NODE } from "../symbols.js";
+export type Mixin<E extends Element = Element> = (element: E, context: Context) => void;
+export declare class HTML implements MarkupNode {
+    [IS_MARKUP_NODE]: boolean;
+    root: HTMLElement | SVGElement;
+    private context;
     private props;
-    private childMarkup;
-    private children;
+    private children?;
+    private childNodes;
     private unsubscribers;
-    private mixin?;
-    private logger;
     private ref?;
     private canClickAway;
     get isMounted(): boolean;
-    constructor({ tag, props, children, elementContext }: HTMLOptions);
+    constructor(context: Context, tag: string, props: Record<string, any>, children?: any[]);
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
     private attachProp;
@@ -28,8 +21,3 @@ export declare class HTML implements MarkupElement {
     private applyStyles;
     private applyClasses;
 }
-/**
- * Converts a camelCase string to kebab-case.
- */
-export declare function camelToKebab(value: string): string;
-export {};

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

@@ -1,22 +1,18 @@
 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;
-}
+import { Context } from "../context.js";
+import { type MarkupNode } from "../markup.js";
+import { IS_MARKUP_NODE } from "../symbols.js";
 /**
  * Renders content into a specified parent node.
  */
-export declare class Portal implements MarkupElement {
-    [IS_MARKUP_ELEMENT]: boolean;
-    private config;
+export declare class Portal implements MarkupNode {
+    [IS_MARKUP_NODE]: boolean;
+    private context;
+    private content;
+    private parent;
     private element?;
     get isMounted(): boolean;
-    constructor(config: PortalConfig);
+    constructor(context: Context, content: Renderable, parent: Node);
     mount(_parent: Node, _after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
 }
-export {};

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

@@ -1,28 +1,23 @@
-import { type ElementContext } from "../context.js";
-import { type MarkupElement } from "../markup.js";
+import type { Renderable } from "../../types.js";
+import type { Context } from "../context.js";
+import type { MarkupNode } from "../markup.js";
 import { type Signal } from "../signals.js";
-import { IS_MARKUP_ELEMENT } from "../symbols.js";
-import { type ViewContext, type ViewResult } from "./view.js";
-interface RepeatOptions<T> {
-    elementContext: ElementContext;
-    items: Signal<T[]>;
-    keyFn: (item: T, index: number) => string | number | symbol;
-    renderFn: (item: Signal<T>, index: Signal<number>, ctx: ViewContext) => ViewResult;
-}
-export declare class Repeat<T> implements MarkupElement {
-    [IS_MARKUP_ELEMENT]: boolean;
-    domNode: Text;
+import { IS_MARKUP_NODE } from "../symbols.js";
+export type KeyFn<T> = (item: T, index: number) => string | number | symbol;
+export type RenderFn<T> = (item: Signal<T>, index: Signal<number>, ctx: Context) => Renderable;
+export declare class Repeat<T> implements MarkupNode {
+    [IS_MARKUP_NODE]: boolean;
+    root: Text;
+    private context;
     private items;
+    private key;
+    private render;
     private unsubscribe;
     private connectedItems;
-    private elementContext;
-    private renderFn;
-    private keyFn;
     get isMounted(): boolean;
-    constructor({ elementContext, items, renderFn, keyFn }: RepeatOptions<T>);
+    constructor(context: Context, items: Signal<T[]>, key: KeyFn<T>, render: RenderFn<T>);
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
     private _cleanup;
     private _update;
 }
-export {};