@domql/router 3.6.4 → 3.6.6

package/README.md

@@ -115,6 +115,44 @@ router('/unknown', element, {}, {
 
 You can also define a `/*` wildcard route as a catch-all fallback.
 
+## Custom Router Element
+
+Use `customRouterElement` in your `config.js` to route pages into a specific element within the component tree instead of the root. This is useful for persistent layouts where only the content area changes between routes.
+
+```js
+// symbols/config.js
+export default {
+  router: {
+    customRouterElement: 'Folder.Content'
+  }
+}
+```
+
+The value is a dot-separated path resolved from the root element. For example, `'Folder.Content'` means the router will find `root.Folder.Content` and render page content inside it.
+
+This allows you to define a layout once in the `/` (main) page and have sub-pages render inside a specific container:
+
+```js
+// pages/main.js — defines the persistent layout
+export const main = {
+  extends: 'Layout',
+  Folder: {
+    Content: {
+      // default content for '/' route
+    }
+  }
+}
+
+// pages/team.js — only defines content (rendered inside Folder.Content)
+export const team = {
+  state: 'team',
+  extends: 'Grid',
+  childExtends: 'TeamItem',
+  childrenAs: 'state',
+  children: (el, s) => s.data,
+}
+```
+
 ## Options
 
 | Option | Type | Default | Description |

package/dist/cjs/index.js

@@ -218,8 +218,20 @@ const router = (path, el, state = {}, options = {}) => {
     if (contentElementKey && opts.removeOldElement) {
       element[contentElementKey].remove();
     }
+    const originContent = element.__ref?.origin?.content;
+    const contentStyles = {};
+    if (originContent) {
+      for (const k in originContent) {
+        const v = originContent[k];
+        if (k === "__ref" || k === "props" || k === "node" || k === "parent" || k === "key") continue;
+        if (typeof v === "string" || typeof v === "number" || typeof v === "boolean" || typeof v === "object" && v !== null && !v.node && !v.__ref) {
+          contentStyles[k] = v;
+        }
+      }
+    }
     element.set(
       {
+        ...contentStyles,
         tag: opts.useFragment && "fragment",
         extends: content
       },

package/dist/esm/index.js

@@ -187,8 +187,20 @@ const router = (path, el, state = {}, options = {}) => {
     if (contentElementKey && opts.removeOldElement) {
       element[contentElementKey].remove();
     }
+    const originContent = element.__ref?.origin?.content;
+    const contentStyles = {};
+    if (originContent) {
+      for (const k in originContent) {
+        const v = originContent[k];
+        if (k === "__ref" || k === "props" || k === "node" || k === "parent" || k === "key") continue;
+        if (typeof v === "string" || typeof v === "number" || typeof v === "boolean" || typeof v === "object" && v !== null && !v.node && !v.__ref) {
+          contentStyles[k] = v;
+        }
+      }
+    }
     element.set(
       {
+        ...contentStyles,
         tag: opts.useFragment && "fragment",
         extends: content
       },

package/dist/iife/index.js

@@ -4,6 +4,9 @@ var DomqlRouter = (() => {
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __esm = (fn, res) => function __init() {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  };
   var __export = (target, all) => {
     for (var name in all)
       __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,6 +21,312 @@ var DomqlRouter = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+  // ../../packages/utils/dist/esm/globals.js
+  var window2, document2;
+  var init_globals = __esm({
+    "../../packages/utils/dist/esm/globals.js"() {
+      window2 = globalThis;
+      document2 = window2.document;
+    }
+  });
+
+  // ../../packages/utils/dist/esm/node.js
+  var init_node = __esm({
+    "../../packages/utils/dist/esm/node.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/types.js
+  var isFunction;
+  var init_types = __esm({
+    "../../packages/utils/dist/esm/types.js"() {
+      isFunction = (arg) => typeof arg === "function";
+    }
+  });
+
+  // ../../packages/utils/dist/esm/array.js
+  var init_array = __esm({
+    "../../packages/utils/dist/esm/array.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/string.js
+  var init_string = __esm({
+    "../../packages/utils/dist/esm/string.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/keys.js
+  var STATE_METHODS, PROPS_METHODS, METHODS, METHODS_EXL;
+  var init_keys = __esm({
+    "../../packages/utils/dist/esm/keys.js"() {
+      STATE_METHODS = /* @__PURE__ */ new Set([
+        "update",
+        "parse",
+        "clean",
+        "create",
+        "destroy",
+        "add",
+        "toggle",
+        "remove",
+        "apply",
+        "set",
+        "reset",
+        "replace",
+        "quietReplace",
+        "quietUpdate",
+        "applyReplace",
+        "applyFunction",
+        "keys",
+        "values",
+        "ref",
+        "rootUpdate",
+        "parentUpdate",
+        "parent",
+        "__element",
+        "__depends",
+        "__ref",
+        "__children",
+        "root",
+        "setByPath",
+        "setPathCollection",
+        "removeByPath",
+        "removePathCollection",
+        "getByPath"
+      ]);
+      PROPS_METHODS = /* @__PURE__ */ new Set(["update", "__element"]);
+      METHODS = /* @__PURE__ */ new Set([
+        "set",
+        "reset",
+        "update",
+        "remove",
+        "updateContent",
+        "removeContent",
+        "lookup",
+        "lookdown",
+        "lookdownAll",
+        "getRef",
+        "getPath",
+        "setNodeStyles",
+        "spotByPath",
+        "keys",
+        "parse",
+        "setProps",
+        "parseDeep",
+        "variables",
+        "if",
+        "log",
+        "verbose",
+        "warn",
+        "error",
+        "call",
+        "nextElement",
+        "previousElement",
+        "getRootState",
+        "getRoot",
+        "getRootData",
+        "getRootContext",
+        "getContext",
+        "getQuery",
+        "getDB",
+        "getChildren"
+      ]);
+      METHODS_EXL = /* @__PURE__ */ new Set([
+        "node",
+        "context",
+        "extends",
+        "__element",
+        "__ref",
+        ...METHODS,
+        ...STATE_METHODS,
+        ...PROPS_METHODS
+      ]);
+    }
+  });
+
+  // ../../packages/utils/dist/esm/object.js
+  var init_object = __esm({
+    "../../packages/utils/dist/esm/object.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/key.js
+  var init_key = __esm({
+    "../../packages/utils/dist/esm/key.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/env.js
+  var init_env = __esm({
+    "../../packages/utils/dist/esm/env.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/function.js
+  var init_function = __esm({
+    "../../packages/utils/dist/esm/function.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/if.js
+  var init_if = __esm({
+    "../../packages/utils/dist/esm/if.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/log.js
+  var init_log = __esm({
+    "../../packages/utils/dist/esm/log.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/cookie.js
+  var isMobile;
+  var init_cookie = __esm({
+    "../../packages/utils/dist/esm/cookie.js"() {
+      isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
+    }
+  });
+
+  // ../../packages/utils/dist/esm/tags.js
+  var init_tags = __esm({
+    "../../packages/utils/dist/esm/tags.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/extends.js
+  var init_extends = __esm({
+    "../../packages/utils/dist/esm/extends.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/component.js
+  var init_component = __esm({
+    "../../packages/utils/dist/esm/component.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/props.js
+  var init_props = __esm({
+    "../../packages/utils/dist/esm/props.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/element.js
+  var init_element = __esm({
+    "../../packages/utils/dist/esm/element.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/state.js
+  var init_state = __esm({
+    "../../packages/utils/dist/esm/state.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/scope.js
+  var init_scope = __esm({
+    "../../packages/utils/dist/esm/scope.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/triggerEvent.js
+  var getOnOrPropsEvent, applyEvent, triggerEventOn;
+  var init_triggerEvent = __esm({
+    "../../packages/utils/dist/esm/triggerEvent.js"() {
+      init_types();
+      getOnOrPropsEvent = (param, element) => {
+        const onEvent = element.on?.[param];
+        if (onEvent) return onEvent;
+        const props = element.props;
+        if (!props) return;
+        const propKey = "on" + param.charAt(0).toUpperCase() + param.slice(1);
+        return props[propKey];
+      };
+      applyEvent = (param, element, state, context, options) => {
+        if (!isFunction(param)) return;
+        try {
+          const result = param.call(
+            element,
+            element,
+            state || element.state,
+            context || element.context,
+            options
+          );
+          if (result && typeof result.then === "function") {
+            result.catch((err) => {
+              element.error = err;
+              console.error("[DomQL] Async event error:", err);
+            });
+          }
+          return result;
+        } catch (err) {
+          element.error = err;
+          console.error("[DomQL] Event handler error:", err);
+          if (element.context?.strictMode) throw err;
+        }
+      };
+      triggerEventOn = (param, element, options) => {
+        if (!element) {
+          throw new Error("Element is required");
+        }
+        const appliedFunction = getOnOrPropsEvent(param, element);
+        if (appliedFunction) {
+          const { state, context } = element;
+          return applyEvent(appliedFunction, element, state, context, options);
+        }
+      };
+    }
+  });
+
+  // ../../packages/utils/dist/esm/cache.js
+  var init_cache = __esm({
+    "../../packages/utils/dist/esm/cache.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/methods.js
+  var init_methods = __esm({
+    "../../packages/utils/dist/esm/methods.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/update.js
+  var init_update = __esm({
+    "../../packages/utils/dist/esm/update.js"() {
+    }
+  });
+
+  // ../../packages/utils/dist/esm/index.js
+  var init_esm = __esm({
+    "../../packages/utils/dist/esm/index.js"() {
+      init_key();
+      init_env();
+      init_types();
+      init_object();
+      init_function();
+      init_array();
+      init_node();
+      init_if();
+      init_log();
+      init_string();
+      init_globals();
+      init_cookie();
+      init_tags();
+      init_component();
+      init_props();
+      init_extends();
+      init_element();
+      init_state();
+      init_keys();
+      init_scope();
+      init_methods();
+      init_cache();
+      init_update();
+      init_triggerEvent();
+    }
+  });
+
   // index.js
   var index_exports = {};
   __export(index_exports, {
@@ -31,56 +340,7 @@ var DomqlRouter = (() => {
     router: () => router,
     runGuards: () => runGuards
   });
-
-  // ../../packages/utils/dist/esm/globals.js
-  var window2 = globalThis;
-  var document = window2.document;
-
-  // ../../packages/utils/dist/esm/types.js
-  var isFunction = (arg) => typeof arg === "function";
-
-  // ../../packages/utils/dist/esm/triggerEvent.js
-  var getOnOrPropsEvent = (param, element) => {
-    const onEvent = element.on?.[param];
-    if (onEvent) return onEvent;
-    const props = element.props;
-    if (!props) return;
-    const propKey = "on" + param.charAt(0).toUpperCase() + param.slice(1);
-    return props[propKey];
-  };
-  var applyEvent = (param, element, state, context, options) => {
-    if (!isFunction(param)) return;
-    try {
-      const result = param.call(
-        element,
-        element,
-        state || element.state,
-        context || element.context,
-        options
-      );
-      if (result && typeof result.then === "function") {
-        result.catch((err) => {
-          element.error = err;
-          console.error("[DomQL] Async event error:", err);
-        });
-      }
-      return result;
-    } catch (err) {
-      element.error = err;
-      console.error("[DomQL] Event handler error:", err);
-      if (element.context?.strictMode) throw err;
-    }
-  };
-  var triggerEventOn = (param, element, options) => {
-    if (!element) {
-      throw new Error("Element is required");
-    }
-    const appliedFunction = getOnOrPropsEvent(param, element);
-    if (appliedFunction) {
-      const { state, context } = element;
-      return applyEvent(appliedFunction, element, state, context, options);
-    }
-  };
+  init_esm();
 
   // ../../packages/element/dist/esm/set.js
   var setContentKey = (element, opts = {}) => {
@@ -206,7 +466,7 @@ var DomqlRouter = (() => {
     initialRender: false,
     scrollToTop: true,
     scrollToNode: false,
-    scrollNode: document && document.documentElement,
+    scrollNode: document2 && document2.documentElement,
     scrollBody: false,
     useFragment: false,
     updateState: true,
@@ -218,7 +478,7 @@ var DomqlRouter = (() => {
   var router = (path, el, state = {}, options = {}) => {
     const element = el || void 0;
     const win = element.context.window || window2;
-    const doc = element.context.document || document;
+    const doc = element.context.document || document2;
     const opts = {
       ...defaultOptions,
       ...element.context.routerOptions,
@@ -280,8 +540,20 @@ var DomqlRouter = (() => {
       if (contentElementKey && opts.removeOldElement) {
         element[contentElementKey].remove();
       }
+      const originContent = element.__ref?.origin?.content;
+      const contentStyles = {};
+      if (originContent) {
+        for (const k in originContent) {
+          const v = originContent[k];
+          if (k === "__ref" || k === "props" || k === "node" || k === "parent" || k === "key") continue;
+          if (typeof v === "string" || typeof v === "number" || typeof v === "boolean" || typeof v === "object" && v !== null && !v.node && !v.__ref) {
+            contentStyles[k] = v;
+          }
+        }
+      }
       element.set(
         {
+          ...contentStyles,
           tag: opts.useFragment && "fragment",
           extends: content
         },
@@ -318,3 +590,4 @@ var DomqlRouter = (() => {
   var index_default = router;
   return __toCommonJS(index_exports);
 })();
+// @preserve-env

package/index.js

@@ -245,8 +245,23 @@ export const router = (path, el, state = {}, options = {}) => {
       element[contentElementKey].remove()
     }
 
+    // Merge parent's original content definition (styles like overflow, maxHeight)
+    // with the route's content component
+    const originContent = element.__ref?.origin?.content
+    const contentStyles = {}
+    if (originContent) {
+      for (const k in originContent) {
+        const v = originContent[k]
+        if (k === '__ref' || k === 'props' || k === 'node' || k === 'parent' || k === 'key') continue
+        if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' || (typeof v === 'object' && v !== null && !v.node && !v.__ref)) {
+          contentStyles[k] = v
+        }
+      }
+    }
+
     element.set(
       {
+        ...contentStyles,
         tag: opts.useFragment && 'fragment',
         extends: content
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/router",
-  "version": "3.6.4",
+  "version": "3.6.6",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -27,8 +27,8 @@
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/element": "^3.6.4",
-    "@domql/utils": "^3.6.4"
+    "@domql/element": "^3.6.6",
+    "@domql/utils": "^3.6.6"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {