@manyducks.co/dolla 2.0.0-alpha.6 → 2.0.0-alpha.61

package/dist/typeChecking.d.ts

@@ -1,8 +1,8 @@
-type TypeNames = "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "null" | "array" | "class" | "promise" | "NaN";
+type TypeNames = "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "null" | "array" | "class" | "promise" | "map" | "set" | "NaN";
 /**
  * Extends `typeof` operator with more specific and useful type distinctions.
  */
-export declare function typeOf(value: unknown): TypeNames;
+export declare function typeOf(value: any): TypeNames;
 /**
  * Throws a TypeError unless `condition` is truthy.
  *
@@ -18,12 +18,6 @@ export declare function isArray(value: unknown): value is Array<unknown>;
  * Throws an error if `value` is not an array.
  */
 export declare function assertArray(value: unknown, errorMessage?: string): value is Array<unknown>;
-/**
- * Returns a function that takes a `value` and ensures that it is an array for which `check` returns true for every item.
- *
- * @param check - Function to check items against.
- */
-export declare function isArrayOf<T>(check: (item: unknown) => boolean): (value: unknown) => value is T[];
 /**
  * Returns true when `value` is an array and `check` returns true for every item.
  *
@@ -31,12 +25,6 @@ export declare function isArrayOf<T>(check: (item: unknown) => boolean): (value:
  * @param value - A possible array.
  */
 export declare function isArrayOf<T>(check: (item: unknown) => boolean, value: unknown): value is T[];
-/**
- * Returns a function that takes a `value` and throws a TypeError unless it is an array for which `check` returns true for every item.
- *
- * @param check - Function to check items against.
- */
-export declare function assertArrayOf<T>(check: (item: unknown) => boolean): (value: unknown) => value is T[];
 /**
  * Throws a TypeError unless `value` is an array and `check` returns true for every item.
  *
@@ -45,14 +33,6 @@ export declare function assertArrayOf<T>(check: (item: unknown) => boolean): (va
  * @param errorMessage - A custom error message.
  */
 export declare function assertArrayOf<T>(check: (item: unknown) => boolean, value: unknown, errorMessage?: string): value is T[];
-/**
- * Returns true if `value` is equal to `true` or `false`.
- */
-export declare function isBoolean(value: unknown): value is boolean;
-/**
- * Throws a TypeError unless `value` is equal to `true` or `false`.
- */
-export declare function assertBoolean(value: unknown, errorMessage?: string): value is boolean;
 /**
  * Returns true if `value` is a string.
  */
@@ -77,34 +57,6 @@ export declare function isNumber(value: unknown): value is number;
  * Throws a TypeError unless `value` is a number.
  */
 export declare function assertNumber(value: unknown, errorMessage?: string): value is number;
-/**
- * Returns true if `value` implements the Promise protocol.
- * This matches true instances of Promise as well as any object that
- * implements `next`, `catch` and `finally` methods.
- *
- * To strictly match instances of Promise, use `isInstanceOf(Promise)`.
- */
-export declare function isPromise<T = unknown>(value: unknown): value is Promise<T>;
-/**
- * Throws a TypeError unless `value` implements the Promise protocol.
- * This matches true instances of Promise as well as any object that
- * implements `next`, `catch` and `finally` methods.
- *
- * To strictly allow only instances of Promise, use `Type.assertInstanceOf(Promise)`.
- */
-export declare function assertPromise<T = unknown>(value: unknown, errorMessage?: string): value is Promise<T>;
-/**
- * Returns true if `value` is a class.
- */
-export declare function isClass(value: unknown): value is {
-    new (): unknown;
-};
-/**
- * Throws a TypeError unless `value` is a class.
- */
-export declare function assertClass(value: unknown, errorMessage?: string): value is {
-    new (): unknown;
-};
 /**
  * Returns a function that takes a `value` and returns true if `value` is an instance of `constructor`.
  *
@@ -132,30 +84,6 @@ export declare function assertInstanceOf<T extends Function>(constructor: T): (v
  * @param errorMessage - A custom error message for when the assertion fails.
  */
 export declare function assertInstanceOf<T extends Function>(constructor: T, value: unknown, errorMessage?: string): value is T;
-/**
- * Returns true if `value` is a Map.
- */
-export declare function isMap<K = unknown, V = unknown>(value: any): value is Map<K, V>;
-/**
- * Throws a TypeError unless `value` is a Map.
- */
-export declare function assertMap<K = unknown, V = unknown>(value: any, errorMessage?: string): value is Map<K, V>;
-/**
- * Returns true if `value` is a Set.
- */
-export declare function isSet<T = unknown>(value: any): value is Set<T>;
-/**
- * Throws a TypeError if `value` is not a Set.
- */
-export declare function assertSet<T = unknown>(value: any, errorMessage?: string): value is Set<T>;
-/**
- * Returns true if `value` implements the Iterable protocol.
- */
-export declare function isIterable<T>(value: any): value is Iterable<T>;
-/**
- * Throws a TypeError unless `value` implements the Iterable protocol.
- */
-export declare function assertIterable<T>(value: any, errorMessage?: string): value is Iterable<T>;
 /**
  * Returns true if `value` is a plain JavaScript object.
  */
@@ -164,28 +92,4 @@ export declare function isObject(value: unknown): value is Record<string | numbe
  * Throws a TypeError unless `value` is a plain JavaScript object.
  */
 export declare function assertObject(value: unknown, errorMessage?: string): value is object;
-/**
- * Returns true if `value` is equal to `null`.
- */
-export declare function isNull(value: unknown): value is null;
-/**
- * Throws a TypeError unless `value` is equal to `null`.
- */
-export declare function assertNull(value: unknown, errorMessage?: string): value is null;
-/**
- * Returns true if `value` is equal to `undefined`.
- */
-export declare function isUndefined(value: unknown): value is undefined;
-/**
- * Throws a TypeError unless `value` is equal to `undefined`.
- */
-export declare function assertUndefined(value: unknown, errorMessage?: string): value is undefined;
-/**
- * Returns true if `value` is equal to `null` or `undefined`.
- */
-export declare function isEmpty(value: unknown): value is void;
-/**
- * Throws a TypeError unless `value` is equal to `null` or `undefined`.
- */
-export declare function assertEmpty(value: unknown, errorMessage?: string): value is void;
 export {};

package/dist/typeChecking.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -1,17 +1,31 @@
 import type * as CSS from "csstype";
-import { Ref, type Markup } from "./markup.js";
-import { SettableState, State } from "./state.js";
+import type { Markup, MarkupNode } from "./core/markup.js";
+import type { Signal } from "./core/signals.js";
+import type { Context } from "./core/context.js";
+export type Env = "production" | "development";
 /**
  * Represents everything that can be handled as a DOM node.
  * These are all the items considered valid to pass as children to any element.
  */
-export type Renderable = string | number | Markup | false | null | undefined | State<any> | (string | number | Markup | false | null | undefined | State<any>)[];
-export type Stringable = {
-    toString(): string;
-};
-type MaybeState<T> = T | State<T> | State<T | undefined>;
-type OptionalProperty<T> = T | State<T> | State<T | undefined>;
-type RequiredProperty<T> = T | State<T>;
+export type Renderable = string | number | Node | Markup | MarkupNode | false | null | undefined | Signal<any> | (string | number | Node | Markup | MarkupNode | false | null | undefined | Signal<any>)[];
+export interface BaseProps {
+    children?: Renderable;
+}
+/**
+ *
+ */
+export type View<Props> = (this: Context, props: Props, context: Context) => Renderable;
+/**
+ *
+ */
+export type Store<Options, Value> = (this: Context, options: Options, context: Context) => Value;
+/**
+ *
+ */
+export type Mixin<E extends Element = Element> = (element: E, context: Context) => void;
+type MaybeSignal<T> = T | Signal<T> | Signal<T | undefined>;
+type OptionalProperty<T> = MaybeSignal<T>;
+type RequiredProperty<T> = T | Signal<T>;
 type AutocapitalizeValues = "off" | "on" | "none" | "sentences" | "words" | "characters";
 type ContentEditableValues = true | false | "true" | "false" | "plaintext-only" | "inherit";
 type ClassListValues = string | ClassMap | Array<string | ClassMap | (string | ClassMap)[]>;
@@ -23,21 +37,31 @@ type InputModeValues = "decimal" | "email" | "none" | "numeric" | "search" | "te
  * Properties common to all Elements.
  */
 export interface ElementProps {
+    /**
+     * Sets the value as an HTML attribute.
+     */
+    [key: `attr:${string}`]: OptionalProperty<any>;
+    /**
+     * Sets the value directly on the HTMLElement as a property.
+     */
+    [key: `prop:${string}`]: OptionalProperty<any>;
+    /**
+     * Attaches an event listener to the element (with `addEventListener`).
+     */
+    [key: `on:${string}`]: OptionalProperty<EventHandler<Event>>;
     /**
      * HTML attributes to assign to the element.
      */
-    attributes?: OptionalProperty<Record<string, any>>;
     /**
      * Object of event listeners.
      */
-    eventListeners?: OptionalProperty<Record<string, EventHandler<Event>>>;
     /**
      * CSS classes to be applied to this element. In addition to the standard space-separated list of class names,
      * this property also supports a class map object with class names as keys and booleans as values.
      * Class names in a class map will be applied to the element while their values are true. Also supports an
      * array of strings and class maps.
      *
-     * Alias of `className`.
+     * @alias className
      *
      * @example
      * <div class="one-class" />
@@ -57,6 +81,8 @@ export interface ElementProps {
      * Class names in a class map will be applied to the element while their values are true. Also supports an
      * array of strings and class maps.
      *
+     * @alias class
+     *
      * @example
      * <div className="one-class" />
      *
@@ -71,22 +97,39 @@ export interface ElementProps {
     className?: OptionalProperty<ClassListValues>;
     /**
      * A unique string to identify this element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/id
      */
     id?: OptionalProperty<string>;
+    /**
+     * Renders a string of HTML as the children of this element.
+     * Equivalent to setting `innerHTML` on a DOM element.
+     *
+     * `NOTE` This property does no sanitization. If it's in the string, it's in the DOM. Be mindful when handling user-generated content.
+     */
+    innerHTML?: OptionalProperty<string>;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover
+     */
+    popover?: OptionalProperty<"auto" | "hint" | "manual" | true | false>;
+    /**
+     * Specifies the element's [WAI-ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles).
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/role
+     */
+    role?: OptionalProperty<string>;
     /**
      * Scroll position from the left (on the X axis), if this element is scrollable.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
      */
     scrollLeft?: OptionalProperty<number>;
     /**
      * Scroll position from the top (on the Y axis) if this element is scrollable.
-     */
-    scrollTop?: OptionalProperty<number>;
-    /**
-     * Enables or disables checking for spelling errors in an element's content.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
      */
-    spellcheck?: OptionalProperty<boolean>;
+    scrollTop?: OptionalProperty<number>;
     /**
      * Specifies whether an element's content should be translated when the page is localized.
      *
@@ -105,12 +148,18 @@ export interface ElementProps {
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot
      */
     slot?: OptionalProperty<string>;
+    /**
+     * Enables or disables checking for spelling errors in an element's content.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck
+     */
+    spellCheck?: OptionalProperty<boolean>;
     /**
      * Inline styles applied to the element. Can be passed as a string or as an object.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style
      */
-    style?: string | CSSProperties | State<string> | State<CSSProperties> | State<string | CSSProperties> | State<string | undefined> | State<CSSProperties | undefined> | State<string | CSSProperties | undefined>;
+    style?: string | CSSProperties | Signal<string> | Signal<CSSProperties> | Signal<string | CSSProperties> | Signal<string | undefined> | Signal<CSSProperties | undefined> | Signal<string | CSSProperties | undefined>;
     /**
      * Fired when a CSS animation unexpectedly aborts.
      *
@@ -178,6 +227,12 @@ export interface ElementProps {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event
      */
     onCompositionUpdate?: OptionalProperty<EventHandler<CompositionEvent>>;
+    /**
+     * Fired when the user attempts to open a context menu. Typically triggered by clicking the right mouse button.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
+     */
+    onContextMenu?: OptionalProperty<EventHandler<PointerEvent>>;
     /**
      * Fired when a pointing device button is rapidly clicked twice while the pointer is inside the element.
      *
@@ -452,6 +507,12 @@ export interface ElementProps {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event
      */
     oncompositionupdate?: OptionalProperty<EventHandler<CompositionEvent>>;
+    /**
+     * Fired when the user attempts to open a context menu. Typically triggered by clicking the right mouse button.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
+     */
+    oncontextmenu?: OptionalProperty<EventHandler<PointerEvent>>;
     /**
      * Fired when a pointing device button is rapidly clicked twice while the pointer is inside the element.
      *
@@ -683,6 +744,12 @@ export interface HTMLElementProps extends ElementProps {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable
      */
     contentEditable?: OptionalProperty<ContentEditableValues>;
+    /**
+     * Stores values on the element as attributes prefixed with `data-`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
+     */
+    dataset?: OptionalProperty<Record<string, string>>;
     /**
      * Specifies text directionality of the content of this element. Some languages, such as Arabic, are written from right to left (specified here as "rtl").
      *
@@ -729,7 +796,6 @@ export interface HTMLElementProps extends ElementProps {
     /**
      * TODO: Add support. Currently experimental.
      */
-    role?: OptionalProperty<string>;
     /**
      * This element's position in the tab order, or the order this element will be focused as the user cycles through elements with the tab key.
      *
@@ -938,6 +1004,10 @@ export interface HTMLElementProps extends ElementProps {
     onpaste?: OptionalProperty<EventHandler<ClipboardEvent>>;
 }
 export interface SVGElementProps extends ElementProps {
+    /**
+     * A mixin function or an array of mixin functions to be applied to this element.
+     */
+    mixin?: Mixin<SVGElement> | Mixin<SVGElement>[];
 }
 /**
  * Mapping of event props to event names.
@@ -1210,7 +1280,7 @@ export type CSSProperties = {
     [K in keyof Styles]: OptionalProperty<Styles[K]>;
 };
 export interface ClassMap {
-    [className: string]: MaybeState<any>;
+    [className: string]: MaybeSignal<any>;
 }
 export type EventHandler<E> = (event: E) => void;
 export interface PropertiesOf<E extends HTMLElement> extends HTMLElementProps {
@@ -1221,7 +1291,11 @@ export interface PropertiesOf<E extends HTMLElement> extends HTMLElementProps {
     /**
      * Receives a reference to the DOM node when rendered.
      */
-    ref?: Ref<E> | Ref<HTMLElement> | Ref<Element> | Ref<Node>;
+    ref?: ((value: E | undefined) => void) | ((value: HTMLElement | undefined) => void) | ((value: Element | undefined) => void) | ((value: Node | undefined) => void);
+    /**
+     * A mixin function or an array of mixin functions to be applied to this element.
+     */
+    mixin?: Mixin<E> | Mixin<E>[];
 }
 /**
  * The following elements are defined based on the WHATWG HTML spec:
@@ -2098,7 +2172,7 @@ interface HTMLMediaElementProps<T extends HTMLMediaElement> extends HTMLElementP
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
      */
-    srcObject?: MediaStream | MediaSource | Blob | File | State<MediaStream> | State<MediaStream | undefined> | State<MediaSource> | State<MediaSource | undefined> | State<Blob> | State<Blob | undefined> | State<File> | State<File | undefined>;
+    srcObject?: MediaStream | MediaSource | Blob | File | Signal<MediaStream> | Signal<MediaStream | undefined> | Signal<MediaSource> | Signal<MediaSource | undefined> | Signal<Blob> | Signal<Blob | undefined> | Signal<File> | Signal<File | undefined>;
     /**
      * The current audio volume of the media element. Must be a number between 0 and 1.
      *
@@ -2597,7 +2671,7 @@ interface HTMLImageElementProps extends PropertiesOf<HTMLImageElement> {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
      */
-    sizes?: MaybeState<string>;
+    sizes?: MaybeSignal<string>;
     /**
      * The image URL.
      *
@@ -3143,7 +3217,6 @@ interface HTMLInputElementProps extends PropertiesOf<HTMLInputElement> {
     step?: OptionalProperty<number>;
     type?: OptionalProperty<InputType>;
     value?: OptionalProperty<string>;
-    $$value?: SettableState<any>;
     width?: OptionalProperty<string | number> | OptionalProperty<string> | OptionalProperty<number>;
     title?: OptionalProperty<string>;
     /**

package/dist/utils.d.ts

@@ -1,5 +1,18 @@
 export declare const noOp: () => void;
-export declare function deepEqual(one: any, two: any): boolean;
+export declare function getUniqueId(): string;
+/**
+ * Equality check that passes if both values are the same object.
+ * This is the default equality check for states.
+ */
+export declare function strictEqual(a: any, b: any): boolean;
+/**
+ * Equality check that passes if both values are the same object, or if both are objects or arrays with equal keys and values.
+ */
+export declare function shallowEqual(a: any, b: any): boolean;
+/**
+ * Equality check that passes if two objects have equal values, even if they are not the same object.
+ */
+export declare function deepEqual(a: any, b: any): boolean;
 /**
  * Takes an old value and a new value.  Returns a merged copy if both are objects, otherwise returns the new value.
  */
@@ -13,8 +26,12 @@ export declare function merge(one: unknown, two: unknown): any;
  * @param object - An object to clone without the omitted keys.
  */
 export declare function omit<O extends Record<any, any>>(keys: (keyof O)[], object: O): Record<any, any>;
-export declare function getDefaultConsole(): any;
-export declare function colorFromString(value: string): string;
+export declare function toArray<T>(value: T | T[]): T[];
+export declare function toCamelCase(s: string): string;
+/**
+ * Takes any string and returns an OKLCH color.
+ */
+export declare function okhash(value: string): string;
 export type MatcherFunction = (value: string) => boolean;
 /**
  * Parses a filter string into a matcher function.

package/docs/hooks.md

@@ -0,0 +1,211 @@
+# Hooks
+
+Dolla implements a React-style hooks API for use in Views, Stores and Mixins. Internally these hooks are still using signals, and view functions still only run once, but this API may be more fun and enjoyable for those familiar with React.
+
+```js
+import { useState, useEffect, useLogger } from "@manyducks.co/dolla/hooks";
+
+export function CounterView() {
+  const [count, setCount] = useState(0);
+
+  const logger = useLogger();
+  useEffect(() => {
+    // Effect is triggered each time count changes; calling its getter tracks it.
+    logger.info(`Count is now ${count()}`);
+  });
+
+  return (
+    <div>
+      Count: {count}
+      <button onClick={() => setCount((n) => n + 1)}>+1</button>
+      <button onClick={() => setCount((n) => n - 1)}>-1</button>
+      <button onClick={() => setCount(0)}>Reset</button>
+    </div>
+  );
+}
+```
+
+```js
+import { useReducer } from "@manyducks.co/dolla/hooks";
+
+export function CounterView() {
+  const countReducer = (state, action) => {
+    switch (action) {
+      case "increment":
+        return state + 1;
+      case "decrement":
+        return state - 1;
+      case "reset":
+        return 0;
+      default:
+        throw new Error("Invalid action");
+    }
+  };
+  const [count, dispatch] = useReducer(countReducer, 0);
+
+  return (
+    <div>
+      Count: {count}
+      <button onClick={() => dispatch("increment")}>+1</button>
+      <button onClick={() => dispatch("decrement")}>-1</button>
+      <button onClick={() => dispatch("reset")}>Reset</button>
+    </div>
+  );
+}
+```
+
+## All Hooks
+
+### `useState`
+
+Creates a new state and returns a Signal and a Setter. Signals are functions that return the current value when called. If they are called within a tracking scope (such as a useMemo or useEffect function) they will _signal_ to that scope that they need to re-run when a new value is set.
+
+```js
+const [message, setMessage] = useState("Hello World");
+message(); // "Hello World"
+setValue("different value");
+setValue((current) => current.toUpperCase());
+```
+
+### `useMemo`
+
+Basic usage.
+
+```js
+const [count, setCount] = useState(5);
+
+// Signals called within the body of the `useMemo` callback will be tracked.
+// This means `doubled` will re-run and update its value when and only when its tracked dependencies do.
+const doubled = useMemo(() => count() * 2);
+
+// `useMemo` can also track other memoized values. You can nest derived values as deeply as you want.
+const quadrupled = useMemo(() => doubled() * 2);
+```
+
+#### Explicit Dependencies
+
+```js
+const [first, setFirst] = useState(10);
+const [second, setSecond] = useState(20);
+
+// You can alternatively pass an array of dependencies. When you do this your callback will be re-run whenever
+// any of the provided dependencies change, regardless of what dependencies you actually call inside the callback;
+const added = useMemo(() => first() + second(), [second]);
+
+added(); // 30
+setFirst(11);
+added(); // 30; did not update because only second() is tracked as a dependency.
+setSecond(21);
+added(); // 32; now it updates because second() received a new value.
+
+// Note: receives the value it returned last as the first argument.
+// Node: can pass a deps array to re-run when deps change regardless of what's called inside the memo function.
+```
+
+### `useEffect`
+
+> TODO
+>
+> 1. Autotracked deps
+> 2. Explicitly tracked deps
+
+### `useRef`
+
+Create a new ref. Refs are useful for getting references to DOM nodes rendered by Dolla. View functions are only called once, so refs in Dolla are not as broadly applicable for storing other types of data as they are in React.
+
+```js
+function ExampleView() {
+  const element = useRef();
+
+  useMount(() => {
+    console.log("The element!", element.current);
+  });
+
+  return <div ref={element}>I am a div.</div>;
+}
+```
+
+### `useContext`
+
+Not to be confused with React `useContext`. The context referred to here is the View, Store or Mixin `Context` object.
+
+```js
+// `useContext` returns the currently active Context object for the View, Store or Mixin it's called in.
+function ExampleView() {
+  const ctx = useContext();
+
+  ctx.onMount(() => {
+    /// ...
+  });
+}
+```
+
+### `useStore`
+
+Access an instance of a provided Store. Equivalent to `context.getStore(Store)`.
+
+```jsx
+function CounterStore() {
+  const [value, setValue] = useState(0);
+
+  const increment = () => setValue((n) => n + 1);
+  const decrement = () => setValue((n) => n - 1);
+
+  return {
+    value,
+    increment,
+    decrement,
+  };
+}
+
+// Register the store at some point in the view tree.
+function ParentView() {
+  const context = useContext();
+  context.addStore(CounterStore);
+
+  return <ChildView />;
+}
+
+// Then...
+function ChildView() {
+  const counter = useStore(CounterStore);
+
+  counter.value(); // 0
+  counter.increment();
+  counter.value(); // 1
+
+  return <span>{counter.value}</span>;
+}
+```
+
+### `useMount`
+
+Register a callback to run when the context is mounted. If the callback returns a function, that function is called when the context is unmounted.
+
+```js
+function ExampleView() {
+  useMount(() => {
+    console.log("View is now mounted.")
+
+    return () => {
+      console.log("View is now unmounted.);
+    }
+  });
+
+  // ...
+}
+```
+
+### `useUnmount`
+
+Register a callback to run when the context is unmounted.
+
+```js
+function ExampleView() {
+  useUnmount(() => {
+    console.log("View is now unmounted.");
+  });
+
+  // ...
+}
+```

package/docs/http.md

@@ -0,0 +1,29 @@
+# HTTP Client
+
+> TODO: Write me.
+
+This page goes into detail on how to use the built in HTTP client.
+
+```js
+import { http } from "@manyducks.co/dolla";
+
+http.use(async (req, next) => {
+  // Apply auth header to all API routes.
+  if (req.url.pathname.startsWith("/api/")) {
+    req.headers.set("authorization", `Bearer ${localStorage.getItem("api-key")}`);
+  }
+
+  await next();
+});
+
+const res = await http.get("/api/some-api-route");
+res.body; // body is already parsed as JSON if server responded with JSON
+```
+
+---
+
+End.
+
+- [🗂️ Docs](./index.md)
+- [🏠 README](../README.md)
+- [🦆 That's a lot of ducks.](https://www.manyducks.co)