@manyducks.co/dolla 1.0.1 → 2.0.0-alpha.0

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";
 

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@manyducks.co/dolla",
-  "version": "1.0.1",
+  "version": "2.0.0-alpha.0",
   "description": "Front-end components, routing and state management.",
-  "main": "lib/index.js",
-  "types": "./index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
   "sideEffects": false,
   "repository": "https://github.com/manyducksco/dolla",
   "scripts": {
     "test": "npm run build && node --test",
-    "build": "tsc && node build.js",
+    "build:esbuild": "tsc && node build.js",
+    "build": "vite build && tsc",
     "start": "tsc --watch",
     "prepublishOnly": "NODE_ENV=production npm run build"
   },
@@ -23,18 +24,15 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "import": "./lib/index.js",
+      "import": "./dist/index.js",
       "types": "./index.d.ts"
     },
-    "./testing": {
-      "import": "./lib/testing/index.js"
-    },
     "./jsx-runtime": {
-      "import": "./lib/jsx/jsx-runtime.js",
+      "import": "./dist/jsx-runtime.js",
       "types": "./jsx-runtime.d.ts"
     },
     "./jsx-dev-runtime": {
-      "import": "./lib/jsx/jsx-dev-runtime.js",
+      "import": "./dist/jsx-dev-runtime.js",
       "types": "./jsx-dev-runtime.d.ts"
     }
   },
@@ -42,12 +40,13 @@
     "fetch-ponyfill": "^7.1.0",
     "history": "^5.3.0",
     "nanoid": "^5.0.4",
-    "simple-color-hash": "^1.0.2"
+    "simple-color-hash": "^1.0.2",
+    "vite": "^6.0.7"
   },
   "devDependencies": {
     "@types/node": "^18.17.6",
     "csstype": "^3.1.3",
-    "esbuild": "^0.20.0",
+    "esbuild": "^0.24.2",
     "prettier": "^3.2.4",
     "typescript": "^5.3.3",
     "zod": "^3.22.4"

package/vite.config.js

@@ -0,0 +1,27 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    // minify: "terser",
+    // minify: false,
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: resolve(__dirname, "src/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/lib/app.d.ts

@@ -1,83 +0,0 @@
-import { CrashCollector } from "./classes/CrashCollector.js";
-import { DebugHub, type DebugOptions } from "./classes/DebugHub.js";
-import { DOMHandle } from "./markup.js";
-import { initStore, type Store } from "./store.js";
-import { type BuiltInStores } from "./types.js";
-import { type View } from "./view.js";
-interface StoreConfig<O, E> {
-    store: Store<O, E>;
-    options?: O;
-}
-interface IAppOptions {
-    /**
-     * Options for the debug system.
-     */
-    debug?: DebugOptions;
-    /**
-     * The view to be rendered by the app.
-     */
-    view?: View<{}>;
-    /**
-     * App-level stores.
-     */
-    stores?: StoreConfig<any, any>[];
-    /**
-     * Configures the app based on the environment it's running in.
-     */
-    mode?: "development" | "production";
-}
-export interface AppContext {
-    crashCollector: CrashCollector;
-    debugHub: DebugHub;
-    stores: Map<keyof BuiltInStores | StoreRegistration["store"], StoreRegistration>;
-    mode: "development" | "production";
-    rootElement?: HTMLElement;
-    rootView?: DOMHandle;
-}
-export interface ElementContext {
-    stores: Map<StoreRegistration["store"], StoreRegistration>;
-    isSVG?: boolean;
-    componentName?: string;
-    parent?: ElementContext;
-}
-/**
- * An object kept in App for each store registered with `addStore`.
- */
-export interface StoreRegistration<O = any> {
-    store: Store<O, any>;
-    options?: O;
-    instance?: ReturnType<typeof initStore>;
-}
-interface ConfigureContext {
-    /**
-     * 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];
-}
-type ConfigureCallback = (ctx: ConfigureContext) => void | Promise<void>;
-export interface IApp {
-    readonly isConnected: boolean;
-    /**
-     * Runs `callback` after app-level stores are connected to the app, but before views are connected to the DOM.
-     * Use this function to run async configuration code before displaying content to the user.
-     *
-     * Note that this will delay content being displayed on the screen, so using some kind of splash screen is recommended.
-     */
-    configure(callback: ConfigureCallback): this;
-    /**
-     * Initializes and connects the app as a child of `element`.
-     *
-     * @param element - A selector string or a DOM node to attach to. If a string, follows the same format as that taken by `document.querySelector`.
-     */
-    connect(selector: string | Node): Promise<void>;
-    /**
-     * Disconnects views and tears down globals, removing the app from the page.
-     */
-    disconnect(): Promise<void>;
-}
-export declare function App(options?: IAppOptions): IApp;
-export {};

package/lib/classes/CrashCollector.d.ts

@@ -1,30 +0,0 @@
-interface ErrorContext {
-    error: Error;
-    severity: "error" | "crash";
-    componentName: string;
-}
-interface CrashOptions {
-    error: Error;
-    componentName?: string;
-}
-type ErrorCallback = (ctx: ErrorContext) => void;
-/**
- * Receives errors that occur in components.
- */
-export declare class CrashCollector {
-    #private;
-    /**
-     * Registers a callback to receive all errors that pass through the CrashCollector.
-     * Returns a function that cancels this listener when called.
-     */
-    onError(callback: ErrorCallback): () => void;
-    /**
-     * Reports an unrecoverable error that requires crashing the whole app.
-     */
-    crash({ error, componentName }: CrashOptions): void;
-    /**
-     * Reports a recoverable error.
-     */
-    error({ error, componentName }: CrashOptions): void;
-}
-export {};

package/lib/classes/DebugHub.d.ts

@@ -1,61 +0,0 @@
-import { type CrashCollector } from "./CrashCollector.js";
-export type DebugOptions = {
-    /**
-     * Determines which debug channels are printed. Supports multiple filters with commas,
-     * a prepended `-` to exclude a channel and wildcards to match partial channels.
-     *
-     * @example "store:*,-store:test" // matches everything starting with "store" except "store:test"
-     */
-    filter?: string | RegExp;
-    /**
-     * Print info messages when true. Default: true for development builds, false for production builds.
-     */
-    info?: boolean | "development";
-    /**
-     * Print log messages when true. Default: true for development builds, false for production builds.
-     */
-    log?: boolean | "development";
-    /**
-     * Print warn messages when true. Default: true for development builds, false for production builds.
-     */
-    warn?: boolean | "development";
-    /**
-     * Print error messages when true. Default: true.
-     */
-    error?: boolean | "development";
-};
-type DebugHubOptions = DebugOptions & {
-    crashCollector: CrashCollector;
-    mode: "development" | "production";
-};
-export interface DebugChannelOptions {
-    name: string;
-    id?: string;
-}
-export interface DebugChannel {
-    info(...args: any[]): void;
-    log(...args: any[]): void;
-    warn(...args: any[]): void;
-    error(...args: any[]): void;
-}
-/**
- * The central trunk from which all channels branch.
- * Changing the filter here determines what kind of messages are printed across the app.
- */
-export declare class DebugHub {
-    #private;
-    constructor(options: DebugHubOptions, _console?: any);
-    /**
-     * Returns a debug channel labelled by `name`. Used for logging from components.
-     */
-    channel(options: DebugChannelOptions): DebugChannel;
-    get filter(): string | RegExp;
-    set filter(pattern: string | RegExp);
-}
-/**
- * Parses a filter string into a match function.
- *
- * @param pattern - A string or regular expression that specifies a pattern for names of debug channels you want to display.
- */
-export declare function makeMatcher(pattern: string | RegExp): (value: string) => boolean;
-export {};

package/lib/classes/EventEmitter.d.ts

@@ -1,44 +0,0 @@
-type EventListeners<E extends EventMap> = {
-    [K in keyof E]?: EventCallback<E, K>[];
-};
-export type EventCallback<E extends EventMap, K extends keyof E> = (event: EmittedEvent<E, K>) => void;
-/**
- * A map of event names and data values that their listener callbacks take.
- */
-export interface EventMap {
-    [name: string]: any;
-}
-/**
- * A hub for subscribing to and emitting events. A good pattern when you want to notify several parts of your app
- * at once when a condition changes in a central location. This is a similar pattern to Readable and Writable as far as
- * observability goes, but with the added ability to emit multiple event types each with their own separate listeners.
- */
-export declare class EventEmitter<E extends EventMap = EventMap> {
-    listeners: EventListeners<E>;
-    /**
-     * Emit an event.
-     */
-    emit<K extends keyof E>(name: K, data: E[K]): void;
-    /**
-     * Listen for an event. The callback will be called whenever that event is emitted.
-     * Returns a function that will cancel this listener when called.
-     */
-    on<K extends keyof EventListeners<E>>(name: K, callback: EventCallback<E, K>): () => void;
-    /**
-     * Listen for the next emitted event. The callback will be called once the next time that event is emitted,
-     * and then never again. Returns a function that will cancel this listener when called.
-     */
-    once<K extends keyof EventListeners<E>>(name: K, callback: EventCallback<E, K>): () => void;
-    /**
-     * Cancel a listener by passing the callback that was originally used to register it.
-     */
-    off<K extends keyof EventListeners<E>>(name: K, callback: EventCallback<E, K>): void;
-}
-declare class EmittedEvent<E extends EventMap, K extends keyof E> {
-    /**
-     * Data object emitted with this event.
-     */
-    data: E[K];
-    constructor(data: E[K]);
-}
-export {};

package/lib/index.d.ts

@@ -1,21 +0,0 @@
-export { App } from "./app.js";
-export * from "./signals.js";
-export { type Ref, isRef, ref, m, cond, repeat, portal } from "./markup.js";
-export { Fragment } from "./views/fragment.js";
-export { StoreScope, type StoreScopeProps } from "./views/store-scope.js";
-export { RouterStore, type RouteMatchContext } from "./stores/router.js";
-export { LanguageStore } from "./stores/language.js";
-export { HTTPStore, type HTTPMiddleware } from "./stores/http.js";
-export { DialogStore, type DialogProps } from "./stores/dialog.js";
-export type { ViewContext } from "./view.js";
-export type { StoreContext } from "./store.js";
-export type { Markup } from "./markup.js";
-export type { InputType, Renderable } from "./types.js";
-import type { IntrinsicElements as Elements } from "./types";
-declare global {
-    namespace JSX {
-        interface IntrinsicElements extends Elements {
-            [tag: string]: any;
-        }
-    }
-}