@manyducks.co/dolla 2.0.0-alpha.4 → 2.0.0-alpha.41

package/notes/stores.md

@@ -0,0 +1,53 @@
+# Stores
+
+Ideas for updating the API.
+
+```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.4",
+  "version": "2.0.0-alpha.41",
   "description": "Front-end components, routing and state management.",
   "main": "dist/index.js",
   "types": "dist/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",
@@ -36,16 +39,17 @@
       "types": "./jsx-dev-runtime.d.ts"
     }
   },
+  "dependencies": {
+    "alien-signals": "^1.0.3",
+    "htm": "^3.1.1"
+  },
   "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

@@ -1,11 +1,12 @@
 import { resolve } from "node:path";
 import { defineConfig } from "vite";
+// import { externalizeDeps } from "vite-plugin-externalize-deps";
 
 export default defineConfig({
   build: {
-    // minify: "terser",
-    // minify: false,
     sourcemap: true,
+    minify: true,
+    // target: "esnext",
 
     lib: {
       entry: {
@@ -16,13 +17,7 @@ export default defineConfig({
       name: "Dolla",
       formats: ["es"],
     },
-    // rollupOptions: {
-    //   external: ["vue"],
-    //   output: {
-    //     globals: {
-    //       vue: "Vue",
-    //     },
-    //   },
-    // },
   },
+
+  // plugins: [externalizeDeps()],
 });

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/markup.d.ts

@@ -1,100 +0,0 @@
-import type { Dolla } from "./modules/dolla.js";
-import { MaybeSignal, type Signal } from "./signals.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: MaybeSignal<Stringable>;
-    };
-    $cond: {
-        $predicate: Signal<any>;
-        thenContent?: Renderable;
-        elseContent?: Renderable;
-    };
-    $repeat: {
-        $items: Signal<any[]>;
-        keyFn: (value: any, index: number) => string | number | symbol;
-        renderFn: ($item: Signal<any>, $index: Signal<number>, c: ViewContext) => ViewResult;
-    };
-    $observer: {
-        signals: Signal<any>[];
-        renderFn: (...items: any) => Renderable;
-    };
-    $outlet: {
-        $children: Signal<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: MaybeSignal<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
-/**
- * Calls `renderFn` for each item in `items`. Dynamically adds and removes views as items change.
- * The result of `keyFn` is used to compare items and decide if item was added, removed or updated.
- */
-export declare function repeat<T>(items: MaybeSignal<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: Signal<T>, $index: Signal<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 signal 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 Signal<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/language.d.ts

@@ -1,41 +0,0 @@
-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/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/nodes/cond.d.ts

@@ -1,26 +0,0 @@
-import { type MarkupNode, 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;
-    elementContext: ElementContext;
-}
-export declare class Conditional implements MarkupNode {
-    node: Node;
-    endNode: Node;
-    $predicate: Signal<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;
-}

package/dist/nodes/html.d.ts

@@ -1,31 +0,0 @@
-import { type MarkupNode, type ElementContext, type Markup, type Ref } from "../markup.js";
-import { type StopFunction } from "../signals.js";
-type HTMLOptions = {
-    elementContext: ElementContext;
-    tag: string;
-    props: Record<string, any>;
-    children?: Markup[];
-};
-export declare class HTML implements MarkupNode {
-    node: HTMLElement | SVGElement;
-    props: Record<string, any>;
-    children: MarkupNode[];
-    stopCallbacks: StopFunction[];
-    elementContext: ElementContext;
-    uniqueId: string;
-    ref?: Ref<any>;
-    canClickAway: boolean;
-    get isMounted(): boolean;
-    constructor({ tag, props, children, elementContext }: HTMLOptions);
-    mount(parent: Node, after?: Node): void;
-    unmount(): void;
-    getUpdateKey(type: string, value: string | number): string;
-    applyProps(element: HTMLElement | SVGElement, props: Record<string, unknown>): void;
-    applyStyles(element: HTMLElement | SVGElement, styles: unknown, stopCallbacks: StopFunction[]): () => void;
-    applyClasses(element: HTMLElement | SVGElement, classes: unknown, stopCallbacks: StopFunction[]): () => void;
-}
-/**
- * Converts a camelCase string to kebab-case.
- */
-export declare function camelToKebab(value: string): string;
-export {};

package/dist/nodes/observer.d.ts

@@ -1,29 +0,0 @@
-import { type MarkupNode, type ElementContext } from "../markup.js";
-import { type Signal } from "../signals.js";
-import type { Renderable } from "../types.js";
-interface ObserverOptions {
-    elementContext: ElementContext;
-    signals: Signal<any>[];
-    renderFn: (...values: any) => Renderable;
-}
-/**
- * Displays dynamic children without a parent element.
- */
-export declare class Observer implements MarkupNode {
-    node: Node;
-    endNode: Node;
-    connectedViews: MarkupNode[];
-    renderFn: (...values: any) => Renderable;
-    elementContext: ElementContext;
-    observerControls: {
-        start: () => void;
-        stop: () => void;
-    };
-    get isMounted(): boolean;
-    constructor({ signals, renderFn, elementContext }: ObserverOptions);
-    mount(parent: Node, after?: Node): void;
-    unmount(): void;
-    cleanup(): void;
-    update(...children: Renderable[]): void;
-}
-export {};

package/dist/nodes/outlet.d.ts

@@ -1,22 +0,0 @@
-import { type MarkupNode, type ElementContext } from "../markup.js";
-import { type Signal, type StopFunction } from "../signals.js";
-export interface OutletConfig {
-    $children: Signal<MarkupNode[]>;
-    elementContext: ElementContext;
-}
-/**
- * Manages an array of DOMHandles.
- */
-export declare class Outlet implements MarkupNode {
-    node: Node;
-    endNode: Node;
-    $children: Signal<MarkupNode[]>;
-    stopCallback?: StopFunction;
-    connectedChildren: MarkupNode[];
-    elementContext: ElementContext;
-    constructor(config: OutletConfig);
-    get isMounted(): boolean;
-    mount(parent: Node, after?: Node | undefined): void;
-    unmount(): void;
-    update(newChildren: MarkupNode[]): void;
-}

package/dist/nodes/portal.d.ts

@@ -1,19 +0,0 @@
-import { type MarkupNode, type ElementContext } from "../markup.js";
-import { type Renderable } from "../types.js";
-interface PortalConfig {
-    content: Renderable;
-    parent: Node;
-    elementContext: ElementContext;
-}
-/**
- * Renders content into a specified parent node.
- */
-export declare class Portal implements MarkupNode {
-    config: PortalConfig;
-    handle?: MarkupNode;
-    get isMounted(): boolean;
-    constructor(config: PortalConfig);
-    mount(_parent: Node, _after?: Node): void;
-    unmount(): void;
-}
-export {};

package/dist/nodes/repeat.d.ts

@@ -1,34 +0,0 @@
-import { type MarkupNode, 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> {
-    elementContext: ElementContext;
-    $items: Signal<T[]>;
-    keyFn: (value: T, index: number) => string | number | symbol;
-    renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
-}
-type ConnectedItem<T> = {
-    key: any;
-    $value: Signal<T>;
-    setValue: SignalSetter<T>;
-    $index: Signal<number>;
-    setIndex: SignalSetter<number>;
-    handle: MarkupNode;
-};
-export declare class Repeat<T> implements MarkupNode {
-    node: Node;
-    endNode: Node;
-    $items: Signal<T[]>;
-    stopCallback?: StopFunction;
-    connectedItems: ConnectedItem<T>[];
-    elementContext: ElementContext;
-    renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
-    keyFn: (value: T, index: number) => string | number | symbol;
-    get isMounted(): boolean;
-    constructor({ elementContext, $items, renderFn, keyFn }: RepeatOptions<T>);
-    mount(parent: Node, after?: Node): void;
-    unmount(): void;
-    _cleanup(): void;
-    _update(value: T[]): void;
-}
-export {};

package/dist/nodes/text.d.ts

@@ -1,19 +0,0 @@
-import { type MarkupNode } from "../markup.js";
-import { type MaybeSignal, type StopFunction } from "../signals.js";
-interface Stringable {
-    toString(): string;
-}
-interface TextOptions {
-    value: MaybeSignal<Stringable>;
-}
-export declare class Text implements MarkupNode {
-    node: globalThis.Text;
-    value: MaybeSignal<Stringable>;
-    stopCallback?: StopFunction;
-    get isMounted(): boolean;
-    constructor({ value }: TextOptions);
-    mount(parent: Node, after?: Node | null): Promise<void>;
-    unmount(): Promise<void>;
-    update(value?: Stringable): void;
-}
-export {};