@manyducks.co/dolla 2.0.0-alpha.22 → 2.0.0-alpha.24

package/README.md

@@ -20,8 +20,8 @@ Let's first get into some examples.
 
 ### Basic State API
 
-```jsx
-import { createState, toState, valueOf, derive, createWatcher } from "@manyducks.co/dolla";
+```js
+import { createState, derive } from "@manyducks.co/dolla";
 
 const [$count, setCount] = createState(72);
 
@@ -35,26 +35,24 @@ $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
+```
 
-// Derive a new state from one or more other states. Whenever $count changes, $doubled will follow.
+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);
-const $sum = derive([$count, $doubled], (count, doubled) => count + doubled);
 
-// Returns the value of a state. If the value is not a state it is returned as is.
-const count = valueOf($count);
-const bool = valueOf(true);
+$doubled.get(); // 602
 
-// Creates a state from a value. If the value is already a state it is returned as is.
-const $bool = toState(true);
-const $anotherCount = toState($count);
+setCount(500);
 
-const watcher = createWatcher();
+$doubled.get(); // 1000
+```
+
+### In Views
 
-// Watch for changes to the value
-const stop = watcher.watch([$count], (value) => [
-// This function is called immediately with the current value, then again each time the value changes.
-]);
-stop(); // Stop watching for changes
+```jsx
 
 ```
 
@@ -105,12 +103,12 @@ $doubled(); // 100
 $value(); // 50
 ```
 
-## Views [id="section-views"]
+<h2 id="section-views">Views</h2>
 
 A basic view:
 
 ```js
-import Dolla, { createState, html } from "@manyducks.co/dolla";
+import Dolla, { createState } from "@manyducks.co/dolla";
 
 function Counter(props, ctx) {
   const [$count, setCount] = createState(0);
@@ -119,12 +117,24 @@ function Counter(props, ctx) {
     setCount((count) => count + 1);
   }
 
-  return html`
+  function decrement() {
+    setCount((count) => count - 1);
+  }
+
+  function reset() {
+    setCount(0);
+  }
+
+  return (
     <div>
-      <p>Clicks: ${$count}</p>
-      <button onclick=${increment}>+1</button>
+      <p>Clicks: {$count}</p>
+      <div>
+        <button onClick={decrement}>-1</button>
+        <button onClick={reset}>0</button>
+        <button onClick={increment}>-1</button>
+      </div>
     </div>
-  `;
+  );
 }
 
 Dolla.mount(document.body, Counter);

package/dist/core/dolla.d.ts

@@ -1,8 +1,8 @@
-import { type Markup, type MarkupElement } from "./markup.js";
-import { createRef, createSettableState, createState, createWatcher, derive, isRef, toSettableState, toState, valueOf } from "./state.js";
-import { type ViewElement, type ViewFunction } from "./view.js";
 import { type CrashViewProps } from "../views/default-crash-view.js";
 import { Batch } from "./batch.js";
+import { type Markup, type MarkupElement } from "./markup.js";
+import { type ViewElement, type ViewFunction } from "./nodes/view.js";
+import { createRef, createSettableState, createState, createWatcher, derive, isRef, toSettableState, toState, valueOf } from "./state.js";
 import { HTTP } from "../modules/http.js";
 import { I18n } from "../modules/i18n.js";
 import { Router } from "../modules/router.js";
@@ -39,6 +39,10 @@ export type LoggerOptions = {
      */
     uid?: string;
 };
+export interface DollaModuleConfig<Options = never> {
+    root: Dolla;
+    options: Options;
+}
 export declare class Dolla {
     #private;
     readonly batch: Batch;
@@ -75,6 +79,17 @@ 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;
+    /**
+     * Returns the HTMLElement Dolla is mounted to. This will return undefined until Dolla.mount() is called.
+     */
+    getRootElement(): HTMLElement | 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;
+    /**
+     * Registers a Dolla module.
+     */
     /**
      * Sets a context variable and returns its value. Context variables are accessible on the app and in child views.
      */
@@ -123,3 +138,4 @@ export declare class Dolla {
      */
     constructMarkup(markup: Markup | Markup[]): MarkupElement;
 }
+export declare function getDefaultConsole(): any;

package/dist/core/markup.d.ts

@@ -1,7 +1,7 @@
+import type { Renderable, Stringable } from "../types.js";
 import type { Dolla } from "./dolla.js";
+import { type ViewContext, type ViewFunction, type ViewResult } from "./nodes/view.js";
 import { MaybeState, type State } from "./state.js";
-import type { Renderable, Stringable } from "../types.js";
-import { type ViewContext, type ViewFunction, type ViewResult } from "./view.js";
 export interface ElementContext {
     /**
      * The root Dolla instance this element belongs to.
@@ -50,8 +50,8 @@ export interface MarkupElement {
      */
     unmount(parentIsUnmounting?: boolean): void;
 }
-export declare function isMarkup(value: unknown): value is Markup;
-export declare function isMarkupElement(value: unknown): value is MarkupElement;
+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: {
@@ -109,5 +109,5 @@ export declare function constructMarkup(elementContext: ElementContext, markup:
 /**
  * Combines one or more MarkupElements into a single MarkupElement.
  */
-export declare function groupElements(nodes: MarkupElement[]): MarkupElement;
+export declare function groupElements(elements: MarkupElement[]): MarkupElement;
 export declare function isRenderable(value: unknown): value is Renderable;

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

@@ -1,6 +1,7 @@
-import { type MarkupElement, type ElementContext, type Markup } from "../markup.js";
-import { type State, type StopFunction } from "../state.js";
 import { type Renderable } from "../../types.js";
+import { type ElementContext, type Markup, type MarkupElement } from "../markup.js";
+import { type State, type StopFunction } from "../state.js";
+import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
 export interface ConditionalConfig {
     $predicate: State<any>;
     thenContent?: Renderable;
@@ -8,6 +9,7 @@ export interface ConditionalConfig {
     elementContext: ElementContext;
 }
 export declare class Conditional implements MarkupElement {
+    [TYPE_MARKUP_ELEMENT]: boolean;
     node: Node;
     endNode: Node;
     $predicate: State<any>;

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

@@ -1,5 +1,6 @@
 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";
 type HTMLOptions = {
     elementContext: ElementContext;
     tag: string;
@@ -7,12 +8,14 @@ type HTMLOptions = {
     children?: Markup[];
 };
 export declare class HTML implements MarkupElement {
+    [TYPE_MARKUP_ELEMENT]: boolean;
     node: HTMLElement | SVGElement;
     props: Record<string, any>;
     children: MarkupElement[];
     stopCallbacks: StopFunction[];
     elementContext: ElementContext;
     uniqueId: string;
+    _batchWrite: (callback: () => void, key?: string) => void;
     ref?: Ref<any>;
     canClickAway: boolean;
     get isMounted(): boolean;
@@ -20,6 +23,7 @@ export declare class HTML implements MarkupElement {
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
     getUpdateKey(type: string, value: string | number): string;
+    _mutate(callback: () => any, updateKey?: string): void;
     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;

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

@@ -1,6 +1,7 @@
+import type { Renderable } from "../../types.js";
 import { type ElementContext, type MarkupElement } from "../markup.js";
 import { type State } from "../state.js";
-import type { Renderable } from "../../types.js";
+import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
 interface ObserverOptions {
     elementContext: ElementContext;
     states: State<any>[];
@@ -8,8 +9,10 @@ interface ObserverOptions {
 }
 /**
  * Displays dynamic children without a parent element.
+ * Used when a State is passed as a child in a view template.
  */
 export declare class Observer implements MarkupElement {
+    [TYPE_MARKUP_ELEMENT]: boolean;
     node: Node;
     endNode: Node;
     connectedViews: MarkupElement[];

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

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

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

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

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

@@ -1,6 +1,7 @@
-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";
+import { type ElementContext, type MarkupElement } from "../markup.js";
+import { type Setter, type State, type StopFunction } from "../state.js";
+import { TYPE_MARKUP_ELEMENT } from "../symbols.js";
+import { type ViewContext, type ViewResult } from "./view.js";
 interface RepeatOptions<T> {
     elementContext: ElementContext;
     $items: State<T[]>;
@@ -16,6 +17,7 @@ type ConnectedItem<T> = {
     element: MarkupElement;
 };
 export declare class Repeat<T> implements MarkupElement {
+    [TYPE_MARKUP_ELEMENT]: boolean;
     node: Node;
     endNode: Node;
     $items: State<T[]>;

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

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

package/dist/core/{view.d.ts → nodes/view.d.ts}

@@ -1,6 +1,7 @@
-import type { Logger } from "./dolla.js";
-import { type ElementContext, type Markup, type MarkupElement } from "./markup.js";
-import { type MaybeState, State, type StateValues, type StopFunction } from "./state.js";
+import type { Logger } from "../dolla.js";
+import { type ElementContext, 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";
 /**
  * Any valid value that a View can return.
  */
@@ -17,7 +18,7 @@ export interface ViewElement extends MarkupElement {
 }
 export interface ViewContext extends Logger {
     /**
-     * A string ID unique to this view.
+     * An ID unique to this view.
      */
     readonly uid: string;
     /**
@@ -63,6 +64,7 @@ export interface ViewContext extends Logger {
     outlet(): Markup;
 }
 export declare class View<P> implements ViewElement {
+    [TYPE_MARKUP_ELEMENT]: boolean;
     uniqueId: string;
     _elementContext: ElementContext;
     _logger: Logger;
@@ -70,8 +72,8 @@ export declare class View<P> implements ViewElement {
     _props: P;
     _element?: MarkupElement;
     _$children: State<MarkupElement[]>;
-    _setChildren: import("./state.js").Setter<MarkupElement[], MarkupElement[]>;
-    _watcher: import("./state.js").StateWatcher;
+    _setChildren: import("../state.js").Setter<MarkupElement[], MarkupElement[]>;
+    _watcher: import("../state.js").StateWatcher;
     _beforeMountCallbacks: (() => any)[];
     _onMountCallbacks: (() => any)[];
     _beforeUnmountCallbacks: (() => any)[];

package/dist/core/state.d.ts

@@ -1,3 +1,5 @@
+import { strictEqual } from "../utils";
+import { TYPE_SETTABLE_STATE, TYPE_STATE } from "./symbols";
 /**
  * Stops the observer that created it when called.
  */
@@ -63,8 +65,6 @@ export interface SettableState<I, O = I> extends State<I> {
 export interface Ref<T extends Node> extends State<T | undefined> {
     node: T | undefined;
 }
-declare const TYPE_STATE: unique symbol;
-declare const TYPE_SETTABLE_STATE: unique symbol;
 export declare function isState<T>(value: any): value is State<T>;
 export declare function isSettableState<T>(value: any): value is SettableState<T>;
 export declare function isRef<T extends Node>(value: any): value is Ref<T>;
@@ -77,10 +77,9 @@ export declare function valueOf<T>(value: MaybeState<T>): T;
  */
 export declare function toState<T>(value: MaybeState<T>): State<T>;
 export declare class ValueHolder<T> implements State<T> {
-    static defaultEquals(next: any, current: any): boolean;
     value: T;
     watchers: ((value: T) => void)[];
-    equals: typeof ValueHolder.defaultEquals;
+    equals: typeof strictEqual;
     constructor(value: T, options?: CreateStateOptions<T>);
     get(): T;
     set(action: T | SetFunction<T>): void;

package/dist/core/symbols.d.ts

@@ -0,0 +1,5 @@
+export declare const TYPE_STATE: unique symbol;
+export declare const TYPE_SETTABLE_STATE: unique symbol;
+export declare const TYPE_REF: unique symbol;
+export declare const TYPE_MARKUP: unique symbol;
+export declare const TYPE_MARKUP_ELEMENT: unique symbol;

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export declare function getDevDebug(): boolean;
 export type { Dolla, Environment, Logger, LoggerErrorContext, LoggerOptions, Loggles } from "./core/dolla.js";
 export type { HTTPRequest, HTTPResponse } from "./modules/http.js";
 export type { InputType, Renderable } from "./types.js";
-export type { ViewContext, ViewFunction, ViewElement as ViewNode } from "./core/view.js";
+export type { ViewContext, ViewFunction, ViewElement as ViewNode } from "./core/nodes/view.js";
 export type { CrashViewProps } from "./views/default-crash-view.js";
 import type { IntrinsicElements as Elements } from "./types";
 declare global {