@symbo.ls/create 2.11.272 → 2.11.276

package/dist/cjs/bundle/index.js

@@ -407,6 +407,7 @@ var require_string = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var string_exports = {};
     __export2(string_exports, {
+      lowercaseFirstLetter: () => lowercaseFirstLetter,
       replaceLiteralsWithObjectFields: () => replaceLiteralsWithObjectFields2,
       stringIncludesAny: () => stringIncludesAny,
       trimStringFromSymbols: () => trimStringFromSymbols
@@ -446,6 +447,9 @@ var require_string = __commonJS({
         }
       });
     };
+    var lowercaseFirstLetter = (inputString) => {
+      return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
+    };
   }
 });
 
@@ -4973,7 +4977,7 @@ var require_on = __commonJS({
     var applyEventsOnNode = (element, options) => {
       const { node: node2, on: on2 } = element;
       for (const param in on2) {
-        if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
+        if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdate" || param === "stateUpdate" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
         if ((0, import_utils30.isFunction)(appliedFunction)) {
@@ -5471,7 +5475,7 @@ var require_updateState = __commonJS({
       } else if (options.preventInheritAtCurrentState)
         return;
       if (!options.preventInitStateUpdateListener) {
-        const initStateUpdateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdated", obj, element, options);
+        const initStateUpdateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdate", obj, element, options);
         if (initStateUpdateReturns === false)
           return element;
       }
@@ -5482,7 +5486,7 @@ var require_updateState = __commonJS({
       updateDependentState(state, obj, options);
       applyElementUpdate(state, obj, options);
       if (!options.preventStateUpdateListener) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
+        (0, import_event.triggerEventOnUpdate)("stateUpdate", obj, element, options);
       }
       return state;
     };
@@ -5490,13 +5494,15 @@ var require_updateState = __commonJS({
       const { overwrite } = options;
       if (!overwrite)
         return;
-      const shallow = overwrite === "shallow";
+      const shallow = overwrite === "shallow" || overwrite === "shallow-once";
       const merge22 = overwrite === "merge";
       if (merge22) {
         (0, import_utils30.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
       const overwriteFunc = shallow ? import_utils30.overwriteShallow : import_utils30.overwriteDeep;
+      if (options.overwrite === "shallow-once")
+        options.overwrite = true;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -5522,13 +5528,13 @@ var require_updateState = __commonJS({
       targetParent.update(changesValue, {
         execStateFunction: false,
         isHoisted: true,
-        ...options,
         preventUpdate: options.preventHoistElementUpdate,
-        overwrite: !options.replace
+        overwrite: !options.replace,
+        ...options
       });
       const hasNotUpdated = options.preventUpdate !== true || !options.preventHoistElementUpdate;
       if (!options.preventStateUpdateListener && hasNotUpdated) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
+        (0, import_event.triggerEventOnUpdate)("stateUpdate", obj, element, options);
       }
       return true;
     };
@@ -6043,14 +6049,14 @@ var require_append = __commonJS({
     var insertNodeAfter = (node2, siblingNode, parentNode) => {
       const parent = parentNode || siblingNode.parentNode;
       if (siblingNode.nextSibling) {
-        parent == null ? void 0 : parent.insertBefore(node2, siblingNode.nextSibling);
+        parent && parent.insertBefore(node2, siblingNode.nextSibling);
       } else {
-        siblingNode == null ? void 0 : siblingNode.insertAdjacentElement("afterend", node2);
+        siblingNode && siblingNode.insertAdjacentElement("afterend", node2);
       }
     };
     var insertNodeBefore = (node2, siblingNode, parentNode) => {
-      var _a;
-      (_a = parentNode || siblingNode.parentNode) == null ? void 0 : _a.insertBefore(node2, siblingNode);
+      const parent = parentNode || siblingNode.parentNode;
+      parent && parent.insertBefore(node2, siblingNode);
     };
     var assignNode = (element, parent, key, attachOptions) => {
       parent[key || element.key] = element;
@@ -7705,7 +7711,19 @@ var require_component = __commonJS({
     var import_utils30 = require_cjs();
     var import_extend = require_extend();
     var ENV2 = "development";
-    var DOMQL_BUILTINS = ["extend", "childExtend", "childExtendRecursive", "define", "props", "state", "on", "if", "attr", "key", "tag"];
+    var DOMQL_BUILTINS = [
+      "extend",
+      "childExtend",
+      "childExtendRecursive",
+      "define",
+      "props",
+      "state",
+      "on",
+      "if",
+      "attr",
+      "key",
+      "tag"
+    ];
     var checkIfKeyIsComponent2 = (key) => {
       const isFirstKeyString = (0, import_utils30.isString)(key);
       if (!isFirstKeyString)
@@ -7728,7 +7746,7 @@ var require_component = __commonJS({
       return { ...element, extend };
     };
     var replaceOnKeys = (key) => key.replace(/on\w+/g, (match2) => match2.substring(2));
-    var createValidDomqlObjectFromSugar = (el) => {
+    var createValidDomqlObjectFromSugar = (el, parent, key, options) => {
       const newElem = {
         props: {},
         on: {}
@@ -7743,6 +7761,10 @@ var require_component = __commonJS({
         } else if (!isMethod && checkIfKeyIsProperty(k)) {
           if (!DOMQL_BUILTINS.includes(k))
             newElem.props[k] = prop;
+        } else if (checkIfKeyIsComponent2(k)) {
+          newElem[k] = prop;
+        } else {
+          newElem[k] = prop;
         }
       }
       return newElem;
@@ -7751,7 +7773,7 @@ var require_component = __commonJS({
       const { context, tag, extend, props: props4, attr, state, childExtend, childProps, on: on2, if: condition } = element;
       const hasComponentAttrs = extend || childExtend || props4 || state || on2 || condition || attr;
       const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : [key];
-      const isExtendKeyComponent = context == null ? void 0 : context.components[extendFromKey];
+      const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
       else if (!hasComponentAttrs || childProps) {
@@ -8031,6 +8053,50 @@ var require_applyParam = __commonJS({
   }
 });
 
+// ../../../domql/packages/element/dist/cjs/utils/propEvents.js
+var require_propEvents = __commonJS({
+  "../../../domql/packages/element/dist/cjs/utils/propEvents.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var propEvents_exports = {};
+    __export2(propEvents_exports, {
+      propagateEventsFromProps: () => propagateEventsFromProps
+    });
+    module2.exports = __toCommonJS2(propEvents_exports);
+    var import_utils30 = require_cjs();
+    var propagateEventsFromProps = (element) => {
+      const { props: props4, on: on2 } = element;
+      const eventKeysFromProps = Object.keys(props4).filter((key) => key.startsWith("on"));
+      eventKeysFromProps.forEach((v) => {
+        const eventName = (0, import_utils30.lowercaseFirstLetter)(v.split("on")[1]);
+        if (on2[eventName]) {
+          on2[eventName] = (...args) => {
+            on2[eventName](...args);
+            props4[v](...args);
+          };
+        } else
+          on2[eventName] = props4[v];
+      });
+    };
+  }
+});
+
 // ../../../domql/packages/element/dist/cjs/node.js
 var require_node2 = __commonJS({
   "../../../domql/packages/element/dist/cjs/node.js"(exports, module2) {
@@ -8077,6 +8143,7 @@ var require_node2 = __commonJS({
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
     var import_utils210 = require_utils();
+    var import_propEvents = require_propEvents();
     var ENV2 = "development";
     var createNode = (element, options) => {
       let { node: node2, tag, __ref: ref } = element;
@@ -8099,6 +8166,7 @@ var require_node2 = __commonJS({
       (0, import_iterate.throughInitialDefine)(element);
       (0, import_iterate.throughInitialExec)(element);
       if (element.tag !== "string" && element.tag !== "fragment") {
+        (0, import_propEvents.propagateEventsFromProps)(element);
         if (isNewNode && (0, import_utils30.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element, options);
       }
@@ -9689,7 +9757,6 @@ var require_update2 = __commonJS({
       return [snapshotOnCallee, calleeElement];
     };
     var checkIfOnUpdate = (element, parent, options) => {
-      var _a;
       if (!(0, import_utils30.isFunction)(element.if) || !parent)
         return;
       const ref = element.__ref;
@@ -9705,13 +9772,15 @@ var require_update2 = __commonJS({
           }
           if (ref.__state) {
             element.state = ref.__state;
+          } else if (!ref.__hasRootState) {
+            delete element.state;
           }
-          (_a = element.node) == null ? void 0 : _a.remove();
+          element.node && element.node.remove();
           const previousElement = element.previousElement();
           const nextElement = element.nextElement();
           const hasPrevious = previousElement && previousElement.node;
           const hasNext = nextElement && nextElement.node;
-          const attachOptions = ((hasPrevious == null ? void 0 : hasPrevious.parentNode) || (hasNext == null ? void 0 : hasNext.parentNode)) && {
+          const attachOptions = (hasPrevious && hasPrevious.parentNode || hasNext && hasNext.parentNode) && {
             position: hasPrevious ? "after" : hasNext ? "before" : null,
             node: hasPrevious || hasNext
           };
@@ -9747,13 +9816,13 @@ var require_update2 = __commonJS({
       if (!keyInParentState || options.preventInheritedStateUpdate)
         return;
       if (!options.preventInitStateUpdateListener) {
-        const initStateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdated", keyInParentState, element, options);
+        const initStateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdate", keyInParentState, element, options);
         if (initStateReturns === false)
           return element;
       }
       const newState = createStateUpdate(element, parent, options);
       if (!options.preventStateUpdateListener) {
-        (0, import_event.triggerEventOnUpdate)("stateUpdated", newState.parse(), element, options);
+        (0, import_event.triggerEventOnUpdate)("stateUpdate", newState.parse(), element, options);
       }
     };
     var createStateUpdate = (element, parent, options) => {
@@ -9955,8 +10024,11 @@ var require_create4 = __commonJS({
       return element;
     };
     var redefineElement = (element, parent, key, options) => {
+      var _a;
       const elementWrapper = createBasedOnType(element, parent, key, options);
-      if ((0, import_component.checkIfKeyIsComponent)(key)) {
+      if (options.syntaxv3 || ((_a = element.props) == null ? void 0 : _a.syntaxv3)) {
+        return (0, import_component.createValidDomqlObjectFromSugar)(element, parent, key, options);
+      } else if ((0, import_component.checkIfKeyIsComponent)(key)) {
         return (0, import_component.applyKeyComponentAsExtend)(elementWrapper, parent, key);
       }
       if (checkIfMedia(key)) {
@@ -10574,7 +10646,7 @@ var toCamelCase = (str) => {
     return index === 0 ? word.toLowerCase() : word.toUpperCase();
   }).replaceAll(/\s+/g, "");
 };
-var toTitleCase = (str) => str == null ? void 0 : str.replace(
+var toTitleCase = (str) => str && str.replace(
   /\w\S*/g,
   (txt) => {
     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
@@ -13297,7 +13369,7 @@ var Collection = {
       }
       return data;
     },
-    $setStateCollection: (param, el, state) => {
+    $stateCollection: (param, el, state) => {
       if (!param)
         return;
       if ((0, import_utils8.isString)(param)) {
@@ -13337,7 +13409,7 @@ var Collection = {
       el.content = obj;
       return obj;
     },
-    $setPropsCollection: (param, el, state) => {
+    $propsCollection: (param, el, state) => {
       if (!param)
         return;
       if ((0, import_utils8.isString)(param)) {
@@ -15681,7 +15753,7 @@ var AvatarBundle = {
     }
   },
   childExtend: Avatar,
-  $setPropsCollection: ({ props: props4 }) => props4.options
+  $propsCollection: ({ props: props4 }) => props4.options
 };
 
 // ../uikit/Avatar/AvatarChooser.js
@@ -15722,7 +15794,7 @@ var AvatarChooser = {
       }
     },
     childExtend: { tag: "option" },
-    $setPropsCollection: ({ parent, state }) => {
+    $propsCollection: ({ parent, state }) => {
       if (!parent.props.options)
         return [];
       return parent.props.options.map((v) => {
@@ -15933,7 +16005,7 @@ var Pills = {
       }
     }
   },
-  $setPropsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
+  $propsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
 };
 
 // ../uikit/Tab/index.js
@@ -16570,7 +16642,7 @@ var DropdownList = {
       }
     })
   },
-  $setPropsCollection: ({ props: props4 }) => props4.options
+  $propsCollection: ({ props: props4 }) => props4.options
 };
 var DropdownParent = {
   props: {
@@ -21430,6 +21502,7 @@ var DevFocus = {
     on: {
       init: ({ context }) => {
         const { components } = context;
+        console.log(components);
         if ((0, import_utils21.isObject)(components)) {
           const { Content, ...rest } = components;
           for (const key in rest) {
@@ -21620,7 +21693,7 @@ var Notifications = {
     }),
     on: { click: (e, el) => el.setProps({ animation: "fadeOutDown" }) }
   },
-  $setStateCollection: ({ state }) => state.notifications
+  $stateCollection: ({ state }) => state.notifications
 };
 var Sync = {
   notifications: Notifications,
@@ -21683,8 +21756,8 @@ var defaultDefine = {
   },
   $collection: Collection.define.$collection,
   $setCollection: Collection.define.$setCollection,
-  $setStateCollection: Collection.define.$setStateCollection,
-  $setPropsCollection: Collection.define.$setPropsCollection
+  $stateCollection: Collection.define.$stateCollection,
+  $propsCollection: Collection.define.$propsCollection
 };
 
 // src/options.js
@@ -22316,6 +22389,7 @@ var createDomqlElement = (App, options) => {
       designSystem,
       snippets,
       functions: options.functions,
+      files: options.files,
       utils: snippets,
       define,
       registry,

package/dist/cjs/createDomql.js

@@ -65,6 +65,7 @@ const createDomqlElement = (App, options) => {
       designSystem,
       snippets,
       functions: options.functions,
+      files: options.files,
       utils: snippets,
       define,
       registry,

package/dist/cjs/define.js

@@ -40,6 +40,6 @@ const defaultDefine = {
   },
   $collection: import_uikit.Collection.define.$collection,
   $setCollection: import_uikit.Collection.define.$setCollection,
-  $setStateCollection: import_uikit.Collection.define.$setStateCollection,
-  $setPropsCollection: import_uikit.Collection.define.$setPropsCollection
+  $stateCollection: import_uikit.Collection.define.$stateCollection,
+  $propsCollection: import_uikit.Collection.define.$propsCollection
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.272",
+  "version": "2.11.276",
   "license": "MIT",
-  "gitHead": "d9b2868d7416869c993f7847bcac544d879336cc",
+  "gitHead": "ce33b49ad632d606b7304fbda48bade4aa368667",
   "files": [
     "src",
     "dist"

package/src/createDomql.js

@@ -41,6 +41,7 @@ export const createDomqlElement = (App, options) => {
       designSystem,
       snippets,
       functions: options.functions,
+      files: options.files,
       utils: snippets,
       define,
       registry,

package/src/define.js

@@ -24,6 +24,6 @@ export const defaultDefine = {
 
   $collection: Collection.define.$collection,
   $setCollection: Collection.define.$setCollection,
-  $setStateCollection: Collection.define.$setStateCollection,
-  $setPropsCollection: Collection.define.$setPropsCollection
+  $stateCollection: Collection.define.$stateCollection,
+  $propsCollection: Collection.define.$propsCollection
 }