@manyducks.co/dolla 0.71.0 → 0.73.0

package/lib/index.d.ts

@@ -3,7 +3,7 @@ export { $, $$, observe, unwrap, isReadable, isWritable, type Readable, type Wri
 export { m, cond, repeat, portal } from "./markup.js";
 export { Fragment } from "./views/fragment.js";
 export { StoreScope, type StoreScopeProps } from "./views/store-scope.js";
-export { RouterStore } from "./stores/router.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";

package/lib/index.js

@@ -708,11 +708,11 @@ var Conditional = class {
   get connected() {
     return this.node.parentNode != null;
   }
-  connect(parent, after) {
+  connect(parent2, after) {
     if (!this.connected) {
-      parent.insertBefore(this.node, after?.nextSibling ?? null);
+      parent2.insertBefore(this.node, after?.nextSibling ?? null);
       if (this.appContext.mode === "development") {
-        parent.insertBefore(this.endNode, this.node.nextSibling);
+        parent2.insertBefore(this.endNode, this.node.nextSibling);
       }
       this.stopCallback = observe(this.$predicate, (value) => {
         this.update(value);
@@ -816,9 +816,9 @@ var HTML = class {
     this.appContext = appContext;
     this.elementContext = elementContext;
   }
-  connect(parent, after) {
-    if (parent == null) {
-      throw new Error(`HTML element requires a parent element as the first argument to connect. Got: ${parent}`);
+  connect(parent2, after) {
+    if (parent2 == null) {
+      throw new Error(`HTML element requires a parent element as the first argument to connect. Got: ${parent2}`);
     }
     if (!this.connected) {
       for (const child of this.children) {
@@ -830,7 +830,7 @@ var HTML = class {
       if (this.props.class)
         this.applyClasses(this.node, this.props.class, this.stopCallbacks);
     }
-    parent.insertBefore(this.node, after?.nextSibling ?? null);
+    parent2.insertBefore(this.node, after?.nextSibling ?? null);
     setTimeout(() => {
       this.canClickAway = true;
     }, 0);
@@ -1237,9 +1237,9 @@ var Observer = class {
       }
     };
   }
-  connect(parent, after) {
+  connect(parent2, after) {
     if (!this.connected) {
-      parent.insertBefore(this.node, after?.nextSibling ?? null);
+      parent2.insertBefore(this.node, after?.nextSibling ?? null);
       this.observerControls.start();
     }
   }
@@ -1310,9 +1310,9 @@ var Outlet = class {
   get connected() {
     return this.node?.parentNode != null;
   }
-  connect(parent, after) {
+  connect(parent2, after) {
     if (!this.connected) {
-      parent.insertBefore(this.node, after?.nextSibling ?? null);
+      parent2.insertBefore(this.node, after?.nextSibling ?? null);
       this.stopCallback = observe(this.$children, (children) => {
         this.update(children);
       });
@@ -1335,12 +1335,12 @@ var Outlet = class {
     for (const child of this.connectedChildren) {
       child.disconnect();
     }
-    this.connectedChildren = newChildren;
-    for (let i = 0; i < this.connectedChildren.length; i++) {
-      const child = this.connectedChildren[i];
-      const previous = i > 0 ? this.connectedChildren[i] : void 0;
+    for (let i = 0; i < newChildren.length; i++) {
+      const child = newChildren[i];
+      const previous = i > 0 ? newChildren[i] : void 0;
       child.connect(this.node.parentElement, previous?.node);
     }
+    this.connectedChildren = newChildren;
     if (this.appContext.mode === "development") {
       this.node.textContent = `Outlet (${newChildren.length} ${newChildren.length === 1 ? "child" : "children"})`;
       this.node.parentElement?.insertBefore(
@@ -1350,6 +1350,7 @@ var Outlet = class {
     }
   }
   setChildren(children) {
+    throw new Error(`setChildren is not supported on Outlet`);
   }
 };
 
@@ -1367,7 +1368,7 @@ var Portal = class {
     this.config = config;
   }
   connect(_parent, _after) {
-    const { content, parent } = this.config;
+    const { content, parent: parent2 } = this.config;
     if (isDOMHandle(content)) {
       this.handle = content;
     } else if (isMarkup(content)) {
@@ -1375,7 +1376,7 @@ var Portal = class {
     } else {
       this.handle = getRenderHandle(renderMarkupToDOM(toMarkup(content), this.config));
     }
-    this.handle.connect(parent);
+    this.handle.connect(parent2);
   }
   disconnect() {
     if (this.handle?.connected) {
@@ -1531,7 +1532,7 @@ function initView(config) {
     get connected() {
       return isConnected;
     },
-    connect(parent, after) {
+    connect(parent2, after) {
       const wasConnected = isConnected;
       if (!wasConnected) {
         initialize();
@@ -1541,7 +1542,7 @@ function initView(config) {
         }
       }
       if (rendered) {
-        rendered.connect(parent, after);
+        rendered.connect(parent2, after);
       }
       if (!wasConnected) {
         isConnected = true;
@@ -1572,6 +1573,7 @@ function initView(config) {
       }
     },
     async setChildren(children) {
+      console.log("setChildren", { name: ctx.name, children });
       $$children.set(children);
     }
   };
@@ -1606,9 +1608,9 @@ var Repeat = class {
       this.endNode = document.createTextNode("");
     }
   }
-  connect(parent, after) {
+  connect(parent2, after) {
     if (!this.connected) {
-      parent.insertBefore(this.node, after?.nextSibling ?? null);
+      parent2.insertBefore(this.node, after?.nextSibling ?? null);
       this.stopCallback = observe(this.$items, (value) => {
         this._update(Array.from(value));
       });
@@ -1704,7 +1706,7 @@ var Text = class {
   constructor({ value }) {
     this.value = value;
   }
-  async connect(parent, after = null) {
+  async connect(parent2, after = null) {
     if (!this.connected) {
       if (isReadable(this.value)) {
         this.stopCallback = observe(this.value, (value) => {
@@ -1714,7 +1716,7 @@ var Text = class {
         this.update(this.value);
       }
     }
-    parent.insertBefore(this.node, after?.nextSibling ?? null);
+    parent2.insertBefore(this.node, after?.nextSibling ?? null);
   }
   async disconnect() {
     if (this.connected) {
@@ -1788,8 +1790,8 @@ function repeat(items, keyFn, renderFn) {
   const $items = $(items);
   return m("$repeat", { $items, keyFn, renderFn });
 }
-function portal(content, parent) {
-  return m("$portal", { content, parent });
+function portal(content, parent2) {
+  return m("$portal", { content, parent: parent2 });
 }
 var NodeHandle = class {
   node;
@@ -1799,8 +1801,8 @@ var NodeHandle = class {
   constructor(node) {
     this.node = node;
   }
-  async connect(parent, after) {
-    parent.insertBefore(this.node, after?.nextSibling ?? null);
+  async connect(parent2, after) {
+    parent2.insertBefore(this.node, after?.nextSibling ?? null);
   }
   async disconnect() {
     if (this.node.parentNode) {
@@ -1909,15 +1911,15 @@ function getRenderHandle(handles) {
     get connected() {
       return isConnected;
     },
-    async connect(parent, after) {
-      parent.insertBefore(node, after ? after : null);
+    connect(parent2, after) {
+      parent2.insertBefore(node, after ? after : null);
       for (const handle of handles) {
         const previous = handles[handles.length - 1]?.node ?? node;
-        await handle.connect(parent, previous);
+        handle.connect(parent2, previous);
       }
       isConnected = true;
     },
-    async disconnect() {
+    disconnect() {
       if (isConnected) {
         for (const handle of handles) {
           handle.disconnect();
@@ -1926,7 +1928,8 @@ function getRenderHandle(handles) {
       }
       isConnected = false;
     },
-    async setChildren() {
+    setChildren() {
+      throw new Error(`setChildren not supported on renderHandle`);
     }
   };
 }
@@ -3144,7 +3147,7 @@ function RouterStore(ctx) {
     history = createBrowserHistory();
   }
   let layerId = 0;
-  function prepareRoute(route, layers = []) {
+  function prepareRoute(route, parents = [], layers = []) {
     if (!(typeof route === "object" && !Array.isArray(route)) || !(typeof route.path === "string")) {
       throw new TypeError(`Route configs must be objects with a 'path' string property. Got: ${route}`);
     }
@@ -3155,7 +3158,11 @@ function RouterStore(ctx) {
     } else if (!route.view && !route.routes && !route.redirect) {
       throw new Error(`Route must have a 'view', a 'redirect', or a set of nested 'routes'.`);
     }
-    const parts = splitPath(route.path);
+    let parts = [];
+    for (const parent2 of parents) {
+      parts.push(...splitPath(parent2.path));
+    }
+    parts.push(...splitPath(route.path));
     if (parts[parts.length - 1] === "*") {
       parts.pop();
     }
@@ -3168,8 +3175,9 @@ function RouterStore(ctx) {
           redirect = "/" + redirect;
         }
       }
+      console.log({ parts, route, parents, layers });
       routes2.push({
-        pattern: route.path,
+        pattern: "/" + joinPath([...parts, ...splitPath(route.path)]),
         meta: {
           redirect
         }
@@ -3182,18 +3190,19 @@ function RouterStore(ctx) {
     } else if (route.view) {
       throw new TypeError(`Route '${route.path}' expected a view function or undefined. Got: ${route.view}`);
     }
+    const markup = m(view);
+    const layer = { id: layerId++, markup };
     if (route.routes) {
       for (const subroute of route.routes) {
-        routes2.push(...prepareRoute(subroute));
+        routes2.push(...prepareRoute(subroute, [...parents, route], [...layers, layer]));
       }
     } else {
-      const markup = m(view);
-      const layer = { id: layerId++, markup };
       routes2.push({
-        pattern: route.path,
+        pattern: parent ? joinPath([...parents.map((p) => p.path), route.path]) : route.path,
         meta: {
           pattern: route.path,
-          layers: [...layers, layer]
+          layers: [...layers, layer],
+          beforeMatch: route.beforeMatch
         }
       });
     }
@@ -3227,7 +3236,7 @@ function RouterStore(ctx) {
     }
   }
   ctx.onConnected(() => {
-    ctx.info(`Total routes: ${routes.length}`);
+    ctx.info("Routes registered:", routes);
   });
   const $$pattern = $$(null);
   const $$path = $$("");
@@ -3276,7 +3285,45 @@ function RouterStore(ctx) {
       });
       return;
     }
-    ctx.info(`Matched route: '${matched.pattern}'`);
+    if (matched.meta.beforeMatch) {
+      await matched.meta.beforeMatch({
+        getStore(store) {
+          let name;
+          if (typeof store === "string") {
+            name = store;
+          } else {
+            name = store.name;
+          }
+          if (typeof store !== "string") {
+            let ec = elementContext;
+            while (ec) {
+              if (ec.stores.has(store)) {
+                return ec.stores.get(store)?.instance.exports;
+              }
+              ec = ec.parent;
+            }
+          }
+          if (appContext.stores.has(store)) {
+            const _store = appContext.stores.get(store);
+            if (!_store.instance) {
+              appContext.crashCollector.crash({
+                componentName: ctx.name,
+                error: new Error(`Store '${name}' is not registered on this app.`)
+              });
+            }
+            return _store.instance.exports;
+          }
+          appContext.crashCollector.crash({
+            componentName: ctx.name,
+            error: new Error(`Store '${name}' is not registered on this app.`)
+          });
+        },
+        redirect: (path) => {
+          throw new Error(`Redirect not yet implemented.`);
+        }
+      });
+    }
+    ctx.info(`Matched route: '${matched.pattern}' ('${matched.path}')`);
     if (matched.meta.redirect != null) {
       if (typeof matched.meta.redirect === "string") {
         let path = matched.meta.redirect;
@@ -3300,22 +3347,21 @@ function RouterStore(ctx) {
           const matchedLayer = layers[i];
           const activeLayer = activeLayers[i];
           if (activeLayer?.id !== matchedLayer.id) {
-            ctx.info(`Replacing layer ${i} (active ID: ${activeLayer?.id}, matched ID: ${matchedLayer.id})`);
+            ctx.info(`Replacing layer @${i} (active ID: ${activeLayer?.id}, matched ID: ${matchedLayer.id})`);
             activeLayers = activeLayers.slice(0, i);
             const parentLayer = activeLayers[activeLayers.length - 1];
             const renderContext = { appContext, elementContext };
             const rendered = renderMarkupToDOM(matchedLayer.markup, renderContext);
             const handle = getRenderHandle(rendered);
-            render.update(() => {
-              if (activeLayer && activeLayer.handle.connected) {
-                activeLayer.handle.disconnect();
-              }
-              if (parentLayer) {
-                parentLayer.handle.setChildren(rendered);
-              } else {
-                appContext.rootView.setChildren(rendered);
-              }
-            }, "dolla-router-change");
+            if (activeLayer && activeLayer.handle.connected) {
+              activeLayer.handle.disconnect();
+            }
+            if (parentLayer) {
+              parentLayer.handle.setChildren(rendered);
+              ctx.log({ rendered, markup: matchedLayer.markup });
+            } else {
+              appContext.rootView.setChildren(rendered);
+            }
             activeLayers.push({ id: matchedLayer.id, handle });
           }
         }