smbls 3.6.4 → 3.6.6

package/dist/cjs/package.json

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

package/dist/cjs/src/define.js

@@ -22,6 +22,7 @@ __export(define_exports, {
 });
 module.exports = __toCommonJS(define_exports);
 var import_helmet = require("@symbo.ls/helmet");
+var import_fetch = require("@symbo.ls/fetch");
 const defaultDefine = {
   routes: (param) => param,
   metadata: (param, el, state) => {
@@ -31,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 };

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.3"}
+{"name":"smbls","version":"3.6.5"}

package/dist/esm/src/define.js

@@ -1,4 +1,5 @@
 import { resolveMetadata, applyMetadata } from "@symbo.ls/helmet";
+import { executeFetch } from "@symbo.ls/fetch";
 const defaultDefine = {
   routes: (param) => param,
   metadata: (param, el, state) => {
@@ -8,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 };

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
 };

package/dist/iife/index.js

@@ -409,6 +409,16 @@ var Smbls = (() => {
     injectRouterInLinkComponent: true,
     popState: true
   };
+  var 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;
+  };
   var initRouter = (element, context) => {
     if (context.router === false) return;
     else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
@@ -418,7 +428,15 @@ var Smbls = (() => {
       if (!import_utils3.window.location) return;
       const { pathname, search, hash } = import_utils3.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_utils3.isUndefined)(element.on.renderRouter) || !(0, import_utils3.isUndefined)(element.onRenderRouter);
     if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
@@ -443,10 +461,18 @@ var Smbls = (() => {
     import_utils3.window.onpopstate = async (e) => {
       const { pathname, search, hash } = import_utils3.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 }
       );
@@ -464,11 +490,74 @@ var Smbls = (() => {
 
   // dist/esm/src/fetchOnCreate.js
   var import_utils4 = __require("@domql/utils");
-  var import_fetch = __require("@symbo.ls/fetch");
+  var IS_DEVELOPMENT = import_utils4.window && import_utils4.window.location ? import_utils4.window.location.host.includes("dev.") : (0, import_utils4.isDevelopment)();
+  var SERVER_URL = IS_DEVELOPMENT ? "http://localhost:8080/get" : "https://api.symbols.app/get";
+  var defaultOptions = {
+    endpoint: SERVER_URL
+  };
+  var fetchRemote = async (key, options = defaultOptions) => {
+    const baseUrl = options.endpoint || SERVER_URL;
+    const route = options.serviceRoute ? (0, import_utils4.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_utils4.isFunction)(options.onError)) return options.onError(e);
+      else console.error(e);
+    }
+  };
+  var 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_utils4.deepDestringifyFunctions)(data) : (0, import_utils4.deepDestringifyFunctions)(data.releases[0]);
+      if (editor.serviceRoute) {
+        if ((0, import_utils4.isArray)(editor.serviceRoute)) {
+          editor.serviceRoute.forEach((route) => {
+            (0, import_utils4.overwriteDeep)(options[route], evalData[route.toLowerCase()]);
+          });
+        } else {
+          (0, import_utils4.overwriteDeep)(options[editor.serviceRoute], evalData);
+        }
+      } else {
+        ;
+        [
+          "state",
+          "designSystem",
+          "components",
+          "snippets",
+          "pages",
+          "utils",
+          "files",
+          "packages",
+          "functions"
+        ].forEach((key2) => {
+          (0, import_utils4.overwriteDeep)(options[key2], evalData[key2.toLowerCase()]);
+        });
+      }
+    }
+    return options;
+  };
+  var 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_utils4.deepDestringifyFunctions)(data) : (0, import_utils4.deepDestringifyFunctions)(data.releases[0]);
+      callback(evalData);
+    }
+  };
   var 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);
       }
@@ -478,7 +567,7 @@ var Smbls = (() => {
     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_utils4.isObject)(designSystem)) {
               options.utils.init(designSystem);
@@ -496,6 +585,7 @@ var Smbls = (() => {
 
   // dist/esm/src/define.js
   var import_helmet = __require("@symbo.ls/helmet");
+  var import_fetch = __require("@symbo.ls/fetch");
   var defaultDefine = {
     routes: (param) => param,
     metadata: (param, el, state) => {
@@ -505,6 +595,10 @@ var Smbls = (() => {
       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 };
@@ -940,6 +1034,16 @@ var Smbls = (() => {
     injectRouterInLinkComponent: true,
     popState: true
   };
+  var resolveRouterElement2 = (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;
+  };
   var initRouter2 = (element, context) => {
     if (context.router === false) return;
     else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS2;
@@ -949,7 +1053,15 @@ var Smbls = (() => {
       if (!import_utils9.window.location) return;
       const { pathname, search, hash } = import_utils9.window.location;
       const url = pathname + search + hash;
-      if (el.routes) await (0, import_router4.router)(url, el, {}, { initialRender: true });
+      let targetEl = el;
+      if (routerOptions.customRouterElement) {
+        const resolved = resolveRouterElement2(el, routerOptions.customRouterElement);
+        if (resolved) {
+          targetEl = resolved;
+          if (el.routes) targetEl.routes = el.routes;
+        }
+      }
+      if (targetEl.routes) await (0, import_router4.router)(url, targetEl, {}, { initialRender: true });
     };
     const hasRenderRouter = element.on && !(0, import_utils9.isUndefined)(element.on.renderRouter) || !(0, import_utils9.isUndefined)(element.onRenderRouter);
     if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
@@ -974,10 +1086,18 @@ var Smbls = (() => {
     import_utils9.window.onpopstate = async (e) => {
       const { pathname, search, hash } = import_utils9.window.location;
       const url = pathname + search + hash;
-      await element.call(
+      let targetEl = element;
+      if (routerOptions.customRouterElement) {
+        const resolved = resolveRouterElement2(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 }
       );
@@ -995,11 +1115,74 @@ var Smbls = (() => {
 
   // src/fetchOnCreate.js
   var import_utils10 = __require("@domql/utils");
-  var import_fetch2 = __require("@symbo.ls/fetch");
+  var IS_DEVELOPMENT2 = import_utils10.window && import_utils10.window.location ? import_utils10.window.location.host.includes("dev.") : (0, import_utils10.isDevelopment)();
+  var SERVER_URL2 = IS_DEVELOPMENT2 ? "http://localhost:8080/get" : "https://api.symbols.app/get";
+  var defaultOptions2 = {
+    endpoint: SERVER_URL2
+  };
+  var fetchRemote2 = async (key, options = defaultOptions2) => {
+    const baseUrl = options.endpoint || SERVER_URL2;
+    const route = options.serviceRoute ? (0, import_utils10.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_utils10.isFunction)(options.onError)) return options.onError(e);
+      else console.error(e);
+    }
+  };
+  var fetchProject2 = async (key, options) => {
+    const { editor } = options;
+    if (editor && editor.remote) {
+      const data = await fetchRemote2(key, editor);
+      const evalData = IS_DEVELOPMENT2 || options.isDevelopment ? (0, import_utils10.deepDestringifyFunctions)(data) : (0, import_utils10.deepDestringifyFunctions)(data.releases[0]);
+      if (editor.serviceRoute) {
+        if ((0, import_utils10.isArray)(editor.serviceRoute)) {
+          editor.serviceRoute.forEach((route) => {
+            (0, import_utils10.overwriteDeep)(options[route], evalData[route.toLowerCase()]);
+          });
+        } else {
+          (0, import_utils10.overwriteDeep)(options[editor.serviceRoute], evalData);
+        }
+      } else {
+        ;
+        [
+          "state",
+          "designSystem",
+          "components",
+          "snippets",
+          "pages",
+          "utils",
+          "files",
+          "packages",
+          "functions"
+        ].forEach((key2) => {
+          (0, import_utils10.overwriteDeep)(options[key2], evalData[key2.toLowerCase()]);
+        });
+      }
+    }
+    return options;
+  };
+  var fetchProjectAsync2 = async (key, options, callback) => {
+    const { editor } = options;
+    if (editor && editor.remote) {
+      const data = await fetchRemote2(key, editor);
+      const evalData = IS_DEVELOPMENT2 || options.isDevelopment ? (0, import_utils10.deepDestringifyFunctions)(data) : (0, import_utils10.deepDestringifyFunctions)(data.releases[0]);
+      callback(evalData);
+    }
+  };
   var fetchSync2 = async (key, options) => {
     if (key && options.editor) {
       try {
-        if (!options.editor.async) await (0, import_fetch2.fetchProject)(key, options);
+        if (!options.editor.async) await fetchProject2(key, options);
       } catch (e) {
         console.error(e);
       }
@@ -1009,7 +1192,7 @@ var Smbls = (() => {
     if (key && options.editor) {
       try {
         if (options.editor.async) {
-          (0, import_fetch2.fetchProjectAsync)(key, options, callback || ((data) => {
+          fetchProjectAsync2(key, options, callback || ((data) => {
             const designSystem = data.designSystem;
             if ((0, import_utils10.isObject)(designSystem)) {
               options.utils.init(designSystem);
@@ -1027,6 +1210,7 @@ var Smbls = (() => {
 
   // src/define.js
   var import_helmet2 = __require("@symbo.ls/helmet");
+  var import_fetch2 = __require("@symbo.ls/fetch");
   var defaultDefine2 = {
     routes: (param) => param,
     metadata: (param, el, state) => {
@@ -1036,6 +1220,10 @@ var Smbls = (() => {
       const resolved = (0, import_helmet2.resolveMetadata)(param, el, state);
       (0, import_helmet2.applyMetadata)(resolved, doc);
     },
+    fetch: (param, el, state, context) => {
+      if (!param) return;
+      (0, import_fetch2.executeFetch)(param, el, state, context);
+    },
     $router: async (param, el) => {
       if (!param) return;
       const obj = { tag: "fragment", ...param };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smbls",
-  "version": "3.6.4",
+  "version": "3.6.6",
   "license": "MIT",
   "repository": "https://github.com/symbo-ls/smbls",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
@@ -28,21 +28,21 @@
     "src"
   ],
   "dependencies": {
-    "@symbo.ls/emotion": "^3.6.4",
-    "@symbo.ls/helmet": "^3.6.4",
-    "@domql/report": "^3.6.4",
-    "@domql/router": "^3.6.4",
-    "@domql/utils": "^3.6.4",
-    "@symbo.ls/cli": "^3.6.4",
-    "@symbo.ls/default-config": "^3.6.4",
-    "@symbo.ls/fetch": "^3.6.4",
-    "@symbo.ls/scratch": "^3.6.4",
-    "@symbo.ls/sync": "^3.6.4",
-    "@symbo.ls/uikit": "^3.6.4",
-    "@symbo.ls/smbls-utils": "^3.6.4",
-    "attrs-in-props": "^3.6.4",
-    "css-in-props": "^3.6.4",
-    "domql": "^3.6.4"
+    "@symbo.ls/emotion": "^3.6.6",
+    "@symbo.ls/helmet": "^3.6.6",
+    "@domql/report": "^3.6.6",
+    "@domql/router": "^3.6.6",
+    "@domql/utils": "^3.6.6",
+    "@symbo.ls/cli": "^3.6.6",
+    "@symbo.ls/default-config": "^3.6.6",
+    "@symbo.ls/fetch": "^3.6.6",
+    "@symbo.ls/scratch": "^3.6.6",
+    "@symbo.ls/sync": "^3.6.6",
+    "@symbo.ls/uikit": "^3.6.6",
+    "@symbo.ls/smbls-utils": "^3.6.6",
+    "attrs-in-props": "^3.6.6",
+    "css-in-props": "^3.6.6",
+    "domql": "^3.6.6"
   },
   "publishConfig": {
     "access": "public"

package/src/define.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { resolveMetadata, applyMetadata } from '@symbo.ls/helmet'
+import { executeFetch } from '@symbo.ls/fetch'
 
 export const defaultDefine = {
   routes: param => param,
@@ -13,6 +14,11 @@ export const defaultDefine = {
     applyMetadata(resolved, doc)
   },
 
+  fetch: (param, el, state, context) => {
+    if (!param) return
+    executeFetch(param, el, state, context)
+  },
+
   $router: async (param, el) => {
     if (!param) return
 

package/src/fetchOnCreate.js

@@ -1,7 +1,96 @@
 'use strict'
 
-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((key) => {
+        overwriteDeep(options[key], evalData[key.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)
+  }
+}
 
 export const fetchSync = async (key, options) => {
   if (key && options.editor) {

package/src/router.js

@@ -10,6 +10,17 @@ const DEFAULT_ROUTING_OPTIONS = {
   popState: true
 }
 
+export 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
+}
+
 export const initRouter = (element, context) => {
   if (context.router === false) return
   else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS
@@ -21,7 +32,17 @@ export 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 =
@@ -50,13 +71,24 @@ export const onpopstateRouter = (element, context) => {
   if (!routerOptions.popState) return
   const router =
     context.utils && context.utils.router ? context.utils.router : defaultRouter
+
   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 }
     )