@domql/router 3.6.4 → 3.6.7

package/LICENSE

@@ -1,21 +1,34 @@
-MIT License
+Creative Commons Attribution-NonCommercial 4.0 International License
 
 Copyright (c) 2023 symbo.ls
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+This work is licensed under the Creative Commons Attribution-NonCommercial
+4.0 International License. To view a copy of this license, visit
+https://creativecommons.org/licenses/by-nc/4.0/ or send a letter to
+Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+You are free to:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  Share — copy and redistribute the material in any medium or format
+  Adapt — remix, transform, and build upon the material
+
+Under the following terms:
+
+  Attribution — You must give appropriate credit, provide a link to the
+  license, and indicate if changes were made. You may do so in any
+  reasonable manner, but not in any way that suggests the licensor endorses
+  you or your use.
+
+  NonCommercial — You may not use the material for commercial purposes.
+
+  No additional restrictions — You may not apply legal terms or
+  technological measures that legally restrict others from doing anything
+  the license permits.
+
+THE WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE WORK OR THE USE OR OTHER DEALINGS IN THE
+WORK.

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,7 +1,7 @@
 {
   "name": "@domql/router",
-  "version": "3.6.4",
-  "license": "MIT",
+  "version": "3.6.7",
+  "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
   "unpkg": "./dist/iife/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.7",
+    "@domql/utils": "^3.6.7"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {