@manyducks.co/dolla 1.1.0 → 2.0.0-alpha.1

package/dist/modules/language.d.ts

@@ -0,0 +1,41 @@
+import { type Signal } from "../signals.js";
+import type { Stringable } from "../types.js";
+import type { Dolla } from "./dolla.js";
+/**
+ * An object where values are either a translated string or another nested Translation object.
+ */
+type LocalizedStrings = Record<string, string | Record<string, string | Record<string, string | Record<string, string>>>>;
+export interface LanguageConfig {
+    name: string;
+    /**
+     * Path to a JSON file with translated strings for this language.
+     */
+    path?: string;
+    /**
+     * A callback function that returns a Promise that resolves to the translation object for this language.
+     */
+    fetch?: () => Promise<LocalizedStrings>;
+}
+export type LanguageSetupOptions = {
+    /**
+     * Default language to load on startup
+     */
+    initialLanguage?: string | null;
+    languages: LanguageConfig[];
+};
+export declare class Language {
+    #private;
+    $current: Signal<string | undefined>;
+    constructor(dolla: Dolla);
+    get supportedLanguages(): string[];
+    setup(options: LanguageSetupOptions): void;
+    setLanguage(name: string): Promise<void>;
+    /**
+     * Returns a Signal containing the value at `key`.
+    
+     * @param key - Key to the translated value.
+     * @param values - A map of {{placeholder}} names and the values to replace them with.
+     */
+    t(key: string, values?: Record<string, Stringable | Signal<Stringable>>): Signal<string>;
+}
+export {};

package/{lib/stores → dist/modules}/render.d.ts

@@ -1,8 +1,7 @@
-import { type StoreContext } from "../store.js";
-/**
- * Batches DOM updates for better performance.
- */
-export declare function RenderStore(ctx: StoreContext): {
+import type { Dolla } from "./dolla.js";
+export declare class Render {
+    #private;
+    constructor(dolla: Dolla);
     /**
      * Queues a callback to run in the next render batch.
      * Running your DOM mutations in update callbacks reduces layout thrashing.
@@ -15,4 +14,4 @@ export declare function RenderStore(ctx: StoreContext): {
      * Returns a Promise that resolves once the callback has run.
      */
     read(callback: () => void): Promise<void>;
-};
+}

package/{lib/stores → dist/modules}/router.d.ts

@@ -1,17 +1,8 @@
-import { type History } from "history";
-import { type Markup } from "../markup.js";
-import { type Store, type StoreContext } from "../store.js";
-import { type BuiltInStores, type Stringable } from "../types.js";
-import { type View } from "../view.js";
+import { type DOMHandle, type Markup } from "../markup.js";
+import { type Stringable } from "../types.js";
+import { type ViewFunction } from "../view.js";
+import type { Dolla } from "./dolla.js";
 export interface RouteMatchContext {
-    /**
-     * Returns the shared instance of `store`.
-     */
-    getStore<T extends Store<any, any>>(store: T): ReturnType<T>;
-    /**
-     * Returns the shared instance of a built-in store.
-     */
-    getStore<N extends keyof BuiltInStores>(name: N): BuiltInStores[N];
     /**
      * Redirects the user to a different route instead of matching the current one.
      */
@@ -29,7 +20,7 @@ export interface Route {
     /**
      * View to display when this route is matched.
      */
-    view?: View<any>;
+    view?: ViewFunction<any>;
     /**
      * Subroutes.
      */
@@ -78,7 +69,7 @@ interface ParsedParams {
 }
 interface ParsedQuery extends ParsedParams {
 }
-interface NavigateOptions {
+export interface NavigateOptions {
     /**
      * Replace the current item in the history stack instead of adding a new one.
      * The back button will send the user to the page they visited before this. Defaults to false.
@@ -89,20 +80,31 @@ interface NavigateOptions {
      */
     preserveQuery?: boolean;
 }
-interface RouterStoreOptions {
-    routes: Route[];
+export declare enum RoutingStyle {
     /**
-     * Use hash-based routing if true.
+     * Constructs routes like "https://www.example.com/#/sub/route" which work without any server-side setup.
+     * A good choice if your app has no backend.
      */
-    hash?: boolean;
+    hash = "hash",
     /**
-     * A history object from the `history` package.
-     *
-     * @see https://www.npmjs.com/package/history
+     * Constructs routes like "https://www.example.com/sub/route" which look nicer (subjective?) than hash routes and are what most users will expect URLs to look like, but require additional backend setup.
+     * Path routing requires you to configure your backend to redirect to the app's index.html when subpaths are requested.
+     */
+    path = "path"
+}
+export interface RouterSetupOptions {
+    routes: Route[];
+    /**
+     * The routing style to use; "hash" will construct routes like "https://www.example.com/#/sub/route" which work without any server-side setup, while "path" will construct routes that use paths directly.
      */
-    history?: History;
+    style?: RoutingStyle;
+}
+export interface RouterElements {
+    readonly rootElement?: HTMLElement;
+    readonly rootView?: DOMHandle;
 }
-export declare function RouterStore(ctx: StoreContext<RouterStoreOptions>): {
+export declare class Router {
+    #private;
     /**
      * The currently matched route pattern, if any.
      */
@@ -119,7 +121,16 @@ export declare function RouterStore(ctx: StoreContext<RouterStoreOptions>): {
      * The current query params. Changes to this object will be reflected in the URL.
      */
     $query: import("../signals.js").Signal<ParsedQuery>;
-    setQuery: import("../signals.js").SignalSetter<ParsedQuery, ParsedQuery>;
+    constructor(dolla: Dolla, elements: RouterElements);
+    setup(options: RouterSetupOptions): void;
+    /**
+     * Navigates to another route.
+     *
+     * @example
+     * navigate("/login"); // navigate to `/login`
+     * navigate(["/users", 215], { replace: true }); // replace current history entry with `/users/215`
+     */
+    go(path: Stringable | Stringable[], options?: NavigateOptions): void;
     /**
      * Navigate backward. Pass a number of steps to hit the back button that many times.
      */
@@ -128,20 +139,7 @@ export declare function RouterStore(ctx: StoreContext<RouterStoreOptions>): {
      * Navigate forward. Pass a number of steps to hit the forward button that many times.
      */
     forward(steps?: number): void;
-    /**
-     * Navigates to another route.
-     *
-     * @example
-     * navigate("/login"); // navigate to `/login`
-     * navigate(["/users", 215], { replace: true }); // replace current history entry with `/users/215`
-     *
-     * @param args - One or more path segments optionally followed by an options object.
-     */
-    navigate: {
-        (path: Stringable, options?: NavigateOptions): void;
-        (fragments: Stringable[], options?: NavigateOptions): void;
-    };
-};
+}
 /**
  * Intercepts links within the root node.
  *

package/{lib → dist}/nodes/cond.d.ts

@@ -1,12 +1,10 @@
-import { type AppContext, type ElementContext } from "../app.js";
-import { type DOMHandle, type Markup } from "../markup.js";
+import { type DOMHandle, type ElementContext, type Markup } from "../markup.js";
 import { type Signal, type StopFunction } from "../signals.js";
 import { type Renderable } from "../types.js";
 export interface ConditionalConfig {
     $predicate: Signal<any>;
     thenContent?: Renderable;
     elseContent?: Renderable;
-    appContext: AppContext;
     elementContext: ElementContext;
 }
 export declare class Conditional implements DOMHandle {
@@ -17,7 +15,6 @@ export declare class Conditional implements DOMHandle {
     thenContent?: Markup[];
     elseContent?: Markup[];
     connectedContent: DOMHandle[];
-    appContext: AppContext;
     elementContext: ElementContext;
     initialUpdateHappened: boolean;
     previousValue?: any;

package/{lib → dist}/nodes/html.d.ts

@@ -1,8 +1,6 @@
-import { type AppContext, type ElementContext } from "../app.js";
-import { type DOMHandle, type Markup } from "../markup.js";
+import { type DOMHandle, type ElementContext, type Markup } from "../markup.js";
 import { type StopFunction } from "../signals.js";
 type HTMLOptions = {
-    appContext: AppContext;
     elementContext: ElementContext;
     tag: string;
     props?: any;
@@ -13,12 +11,11 @@ export declare class HTML implements DOMHandle {
     props: Record<string, any>;
     children: DOMHandle[];
     stopCallbacks: StopFunction[];
-    appContext: AppContext;
     elementContext: ElementContext;
     uniqueId: string;
     canClickAway: boolean;
     get connected(): boolean;
-    constructor({ tag, props, children, appContext, elementContext }: HTMLOptions);
+    constructor({ tag, props, children, elementContext }: HTMLOptions);
     connect(parent: Node, after?: Node): void;
     disconnect(): void;
     setChildren(next: DOMHandle[]): void;

package/{lib → dist}/nodes/observer.d.ts

@@ -1,9 +1,7 @@
-import { type AppContext, type ElementContext } from "../app.js";
-import { type DOMHandle } from "../markup.js";
+import { type DOMHandle, type ElementContext } from "../markup.js";
 import { type Signal } from "../signals.js";
 import type { Renderable } from "../types.js";
 interface ObserverOptions {
-    appContext: AppContext;
     elementContext: ElementContext;
     signals: Signal<any>[];
     renderFn: (...values: any) => Renderable;
@@ -16,14 +14,13 @@ export declare class Observer implements DOMHandle {
     endNode: Node;
     connectedViews: DOMHandle[];
     renderFn: (...values: any) => Renderable;
-    appContext: AppContext;
     elementContext: ElementContext;
     observerControls: {
         start: () => void;
         stop: () => void;
     };
     get connected(): boolean;
-    constructor({ signals, renderFn, appContext, elementContext }: ObserverOptions);
+    constructor({ signals, renderFn, elementContext }: ObserverOptions);
     connect(parent: Node, after?: Node): void;
     disconnect(): void;
     setChildren(): Promise<void>;

package/{lib → dist}/nodes/outlet.d.ts

@@ -1,9 +1,7 @@
-import { type AppContext, type ElementContext } from "../app.js";
-import { type DOMHandle } from "../markup.js";
+import { type DOMHandle, type ElementContext } from "../markup.js";
 import { type Signal, type StopFunction } from "../signals.js";
 export interface OutletConfig {
     $children: Signal<DOMHandle[]>;
-    appContext: AppContext;
     elementContext: ElementContext;
 }
 /**
@@ -15,7 +13,6 @@ export declare class Outlet implements DOMHandle {
     $children: Signal<DOMHandle[]>;
     stopCallback?: StopFunction;
     connectedChildren: DOMHandle[];
-    appContext: AppContext;
     elementContext: ElementContext;
     constructor(config: OutletConfig);
     get connected(): boolean;

package/{lib → dist}/nodes/portal.d.ts

@@ -1,10 +1,8 @@
-import { type AppContext, type ElementContext } from "../app.js";
-import { type DOMHandle } from "../markup.js";
+import { type DOMHandle, type ElementContext } from "../markup.js";
 import { type Renderable } from "../types.js";
 interface PortalConfig {
     content: Renderable;
     parent: Node;
-    appContext: AppContext;
     elementContext: ElementContext;
 }
 /**

package/{lib → dist}/nodes/repeat.d.ts

@@ -1,9 +1,7 @@
-import { type AppContext, type ElementContext } from "../app.js";
-import { type DOMHandle } from "../markup.js";
+import { type DOMHandle, type ElementContext } from "../markup.js";
 import { type Signal, type SignalSetter, type StopFunction } from "../signals.js";
 import { type ViewContext, type ViewResult } from "../view.js";
 interface RepeatOptions<T> {
-    appContext: AppContext;
     elementContext: ElementContext;
     $items: Signal<T[]>;
     keyFn: (value: T, index: number) => string | number | symbol;
@@ -23,12 +21,11 @@ export declare class Repeat<T> implements DOMHandle {
     $items: Signal<T[]>;
     stopCallback?: StopFunction;
     connectedItems: ConnectedItem<T>[];
-    appContext: AppContext;
     elementContext: ElementContext;
     renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
     keyFn: (value: T, index: number) => string | number | symbol;
     get connected(): boolean;
-    constructor({ appContext, elementContext, $items, renderFn, keyFn }: RepeatOptions<T>);
+    constructor({ elementContext, $items, renderFn, keyFn }: RepeatOptions<T>);
     connect(parent: Node, after?: Node): void;
     disconnect(): void;
     setChildren(): void;

package/{lib → dist}/nodes/text.d.ts

@@ -1,5 +1,5 @@
 import { type DOMHandle } from "../markup.js";
-import { MaybeSignal, type StopFunction } from "../signals.js";
+import { type MaybeSignal, type StopFunction } from "../signals.js";
 interface Stringable {
     toString(): string;
 }

package/{lib → dist}/signals.d.ts

@@ -9,16 +9,16 @@ type Unwrapped<T> = T extends Signal<infer V> ? V : T;
 export type SignalValues<T extends MaybeSignal<any>[]> = {
     [K in keyof T]: Unwrapped<T[K]>;
 };
-export interface SignalCreateOptions<T> {
+export interface CreateSignalOptions<T> {
     /**
-     * Determines if the `next` value is equal to the `previous` value.
+     * Determines if the `next` value is equal to the `current` value.
      * If this function returns true, watchers will be notified of changes. If it returns false, watchers will not be notified.
      * By default equality is defined as deep equality.
      *
      * @param next - The new value being set.
-     * @param previous - The previous value being replaced.
+     * @param current - The current value being replaced.
      */
-    equality?: (next: T, previous: T) => boolean;
+    equality?: (next: T, current: T) => boolean;
 }
 export interface SignalWatchOptions<T> {
     /**
@@ -34,7 +34,7 @@ export interface Signal<T> {
     get(): T;
     /**
      * Watch this signal's value with a `callback` function.
-     * The `callback` is only called if the value is not equal to the previous value.
+     * The `callback` is only called if the value is not equal to the current value.
      *
      * > NOTE: If watching a signal inside a view, use the `.watch` method on the `ViewContext`. That method will automatically
      * clean up all watchers when the view is disconnected. Watchers created here must be cleaned up manually.
@@ -42,9 +42,9 @@ export interface Signal<T> {
     watch(callback: (value: T) => void, options?: SignalWatchOptions<T>): StopFunction;
 }
 /** A new value for a signal, or a callback that receives the current value and returns a new one. */
-export type SetSignalAction<I, O = I> = O | ((current: I) => O);
+export type SignalSetAction<I, O = I> = O | ((current: I) => O);
 /** Callback that updates the value of a signal. */
-export type SignalSetter<I, O = I> = (value: SetSignalAction<I, O>) => void;
+export type SignalSetter<I, O = I> = (value: SignalSetAction<I, O>) => void;
 export type MaybeSignal<T> = Signal<T> | T;
 /**
  * A signal and setter in one. Useful for passing signals that are intended to be updated by subviews.
@@ -57,7 +57,7 @@ export interface SettableSignal<I, O = I> extends Signal<I> {
     /**
      * Takes a callback that recieves the signal's current value and returns a new one.
      */
-    set(callback: (previous: I) => O): void;
+    set(callback: (current: I) => O): void;
 }
 export declare function isSignal<T>(value: any): value is Signal<T>;
 export declare function isSettableSignal<T>(value: any): value is Signal<T>;
@@ -69,44 +69,33 @@ export declare function designalify<T>(value: MaybeSignal<T>): T;
  * Ensures a variable that may be a signal or plain value is a signal.
  */
 export declare function signalify<T>(value: MaybeSignal<T>): Signal<T>;
-export interface signal {
-    /**
-     * Creates a new Signal and setter.
-     */
-    /**
-     * Creates a new Signal and setter.
-     */
-    /**
-     * Creates a SettableSignal with an initial value.
-     */
-    settable<T>(initialValue: T, options?: SignalCreateOptions<T>): SettableSignal<T>;
-    /**
-     * Creates a SettableSignal.
-     */
-    settable<T>(initialValue?: T, options?: SignalCreateOptions<T | undefined>): SettableSignal<T | undefined>;
-    /**
-     * Combines a Signal and setter into a SettableSignal.
-     */
-    toSettable<I, O = I>(signal: Signal<I>, setter: SignalSetter<I, O>): SettableSignal<I>;
-    /**
-     * Creates a SignalSetter with custom logic provided by `callback`.
-     */
-    createSetter<I, O = I>(signal: Signal<I>, callback: (next: O, previous: I) => void): SignalSetter<I, O>;
-}
-export declare function signal<T>(initialValue: T, options?: SignalCreateOptions<T>): [Signal<T>, SignalSetter<T>];
-export declare function signal<T>(initialValue?: T, options?: SignalCreateOptions<T | undefined>): [Signal<T | undefined>, SignalSetter<T | undefined>];
-export declare namespace signal {
-    var settable: typeof createSettableSignal;
-    var toSettable: typeof createSettableSignalFrom;
-    var createSetter: typeof createSignalSetter;
-}
-declare function createSettableSignal<T>(initialValue: T, options?: SignalCreateOptions<T>): SettableSignal<T>;
-declare function createSettableSignal<T>(initialValue?: T, options?: SignalCreateOptions<T | undefined>): SettableSignal<T | undefined>;
-declare function createSettableSignalFrom<I, O = I>(signal: Signal<I>, setter: SignalSetter<I, O>): SettableSignal<I, O>;
-declare function createSignalSetter<I, O = I>(signal: Signal<I>, callback: (next: O, previous: I) => void): SignalSetter<I, O>;
-export interface SignalDeriveOptions {
-    equality?: (next: unknown, previous: unknown) => boolean;
+/**
+ * Creates a SettableSignal.
+ */
+export declare function createSettableSignal<T>(initialValue: T, options?: CreateSignalOptions<T>): SettableSignal<T>;
+/**
+ * Creates a SettableSignal.
+ */
+export declare function createSettableSignal<T>(initialValue?: T, options?: CreateSignalOptions<T | undefined>): SettableSignal<T | undefined>;
+/**
+ * Join a signal and its setter into a single SettableSignal object.
+ */
+export declare function toSettableSignal<I, O = I>(signal: Signal<I>, setter: SignalSetter<I, O>): SettableSignal<I, O>;
+/**
+ * Creates a SignalSetter with custom logic provided by `callback`.
+ */
+export declare function createSignalSetter<I, O = I>(signal: Signal<I>, callback: (next: O, current: I) => void): SignalSetter<I, O>;
+/**
+ * Creates a signal and setter.
+ */
+export declare function createSignal<T>(initialValue: T, options?: CreateSignalOptions<T>): [Signal<T>, SignalSetter<T>];
+/**
+ * Creates a signal and setter.
+ */
+export declare function createSignal<T>(initialValue?: T, options?: CreateSignalOptions<T | undefined>): [Signal<T | undefined>, SignalSetter<T | undefined>];
+export interface DeriveSignalOptions {
+    equality?: (next: unknown, current: unknown) => boolean;
 }
-export declare function derive<Inputs extends MaybeSignal<any>[], T>(signals: [...Inputs], fn: (...currentValues: SignalValues<Inputs>) => T | Signal<T>, options?: SignalDeriveOptions): Signal<T>;
+export declare function derive<Inputs extends MaybeSignal<any>[], T>(signals: [...Inputs], fn: (...currentValues: SignalValues<Inputs>) => T | Signal<T>, options?: DeriveSignalOptions): Signal<T>;
 export declare function watch<I extends MaybeSignal<any>[]>(signals: [...I], fn: (...currentValues: SignalValues<I>) => void): StopFunction;
 export {};

package/{lib → dist}/types.d.ts

@@ -1,19 +1,11 @@
 import type * as CSS from "csstype";
 import { Ref, type Markup } from "./markup.js";
-import { type Store } from "./store.js";
-import { type DocumentStore } from "./stores/document.js";
-import { type RenderStore } from "./stores/render.js";
 import { SettableSignal, Signal } from "./signals.js";
 /**
  * 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 | Signal<any> | (string | number | Markup | false | null | undefined | Signal<any>)[];
-export type StoreExports<T> = T extends Store<any, infer O> ? O : unknown;
-export interface BuiltInStores {
-    document: StoreExports<typeof DocumentStore>;
-    render: StoreExports<typeof RenderStore>;
-}
 export type Stringable = {
     toString(): string;
 };

package/{lib → dist}/utils.d.ts

@@ -1,3 +1,4 @@
+export declare const noOp: () => void;
 export declare function deepEqual(one: any, two: any): boolean;
 /**
  * Takes an old value and a new value.  Returns a merged copy if both are objects, otherwise returns the new value.
@@ -12,3 +13,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 type MatcherFunction = (value: string) => boolean;
+/**
+ * Parses a filter string into a matcher function.
+ *
+ * @param pattern - A string or regular expression that specifies a pattern for names of loggers whose messages you want to display.
+ */
+export declare function createMatcher(pattern: string | RegExp): MatcherFunction;

package/dist/view.d.ts

@@ -0,0 +1,44 @@
+import { type DOMHandle, type ElementContext, type Markup } from "./markup.js";
+import type { Logger } from "./modules/dolla.js";
+import { type MaybeSignal, Signal, type SignalValues, type StopFunction } from "./signals.js";
+/**
+ * Any valid value that a View can return.
+ */
+export type ViewResult = Node | Signal<any> | Markup | Markup[] | null;
+export type ViewFunction<P> = (props: P, context: ViewContext) => ViewResult;
+export interface ViewContext extends Logger {
+    /**
+     * A string ID unique to this view.
+     */
+    readonly uid: string;
+    /**
+     * Sets the name of the view's built in logger.
+     */
+    setName(name: string): void;
+    /**
+     * 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;
+    /**
+     * Watch a set of signals. The callback is called when any of the signals receive a new value.
+     * Watchers will be stopped when this view is unmounted. Returns a function to stop watching early.
+     */
+    watch<T extends MaybeSignal<any>[]>(signals: [...T], callback: (...values: SignalValues<T>) => void): StopFunction;
+    /**
+     * Returns a Markup element that displays this view's children.
+     */
+    outlet(): Markup;
+}
+export declare function constructView<P>(elementContext: ElementContext, view: ViewFunction<P>, props: P, children?: Markup[]): DOMHandle;

package/dist/views/default-crash-page.d.ts

@@ -0,0 +1,8 @@
+type CrashPageProps = {
+    message: string;
+    error: Error;
+    loggerName: string;
+    uid?: string;
+};
+export declare function DefaultCrashPage(props: CrashPageProps): import("../markup.js").Markup;
+export {};

package/notes/scratch.md

@@ -1,5 +1,125 @@
 # Scratch Note
 
+What if Dolla was just a global object that you don't instantiate. I have never personally run into a use case for having more than one app on a page at once. In all my projects, the page and the app are synonymous.
+
+Doing this would make it possible to access things inside the Dolla app from _outside_ code such as Quill blots. Effectively all code that has access to your Dolla import is _inside_ the app.
+
+- Remove stores in favor of just exporting variables and functions from ES modules and importing them where desired.
+-
+
+```jsx
+import Dolla from "@manyducks.co/dolla";
+
+// Languages: add translation, set language and get localized string as a signal
+Dolla.language.setup({
+  initialLanguage: Dolla.language.detect({ fallback: "ja" }), // Detect user's language and fall back to passed value
+  languages: [
+    { name: "ja", path: "/static/locales/ja.json" },
+    {
+      name: "en",
+      fetch: async () => {
+        // Pass a path string, or if additional logic is needed, a fetch function.
+        const res = await Dolla.http.get("/static/locales/en.json");
+        return res.body;
+      }
+    }
+  ]
+});
+
+Dolla.language.$current
+Dolla.language.t$()
+
+// A single setup call to keep things contained (must happen before mount)
+Dolla.router.setup({
+  // Initial path must point to a route that actually exists (will be validated on mount) (initialPath is "/" by default)
+  initialPath: "/",
+  routes: [
+    { path: "/", view: SomeView }
+  ]
+});
+// And then you can route from anywhere.
+Dolla.router.go("/some/path");
+// Or get route information from anywhere.
+Dolla.router.$path;
+Dolla.router.$params;
+
+// Also utils are available
+const joinedPath = Dolla.router.utils.joinPath("/api/records", "5");
+const resolvedPath = Dolla.router.utils.resolvePath("../"); // Resolves with window.location.href as the base
+
+// Initializes the app and matches first route
+Dolla.mount("#app");
+// If you pass a view as the second argument it becomes the root view (this works for simple apps without a router)
+Dolla.mount("#app", MyRootView);
+// If router setup function wasn't called then the root view is mounted equivalent to the following:
+Dolla.router.setup({
+  defaultPath: "/",
+  routes: [
+    { path: "/*", view: MyRootView },
+  ]
+});
+
+// Add HTTP middleware
+Dolla.http.use(async (req, next) => {
+  const res = await next()
+});
+// Make HTTP calls
+const res = await Dolla.get("/some/path");
+
+// Adjust log level
+Dolla.setLogLevel(Dolla.LOG_LEVEL_INFO);
+Dolla.setLogFilter("*,-Dolla/*")
+// Create a scoped logger
+const debug = Dolla.createLogger("debug-logger");
+debug.log("HELLO");
+debug.warn("THIS IS A SCOPED LOGGER");
+
+// Efficiently and safely read and mutate the DOM using Dolla's render batching
+Dolla.render.read(() => {
+  // Reference DOM nodes
+});
+Dolla.render.update(() => {
+  // Mutate the DOM as part of Dolla's next batch
+}, "some-key");
+
+// Respond to lifecycle events
+Dolla.onMount(() => {});
+Dolla.onRouteMatch(() => {});
+// Dolla.onWhatever(() => {});
+
+interface SomeViewProps {}
+
+function SomeView (props: SomeViewProps, ctx: Dolla.ViewContext) {
+  const debug = Dolla.createLogger("SomeView");
+
+  // returns a signal and a setter function
+  const [$someValue, setSomeValue] = Dolla.createSignal(4);
+
+  // Router is now a part of the Dolla object
+  Dolla.router.$path;
+  Dolla.router.$params;
+
+  Dolla.router.go("/some-other-path");
+
+  ctx.watch([$someValue], (value) => {
+    debug.log(value);
+  });
+
+  // View helpers are on ViewContext
+  ctx.repeat()
+  ctx.cond()
+  ctx.render([...states], (...values) => {
+    // return Renderable (equivalent to Dolla.derive(states, (...values) => Renderable))
+  })
+  ctx.portal()
+  ctx.outlet()
+
+  // TODO: Add Dolla.dialog.show() and Dolla.toast.show() or create separate libraries?
+
+  return <h1>{ctx.t$("home.headerText")}</h1>;
+}
+```
+
 ```tsx
 // import { signal, computed } from "@manyducks.co/dolla";