@symbo.ls/create 2.11.416 → 2.11.422

package/dist/cjs/bundle/index.js

@@ -607,7 +607,7 @@ var require_object = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -632,7 +632,7 @@ var require_object = __commonJS({
     var import_types = require_types();
     var import_array = require_array();
     var import_string = require_string();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -644,7 +644,7 @@ var require_object = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
@@ -733,7 +733,7 @@ var require_object = __commonJS({
       return o;
     };
     var deepCloneWithExtend3 = (obj, excludeFrom = ["node"], options = {}) => {
-      const o = (0, import_types.isArray)(obj) ? [] : {};
+      const o = options.window ? (0, import_types.isArray)(obj) ? new options.window.Array([]) : new options.window.Object({}) : (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
         if (!Object.prototype.hasOwnProperty.call(obj, prop))
           continue;
@@ -1109,6 +1109,12 @@ var require_object = __commonJS({
         if (foundString || foundInArray)
           return el;
       }
+      if (el.parent && el.parent.childExtend) {
+        const foundString = (0, import_types.isString)(el.parent.childExtend) && el.parent.childExtend === key;
+        const foundInArray = (0, import_types.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
+        if (foundString || foundInArray)
+          return el;
+      }
     };
     var getExtendsInElement = (obj) => {
       let result = [];
@@ -2142,7 +2148,7 @@ var require_cjs2 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -2167,7 +2173,7 @@ var require_cjs2 = __commonJS({
         var import_types = require_types4();
         var import_array = require_array4();
         var import_string = require_string4();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -2179,7 +2185,7 @@ var require_cjs2 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge52 = (element, obj, excludeFrom = []) => {
@@ -3214,7 +3220,7 @@ var require_cjs2 = __commonJS({
     };
     var import_globals2 = __toESM2(require_cjs18(), 1);
     var import_utils32 = __toESM2(require_cjs22(), 1);
-    var ENV2 = "development";
+    var ENV3 = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
         return [0, 0, 0, 0];
@@ -3337,7 +3343,7 @@ var require_cjs2 = __commonJS({
     var opacify2 = (color, opacity) => {
       const arr = colorStringToRgbaArray(color);
       if (!arr) {
-        if (ENV2 === "test" || ENV2 === "development")
+        if (ENV3 === "test" || ENV3 === "development")
           console.warn(color + " color is not rgba");
         return;
       }
@@ -4004,7 +4010,7 @@ var require_cjs2 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -4029,7 +4035,7 @@ var require_cjs2 = __commonJS({
         var import_types = require_types22();
         var import_array = require_array22();
         var import_string = require_string22();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -4041,7 +4047,7 @@ var require_cjs2 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge52 = (element, obj, excludeFrom = []) => {
@@ -7265,7 +7271,7 @@ var require_cjs3 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -7290,7 +7296,7 @@ var require_cjs3 = __commonJS({
         var import_types = require_types4();
         var import_array = require_array4();
         var import_string = require_string4();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -7302,7 +7308,7 @@ var require_cjs3 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge6 = (element, obj, excludeFrom = []) => {
@@ -7391,7 +7397,7 @@ var require_cjs3 = __commonJS({
           return o;
         };
         var deepCloneWithExtend3 = (obj, excludeFrom = ["node"], options = {}) => {
-          const o = (0, import_types.isArray)(obj) ? [] : {};
+          const o = options.window ? (0, import_types.isArray)(obj) ? new options.window.Array([]) : new options.window.Object({}) : (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
             if (!Object.prototype.hasOwnProperty.call(obj, prop))
               continue;
@@ -7767,6 +7773,12 @@ var require_cjs3 = __commonJS({
             if (foundString || foundInArray)
               return el;
           }
+          if (el.parent && el.parent.childExtend) {
+            const foundString = (0, import_types.isString)(el.parent.childExtend) && el.parent.childExtend === key;
+            const foundInArray = (0, import_types.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
+            if (foundString || foundInArray)
+              return el;
+          }
         };
         var getExtendsInElement = (obj) => {
           let result = [];
@@ -8182,13 +8194,15 @@ var require_cjs3 = __commonJS({
     });
     module2.exports = __toCommonJS2(src_exports2);
     var import_utils210 = __toESM2(require_cjs18(), 1);
-    var toggleFullscreen = (el) => {
+    var toggleFullscreen = async (el) => {
       if (!document.fullscreenElement) {
-        el.node.requestFullscreen().catch((err) => {
+        try {
+          await (el.node || document).requestFullscreen();
+        } catch (err) {
           console.warn(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
-        });
+        }
       } else {
-        document.exitFullscreen();
+        await document.exitFullscreen();
       }
     };
     var import_utils32 = __toESM2(require_cjs18(), 1);
@@ -8243,7 +8257,7 @@ var require_cjs3 = __commonJS({
         }
       });
     };
-    var loadJavascriptFileSync2 = (FILE_URL, doc = document, type = "text/javascript") => {
+    var loadJavascriptFileSync2 = (FILE_URL, doc = document, fallback, type = "text/javascript") => {
       const xhr = new window.XMLHttpRequest();
       xhr.open("GET", FILE_URL, false);
       xhr.send();
@@ -8252,6 +8266,8 @@ var require_cjs3 = __commonJS({
         scriptEle.type = type;
         scriptEle.text = xhr.responseText;
         doc.body.appendChild(scriptEle);
+        if (typeof fallback === "function")
+          fallback();
       } else {
         throw new Error(`Failed to load the script ${FILE_URL}`);
       }
@@ -9971,7 +9987,7 @@ var require_attr = __commonJS({
       if (params) {
         for (const attr in params) {
           const val = (0, import_utils32.exec)(params[attr], element);
-          if ((0, import_utils32.isDefined)(val) && val && node3.setAttribute)
+          if (val !== false && !(0, import_utils32.isUndefined)(val) && !(0, import_utils32.isNull)(val) && node3.setAttribute)
             node3.setAttribute(attr, val);
           else if (node3.removeAttribute)
             node3.removeAttribute(attr);
@@ -10145,11 +10161,9 @@ var require_set = __commonJS({
         ...options
       });
     };
-    var reset = (params = {}, options) => {
+    var reset = (options) => {
       const element = void 0;
-      if (!options.preventRemove)
-        (0, import_content.removeContent)(element, options);
-      (0, import_create.default)(params, element, options.contentElementKey || "content", {
+      (0, import_create.default)(element, element.parent, void 0, {
         ignoreChildExtend: true,
         ...import_mixins.registry.defaultOptions,
         ...import_options3.default.create,
@@ -10335,7 +10349,8 @@ var require_html = __commonJS({
     module2.exports = __toCommonJS2(html_exports);
     var import_utils32 = require_cjs();
     var html_default = (param, element, node3) => {
-      const prop = (0, import_utils32.exec)(param, element);
+      var _a;
+      const prop = (0, import_utils32.exec)(param, element) || (0, import_utils32.exec)((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node3.nodeName === "SVG")
@@ -10780,6 +10795,7 @@ var require_methods2 = __commonJS({
       return parent;
     };
     var lookdown = function(param) {
+      var _a;
       const el = this;
       const { __ref: ref } = el;
       const children = ref.__children;
@@ -10789,18 +10805,19 @@ var require_methods2 = __commonJS({
         if (v === param)
           return childElem;
         else if ((0, import_utils32.isFunction)(param)) {
-          const exec4 = param(childElem, childElem.state, childElem.context);
-          if (childElem.state && exec4) {
+          const exec5 = param(childElem, childElem.state, childElem.context);
+          if (childElem.state && exec5) {
             return childElem;
           }
         }
-        const lookdown2 = childElem == null ? void 0 : childElem.lookdown(param);
+        const lookdown2 = (_a = childElem == null ? void 0 : childElem.lookdown) == null ? void 0 : _a.call(childElem, param);
         if (lookdown2)
           return lookdown2;
       }
       return null;
     };
     var lookdownAll = function(param, results = []) {
+      var _a;
       const el = this;
       const { __ref: ref } = el;
       const children = ref.__children;
@@ -10810,11 +10827,11 @@ var require_methods2 = __commonJS({
         if (v === param)
           results.push(childElem);
         else if ((0, import_utils32.isFunction)(param)) {
-          const exec4 = param(childElem, childElem.state, childElem.context);
-          if (childElem.state && exec4)
+          const exec5 = param(childElem, childElem.state, childElem.context);
+          if (childElem.state && exec5)
             results.push(childElem);
         }
-        childElem == null ? void 0 : childElem.lookdownAll(param, results);
+        (_a = childElem == null ? void 0 : childElem.lookdownAll) == null ? void 0 : _a.call(childElem, param, results);
       }
       return results.length ? results : null;
     };
@@ -11405,7 +11422,7 @@ var require_extendUtils = __commonJS({
     });
     module2.exports = __toCommonJS2(extendUtils_exports);
     var import_utils32 = require_cjs();
-    var ENV2 = "development";
+    var ENV3 = "development";
     var generateHash = () => Math.random().toString(36).substring(2);
     var extendStackRegistry = {};
     var extendCachedRegistry = {};
@@ -11486,7 +11503,7 @@ var require_extendUtils = __commonJS({
         else if (pageExists)
           return pageExists;
         else {
-          if (options.verbose && (ENV2 === "test" || ENV2 === "development")) {
+          if (options.verbose && (ENV3 === "test" || ENV3 === "development")) {
             console.warn("Extend is string but component was not found:", extend);
           }
           return {};
@@ -11540,7 +11557,7 @@ var require_extend = __commonJS({
     module2.exports = __toCommonJS2(extend_exports);
     var import_utils32 = require_cjs();
     var import_utils210 = require_utils();
-    var ENV2 = "development";
+    var ENV3 = "development";
     var mainExtend;
     var applyExtend = (element, parent, options = {}) => {
       if ((0, import_utils32.isFunction)(element))
@@ -11549,7 +11566,7 @@ var require_extend = __commonJS({
       const context = element.context || parent.context;
       extend = (0, import_utils210.fallbackStringExtend)(extend, context, options);
       const extendStack = (0, import_utils210.getExtendStack)(extend, context);
-      if (ENV2 !== "test" || ENV2 !== "development")
+      if (ENV3 !== "test" || ENV3 !== "development")
         delete element.extend;
       let childExtendStack = [];
       if (parent) {
@@ -11639,7 +11656,7 @@ var require_component = __commonJS({
     module2.exports = __toCommonJS2(component_exports);
     var import_utils32 = require_cjs();
     var import_extend = require_extend();
-    var ENV2 = "development";
+    var ENV3 = "development";
     var DOMQL_BUILTINS = [
       "extend",
       "childExtend",
@@ -11743,7 +11760,7 @@ var require_component = __commonJS({
         if (componentExists)
           element.extend = componentExists;
         else {
-          if ((ENV2 === "test" || ENV2 === "development") && options.verbose) {
+          if ((ENV3 === "test" || ENV3 === "development") && options.verbose) {
             console.warn(execExtend, "is not in library", components, element);
             console.warn("replacing with ", {});
           }
@@ -12079,7 +12096,7 @@ var require_node2 = __commonJS({
     var import_applyParam = require_applyParam();
     var import_utils210 = require_utils();
     var import_propEvents = require_propEvents();
-    var ENV2 = "development";
+    var ENV3 = "development";
     var createNode = (element, options) => {
       let { node: node3, tag, __ref: ref } = element;
       let isNewNode;
@@ -12093,7 +12110,7 @@ var require_node2 = __commonJS({
           node3 = element.node = (0, import_render.cacheNode)(element);
         (0, import_event.triggerEventOn)("attachNode", element, options);
       }
-      if (ENV2 === "test" || ENV2 === "development" || options.alowRefReference) {
+      if (ENV3 === "test" || ENV3 === "development" || options.alowRefReference) {
         node3.ref = element;
         if ((0, import_utils32.isFunction)(node3.setAttribute))
           node3.setAttribute("key", element.key);
@@ -12599,7 +12616,7 @@ var require_object3 = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
       hasOwnProperty: () => hasOwnProperty,
       isEmpty: () => isEmpty,
@@ -12622,7 +12639,7 @@ var require_object3 = __commonJS({
     var import_types = require_types2();
     var import_array = require_array2();
     var import_string = require_string2();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -12634,7 +12651,7 @@ var require_object3 = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
@@ -14090,7 +14107,7 @@ var require_create4 = __commonJS({
     var import_utils32 = require_cjs();
     var import_options3 = __toESM2(require_options(), 1);
     var import_component = require_component();
-    var ENV2 = "development";
+    var ENV3 = "development";
     var create2 = (element, parent, key, options = import_options3.default.create || {}, attachOptions) => {
       cacheOptions(element, options);
       if (checkIfPrimitive(element)) {
@@ -14138,13 +14155,13 @@ var require_create4 = __commonJS({
     };
     var createBasedOnType = (element, parent, key, options) => {
       if (element === void 0) {
-        if (ENV2 === "test" || ENV2 === "development") {
+        if (ENV3 === "test" || ENV3 === "development") {
           console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path);
         }
         return {};
       }
       if ((0, import_utils32.isString)(key) && key.slice(0, 2 === "__")) {
-        if (ENV2 === "test" || ENV2 === "development") {
+        if (ENV3 === "test" || ENV3 === "development") {
           console.warn(key, "seems like to be in __ref");
         }
       }
@@ -14215,7 +14232,7 @@ var require_create4 = __commonJS({
       try {
         (0, import_node.default)(element, options);
       } catch (e) {
-        if (ENV2 === "test" || ENV2 === "development")
+        if (ENV3 === "test" || ENV3 === "development")
           console.warn(element, e);
       }
       if (!ref.__if) {
@@ -14954,7 +14971,7 @@ var require_object4 = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
       hasOwnProperty: () => hasOwnProperty,
       isEmpty: () => isEmpty,
@@ -14977,7 +14994,7 @@ var require_object4 = __commonJS({
     var import_types = require_types3();
     var import_array = require_array3();
     var import_string = require_string3();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -14989,7 +15006,7 @@ var require_object4 = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
@@ -17334,6 +17351,7 @@ __export(uikit_exports, {
   CommonField: () => CommonField,
   CommonFieldTemplate: () => CommonFieldTemplate,
   CountIndicator: () => CountIndicator,
+  Data: () => Data,
   Dialog: () => Dialog,
   DialogFooter: () => DialogFooter,
   DialogHeader: () => DialogHeader,
@@ -17826,8 +17844,8 @@ var Img = {
   attr: {
     src: (el) => {
       const { props: props2, context } = el;
-      const { exec: exec4, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
-      let src = (props2.preSrc || "") + exec4(props2.src, el);
+      const { exec: exec5, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
+      let src = (props2.preSrc || "") + exec5(props2.src, el);
       if (isString14(src) && src.includes("{{")) {
         src = replaceLiteralsWithObjectFields3(src, el.state);
       }
@@ -17912,8 +17930,8 @@ var getComputedBackgroundColor = ({ props: props2 }) => {
   return (0, import_scratch6.getColor)(props2.shapeDirectionColor) || (0, import_scratch6.getColor)(props2.borderColor) || (0, import_scratch6.getColor)(props2.backgroundColor) || (0, import_scratch6.getColor)(props2.background);
 };
 var inheritTransition = ({ props: props2, deps }) => {
-  const exec4 = Timing.class.transition({ props: props2, deps });
-  return exec4 && exec4.transition;
+  const exec5 = Timing.class.transition({ props: props2, deps });
+  return exec5 && exec5.transition;
 };
 var SHAPES = {
   rectangle: {},
@@ -18578,9 +18596,10 @@ var Collection = {
     $collection: (param, el, state) => {
       const { __ref: ref } = el;
       const { children, childrenAs, childrenExtend } = el.props || {};
-      const hasChildren = (0, import_utils8.isArray)(children);
+      const childrenExec = children && (0, import_utils8.exec)(children, el, state);
+      const hasChildren = (0, import_utils8.isArray)(childrenExec);
       if (hasChildren) {
-        param = children;
+        param = (0, import_utils8.deepCloneWithExtend)(childrenExec);
         if (childrenAs)
           param = param.map((v) => ({ extend: childrenExtend, [childrenAs]: v }));
       } else if (!param)
@@ -18641,7 +18660,8 @@ var Collection = {
       return data;
     },
     $stateCollection: (param, el, state, ctx) => {
-      if (!param)
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs)
         return;
       if ((0, import_utils8.isString)(param)) {
         if (param === "state")
@@ -18682,7 +18702,8 @@ var Collection = {
       el.content = obj;
     },
     $propsCollection: (param, el, state) => {
-      if (!param)
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs)
         return;
       if ((0, import_utils8.isString)(param)) {
         if (param === "state")
@@ -18816,6 +18837,8 @@ var Svg = {
     const { designSystem, utils: utils2 } = context;
     const SVG = designSystem && designSystem.SVG;
     const useSvgSprite = props2.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+    if (props2.html)
+      return props2.html;
     if (!useSvgSprite && props2.src)
       return props2.src;
     const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
@@ -18942,6 +18965,7 @@ var Footnote = {
 };
 var B = { tag: "b" };
 var I = { tag: "i" };
+var Data = { tag: "data" };
 
 // ../uikit/Atoms/Transform.js
 var import_utils11 = __toESM(require_cjs());
@@ -19435,8 +19459,8 @@ var Link = {
   },
   attr: {
     href: (el, s, ctx) => {
-      const { isString: isString14, exec: exec4, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = ctx.utils;
-      const href = exec4(el.props.href, el) || exec4(el.props, el).href;
+      const { isString: isString14, exec: exec5, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = ctx.utils;
+      const href = exec5(el.props.href, el) || exec5(el.props, el).href;
       if (isString14(href) && href.includes("{{")) {
         return replaceLiteralsWithObjectFields3(href, s);
       }
@@ -19452,8 +19476,8 @@ var RouterLink = {
     click: (event, el, s) => {
       const { props: props2, context: ctx } = el;
       const { href: h, scrollToTop, stopPropagation } = props2;
-      const { exec: exec4, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
-      let href = exec4(h, el, s);
+      const { exec: exec5, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
+      let href = exec5(h, el, s);
       if (isString14(href) && href.includes("{{")) {
         href = replaceLiteralsWithObjectFields3(href, s);
       }
@@ -22171,8 +22195,8 @@ var initRouter = (element, options) => {
   const routerOptions = options.router;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash: hash3 } = import_utils20.window.location;
-    const url2 = pathname + hash3;
+    const { pathname, search, hash: hash3 } = import_utils20.window.location;
+    const url2 = pathname + search + hash3;
     if (el.routes)
       router2(url2, el, {}, { initialRender: true });
   };
@@ -22199,8 +22223,8 @@ var popStateRouter = (element, options) => {
     return;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
   import_utils20.window.onpopstate = (e) => {
-    const { pathname, hash: hash3 } = import_utils20.window.location;
-    const url2 = pathname + hash3;
+    const { pathname, search, hash: hash3 } = import_utils20.window.location;
+    const url2 = pathname + search + hash3;
     router2(url2, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };
@@ -25591,19 +25615,29 @@ var ENV = "development";
 var defautlOpts = {};
 var CONNECT_ATTEPT = 0;
 var CONNECT_ATTEPT_MAX_ALLOWED = 1;
-var connect = (key, options = {}) => {
-  const isDev = options.development || window3 && window3.location && window3.location.host.includes("local") || (ENV === "test" || ENV === "development");
+var getIsDev = (options) => {
+  return options.development || window3 && window3.location && window3.location.host.includes("local") || (ENV === "test" || ENV === "development");
+};
+var getSocketUrl = (options, isDev) => {
   const SOCKET_BACKEND_URL = isDev ? "http://localhost:13336/" : "https://socket.symbols.app/";
   const socketUrls = isArray3(options.socketUrl) ? options.socketUrl : [options.socketUrl || SOCKET_BACKEND_URL];
   const primaryUrl = socketUrls[0];
   const secondaryUrl = socketUrls[1] || "socket.symbols.app";
-  const socket = lookup2(primaryUrl || SOCKET_BACKEND_URL, {
+  return {
+    primaryUrl: primaryUrl || SOCKET_BACKEND_URL,
+    secondaryUrl
+  };
+};
+var connect = (key, options = {}) => {
+  const isDev = getIsDev(options);
+  const { primaryUrl, secondaryUrl } = getSocketUrl(options, isDev);
+  const socket = lookup2(primaryUrl || secondaryUrl, {
     // withCredentials: true
   });
   socket.on("connect", () => {
     if (isDev) {
       console.log(
-        `Connected to %c${primaryUrl || SOCKET_BACKEND_URL} %c${key} %c${socket.id}`,
+        `Connected to %c${primaryUrl} %c${key} %c${socket.id}`,
         "font-weight: bold; color: green;",
         "font-weight: bold;",
         ""
@@ -25868,7 +25902,9 @@ var connectedToSymbols = (clients, element, state) => {
       state.update({ connected: false });
       const t = setTimeout(() => {
         delete state.notifications.connected;
-        element.notifications.content.connected.setProps({ animation: "fadeOutDown" });
+        if (element.notifications.content.connected) {
+          element.notifications.content.connected.setProps({ animation: "fadeOutDown" });
+        }
         state.update({ connected: true });
         clearTimeout(t);
       }, 3e3);
@@ -27930,6 +27966,7 @@ var initEmotion = (key, options = {}) => {
 };
 
 // src/prepare.js
+var ENV2 = "development";
 var checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = (0, import_utils29.isString)(key);
   if (!isFirstKeyString)
@@ -27956,17 +27993,18 @@ var prepareComponents = (options) => {
 var prepareUtils = (options) => {
   return { ...utilImports_exports, ...import_scratch2.scratchUtils, ...options.snippets || options.utils || options.functions || {} };
 };
-var prepareDependencies = ({ dependencies, document: document2 }) => {
+var prepareDependencies = ({ dependencies, dependenciesOnDemand, document: document2 }) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null;
   }
-  const ENV2 = "development";
   for (const [dependency, version] of Object.entries(dependencies)) {
     if (version === "loading" || version === "error") {
       continue;
     }
     const random = ENV2 === "development" ? `?${Math.random()}` : "";
     const url2 = `https://pkg.symbo.ls/${dependency}/${version}.js${random}`;
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency])
+      continue;
     try {
       utilImports_exports.loadJavascriptFileSync(url2, document2);
     } catch (e) {
@@ -27993,10 +28031,18 @@ var preparePackages = (packages, opts) => {
   if (!windowOpts.requireOnDemand) {
     windowOpts.requireOnDemand = (key) => {
       const { dependenciesOnDemand, document: document2 } = opts;
-      if (!windowOpts.packages[key] && dependenciesOnDemand && dependenciesOnDemand[key]) {
-        const version = dependenciesOnDemand[key];
-        const url2 = `https://pkg.symbo.ls/${key}/${version}.js`;
-        utilImports_exports.loadJavascriptFileSync(url2, document2);
+      if (!windowOpts.packages[key]) {
+        const random = ENV2 === "development" ? `?${Math.random()}` : "";
+        if (dependenciesOnDemand && dependenciesOnDemand[key]) {
+          const version = dependenciesOnDemand[key];
+          const url2 = `https://pkg.symbo.ls/${key}/${version}.js${random}`;
+          utilImports_exports.loadJavascriptFileSync(url2, document2);
+        } else {
+          const url2 = `https://pkg.symbo.ls/${key}${random}`;
+          utilImports_exports.loadJavascriptFileSync(url2, document2, () => {
+            windowOpts.packages[key] = "loadedOnDeman";
+          });
+        }
       }
       return windowOpts.require(key);
     };

package/dist/cjs/prepare.js

@@ -43,6 +43,7 @@ var import_utils = require("@domql/utils");
 var import_initEmotion = require("./initEmotion");
 var uikit = __toESM(require("@symbo.ls/uikit"), 1);
 var utils = __toESM(require("./utilImports"), 1);
+const ENV = "development";
 const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = (0, import_utils.isString)(key);
   if (!isFirstKeyString)
@@ -69,17 +70,18 @@ const prepareComponents = (options) => {
 const prepareUtils = (options) => {
   return { ...utils, ...utils.scratchUtils, ...options.snippets || options.utils || options.functions || {} };
 };
-const prepareDependencies = ({ dependencies, document: document2 }) => {
+const prepareDependencies = ({ dependencies, dependenciesOnDemand, document: document2 }) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null;
   }
-  const ENV = "development";
   for (const [dependency, version] of Object.entries(dependencies)) {
     if (version === "loading" || version === "error") {
       continue;
     }
     const random = ENV === "development" ? `?${Math.random()}` : "";
     const url = `https://pkg.symbo.ls/${dependency}/${version}.js${random}`;
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency])
+      continue;
     try {
       utils.loadJavascriptFileSync(url, document2);
     } catch (e) {
@@ -106,10 +108,18 @@ const preparePackages = (packages, opts) => {
   if (!windowOpts.requireOnDemand) {
     windowOpts.requireOnDemand = (key) => {
       const { dependenciesOnDemand, document: document2 } = opts;
-      if (!windowOpts.packages[key] && dependenciesOnDemand && dependenciesOnDemand[key]) {
-        const version = dependenciesOnDemand[key];
-        const url = `https://pkg.symbo.ls/${key}/${version}.js`;
-        utils.loadJavascriptFileSync(url, document2);
+      if (!windowOpts.packages[key]) {
+        const random = ENV === "development" ? `?${Math.random()}` : "";
+        if (dependenciesOnDemand && dependenciesOnDemand[key]) {
+          const version = dependenciesOnDemand[key];
+          const url = `https://pkg.symbo.ls/${key}/${version}.js${random}`;
+          utils.loadJavascriptFileSync(url, document2);
+        } else {
+          const url = `https://pkg.symbo.ls/${key}${random}`;
+          utils.loadJavascriptFileSync(url, document2, () => {
+            windowOpts.packages[key] = "loadedOnDeman";
+          });
+        }
       }
       return windowOpts.require(key);
     };

package/dist/cjs/router.js

@@ -41,8 +41,8 @@ const initRouter = (element, options) => {
   const routerOptions = options.router;
   const router = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash } = import_utils.window.location;
-    const url = pathname + hash;
+    const { pathname, search, hash } = import_utils.window.location;
+    const url = pathname + search + hash;
     if (el.routes)
       router(url, el, {}, { initialRender: true });
   };
@@ -69,8 +69,8 @@ const popStateRouter = (element, options) => {
     return;
   const router = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
   import_utils.window.onpopstate = (e) => {
-    const { pathname, hash } = import_utils.window.location;
-    const url = pathname + hash;
+    const { pathname, search, hash } = import_utils.window.location;
+    const url = pathname + search + hash;
     router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.416",
+  "version": "2.11.422",
   "license": "MIT",
-  "gitHead": "ed1acb2a00946055aad3b2f9aa5a4a44f6ddc745",
+  "gitHead": "656fc11f2234248ed554e1a1d4ba11c70fa3253b",
   "files": [
     "src",
     "dist"

package/src/prepare.js

@@ -6,6 +6,8 @@ import { initEmotion } from './initEmotion'
 import * as uikit from '@symbo.ls/uikit'
 import * as utils from './utilImports'
 
+const ENV = process.env.NODE_ENV
+
 const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = isString(key)
   if (!isFirstKeyString) return
@@ -35,13 +37,11 @@ export const prepareUtils = options => {
   return { ...utils, ...utils.scratchUtils, ...(options.snippets || options.utils || options.functions || {}) }
 }
 
-export const prepareDependencies = ({ dependencies, document }) => {
+export const prepareDependencies = ({ dependencies, dependenciesOnDemand, document }) => {
   if (!dependencies || Object.keys(dependencies).length === 0) {
     return null
   }
 
-  const ENV = process.env.NODE_ENV
-
   for (const [dependency, version] of Object.entries(dependencies)) {
     if (version === 'loading' || version === 'error') {
       continue
@@ -50,12 +50,15 @@ export const prepareDependencies = ({ dependencies, document }) => {
     const random = ENV === 'development' ? `?${Math.random()}` : ''
     const url = `https://pkg.symbo.ls/${dependency}/${version}.js${random}`
 
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) continue
+
     try {
       utils.loadJavascriptFileSync(url, document)
     } catch (e) {
       console.error(`Failed to load ${dependency}:`, e)
     }
   }
+
   return dependencies
 }
 
@@ -79,10 +82,18 @@ export const preparePackages = (packages, opts) => {
   if (!windowOpts.requireOnDemand) {
     windowOpts.requireOnDemand = key => {
       const { dependenciesOnDemand, document } = opts
-      if (!windowOpts.packages[key] && dependenciesOnDemand && dependenciesOnDemand[key]) {
-        const version = dependenciesOnDemand[key]
-        const url = `https://pkg.symbo.ls/${key}/${version}.js`
-        utils.loadJavascriptFileSync(url, document)
+      if (!windowOpts.packages[key]) {
+        const random = ENV === 'development' ? `?${Math.random()}` : ''
+        if (dependenciesOnDemand && dependenciesOnDemand[key]) {
+          const version = dependenciesOnDemand[key]
+          const url = `https://pkg.symbo.ls/${key}/${version}.js${random}`
+          utils.loadJavascriptFileSync(url, document)
+        } else {
+          const url = `https://pkg.symbo.ls/${key}${random}`
+          utils.loadJavascriptFileSync(url, document, () => {
+            windowOpts.packages[key] = 'loadedOnDeman'
+          })
+        }
       }
       return windowOpts.require(key)
     }

package/src/router.js

@@ -19,8 +19,8 @@ export const initRouter = (element, options) => {
   const router = (options.snippets && options.snippets.router) ? options.snippets.router : defaultRouter
 
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash } = window.location
-    const url = pathname + hash
+    const { pathname, search, hash } = window.location
+    const url = pathname + search + hash
     if (el.routes) router(url, el, {}, { initialRender: true })
   }
 
@@ -50,8 +50,8 @@ export const popStateRouter = (element, options) => {
     ? options.snippets.router
     : defaultRouter
   window.onpopstate = e => {
-    const { pathname, hash } = window.location
-    const url = pathname + hash
+    const { pathname, search, hash } = window.location
+    const url = pathname + search + hash
     router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 })
   }
 }