smbls 3.6.3 → 3.6.6

package/README.md

@@ -197,4 +197,48 @@ See the [@symbo.ls/cli](../cli/) package for the full command reference.
 
 ## Documentation
 
+## Define System
+
+The define system (`context.define` and `element.define`) maps special keys to handler functions. When a key with a matching define handler appears on an element, `throughInitialDefine` calls the handler instead of treating the key as a child or prop.
+
+### Built-in define handlers (in `defaultDefine`)
+
+| Key | Purpose |
+|-----|---------|
+| `routes` | Route definitions — passed through as-is |
+| `metadata` | SEO metadata — resolves and applies `<title>` and `<meta>` tags via helmet |
+| `$router` | Router content — wraps params in a fragment and calls `el.set()` |
+
+### Collection define handlers (deprecated in v3)
+
+The following collection define handlers existed in v2 but are **deprecated in v3**:
+
+| Key (deprecated) | Data source | v3 replacement |
+|-------------------|-------------|----------------|
+| `$collection` | Direct data array/object | Use `children` + `childExtends` |
+| `$propsCollection` | `element.props` as data source | Use `children: ({ props }) => props.items` |
+| `$stateCollection` | `element.state` as data source | Use `children: ({ state }) => state.items` |
+| `$setCollection` | Uses `set()` to update content | Use `content` or `children` |
+
+Some older projects still use these handlers via project-level `context.define`. The framework's propertization layer (`@domql/utils/props.js`) is define-aware to avoid moving these keys into `props` when define handlers are present.
+
+> **Lesson learned:** The `$` prefix overlaps between css-in-props selectors and define handlers. The propertization in `props.js` checks for define handlers before applying `CSS_SELECTOR_PREFIXES` to prevent define keys from being swallowed into props. This matters for backwards compatibility with v2 projects that still use `$propsCollection` etc.
+
+## Emotion Integration (`prepare.js`)
+
+`prepareDesignSystem()` calls `initEmotion()` from `@symbo.ls/emotion/initEmotion.js` to initialize the CSS-in-JS engine. This import must be present for Emotion to work.
+
+```javascript
+import { initEmotion } from '@symbo.ls/emotion/initEmotion.js'
+
+export const prepareDesignSystem = (key, context) => {
+  const [scratchDesignSystem, emotion, registry] = initEmotion(key, context)
+  return [scratchDesignSystem, emotion, registry]
+}
+```
+
+> **Lesson learned:** If the `initEmotion` import is missing or broken, no CSS classes are generated and components render unstyled (Bazaar rendering issue).
+
+## Documentation
+
 For full documentation visit [symbols.app/developers](https://symbols.app/developers).

package/dist/cjs/package.json

@@ -1 +1 @@
-{"name":"smbls","version":"3.6.1"}
+{"name":"smbls","version":"3.6.5"}

package/dist/cjs/src/define.js

@@ -22,16 +22,7 @@ __export(define_exports, {
 });
 module.exports = __toCommonJS(define_exports);
 var import_helmet = require("@symbo.ls/helmet");
-var import_utils = require("@domql/utils");
-const processCollectionParam = (param, state) => {
-  if ((0, import_utils.isString)(param)) {
-    if (param === "state") return state.parse();
-    return (0, import_utils.getChildStateInKey)(param, state);
-  }
-  if ((0, import_utils.isState)(param)) return param.parse();
-  if ((0, import_utils.isNot)(param)("array", "object")) return null;
-  return (0, import_utils.deepClone)(param);
-};
+var import_fetch = require("@symbo.ls/fetch");
 const defaultDefine = {
   routes: (param) => param,
   metadata: (param, el, state) => {
@@ -41,6 +32,10 @@ const defaultDefine = {
     const resolved = (0, import_helmet.resolveMetadata)(param, el, state);
     (0, import_helmet.applyMetadata)(resolved, doc);
   },
+  fetch: (param, el, state, context) => {
+    if (!param) return;
+    (0, import_fetch.executeFetch)(param, el, state, context);
+  },
   $router: async (param, el) => {
     if (!param) return;
     const obj = { tag: "fragment", ...param };
@@ -51,120 +46,5 @@ const defaultDefine = {
       window.requestAnimationFrame(set);
     } else await set();
     return obj;
-  },
-  $collection: async (param, el, state) => {
-    const { __ref: ref } = el;
-    const {
-      children: childrenProps,
-      childrenAs,
-      childExtends
-    } = el.props || {};
-    const children = childrenProps && await (0, import_utils.exec)(childrenProps, el, state);
-    const childrenAsDefault = childrenAs || "props";
-    if (children) {
-      if ((0, import_utils.isObject)(children)) {
-        param = (0, import_utils.deepClone)(children);
-        param = Object.keys(param).map((v) => {
-          const val = param[v];
-          return (0, import_utils.isObjectLike)(val) ? { ...val, extends: v } : { extends: v, value: val };
-        });
-      } else if ((0, import_utils.isArray)(children)) {
-        param = (0, import_utils.deepClone)(children);
-        if (childrenAsDefault && childrenAsDefault !== "element") {
-          param = param.map((v) => ({
-            ...childExtends && { extends: childExtends },
-            [childrenAsDefault]: (0, import_utils.isObjectLike)(v) ? v : childrenAsDefault === "state" ? { value: v } : { text: v }
-          }));
-        }
-      } else if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
-        el.removeContent();
-        el.content = { text: param };
-        return;
-      }
-    }
-    if (!param) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    if (ref.__collectionCache) {
-      const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache);
-      if (equals) {
-        ref.__noCollectionDifference = true;
-        return;
-      }
-      ref.__collectionCache = (0, import_utils.deepClone)(param);
-      delete ref.__noCollectionDifference;
-    } else {
-      ref.__collectionCache = (0, import_utils.deepClone)(param);
-    }
-    const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
-    for (const key in param) {
-      const value = param[key];
-      if (value) obj[key] = (0, import_utils.isObjectLike)(value) ? value : { value };
-    }
-    el.removeContent();
-    el.content = obj;
-  },
-  $setCollection: async (param, el, state) => {
-    if (!param) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    const data = ((0, import_utils.isArray)(param) ? param : (0, import_utils.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils.isObjectLike)(item) ? { value: item } : item);
-    if (data.length) {
-      const t = setTimeout(() => {
-        el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
-        clearTimeout(t);
-      });
-    }
-    return data;
-  },
-  $stateCollection: async (param, el, state) => {
-    const { children, childrenAs } = el.props || {};
-    if (!param || children || childrenAs) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    const { __ref: ref } = el;
-    if (ref.__stateCollectionCache) {
-      const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache);
-      if (equals) {
-        ref.__noCollectionDifference = true;
-        return;
-      }
-      ref.__stateCollectionCache = (0, import_utils.deepClone)(param);
-      delete ref.__noCollectionDifference;
-    } else {
-      ref.__stateCollectionCache = (0, import_utils.deepClone)(param);
-    }
-    const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
-    for (const key in param) {
-      const value = param[key];
-      if (value) obj[key] = { state: (0, import_utils.isObjectLike)(value) ? value : { value } };
-    }
-    el.removeContent();
-    el.content = obj;
-  },
-  $propsCollection: async (param, el, state) => {
-    const { children, childrenAs } = el.props || {};
-    if (!param || children || childrenAs) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    const { __ref: ref } = el;
-    if (ref.__propsCollectionCache) {
-      const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache);
-      if (equals) {
-        ref.__noCollectionDifference = true;
-        return;
-      }
-      ref.__propsCollectionCache = (0, import_utils.deepClone)(param);
-      delete ref.__noCollectionDifference;
-    } else {
-      ref.__propsCollectionCache = (0, import_utils.deepClone)(param);
-    }
-    const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
-    for (const key in param) {
-      const value = param[key];
-      if (value) obj[key] = { props: (0, import_utils.isObjectLike)(value) ? value : { value } };
-    }
-    el.removeContent();
-    el.content = obj;
   }
 };

package/dist/cjs/src/fetchOnCreate.js

@@ -23,11 +23,74 @@ __export(fetchOnCreate_exports, {
 });
 module.exports = __toCommonJS(fetchOnCreate_exports);
 var import_utils = require("@domql/utils");
-var import_fetch = require("@symbo.ls/fetch");
+const IS_DEVELOPMENT = import_utils.window && import_utils.window.location ? import_utils.window.location.host.includes("dev.") : (0, import_utils.isDevelopment)();
+const SERVER_URL = IS_DEVELOPMENT ? "http://localhost:8080/get" : "https://api.symbols.app/get";
+const defaultOptions = {
+  endpoint: SERVER_URL
+};
+const fetchRemote = async (key, options = defaultOptions) => {
+  const baseUrl = options.endpoint || SERVER_URL;
+  const route = options.serviceRoute ? (0, import_utils.isArray)(options.serviceRoute) ? options.serviceRoute.map((v) => v.toLowerCase() + "=true").join("&") : options.serviceRoute : "";
+  let response;
+  try {
+    response = await globalThis.fetch(baseUrl + "/?" + route, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-AppKey": key,
+        "X-Metadata": options.metadata
+      }
+    });
+    return await response.json();
+  } catch (e) {
+    if ((0, import_utils.isFunction)(options.onError)) return options.onError(e);
+    else console.error(e);
+  }
+};
+const fetchProject = async (key, options) => {
+  const { editor } = options;
+  if (editor && editor.remote) {
+    const data = await fetchRemote(key, editor);
+    const evalData = IS_DEVELOPMENT || options.isDevelopment ? (0, import_utils.deepDestringifyFunctions)(data) : (0, import_utils.deepDestringifyFunctions)(data.releases[0]);
+    if (editor.serviceRoute) {
+      if ((0, import_utils.isArray)(editor.serviceRoute)) {
+        editor.serviceRoute.forEach((route) => {
+          (0, import_utils.overwriteDeep)(options[route], evalData[route.toLowerCase()]);
+        });
+      } else {
+        (0, import_utils.overwriteDeep)(options[editor.serviceRoute], evalData);
+      }
+    } else {
+      ;
+      [
+        "state",
+        "designSystem",
+        "components",
+        "snippets",
+        "pages",
+        "utils",
+        "files",
+        "packages",
+        "functions"
+      ].forEach((key2) => {
+        (0, import_utils.overwriteDeep)(options[key2], evalData[key2.toLowerCase()]);
+      });
+    }
+  }
+  return options;
+};
+const fetchProjectAsync = async (key, options, callback) => {
+  const { editor } = options;
+  if (editor && editor.remote) {
+    const data = await fetchRemote(key, editor);
+    const evalData = IS_DEVELOPMENT || options.isDevelopment ? (0, import_utils.deepDestringifyFunctions)(data) : (0, import_utils.deepDestringifyFunctions)(data.releases[0]);
+    callback(evalData);
+  }
+};
 const fetchSync = async (key, options) => {
   if (key && options.editor) {
     try {
-      if (!options.editor.async) await (0, import_fetch.fetchProject)(key, options);
+      if (!options.editor.async) await fetchProject(key, options);
     } catch (e) {
       console.error(e);
     }
@@ -37,7 +100,7 @@ const fetchAsync = (app, key, options, callback) => {
   if (key && options.editor) {
     try {
       if (options.editor.async) {
-        (0, import_fetch.fetchProjectAsync)(key, options, callback || ((data) => {
+        fetchProjectAsync(key, options, callback || ((data) => {
           const designSystem = data.designSystem;
           if ((0, import_utils.isObject)(designSystem)) {
             options.utils.init(designSystem);

package/dist/cjs/src/router.js

@@ -20,7 +20,8 @@ var router_exports = {};
 __export(router_exports, {
   initRouter: () => initRouter,
   injectRouterInLinkComponent: () => injectRouterInLinkComponent,
-  onpopstateRouter: () => onpopstateRouter
+  onpopstateRouter: () => onpopstateRouter,
+  resolveRouterElement: () => resolveRouterElement
 });
 module.exports = __toCommonJS(router_exports);
 var import_utils = require("@domql/utils");
@@ -31,6 +32,16 @@ const DEFAULT_ROUTING_OPTIONS = {
   injectRouterInLinkComponent: true,
   popState: true
 };
+const resolveRouterElement = (root, path) => {
+  if (!path) return root;
+  const parts = Array.isArray(path) ? path : path.split(".");
+  let el = root;
+  for (const part of parts) {
+    if (!el || !el[part]) return null;
+    el = el[part];
+  }
+  return el;
+};
 const initRouter = (element, context) => {
   if (context.router === false) return;
   else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
@@ -40,7 +51,15 @@ const initRouter = (element, context) => {
     if (!import_utils.window.location) return;
     const { pathname, search, hash } = import_utils.window.location;
     const url = pathname + search + hash;
-    if (el.routes) await (0, import_router.router)(url, el, {}, { initialRender: true });
+    let targetEl = el;
+    if (routerOptions.customRouterElement) {
+      const resolved = resolveRouterElement(el, routerOptions.customRouterElement);
+      if (resolved) {
+        targetEl = resolved;
+        if (el.routes) targetEl.routes = el.routes;
+      }
+    }
+    if (targetEl.routes) await (0, import_router.router)(url, targetEl, {}, { initialRender: true });
   };
   const hasRenderRouter = element.on && !(0, import_utils.isUndefined)(element.on.renderRouter) || !(0, import_utils.isUndefined)(element.onRenderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
@@ -65,10 +84,18 @@ const onpopstateRouter = (element, context) => {
   import_utils.window.onpopstate = async (e) => {
     const { pathname, search, hash } = import_utils.window.location;
     const url = pathname + search + hash;
-    await element.call(
+    let targetEl = element;
+    if (routerOptions.customRouterElement) {
+      const resolved = resolveRouterElement(element, routerOptions.customRouterElement);
+      if (resolved) {
+        targetEl = resolved;
+        if (element.routes) targetEl.routes = element.routes;
+      }
+    }
+    await targetEl.call(
       "router",
       url,
-      element,
+      targetEl,
       {},
       { pushState: false, scrollToTop: false, level: 0, event: e }
     );

package/dist/esm/package.json

@@ -1 +1 @@
-{"name":"smbls","version":"3.6.1"}
+{"name":"smbls","version":"3.6.5"}

package/dist/esm/src/define.js

@@ -1,25 +1,5 @@
 import { resolveMetadata, applyMetadata } from "@symbo.ls/helmet";
-import {
-  isString,
-  isNumber,
-  isNot,
-  isArray,
-  isObject,
-  isObjectLike,
-  isState,
-  exec,
-  deepClone,
-  getChildStateInKey
-} from "@domql/utils";
-const processCollectionParam = (param, state) => {
-  if (isString(param)) {
-    if (param === "state") return state.parse();
-    return getChildStateInKey(param, state);
-  }
-  if (isState(param)) return param.parse();
-  if (isNot(param)("array", "object")) return null;
-  return deepClone(param);
-};
+import { executeFetch } from "@symbo.ls/fetch";
 const defaultDefine = {
   routes: (param) => param,
   metadata: (param, el, state) => {
@@ -29,6 +9,10 @@ const defaultDefine = {
     const resolved = resolveMetadata(param, el, state);
     applyMetadata(resolved, doc);
   },
+  fetch: (param, el, state, context) => {
+    if (!param) return;
+    executeFetch(param, el, state, context);
+  },
   $router: async (param, el) => {
     if (!param) return;
     const obj = { tag: "fragment", ...param };
@@ -39,121 +23,6 @@ const defaultDefine = {
       window.requestAnimationFrame(set);
     } else await set();
     return obj;
-  },
-  $collection: async (param, el, state) => {
-    const { __ref: ref } = el;
-    const {
-      children: childrenProps,
-      childrenAs,
-      childExtends
-    } = el.props || {};
-    const children = childrenProps && await exec(childrenProps, el, state);
-    const childrenAsDefault = childrenAs || "props";
-    if (children) {
-      if (isObject(children)) {
-        param = deepClone(children);
-        param = Object.keys(param).map((v) => {
-          const val = param[v];
-          return isObjectLike(val) ? { ...val, extends: v } : { extends: v, value: val };
-        });
-      } else if (isArray(children)) {
-        param = deepClone(children);
-        if (childrenAsDefault && childrenAsDefault !== "element") {
-          param = param.map((v) => ({
-            ...childExtends && { extends: childExtends },
-            [childrenAsDefault]: isObjectLike(v) ? v : childrenAsDefault === "state" ? { value: v } : { text: v }
-          }));
-        }
-      } else if (isString(children) || isNumber(children)) {
-        el.removeContent();
-        el.content = { text: param };
-        return;
-      }
-    }
-    if (!param) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    if (ref.__collectionCache) {
-      const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache);
-      if (equals) {
-        ref.__noCollectionDifference = true;
-        return;
-      }
-      ref.__collectionCache = deepClone(param);
-      delete ref.__noCollectionDifference;
-    } else {
-      ref.__collectionCache = deepClone(param);
-    }
-    const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
-    for (const key in param) {
-      const value = param[key];
-      if (value) obj[key] = isObjectLike(value) ? value : { value };
-    }
-    el.removeContent();
-    el.content = obj;
-  },
-  $setCollection: async (param, el, state) => {
-    if (!param) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    const data = (isArray(param) ? param : isObject(param) ? Object.values(param) : []).map((item) => !isObjectLike(item) ? { value: item } : item);
-    if (data.length) {
-      const t = setTimeout(() => {
-        el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
-        clearTimeout(t);
-      });
-    }
-    return data;
-  },
-  $stateCollection: async (param, el, state) => {
-    const { children, childrenAs } = el.props || {};
-    if (!param || children || childrenAs) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    const { __ref: ref } = el;
-    if (ref.__stateCollectionCache) {
-      const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache);
-      if (equals) {
-        ref.__noCollectionDifference = true;
-        return;
-      }
-      ref.__stateCollectionCache = deepClone(param);
-      delete ref.__noCollectionDifference;
-    } else {
-      ref.__stateCollectionCache = deepClone(param);
-    }
-    const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
-    for (const key in param) {
-      const value = param[key];
-      if (value) obj[key] = { state: isObjectLike(value) ? value : { value } };
-    }
-    el.removeContent();
-    el.content = obj;
-  },
-  $propsCollection: async (param, el, state) => {
-    const { children, childrenAs } = el.props || {};
-    if (!param || children || childrenAs) return;
-    param = processCollectionParam(param, state);
-    if (!param) return;
-    const { __ref: ref } = el;
-    if (ref.__propsCollectionCache) {
-      const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache);
-      if (equals) {
-        ref.__noCollectionDifference = true;
-        return;
-      }
-      ref.__propsCollectionCache = deepClone(param);
-      delete ref.__noCollectionDifference;
-    } else {
-      ref.__propsCollectionCache = deepClone(param);
-    }
-    const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
-    for (const key in param) {
-      const value = param[key];
-      if (value) obj[key] = { props: isObjectLike(value) ? value : { value } };
-    }
-    el.removeContent();
-    el.content = obj;
   }
 };
 export {

package/dist/esm/src/fetchOnCreate.js

@@ -1,5 +1,68 @@
-import { isObject } from "@domql/utils";
-import { fetchProject, fetchProjectAsync } from "@symbo.ls/fetch";
+import { isArray, isFunction, isObject, window, isDevelopment, overwriteDeep, deepDestringifyFunctions } from "@domql/utils";
+const IS_DEVELOPMENT = window && window.location ? window.location.host.includes("dev.") : isDevelopment();
+const SERVER_URL = IS_DEVELOPMENT ? "http://localhost:8080/get" : "https://api.symbols.app/get";
+const defaultOptions = {
+  endpoint: SERVER_URL
+};
+const fetchRemote = async (key, options = defaultOptions) => {
+  const baseUrl = options.endpoint || SERVER_URL;
+  const route = options.serviceRoute ? isArray(options.serviceRoute) ? options.serviceRoute.map((v) => v.toLowerCase() + "=true").join("&") : options.serviceRoute : "";
+  let response;
+  try {
+    response = await globalThis.fetch(baseUrl + "/?" + route, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-AppKey": key,
+        "X-Metadata": options.metadata
+      }
+    });
+    return await response.json();
+  } catch (e) {
+    if (isFunction(options.onError)) return options.onError(e);
+    else console.error(e);
+  }
+};
+const fetchProject = async (key, options) => {
+  const { editor } = options;
+  if (editor && editor.remote) {
+    const data = await fetchRemote(key, editor);
+    const evalData = IS_DEVELOPMENT || options.isDevelopment ? deepDestringifyFunctions(data) : deepDestringifyFunctions(data.releases[0]);
+    if (editor.serviceRoute) {
+      if (isArray(editor.serviceRoute)) {
+        editor.serviceRoute.forEach((route) => {
+          overwriteDeep(options[route], evalData[route.toLowerCase()]);
+        });
+      } else {
+        overwriteDeep(options[editor.serviceRoute], evalData);
+      }
+    } else {
+      ;
+      [
+        "state",
+        "designSystem",
+        "components",
+        "snippets",
+        "pages",
+        "utils",
+        "files",
+        "packages",
+        "functions"
+      ].forEach((key2) => {
+        overwriteDeep(options[key2], evalData[key2.toLowerCase()]);
+      });
+    }
+  }
+  return options;
+};
+const fetchProjectAsync = async (key, options, callback) => {
+  const { editor } = options;
+  if (editor && editor.remote) {
+    const data = await fetchRemote(key, editor);
+    const evalData = IS_DEVELOPMENT || options.isDevelopment ? deepDestringifyFunctions(data) : deepDestringifyFunctions(data.releases[0]);
+    callback(evalData);
+  }
+};
 const fetchSync = async (key, options) => {
   if (key && options.editor) {
     try {

package/dist/esm/src/router.js

@@ -6,6 +6,16 @@ const DEFAULT_ROUTING_OPTIONS = {
   injectRouterInLinkComponent: true,
   popState: true
 };
+const resolveRouterElement = (root, path) => {
+  if (!path) return root;
+  const parts = Array.isArray(path) ? path : path.split(".");
+  let el = root;
+  for (const part of parts) {
+    if (!el || !el[part]) return null;
+    el = el[part];
+  }
+  return el;
+};
 const initRouter = (element, context) => {
   if (context.router === false) return;
   else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
@@ -15,7 +25,15 @@ const initRouter = (element, context) => {
     if (!window.location) return;
     const { pathname, search, hash } = window.location;
     const url = pathname + search + hash;
-    if (el.routes) await defaultRouter(url, el, {}, { initialRender: true });
+    let targetEl = el;
+    if (routerOptions.customRouterElement) {
+      const resolved = resolveRouterElement(el, routerOptions.customRouterElement);
+      if (resolved) {
+        targetEl = resolved;
+        if (el.routes) targetEl.routes = el.routes;
+      }
+    }
+    if (targetEl.routes) await defaultRouter(url, targetEl, {}, { initialRender: true });
   };
   const hasRenderRouter = element.on && !isUndefined(element.on.renderRouter) || !isUndefined(element.onRenderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
@@ -40,10 +58,18 @@ const onpopstateRouter = (element, context) => {
   window.onpopstate = async (e) => {
     const { pathname, search, hash } = window.location;
     const url = pathname + search + hash;
-    await element.call(
+    let targetEl = element;
+    if (routerOptions.customRouterElement) {
+      const resolved = resolveRouterElement(element, routerOptions.customRouterElement);
+      if (resolved) {
+        targetEl = resolved;
+        if (element.routes) targetEl.routes = element.routes;
+      }
+    }
+    await targetEl.call(
       "router",
       url,
-      element,
+      targetEl,
       {},
       { pushState: false, scrollToTop: false, level: 0, event: e }
     );
@@ -61,5 +87,6 @@ const injectRouterInLinkComponent = (context, routerOptions) => {
 export {
   initRouter,
   injectRouterInLinkComponent,
-  onpopstateRouter
+  onpopstateRouter,
+  resolveRouterElement
 };