@manyducks.co/dolla 2.0.0-alpha.44 → 2.0.0-alpha.46

package/README.md

@@ -13,7 +13,7 @@ Dolla is a batteries-included JavaScript frontend framework covering the needs o
 - 🔀 Client side [routing](./docs/router.md) with nested routes and middleware support (check login status, preload data, etc).
 - 🐕 Built-in [HTTP](./docs/http.md) client with middleware support (set auth headers, etc).
 - 📍 Lightweight [localization](./docs/i18n.md) system (store translated strings in JSON files and call the `t` function to get them).
-- 🍳 Build system optional. [Write views in JSX](./docs/setup.md) or use `html` tagged template literals.
+- 🍳 Build system optional. [Write views in JSX](./docs/setup.md) or bring in [HTM](https://github.com/developit/htm) and use tagged template literals directly in the browser.
 
 Dolla's goals include:
 
@@ -35,12 +35,12 @@ Dolla's goals include:
 A basic view. Note that the view function is called exactly once when the view is first mounted. All changes to DOM nodes thereafter happen as a result of `$state` values changing.
 
 ```jsx
-import Dolla, { atom, html } from "@manyducks.co/dolla";
+import Dolla, { atom } from "@manyducks.co/dolla";
 
-function Counter() {
+function Counter(props, ctx) {
   const count = atom(0);
 
-  this.effect(() => {
+  ctx.effect(() => {
     console.log(`Count is: ${count.get()}`);
   });
 
@@ -49,19 +49,19 @@ function Counter() {
   }
 
   function decrement() {
-    // alternative to `set(get() - 1)`
     count.update((value) => value - 1);
+    // alternative to `set(get() - 1)`
   }
 
-  return html`
+  return (
     <div>
-      <p>Counter: ${count}</p>
+      <p>Counter: {counter}</p>
       <div>
-        <button onclick=${increment}>+1</button>
-        <button onclick=${decrement}>-1</button>
+        <button on:click={increment}>+1</button>
+        <button on:click={decrement}>-1</button>
       </div>
     </div>
-  `;
+  );
 }
 
 Dolla.mount(document.body, Counter);
@@ -70,19 +70,19 @@ Dolla.mount(document.body, Counter);
 > TODO: Show small examples for routing and stores.
 
 ```js
-function MessageStore() {
-  const message = atom("message", "Hello world!");
+function MessageStore(options, ctx) {
+  const message = atom("Hello world!");
 
-  this.effect(() => {
-    this.log(`Message is now: ${get(message)}`);
+  ctx.effect(() => {
+    ctx.log(`Message is now: ${get(message)}`);
     // Calling `get()` inside an effect (or compose) function will track that reactive value as a dependency.
     // Effects will re-run when a dependency updates.
   });
-  // `this` refers to the context object; StoreContext in a store and ViewContext in a view.
+  // `ctx` refers to the context object; StoreContext in a store and ViewContext in a view.
   // Context objects contain methods for controlling the component, logging and attaching lifecycle hooks.
 
   return {
-    message: compose("message:readonly", () => get(message)),
+    message: compose(() => message.get()),
     // Creates a read-only reactive of the message value.
     // Composed values update when their dependencies update.
 
@@ -91,33 +91,33 @@ function MessageStore() {
   };
 }
 
-function App() {
-  const { message, setMessage } = this.provide(MessageStore);
+function App(props, ctx) {
+  const { message, setMessage } = ctx.provide(MessageStore);
   // Provides a MessageStore on this context and any child contexts.
   // When a store is provided its value is returned right away.
 
-  return html`
+  return (
     <div>
-      <${MessageView} />
-      <${MessageView} />
-      <${MessageView} />
+      <MessageView />
+      <MessageView />
+      <MessageView />
 
       <input
         type="text"
-        value=${message}
-        oninput=${(e) => {
+        value={message}
+        on:input={(e) => {
           setMessage(e.currentTarget.value);
         }}
       />
     </div>
-  `;
+  );
 }
 
-function MessageView() {
-  const { message } = this.get(MessageStore);
+function MessageView(props, ctx) {
+  const { message } = ctx.get(MessageStore);
   // Gets the nearest instance of MessageStore. In this case the one provided at the parent.
 
-  return html`<span>${message}</span>`;
+  return <span>{message}</span>;
 }
 ```
 

package/dist/core/context.d.ts

@@ -1,4 +1,6 @@
 import type { Dolla } from "./dolla";
+import type { View } from "./nodes/view";
+import type { Atom } from "./signals";
 import type { Store, StoreFunction } from "./store";
 export interface ElementContext {
     /**
@@ -21,6 +23,10 @@ export interface ElementContext {
      * The name of the nearest parent view.
      */
     viewName?: string;
+    /**
+     * Current route layer of the nearest view.
+     */
+    route?: Atom<View<{}> | undefined>;
 }
 export interface ComponentContext {
     /**

package/dist/core/markup.d.ts

@@ -1,6 +1,6 @@
 import type { Renderable } from "../types.js";
 import type { ElementContext } from "./context.js";
-import { type ViewContext, type ViewFunction, type ViewResult } from "./nodes/view.js";
+import { View, type ViewContext, type ViewFunction, type ViewResult } from "./nodes/view.js";
 import { MaybeReactive, type Reactive } from "./signals.js";
 /**
  * Markup is a set of element metadata that hasn't been constructed into a MarkupElement yet.
@@ -18,7 +18,7 @@ export interface Markup {
     /**
      *
      */
-    children?: Markup[];
+    children?: any[];
 }
 /**
  * A DOM node that has been constructed from a Markup object.
@@ -49,6 +49,9 @@ export interface MarkupAttributes {
         source: Reactive<Renderable>;
     };
     $outlet: {
+        view: Reactive<View<{}> | undefined>;
+    };
+    $fragment: {
         children: MaybeReactive<MarkupElement[]>;
     };
     $node: {
@@ -60,16 +63,24 @@ export interface MarkupAttributes {
     };
     [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;
+export declare function markup<T extends keyof MarkupAttributes>(type: T, attributes: MarkupAttributes[T], ...children: Renderable[]): Markup;
+export declare function markup<I>(type: ViewFunction<I>, attributes?: I, ...children: any[]): Markup;
 /**
  * Generate markup with HTML in a tagged template literal.
  */
-export declare const html: (strings: TemplateStringsArray, ...values: any[]) => Markup | Markup[];
 /**
  * Displays content conditionally. When `condition` holds a truthy value, `thenContent` is displayed; when `condition` holds a falsy value, `elseContent` is displayed.
+ * @deprecated
  */
 export declare function cond(condition: MaybeReactive<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
+/**
+ * Displays `thenContent` when `condition` is truthy and `elseContent` when falsy.
+ */
+export declare function when(condition: MaybeReactive<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
+/**
+ * Inverted `when`. Displays `thenContent` when `condition` is falsy and `elseContent` when truthy.
+ */
+export declare function unless(condition: MaybeReactive<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.

package/dist/core/nodes/dynamic.d.ts

@@ -10,6 +10,8 @@ interface DynamicOptions {
 /**
  * Displays dynamic children without a parent element.
  * Renders a Reactive value via a render function.
+ *
+ * This is probably the most used element type aside from HTML.
  */
 export declare class Dynamic implements MarkupElement {
     [IS_MARKUP_ELEMENT]: boolean;

package/dist/core/nodes/fragment.d.ts

@@ -0,0 +1,19 @@
+import { type MarkupElement } from "../markup.js";
+import { type MaybeReactive } from "../signals.js";
+import { IS_MARKUP_ELEMENT } from "../symbols.js";
+/**
+ * Manages several MarkupElements as one.
+ */
+export declare class Fragment implements MarkupElement {
+    [IS_MARKUP_ELEMENT]: boolean;
+    domNode: Text;
+    isMounted: boolean;
+    private source;
+    private elements;
+    private unsubscribe?;
+    constructor(source: MaybeReactive<MarkupElement[]>);
+    mount(parent: Node, after?: Node | undefined): void;
+    unmount(parentIsUnmounting?: boolean): void;
+    private cleanup;
+    private update;
+}

package/dist/core/nodes/html.d.ts

@@ -1,11 +1,11 @@
 import { type ElementContext } from "../context.js";
-import { type Markup, type MarkupElement } from "../markup.js";
+import { type MarkupElement } from "../markup.js";
 import { IS_MARKUP_ELEMENT } from "../symbols.js";
 type HTMLOptions = {
     elementContext: ElementContext;
     tag: string;
     props: Record<string, any>;
-    children?: Markup[];
+    children?: any[];
 };
 export declare class HTML implements MarkupElement {
     [IS_MARKUP_ELEMENT]: boolean;

package/dist/core/nodes/outlet.d.ts

@@ -1,17 +1,18 @@
 import { type MarkupElement } from "../markup.js";
-import { type MaybeReactive } from "../signals.js";
+import { Reactive } from "../signals.js";
 import { IS_MARKUP_ELEMENT } from "../symbols.js";
+import { View } from "./view.js";
 /**
- * Manages several MarkupElements as one.
+ * Renders the subroute of the nearest view.
  */
 export declare class Outlet implements MarkupElement {
     [IS_MARKUP_ELEMENT]: boolean;
     domNode: Text;
     isMounted: boolean;
-    private source;
-    private elements;
+    private view;
+    private mountedView?;
     private unsubscribe?;
-    constructor(source: MaybeReactive<MarkupElement[]>);
+    constructor(view: Reactive<View<{}> | undefined>);
     mount(parent: Node, after?: Node | undefined): void;
     unmount(parentIsUnmounting?: boolean): void;
     private cleanup;

package/dist/core/nodes/view.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentContext, ElementContext, StoreConsumerContext, StoreProviderContext } from "../context.js";
 import type { Logger } from "../dolla.js";
 import { type Markup, type MarkupElement } from "../markup.js";
-import { type EffectCallback, type Reactive, type UnsubscribeFunction } from "../signals.js";
+import { type EffectCallback, type EffectOptions, type Reactive, type UnsubscribeFunction } from "../signals.js";
 import { IS_MARKUP_ELEMENT } from "../symbols.js";
 /**
  * Any valid value that a View can return.
@@ -12,10 +12,7 @@ export type ViewFunction<P> = (this: ViewContext, props: P, context: ViewContext
  * A view that has been constructed into DOM nodes.
  */
 export interface ViewElement extends MarkupElement {
-    /**
-     * Take a ViewFunction and render it as a child of this view.
-     */
-    setChildView(view: ViewFunction<{}>): ViewElement;
+    setRouteView(view: ViewFunction<{}>): ViewElement;
 }
 export interface ViewContext extends Omit<Logger, "setName">, ComponentContext, StoreProviderContext, StoreConsumerContext {
     /**
@@ -46,9 +43,9 @@ export interface ViewContext extends Omit<Logger, "setName">, ComponentContext,
      * Passes a getter function to `callback` that will track reactive states and return their current values.
      * Callback will be run each time a tracked state gets a new value.
      */
-    effect(callback: EffectCallback): UnsubscribeFunction;
+    effect(callback: EffectCallback, options?: EffectOptions): UnsubscribeFunction;
     /**
-     * Returns a Markup element that displays this view's children.
+     * Displays this view's subroutes if mounted as a router view.
      */
     outlet(): Markup;
 }
@@ -57,11 +54,11 @@ export declare class View<P> implements ViewElement {
     uniqueId: string;
     elementContext: ElementContext;
     logger: Logger;
-    props: P;
+    props: P & {
+        children: Markup[] | undefined;
+    };
     fn: ViewFunction<P>;
     element?: MarkupElement;
-    childMarkup: Markup[];
-    children: import("../signals.js").Atom<MarkupElement[]>;
     lifecycleListeners: {
         beforeMount: (() => any)[];
         mount: (() => any)[];
@@ -73,6 +70,6 @@ export declare class View<P> implements ViewElement {
     isMounted: boolean;
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
-    setChildView(fn: ViewFunction<{}>): View<{}>;
+    setRouteView(fn: ViewFunction<{}>): View<{}>;
     private _initialize;
 }

package/dist/core/signals.d.ts

@@ -49,7 +49,8 @@ export interface ReactiveOptions<T> {
 }
 export declare class Atom<T> implements Reactive<T> {
     #private;
-    readonly name?: string;
+    get name(): string;
+    get [Symbol.toStringTag](): string;
     constructor(value: T, options?: ReactiveOptions<T>);
     /**
      * Returns the latest value. The signal is tracked as a dependency if called within `effect` or `compose`.
@@ -187,6 +188,7 @@ export declare function untrack(fn: () => void): void;
  */
 export declare function getTracked(fn: (tracked: Reactive<unknown>[]) => void): void;
 export type EffectCallback = () => void;
+export type EffectOptions = {};
 /**
  * Creates a tracked scope that re-runs whenever the values of any tracked reactives changes.
  * Reactives are tracked by accessing their `value` within the body of the function.
@@ -194,5 +196,5 @@ export type EffectCallback = () => void;
  * NOTE: You must call the unsubscribe function to stop watching for changes.
  * If you are using an effect inside a View or Store, use `ctx.effect` instead, which cleans up automatically when the component unmounts.
  */
-export declare function effect(fn: EffectCallback): UnsubscribeFunction;
+export declare function effect(fn: EffectCallback, options?: EffectOptions): UnsubscribeFunction;
 export {};

package/dist/core/store.d.ts

@@ -1,6 +1,6 @@
-import type { StoreConsumerContext, ComponentContext, ElementContext } from "./context.js";
+import type { ComponentContext, ElementContext, StoreConsumerContext } from "./context.js";
 import type { Logger } from "./dolla.js";
-import { EffectCallback, UnsubscribeFunction } from "./signals.js";
+import { type EffectCallback, type EffectOptions, type UnsubscribeFunction } from "./signals.js";
 export type StoreFunction<Options, Value> = (this: StoreContext, options: Options, context: StoreContext) => Value;
 export type StoreFactory<Options, Value> = Options extends undefined ? () => Store<Options, Value> : (options: Options) => Store<Options, Value>;
 export interface StoreContext extends Omit<Logger, "setName">, ComponentContext, StoreConsumerContext {
@@ -20,7 +20,7 @@ export interface StoreContext extends Omit<Logger, "setName">, ComponentContext,
      * Passes a getter function to `callback` that will track reactive states and return their current values.
      * Callback will be run each time a tracked state gets a new value.
      */
-    effect(callback: EffectCallback): UnsubscribeFunction;
+    effect(callback: EffectCallback, options?: EffectOptions): UnsubscribeFunction;
 }
 export declare class Store<Options, Value> {
     readonly fn: StoreFunction<Options, Value>;

package/dist/core/views/default-crash-view.d.ts

@@ -15,4 +15,4 @@ export type CrashViewProps = {
      */
     uid?: string;
 };
-export declare function DefaultCrashView(props: CrashViewProps): import("../markup.js").Markup | import("../markup.js").Markup[];
+export declare function DefaultCrashView(props: CrashViewProps): import("../markup.js").Markup;

package/dist/core/views/for.d.ts

@@ -0,0 +1,9 @@
+import { ViewContext, ViewResult } from "../nodes/view";
+import { MaybeReactive, Reactive } from "../signals";
+interface ForProps<T> {
+    each: MaybeReactive<Iterable<T>>;
+    key: (item: T, index: number) => any;
+    children: (item: Reactive<T>, index: Reactive<number>, ctx: ViewContext) => ViewResult;
+}
+export declare function For<T = any>({ each, key, children }: ForProps<T>): import("../markup").Markup;
+export {};

package/dist/core/views/fragment.d.ts

@@ -0,0 +1,8 @@
+import type { Renderable } from "../../types.js";
+import { type ViewContext } from "../nodes/view.js";
+/**
+ * A utility view that displays its children.
+ */
+export declare function Fragment(props: {
+    children?: Renderable;
+}, ctx: ViewContext): import("../markup.js").Markup;

package/dist/core/views/passthrough.d.ts

@@ -1,5 +1,5 @@
 import { type ViewContext } from "../nodes/view.js";
 /**
- * A utility view that simply displays its children.
+ * A utility view that simply displays a route.
  */
 export declare function Passthrough(_: {}, ctx: ViewContext): import("../markup.js").Markup;

package/dist/fragment-CYt92o5I.js

@@ -0,0 +1,8 @@
+import { m, d as o } from "./markup-BJffA2Ls.js";
+function e(r, a) {
+  return m("$dynamic", { source: o(() => r.children) });
+}
+export {
+  e as F
+};
+//# sourceMappingURL=fragment-CYt92o5I.js.map

package/dist/fragment-CYt92o5I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragment-CYt92o5I.js","sources":["../src/core/views/fragment.ts"],"sourcesContent":["import type { Renderable } from \"../../types.js\";\nimport { markup } from \"../markup.js\";\nimport { type ViewContext } from \"../nodes/view.js\";\nimport { compose } from \"../signals.js\";\n\n/**\n * A utility view that displays its children.\n */\nexport function Fragment(props: { children?: Renderable }, ctx: ViewContext) {\n  return markup(\"$dynamic\", { source: compose(() => props.children) });\n}\n"],"names":["Fragment","props","ctx","markup","compose"],"mappings":";AAQgB,SAAAA,EAASC,GAAkCC,GAAkB;AACpE,SAAAC,EAAO,YAAY,EAAE,QAAQC,EAAQ,MAAMH,EAAM,QAAQ,GAAG;AACrE;"}

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-export { atom, compose, effect, get, set, peek, untrack, getTracked } from "./core/signals.js";
-export type { Reactive, MaybeReactive, Atom } from "./core/signals.js";
+export { atom, compose, effect, get, getTracked, peek, set, untrack } from "./core/signals.js";
+export type { Atom, MaybeReactive, Reactive } from "./core/signals.js";
 export { deepEqual, shallowEqual, strictEqual } from "./utils.js";
 export { ref, type Ref } from "./core/ref.js";
-export { type StoreFunction, type StoreContext } from "./core/store.js";
+export { type StoreContext, type StoreFunction } from "./core/store.js";
 export { createRouter, type Router, type RouterOptions } from "./router/index.js";
-export { cond, createMarkup, html, portal, list } from "./core/markup.js";
+export { cond, list, markup, portal, unless, when } from "./core/markup.js";
 export type { Markup, MarkupElement } from "./core/markup.js";
 import { Dolla } from "./core/dolla.js";
 declare const dolla: Dolla;
@@ -14,8 +14,8 @@ export declare const http: import("./http/index.js").HTTP;
 export declare const createLogger: (name: string, options?: import("./core/dolla.js").LoggerOptions) => import("./core/dolla.js").Logger;
 export type { Dolla, Environment, Logger, LoggerErrorContext, LoggerOptions, Loggles } from "./core/dolla.js";
 export type { ViewContext, ViewElement, ViewFunction } from "./core/nodes/view.js";
-export type { InputType, Renderable } from "./types.js";
 export type { CrashViewProps } from "./core/views/default-crash-view.js";
+export type { InputType, Renderable } from "./types.js";
 import type { IntrinsicElements as Elements } from "./types";
 declare global {
     namespace JSX {