@symbo.ls/create 2.11.274 → 2.11.279

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;
     };
@@ -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;
@@ -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);
       }
@@ -9748,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) => {
@@ -9956,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)) {
@@ -12324,8 +12395,8 @@ var Block = {
         return;
       const [marginInlineStart, marginInlineEnd] = props4.marginInline.split(" ");
       return {
-        ...deps.getSpacingByKey("marginInlineStart", marginInlineStart),
-        ...deps.getSpacingByKey("marginInlineEnd", marginInlineEnd || marginInlineStart)
+        ...deps.transformSize("marginInlineStart", marginInlineStart),
+        ...deps.transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
       };
     },
     marginBlock: ({ props: props4, deps }) => {
@@ -12333,8 +12404,8 @@ var Block = {
         return;
       const [marginBlockStart, marginBlockEnd] = props4.marginBlock.split(" ");
       return {
-        ...deps.getSpacingByKey("marginBlockStart", marginBlockStart),
-        ...deps.getSpacingByKey("marginBlockEnd", marginBlockEnd || marginBlockStart)
+        ...deps.transformSize("marginBlockStart", marginBlockStart),
+        ...deps.transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
       };
     },
     marginInlineStart: ({ props: props4, deps }) => deps.transformSizeRatio("marginInlineStart", props4),
@@ -13298,7 +13369,7 @@ var Collection = {
       }
       return data;
     },
-    $setStateCollection: (param, el, state) => {
+    $stateCollection: (param, el, state) => {
       if (!param)
         return;
       if ((0, import_utils8.isString)(param)) {
@@ -13338,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)) {
@@ -15682,7 +15753,7 @@ var AvatarBundle = {
     }
   },
   childExtend: Avatar,
-  $setPropsCollection: ({ props: props4 }) => props4.options
+  $propsCollection: ({ props: props4 }) => props4.options
 };
 
 // ../uikit/Avatar/AvatarChooser.js
@@ -15723,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) => {
@@ -15934,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
@@ -16571,7 +16642,7 @@ var DropdownList = {
       }
     })
   },
-  $setPropsCollection: ({ props: props4 }) => props4.options
+  $propsCollection: ({ props: props4 }) => props4.options
 };
 var DropdownParent = {
   props: {
@@ -17020,13 +17091,11 @@ var UploadIcon = {
     padding: "B B2"
   },
   Input: {
-    props: {
-      type: "file",
-      position: "absolute",
-      inset: "0 0 0 0",
-      opacity: "0",
-      visibility: "hidden"
-    }
+    type: "file",
+    position: "absolute",
+    inset: "0 0 0 0",
+    opacity: "0",
+    visibility: "hidden"
   },
   Icon: {
     props: {
@@ -21431,7 +21500,6 @@ 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) {
@@ -21622,7 +21690,7 @@ var Notifications = {
     }),
     on: { click: (e, el) => el.setProps({ animation: "fadeOutDown" }) }
   },
-  $setStateCollection: ({ state }) => state.notifications
+  $stateCollection: ({ state }) => state.notifications
 };
 var Sync = {
   notifications: Notifications,
@@ -21685,8 +21753,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
@@ -22335,10 +22403,10 @@ var createDomqlElement = (App, options) => {
 
 // src/index.js
 var SYMBOLS_KEY2 = process.env.SYMBOLS_KEY;
-var mergeWithLocalFile2 = (options, optionsExternalFile) => {
-  const rcfile = (0, import_utils29.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
-  return (0, import_utils29.deepMerge)(options, rcfile);
-};
+var mergeWithLocalFile2 = (options, optionsExternalFile) => (0, import_utils29.deepMerge)(
+  options,
+  (0, import_utils29.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {}
+);
 var create = (App, options = options_default, optionsExternalFile) => {
   const redefinedOptions = { ...options_default, ...mergeWithLocalFile2(options, optionsExternalFile) };
   const domqlApp = createDomqlElement(App, redefinedOptions);

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/dist/cjs/index.js

@@ -43,10 +43,10 @@ var import_options = __toESM(require("./options"), 1);
 var import_dynamic = __toESM(require("@symbo.ls/init/dynamic.json"), 1);
 var import_createDomql = require("./createDomql");
 const SYMBOLS_KEY = process.env.SYMBOLS_KEY;
-const mergeWithLocalFile = (options, optionsExternalFile) => {
-  const rcfile = (0, import_utils.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic.default || {};
-  return (0, import_utils.deepMerge)(options, rcfile);
-};
+const mergeWithLocalFile = (options, optionsExternalFile) => (0, import_utils.deepMerge)(
+  options,
+  (0, import_utils.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic.default || {}
+);
 const create = (App, options = import_options.default, optionsExternalFile) => {
   const redefinedOptions = { ...import_options.default, ...mergeWithLocalFile(options, optionsExternalFile) };
   const domqlApp = (0, import_createDomql.createDomqlElement)(App, redefinedOptions);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.274",
+  "version": "2.11.279",
   "license": "MIT",
-  "gitHead": "6da9add38e678ea82648ee7d5046c83e2007795e",
+  "gitHead": "930c65852b7a939a2c3f1e4a6401ddf90919b33d",
   "files": [
     "src",
     "dist"

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
 }

package/src/index.js

@@ -14,10 +14,10 @@ import { createDomqlElement } from './createDomql'
 
 const SYMBOLS_KEY = process.env.SYMBOLS_KEY
 
-const mergeWithLocalFile = (options, optionsExternalFile) => {
-  const rcfile = isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
-  return deepMerge(options, rcfile)
-}
+const mergeWithLocalFile = (options, optionsExternalFile) => deepMerge(
+  options,
+  isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
+)
 
 export const create = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
   const redefinedOptions = { ...DEFAULT_CREATE_OPTIONS, ...mergeWithLocalFile(options, optionsExternalFile) }