@manyducks.co/dolla 2.0.0-alpha.23 → 2.0.0-alpha.24

package/README.md

@@ -20,8 +20,8 @@ Let's first get into some examples.
 
 ### Basic State API
 
-```jsx
-import { createState, toState, valueOf, derive, createWatcher } from "@manyducks.co/dolla";
+```js
+import { createState, derive } from "@manyducks.co/dolla";
 
 const [$count, setCount] = createState(72);
 
@@ -35,26 +35,24 @@ $count.get(); // 300
 // You can also pass a function that takes the current value and returns a new one
 setCount((current) => current + 1);
 $count.get(); // 301
+```
 
-// Derive a new state from one or more other states. Whenever $count changes, $doubled will follow.
+Now that you have a state you can derive more states from that one. Derived states automatically stay in sync with the values of their dependencies.
+
+```js
+// Pass and array of one or more states followed by a function that computes a new value.
 const $doubled = derive([$count], (count) => count * 2);
-const $sum = derive([$count, $doubled], (count, doubled) => count + doubled);
 
-// Returns the value of a state. If the value is not a state it is returned as is.
-const count = valueOf($count);
-const bool = valueOf(true);
+$doubled.get(); // 602
 
-// Creates a state from a value. If the value is already a state it is returned as is.
-const $bool = toState(true);
-const $anotherCount = toState($count);
+setCount(500);
 
-const watcher = createWatcher();
+$doubled.get(); // 1000
+```
+
+### In Views
 
-// Watch for changes to the value
-const stop = watcher.watch([$count], (value) => [
-// This function is called immediately with the current value, then again each time the value changes.
-]);
-stop(); // Stop watching for changes
+```jsx
 
 ```
 
@@ -105,12 +103,12 @@ $doubled(); // 100
 $value(); // 50
 ```
 
-## Views [id="section-views"]
+<h2 id="section-views">Views</h2>
 
 A basic view:
 
 ```js
-import Dolla, { createState, html } from "@manyducks.co/dolla";
+import Dolla, { createState } from "@manyducks.co/dolla";
 
 function Counter(props, ctx) {
   const [$count, setCount] = createState(0);
@@ -119,12 +117,24 @@ function Counter(props, ctx) {
     setCount((count) => count + 1);
   }
 
-  return html`
+  function decrement() {
+    setCount((count) => count - 1);
+  }
+
+  function reset() {
+    setCount(0);
+  }
+
+  return (
     <div>
-      <p>Clicks: ${$count}</p>
-      <button onclick=${increment}>+1</button>
+      <p>Clicks: {$count}</p>
+      <div>
+        <button onClick={decrement}>-1</button>
+        <button onClick={reset}>0</button>
+        <button onClick={increment}>-1</button>
+      </div>
     </div>
-  `;
+  );
 }
 
 Dolla.mount(document.body, Counter);

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

@@ -15,6 +15,7 @@ export declare class HTML implements MarkupElement {
     stopCallbacks: StopFunction[];
     elementContext: ElementContext;
     uniqueId: string;
+    _batchWrite: (callback: () => void, key?: string) => void;
     ref?: Ref<any>;
     canClickAway: boolean;
     get isMounted(): boolean;
@@ -22,6 +23,7 @@ export declare class HTML implements MarkupElement {
     mount(parent: Node, after?: Node): void;
     unmount(parentIsUnmounting?: boolean): void;
     getUpdateKey(type: string, value: string | number): string;
+    _mutate(callback: () => any, updateKey?: string): void;
     attachProp<T>(value: State<T> | T, callback: (value: T) => void, updateKey: string): void;
     applyProps(element: HTMLElement | SVGElement, props: Record<string, unknown>): void;
     applyStyles(element: HTMLElement | SVGElement, styles: unknown, stopCallbacks: StopFunction[]): () => void;

package/dist/index.js

@@ -13,8 +13,8 @@ var Y = (o, e, t, r) => ({
     return a(o, e, r);
   }
 });
-import { h as Ie, c as it, i as ke, a as Ve, d as F, b as k, e as ot, f as te, t as We, g as Qe, j as lt, s as _e, k as Ge, P as Je, l as Be, m as ze, n as ct, o as ht, p as ut, v as ft, q as dt, r as mt, u as He, w as gt, x as be, y as $e, V as pt, z as wt, A as yt } from "./passthrough-C9975ULD.js";
-import { B as Ht, D as Kt, E as Qt, C as Jt } from "./passthrough-C9975ULD.js";
+import { h as Ie, c as it, i as ke, a as Ve, d as F, b as k, e as ot, f as te, t as We, g as Qe, j as lt, s as _e, k as Ge, P as Je, l as Be, m as ze, n as ct, o as ht, p as ut, v as ft, q as dt, r as mt, u as He, w as gt, x as be, y as $e, V as pt, z as wt, A as yt } from "./passthrough-BeKX_qRr.js";
+import { B as Ht, D as Kt, E as Qt, C as Jt } from "./passthrough-BeKX_qRr.js";
 function bt(o) {
   return Ie`
     <div
@@ -754,12 +754,12 @@ class Nt {
       };
       window.addEventListener("popstate", t), a(this, G).push(() => window.removeEventListener("popstate", t));
       const r = e.getRootElement();
-      return a(this, G).push(
+      a(this, G).push(
         Tt(r, (n) => {
           let s = n.getAttribute("href");
           a(this, x).info("intercepted click on <a> tag", n), /^https?:\/\/|^\//.test(s) || (s = H([window.location.pathname, s])), d(this, w, je).call(this, s);
         })
-      ), a(this, x).info("will intercept clicks on <a> tags within root element", r), d(this, w, Z).call(this);
+      ), a(this, x).info("will intercept clicks on <a> tags within root element", r), await d(this, w, Z).call(this);
     }), e.onUnmount(() => {
       for (const t of a(this, G))
         t();
@@ -829,6 +829,7 @@ W = new WeakMap(), x = new WeakMap(), xe = new WeakMap(), D = new WeakMap(), X =
     a(this, he).call(this, n), n.pattern !== i && d(this, w, st).call(this, n);
   } else
     t.crash(new Ct(`Failed to match route '${r.pathname}'`));
+  return { match: n, journey: s };
 }, Ce = async function(e, t = []) {
   const r = et(a(this, X), e.pathname);
   if (!r)