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

package/notes/stores.md

@@ -0,0 +1,79 @@
+# Stores
+
+Ideas for updating the API.
+
+---
+
+What about a global stores registry? Basically just a global object you can import and register stores on, then get them later. Global (not scoped to views). You can still use `provide` and `get` on view contexts in the same exact way if you want scoped stores.
+
+This is a replacement for the current way of providing global stores on the Dolla object. The Dolla object is going away in future API versions.
+
+```ts
+import { Stores, Views } from "@manyducks.co/dolla";
+
+Stores.provide(SomeStore, {
+  /* options */
+});
+
+const some = Stores.get(SomeStore);
+
+const SomeStore = Stores.define(() => {});
+
+// Could also have views be defined this way.
+const SomeView = Views.define<SomeProps>((props, ctx) => {});
+
+// Register as a custom element.
+Views.register("some-view", SomeView);
+```
+
+---
+
+```js
+function CounterStore(initialCount = 0, ctx) {
+  const [$value, setValue] = createState(initialCount);
+
+  ctx.on("counter:increment", (e) => {
+    e.stop(); // Stop this event from bubbling up to counters at higher levels (if any).
+    setValue((current) => current + 1);
+  });
+
+  ctx.on("counter:decrement", (e) => {
+    e.stop();
+    setValue((current) => current - 1);
+  });
+
+  // Events can be emitted from this context in a store.
+  ctx.emit("otherEvent");
+
+  ctx.onMount(() => {
+    // Setup
+    // This is called based on the context the store is attached to.
+    // If Dolla, it's called when the app is mounted. If ViewContext, it's called when the view is mounted.
+  });
+  ctx.onUnmount(() => {
+    // Cleanup
+  });
+
+  // Context variables will be accessible on the same context (e.g. the view this is attached to and below)
+  ctx.get("context variable");
+  ctx.set("context variable", "context variable value");
+
+  // Stores don't have to return anything, but if they do it becomes accessible with `ctx.use(Store)`.
+  return $value;
+}
+
+// Attach it to the app.
+Dolla.provide(CounterStore, 0);
+
+function ExampleView(props, ctx) {
+  // ctx.use lets you access the return value
+  // but the events will still be received and handled regardless
+  const $count = ctx.use(Counter);
+
+  return html`
+    <button onclick=${() => this.emit("counter:decrement")}>-1</button>
+    <span>${$count}</span>
+    <button onclick=${() => this.emit("counter:increment")}>+1</button>
+  `;
+}
+```

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@manyducks.co/dolla",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.60",
   "description": "Front-end components, routing and state management.",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/core/index.d.ts",
   "type": "module",
   "sideEffects": false,
-  "repository": "https://github.com/manyducksco/dolla",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/manyducksco/dolla.git"
+  },
   "scripts": {
-    "test": "npm run build && node --test",
+    "test": "vitest",
     "build:esbuild": "tsc && node build.js",
     "build": "vite build && tsc",
     "start": "tsc --watch",
@@ -25,7 +28,19 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "types": "./index.d.ts"
+      "types": "./dist/core/index.d.ts"
+    },
+    "./router": {
+      "import": "./dist/router.js",
+      "types": "./dist/router/index.d.ts"
+    },
+    "./http": {
+      "import": "./dist/http.js",
+      "types": "./dist/http/index.d.ts"
+    },
+    "./i18n": {
+      "import": "./dist/i18n.js",
+      "types": "./dist/i18n/index.d.ts"
     },
     "./jsx-runtime": {
       "import": "./dist/jsx-runtime.js",
@@ -36,16 +51,16 @@
       "types": "./jsx-dev-runtime.d.ts"
     }
   },
+  "dependencies": {
+    "alien-signals": "^2.0.5"
+  },
   "devDependencies": {
-    "@types/node": "^22.10.6",
+    "@types/node": "^22.12.0",
     "csstype": "^3.1.3",
-    "esbuild": "^0.24.2",
-    "history": "^5.3.0",
-    "htm": "^3.1.1",
-    "nanoid": "^5.0.9",
     "prettier": "^3.4.2",
-    "simple-color-hash": "^1.0.2",
     "typescript": "^5.7.3",
-    "vite": "^6.0.7"
+    "vite": "^6.0.11",
+    "vite-plugin-externalize-deps": "^0.9.0",
+    "vitest": "^3.0.5"
   }
 }

package/vite.config.js

@@ -3,26 +3,20 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   build: {
-    // minify: "terser",
-    // minify: false,
     sourcemap: true,
+    minify: true,
 
     lib: {
       entry: {
-        index: resolve(__dirname, "src/index.ts"),
+        index: resolve(__dirname, "src/core/index.ts"),
+        http: resolve(__dirname, "src/http/index.ts"),
+        i18n: resolve(__dirname, "src/i18n/index.ts"),
+        router: resolve(__dirname, "src/router/index.ts"),
         "jsx-runtime": resolve(__dirname, "src/jsx-runtime.js"),
         "jsx-dev-runtime": resolve(__dirname, "src/jsx-dev-runtime.js"),
       },
       name: "Dolla",
       formats: ["es"],
     },
-    // rollupOptions: {
-    //   external: ["vue"],
-    //   output: {
-    //     globals: {
-    //       vue: "Vue",
-    //     },
-    //   },
-    // },
   },
 });

package/build.js

@@ -1,34 +0,0 @@
-import fs from "node:fs";
-import esbuild from "esbuild";
-
-esbuild
-  .build({
-    entryPoints: ["src/index.ts"],
-    bundle: true,
-    metafile: true,
-    sourcemap: true,
-    // minify: process.env.NODE_ENV === "production",
-    outdir: "dist",
-    format: "esm",
-  })
-  .then((result) => {
-    fs.writeFileSync("esbuild-meta.json", JSON.stringify(result.metafile));
-  });
-
-esbuild.build({
-  entryPoints: ["src/jsx-runtime.js"],
-  bundle: false,
-  minify: false,
-  sourcemap: true,
-  outdir: "dist",
-  format: "esm",
-});
-
-esbuild.build({
-  entryPoints: ["src/jsx-dev-runtime.js"],
-  bundle: false,
-  minify: false,
-  sourcemap: true,
-  outdir: "dist",
-  format: "esm",
-});

package/dist/index.d.ts

@@ -1,21 +0,0 @@
-export { createSettableState, createSetter, createState, derive, toSettableState, toState, valueOf } from "./state.js";
-export type { MaybeState, SettableState, State, StopFunction } from "./state.js";
-export { cond, createMarkup, createRef, html, isRef, portal, repeat } from "./markup.js";
-export type { Markup, MarkupNode, Ref } from "./markup.js";
-import { Dolla } from "./modules/dolla.js";
-declare const dolla: Dolla;
-export default dolla;
-export declare const t: (key: string, values?: Record<string, import("./types.js").Stringable | import("./state.js").State<import("./types.js").Stringable>>) => import("./state.js").State<string>;
-export type { Dolla, Environment, Logger, LoggerErrorContext, LoggerOptions, Loggles } from "./modules/dolla.js";
-export type { HTTPRequest, HTTPResponse } from "./modules/http.js";
-export type { InputType, Renderable } from "./types.js";
-export type { ViewContext, ViewFunction, ViewNode } from "./view.js";
-export type { CrashViewProps } from "./views/default-crash-view.js";
-import type { IntrinsicElements as Elements } from "./types";
-declare global {
-    namespace JSX {
-        interface IntrinsicElements extends Elements {
-            [tag: string]: any;
-        }
-    }
-}

package/dist/markup.d.ts

@@ -1,100 +0,0 @@
-import type { Dolla } from "./modules/dolla.js";
-import { MaybeState, type State } from "./state.js";
-import type { Renderable, Stringable } from "./types.js";
-import { type ViewFunction, type ViewContext, type ViewResult } from "./view.js";
-export interface ElementContext {
-    /**
-     * The root Dolla instance this element belongs to.
-     */
-    root: Dolla;
-    /**
-     * Whether to create DOM nodes in the SVG namespace. An `<svg>` element will set this to true and pass it down to children.
-     */
-    isSVG?: boolean;
-}
-/**
- * Markup is a set of element metadata that hasn't been constructed into a MarkupNode yet.
- */
-export interface Markup {
-    type: string | ViewFunction<any>;
-    props?: Record<string, any>;
-    children?: Markup[];
-}
-/**
- * A DOM node that has been constructed from a Markup object.
- */
-export interface MarkupNode {
-    readonly node?: Node;
-    readonly isMounted: boolean;
-    mount(parent: Node, after?: Node): void;
-    unmount(): void;
-}
-export declare function isMarkup(value: unknown): value is Markup;
-export declare function isNode(value: unknown): value is MarkupNode;
-export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
-export interface MarkupAttributes {
-    $text: {
-        value: MaybeState<Stringable>;
-    };
-    $cond: {
-        $predicate: State<any>;
-        thenContent?: Renderable;
-        elseContent?: Renderable;
-    };
-    $repeat: {
-        $items: State<any[]>;
-        keyFn: (value: any, index: number) => string | number | symbol;
-        renderFn: ($item: State<any>, $index: State<number>, c: ViewContext) => ViewResult;
-    };
-    $observer: {
-        states: State<any>[];
-        renderFn: (...items: any) => Renderable;
-    };
-    $outlet: {
-        $children: State<MarkupNode[]>;
-    };
-    $node: {
-        value: Node;
-    };
-    $portal: {
-        content: Renderable;
-        parent: Node;
-    };
-    [tag: string]: Record<string, any>;
-}
-export declare function createMarkup<T extends keyof MarkupAttributes>(type: T, attributes: MarkupAttributes[T], ...children: Renderable[]): Markup;
-export declare function createMarkup<I>(type: ViewFunction<I>, attributes?: I, ...children: Renderable[]): Markup;
-/**
- * Generate markup with HTML in a tagged template literal.
- */
-export declare const html: (strings: TemplateStringsArray, ...values: any[]) => Markup | Markup[];
-/**
- * Displays content conditionally. When `predicate` holds a truthy value, `thenContent` is displayed; when `predicate` holds a falsy value, `elseContent` is displayed.
- */
-export declare function cond(predicate: MaybeState<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
-/**
- * Calls `renderFn` for each item in `items`. Dynamically adds and removes views as items change.
- * The result of `keyFn` is used to compare items and decide if item was added, removed or updated.
- */
-export declare function repeat<T>(items: MaybeState<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult): Markup;
-/**
- * Render `content` into a `parent` node anywhere in the page, rather than at its position in the view.
- */
-export declare function portal(parent: Node, content: Renderable): Markup;
-/**
- * A special kind of State exclusively for storing references to DOM nodes.
- */
-export declare function createRef<T extends Node>(): Ref<T>;
-export declare function isRef<T extends Node>(value: any): value is Ref<T>;
-export interface Ref<T extends Node> extends State<T | undefined> {
-    node: T | undefined;
-}
-/**
- * Construct Markup metadata into a set of MarkupNodes.
- */
-export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]): MarkupNode[];
-/**
- * Combines one or more MarkupNodes into a single MarkupNode.
- */
-export declare function mergeNodes(nodes: MarkupNode[]): MarkupNode;
-export declare function isRenderable(value: unknown): value is Renderable;

package/dist/modules/dolla.d.ts

@@ -1,111 +0,0 @@
-import { createRef, isRef, MarkupNode, type Markup } from "../markup.js";
-import { createSettableState, createState, derive, toSettableState, toState, valueOf, watch, type State } from "../state.js";
-import { type ViewFunction, type ViewNode } from "../view.js";
-import { type CrashViewProps } from "../views/default-crash-view.js";
-import { HTTP } from "./http.js";
-import { Language } from "./language.js";
-import { Render } from "./render.js";
-import { Router } from "./router.js";
-export type Environment = "development" | "production";
-/**
- * Log type toggles. Each message category can be turned on or off or enabled only in a specific environment.
- */
-export type Loggles = {
-    info: boolean | Environment;
-    log: boolean | Environment;
-    warn: boolean | Environment;
-    error: boolean | Environment;
-};
-export interface Logger {
-    info(...args: any[]): void;
-    log(...args: any[]): void;
-    warn(...args: any[]): void;
-    error(...args: any[]): void;
-    crash(error: Error): void;
-}
-export interface LoggerErrorContext {
-    error: Error;
-    loggerName: string;
-    uid?: string;
-}
-export type LoggerOptions = {
-    /**
-     * Console object to use for logging (mostly for testing). Uses window.console by default.
-     */
-    console?: any;
-    /**
-     * Unique ID to print with logs. Makes it easier to track down messages from specific view instances.
-     */
-    uid?: string;
-};
-export declare class Dolla {
-    #private;
-    readonly http: HTTP;
-    readonly language: Language;
-    readonly render: Render;
-    readonly router: Router;
-    constructor();
-    createState: typeof createState;
-    createSettableState: typeof createSettableState;
-    toSettableState: typeof toSettableState;
-    toState: typeof toState;
-    valueOf: typeof valueOf;
-    derive: typeof derive;
-    watch: typeof watch;
-    createRef: typeof createRef;
-    isRef: typeof isRef;
-    /**
-     * True when the app is connected to a DOM node and displayed to the user.
-     */
-    get isMounted(): boolean;
-    /**
-     * Get the current environment that this app is running in.
-     * Environment affects which log messages will print and how much debugging info is included in the DOM.
-     */
-    getEnv(): Environment;
-    /**
-     * Sets the environment that this app is running in.
-     * Environment affects which log messages will print and how much debugging info is included in the DOM.
-     */
-    setEnv(value: Environment): void;
-    /**
-     * Sets the view that will be shown when the `crash` method is called on any logger.
-     * When a crash is reported the app will be unmounted and replaced with this crash page.
-     */
-    setCrashView(view: ViewFunction<CrashViewProps>): void;
-    mount(selector: string, view?: ViewFunction<any>): Promise<void>;
-    mount(element: HTMLElement, view?: ViewFunction<any>): Promise<void>;
-    unmount(): Promise<void>;
-    /**
-     * Registers a `callback` to run after `Dolla.mount` is called, before the app is mounted. If `callback` returns a Promise,
-     * it will be awaited before mounting finishes. Use this to perform initial setup before the app is displayed to the user.
-     */
-    beforeMount(callback: () => void | Promise<void>): void;
-    /**
-     * Registers a `callback` to run after the app is mounted.
-     */
-    onMount(callback: () => void): void;
-    /**
-     * Registers a `callback` to run after `Dolla.unmount` is called, before the app is unmounted. If `callback` returns a Promise,
-     * it will be awaited before unmounting finishes. Use this to perform cleanup.
-     */
-    beforeUnmount(callback: () => void | Promise<void>): void;
-    /**
-     * Registers a `callback` to run after the app is unmounted.
-     */
-    onUnmount(callback: () => void): void;
-    /**
-     * Update log type toggles. Values that are not passed will remain unchanged.
-     */
-    setLoggles(options: Partial<Loggles>): void;
-    setLogFilter(filter: string | RegExp): void;
-    createLogger(name: string | State<string>, options?: LoggerOptions): Logger;
-    /**
-     *
-     */
-    constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]): ViewNode;
-    /**
-     *
-     */
-    constructMarkup(markup: Markup | Markup[]): MarkupNode;
-}

package/dist/modules/language.d.ts

@@ -1,41 +0,0 @@
-import { type State } from "../state.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: State<string | undefined>;
-    constructor(dolla: Dolla);
-    get supportedLanguages(): string[];
-    setup(options: LanguageSetupOptions): void;
-    setLanguage(name: string): Promise<void>;
-    /**
-     * Returns a State 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 | State<Stringable>>): State<string>;
-}
-export {};

package/dist/modules/render.d.ts

@@ -1,17 +0,0 @@
-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.
-     * Returns a Promise that resolves once the callback has run.
-     */
-    update(callback: () => void, key?: string): Promise<void>;
-    /**
-     * Queues a callback that reads DOM information to run after the next render batch,
-     * ensuring all writes have been performed before reading.
-     * Returns a Promise that resolves once the callback has run.
-     */
-    read(callback: () => void): Promise<void>;
-}

package/dist/modules/router.d.ts

@@ -1,152 +0,0 @@
-import { type Stringable } from "../types.js";
-import { ViewNode, type ViewFunction } from "../view.js";
-import type { Dolla } from "./dolla.js";
-export interface RouteMatchContext {
-    /**
-     * Redirects the user to a different route instead of matching the current one.
-     */
-    redirect(path: string): void;
-}
-export interface Route {
-    /**
-     * The path or path fragment to match.
-     */
-    path: string;
-    /**
-     * Path to redirect to when this route is matched, or a callback function that returns such path.
-     */
-    redirect?: string | ((ctx: RouteRedirectContext) => string) | ((ctx: RouteRedirectContext) => Promise<string>);
-    /**
-     * View to display when this route is matched.
-     */
-    view?: ViewFunction<any>;
-    /**
-     * Subroutes.
-     */
-    routes?: Route[];
-    /**
-     * Called after the match is identified but before it is acted on. Use this to set state, load data, etc.
-     */
-    beforeMatch?: (ctx: RouteMatchContext) => void | Promise<void>;
-}
-export interface RouteConfig {
-    pattern: string;
-    meta: {
-        redirect?: string | ((ctx: RouteRedirectContext) => string) | ((ctx: RouteRedirectContext) => Promise<string>);
-        pattern?: string;
-        layers?: RouteLayer[];
-        beforeMatch?: (ctx: RouteMatchContext) => void | Promise<void>;
-    };
-}
-export interface RouteLayer {
-    id: number;
-    view: ViewFunction<{}>;
-}
-/**
- * Object passed to redirect callbacks. Contains information useful for determining how to redirect.
- */
-export interface RouteRedirectContext {
-    /**
-     * The path as it appears in the URL bar.
-     */
-    path: string;
-    /**
-     * The pattern that this path was matched with.
-     */
-    pattern: string;
-    /**
-     * Named route params parsed from `path`.
-     */
-    params: Record<string, string | number | undefined>;
-    /**
-     * Query params parsed from `path`.
-     */
-    query: Record<string, string | number | boolean | undefined>;
-}
-interface ParsedParams {
-    [key: string]: string | number | boolean | (string | number | boolean | null)[] | null;
-}
-interface ParsedQuery extends ParsedParams {
-}
-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.
-     */
-    replace?: boolean;
-    /**
-     * Preserve existing query params (if any) when navigating. Defaults to false.
-     */
-    preserveQuery?: boolean;
-}
-export declare enum RoutingStyle {
-    /**
-     * 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 = "hash",
-    /**
-     * 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.
-     */
-    style?: RoutingStyle;
-}
-export interface RouterElements {
-    readonly rootElement?: HTMLElement;
-    readonly rootView?: ViewNode;
-}
-export declare class Router {
-    #private;
-    /**
-     * The currently matched route pattern, if any.
-     */
-    $pattern: import("../state.js").State<string | null>;
-    /**
-     * The current URL path.
-     */
-    $path: import("../state.js").State<string>;
-    /**
-     * The current named path params.
-     */
-    $params: import("../state.js").State<ParsedParams>;
-    /**
-     * The current query params. Changes to this object will be reflected in the URL.
-     */
-    $query: import("../state.js").State<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.
-     */
-    back(steps?: number): void;
-    /**
-     * Navigate forward. Pass a number of steps to hit the forward button that many times.
-     */
-    forward(steps?: number): void;
-}
-/**
- * Intercepts links within the root node.
- *
- * This is adapted from https://github.com/choojs/nanohref/blob/master/index.js
- *
- * @param root - Element under which to intercept link clicks
- * @param callback - Function to call when a click event is intercepted
- * @param _window - (optional) Override for global window object
- */
-export declare function catchLinks(root: HTMLElement, callback: (anchor: HTMLAnchorElement) => void, _window?: Window & typeof globalThis): () => void;
-export {};

package/dist/nodes/cond.d.ts

@@ -1,26 +0,0 @@
-import { type MarkupNode, type ElementContext, type Markup } from "../markup.js";
-import { type State, type StopFunction } from "../state.js";
-import { type Renderable } from "../types.js";
-export interface ConditionalConfig {
-    $predicate: State<any>;
-    thenContent?: Renderable;
-    elseContent?: Renderable;
-    elementContext: ElementContext;
-}
-export declare class Conditional implements MarkupNode {
-    node: Node;
-    endNode: Node;
-    $predicate: State<any>;
-    stopCallback?: StopFunction;
-    thenContent?: Markup[];
-    elseContent?: Markup[];
-    connectedContent: MarkupNode[];
-    elementContext: ElementContext;
-    initialUpdateHappened: boolean;
-    previousValue?: any;
-    constructor(config: ConditionalConfig);
-    get isMounted(): boolean;
-    mount(parent: Node, after?: Node | undefined): void;
-    unmount(): void;
-    update(value: any): void;
-}