@manyducks.co/dolla 0.72.0 → 0.74.0

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);
@@ -738,6 +738,9 @@ var Conditional = class {
       handle.disconnect();
     }
     this.connectedContent = [];
+    if (this.node.parentNode == null) {
+      return;
+    }
     if (value && this.thenContent) {
       this.connectedContent = renderMarkupToDOM(this.thenContent, this);
     } else if (!value && this.elseContent) {
@@ -816,9 +819,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 +833,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 +1240,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 +1313,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 +1338,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 +1353,7 @@ var Outlet = class {
     }
   }
   setChildren(children) {
+    throw new Error(`setChildren is not supported on Outlet`);
   }
 };
 
@@ -1367,7 +1371,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 +1379,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 +1535,7 @@ function initView(config) {
     get connected() {
       return isConnected;
     },
-    connect(parent, after) {
+    connect(parent2, after) {
       const wasConnected = isConnected;
       if (!wasConnected) {
         initialize();
@@ -1541,7 +1545,7 @@ function initView(config) {
         }
       }
       if (rendered) {
-        rendered.connect(parent, after);
+        rendered.connect(parent2, after);
       }
       if (!wasConnected) {
         isConnected = true;
@@ -1572,6 +1576,7 @@ function initView(config) {
       }
     },
     async setChildren(children) {
+      console.log("setChildren", { name: ctx.name, children });
       $$children.set(children);
     }
   };
@@ -1606,9 +1611,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 +1709,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 +1719,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 +1793,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 +1804,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 +1914,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 +1931,8 @@ function getRenderHandle(handles) {
       }
       isConnected = false;
     },
-    async setChildren() {
+    setChildren() {
+      throw new Error(`setChildren not supported on renderHandle`);
     }
   };
 }
@@ -3144,7 +3150,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 +3161,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();
     }
@@ -3169,7 +3179,7 @@ function RouterStore(ctx) {
         }
       }
       routes2.push({
-        pattern: route.path,
+        pattern: "/" + joinPath([...parts, ...splitPath(route.path)]),
         meta: {
           redirect
         }
@@ -3182,15 +3192,15 @@ 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],
@@ -3228,7 +3238,7 @@ function RouterStore(ctx) {
     }
   }
   ctx.onConnected(() => {
-    ctx.info(`Total routes: ${routes.length}`);
+    ctx.info("Routes registered:", routes);
   });
   const $$pattern = $$(null);
   const $$path = $$("");
@@ -3252,8 +3262,10 @@ function RouterStore(ctx) {
   ctx.onConnected(() => {
     history.listen(onRouteChange);
     onRouteChange(history);
+    ctx.info("Intercepting <a> clicks within root element:", appContext.rootElement);
     catchLinks(appContext.rootElement, (anchor) => {
       let href = anchor.getAttribute("href");
+      ctx.info("Intercepted link click", anchor, href);
       if (!/^https?:\/\/|^\//.test(href)) {
         href = joinPath([history.location.pathname, href]);
       }
@@ -3315,7 +3327,7 @@ function RouterStore(ctx) {
         }
       });
     }
-    ctx.info(`Matched route: '${matched.pattern}'`);
+    ctx.info(`Matched route: '${matched.pattern}' ('${matched.path}')`);
     if (matched.meta.redirect != null) {
       if (typeof matched.meta.redirect === "string") {
         let path = matched.meta.redirect;
@@ -3339,22 +3351,20 @@ 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);
+            } else {
+              appContext.rootView.setChildren(rendered);
+            }
             activeLayers.push({ id: matchedLayer.id, handle });
           }
         }