smbls 3.6.1 → 3.6.3

package/dist/cjs/package.json

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

package/dist/cjs/src/define.js

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

package/dist/esm/package.json

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

package/dist/esm/src/define.js

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

package/dist/iife/index.js

@@ -62,7 +62,7 @@ var Smbls = (() => {
   __reExport(index_exports, __require("@symbo.ls/smbls-utils"));
 
   // src/index.js
-  var import_utils14 = __require("@domql/utils");
+  var import_utils16 = __require("@domql/utils");
 
   // src/utilImports.js
   var utilImports_exports = {};
@@ -217,7 +217,7 @@ var Smbls = (() => {
   __reExport(utilImports_exports, __require("@domql/router"));
 
   // src/router.js
-  var import_utils9 = __require("@domql/utils");
+  var import_utils10 = __require("@domql/utils");
   var import_router4 = __require("@domql/router");
 
   // dist/esm/index.js
@@ -247,7 +247,7 @@ var Smbls = (() => {
   __reExport(esm_exports, __require("@symbo.ls/smbls-utils"));
 
   // dist/esm/src/index.js
-  var import_utils8 = __require("@domql/utils");
+  var import_utils9 = __require("@domql/utils");
 
   // dist/esm/src/utilImports.js
   var utilImports_exports2 = {};
@@ -496,9 +496,18 @@ var Smbls = (() => {
 
   // dist/esm/src/define.js
   var import_helmet = __require("@symbo.ls/helmet");
+  var import_utils5 = __require("@domql/utils");
+  var processCollectionParam = (param, state) => {
+    if ((0, import_utils5.isString)(param)) {
+      if (param === "state") return state.parse();
+      return (0, import_utils5.getChildStateInKey)(param, state);
+    }
+    if ((0, import_utils5.isState)(param)) return param.parse();
+    if ((0, import_utils5.isNot)(param)("array", "object")) return null;
+    return (0, import_utils5.deepClone)(param);
+  };
   var defaultDefine = {
     routes: (param) => param,
-    // deps: (param, el) => param || el.parent.deps,
     metadata: (param, el, state) => {
       if (!param) return;
       const doc = el.context?.document || typeof document !== "undefined" && document;
@@ -516,6 +525,121 @@ var Smbls = (() => {
         window.requestAnimationFrame(set5);
       } else await set5();
       return obj;
+    },
+    $collection: async (param, el, state) => {
+      const { __ref: ref } = el;
+      const {
+        children: childrenProps,
+        childrenAs,
+        childExtends
+      } = el.props || {};
+      const children = childrenProps && await (0, import_utils5.exec)(childrenProps, el, state);
+      const childrenAsDefault = childrenAs || "props";
+      if (children) {
+        if ((0, import_utils5.isObject)(children)) {
+          param = (0, import_utils5.deepClone)(children);
+          param = Object.keys(param).map((v) => {
+            const val = param[v];
+            return (0, import_utils5.isObjectLike)(val) ? { ...val, extends: v } : { extends: v, value: val };
+          });
+        } else if ((0, import_utils5.isArray)(children)) {
+          param = (0, import_utils5.deepClone)(children);
+          if (childrenAsDefault && childrenAsDefault !== "element") {
+            param = param.map((v) => ({
+              ...childExtends && { extends: childExtends },
+              [childrenAsDefault]: (0, import_utils5.isObjectLike)(v) ? v : childrenAsDefault === "state" ? { value: v } : { text: v }
+            }));
+          }
+        } else if ((0, import_utils5.isString)(children) || (0, import_utils5.isNumber)(children)) {
+          el.removeContent();
+          el.content = { text: param };
+          return;
+        }
+      }
+      if (!param) return;
+      param = processCollectionParam(param, state);
+      if (!param) return;
+      if (ref.__collectionCache) {
+        const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache);
+        if (equals) {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+        ref.__collectionCache = (0, import_utils5.deepClone)(param);
+        delete ref.__noCollectionDifference;
+      } else {
+        ref.__collectionCache = (0, import_utils5.deepClone)(param);
+      }
+      const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
+      for (const key in param) {
+        const value = param[key];
+        if (value) obj[key] = (0, import_utils5.isObjectLike)(value) ? value : { value };
+      }
+      el.removeContent();
+      el.content = obj;
+    },
+    $setCollection: async (param, el, state) => {
+      if (!param) return;
+      param = processCollectionParam(param, state);
+      if (!param) return;
+      const data = ((0, import_utils5.isArray)(param) ? param : (0, import_utils5.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils5.isObjectLike)(item) ? { value: item } : item);
+      if (data.length) {
+        const t = setTimeout(() => {
+          el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
+          clearTimeout(t);
+        });
+      }
+      return data;
+    },
+    $stateCollection: async (param, el, state) => {
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs) return;
+      param = processCollectionParam(param, state);
+      if (!param) return;
+      const { __ref: ref } = el;
+      if (ref.__stateCollectionCache) {
+        const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache);
+        if (equals) {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+        ref.__stateCollectionCache = (0, import_utils5.deepClone)(param);
+        delete ref.__noCollectionDifference;
+      } else {
+        ref.__stateCollectionCache = (0, import_utils5.deepClone)(param);
+      }
+      const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
+      for (const key in param) {
+        const value = param[key];
+        if (value) obj[key] = { state: (0, import_utils5.isObjectLike)(value) ? value : { value } };
+      }
+      el.removeContent();
+      el.content = obj;
+    },
+    $propsCollection: async (param, el, state) => {
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs) return;
+      param = processCollectionParam(param, state);
+      if (!param) return;
+      const { __ref: ref } = el;
+      if (ref.__propsCollectionCache) {
+        const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache);
+        if (equals) {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+        ref.__propsCollectionCache = (0, import_utils5.deepClone)(param);
+        delete ref.__noCollectionDifference;
+      } else {
+        ref.__propsCollectionCache = (0, import_utils5.deepClone)(param);
+      }
+      const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
+      for (const key in param) {
+        const value = param[key];
+        if (value) obj[key] = { props: (0, import_utils5.isObjectLike)(value) ? value : { value } };
+      }
+      el.removeContent();
+      el.content = obj;
     }
   };
 
@@ -563,21 +687,21 @@ var Smbls = (() => {
   var import_domql = __toESM(__require("domql"));
   var uikit2 = __toESM(__require("@symbo.ls/uikit"));
   var import_css_in_props = __require("css-in-props");
-  var import_utils7 = __require("@domql/utils");
+  var import_utils8 = __require("@domql/utils");
   var import_element = __require("@domql/element");
 
   // dist/esm/src/syncExtend.js
-  var import_utils5 = __require("@domql/utils");
+  var import_utils6 = __require("@domql/utils");
   var import_sync = __require("@symbo.ls/sync");
   var initializeExtend = (app, ctx) => {
-    return (0, import_utils5.isObjectLike)(app.extends) ? app.extends : [];
+    return (0, import_utils6.isObjectLike)(app.extends) ? app.extends : [];
   };
   var initializeSync = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const liveSync = (0, import_utils5.isUndefined)(editor.liveSync) ? (0, import_utils5.isDevelopment)() : editor.liveSync;
+    const liveSync = (0, import_utils6.isUndefined)(editor.liveSync) ? (0, import_utils6.isDevelopment)() : editor.liveSync;
     if (liveSync) {
-      if ((0, import_utils5.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
+      if ((0, import_utils6.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
       else if (app.extends) {
         app.extends = [app.extends, import_sync.SyncComponent];
       } else {
@@ -588,9 +712,9 @@ var Smbls = (() => {
   var initializeNotifications = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const verbose = (0, import_utils5.isUndefined)(editor.verbose) ? (0, import_utils5.isDevelopment)() || ctx.verbose : editor.verbose;
+    const verbose = (0, import_utils6.isUndefined)(editor.verbose) ? (0, import_utils6.isDevelopment)() || ctx.verbose : editor.verbose;
     if (verbose) {
-      if ((0, import_utils5.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
+      if ((0, import_utils6.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
       else if (app.extends) {
         app.extends = [app.extends, import_sync.Notifications];
       } else {
@@ -600,7 +724,7 @@ var Smbls = (() => {
   };
 
   // dist/esm/src/prepare.js
-  var import_utils6 = __require("@domql/utils");
+  var import_utils7 = __require("@domql/utils");
   var import_initEmotion = __require("@symbo.ls/emotion/initEmotion.js");
   var uikit = __toESM(__require("@symbo.ls/uikit"));
   var routerUtils = __toESM(__require("@domql/router"));
@@ -617,7 +741,7 @@ var Smbls = (() => {
     const newObj = {};
     for (const key in uikit) {
       if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-        if ((0, import_utils6.matchesComponentNaming)(key)) {
+        if ((0, import_utils7.matchesComponentNaming)(key)) {
           newObj[`smbls.${key}`] = uikit[key];
         } else {
           newObj[key] = uikit[key];
@@ -672,7 +796,7 @@ var Smbls = (() => {
       if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
         continue;
       }
-      const random = (0, import_utils6.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
+      const random = (0, import_utils7.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
       const url = (0, import_smbls_utils.getCDNUrl)(dependency, version3, cdnProvider) + random;
       try {
         if (cachedDeps[dependency]) return;
@@ -712,7 +836,7 @@ var Smbls = (() => {
       const documentOpts = ctx2.document || document;
       const windowOpts2 = ctx2.window || window;
       if (!windowOpts2.packages[key]) {
-        const random = (0, import_utils6.isDevelopment)() ? `?${Math.random()}` : "";
+        const random = (0, import_utils7.isDevelopment)() ? `?${Math.random()}` : "";
         if (dependenciesOnDemand && dependenciesOnDemand[key]) {
           const version3 = dependenciesOnDemand[key];
           const url = (0, import_smbls_utils.getCDNUrl)(key, version3, provider) + random;
@@ -754,7 +878,7 @@ var Smbls = (() => {
       return await windowOpts2.require(key, provider);
     };
     if (windowOpts.packages) {
-      windowOpts.packages = (0, import_utils6.merge)(windowOpts.packages, packages);
+      windowOpts.packages = (0, import_utils7.merge)(windowOpts.packages, packages);
     } else {
       windowOpts.packages = packages;
     }
@@ -774,13 +898,13 @@ var Smbls = (() => {
   var prepareState = (app, context) => {
     const state = {};
     if (context.state) utilImports_exports2.deepMerge(state, context.state);
-    if (app && app.state) (0, import_utils6.deepMerge)(state, app.state);
+    if (app && app.state) (0, import_utils7.deepMerge)(state, app.state);
     state.isRootState = true;
-    return (0, import_utils6.deepClone)(state);
+    return (0, import_utils7.deepClone)(state);
   };
   var preparePages = (app, context) => {
-    if ((0, import_utils6.isObject)(app.routes) && (0, import_utils6.isObject)(context.pages)) {
-      (0, import_utils6.merge)(app.routes, context.pages);
+    if ((0, import_utils7.isObject)(app.routes) && (0, import_utils7.isObject)(context.pages)) {
+      (0, import_utils7.merge)(app.routes, context.pages);
     }
     const pages = app.routes || context.pages || {};
     for (const v in pages) {
@@ -797,16 +921,16 @@ var Smbls = (() => {
       const sharedLib = sharedLibraries[i];
       if (context.type === "template") {
         overwriteShallow(context.designSystem, sharedLib.designSystem);
-        (0, import_utils6.deepMerge)(context, sharedLib, ["designSystem"], 1);
+        (0, import_utils7.deepMerge)(context, sharedLib, ["designSystem"], 1);
       } else {
-        (0, import_utils6.deepMerge)(context, sharedLib, [], 1);
+        (0, import_utils7.deepMerge)(context, sharedLib, [], 1);
       }
     }
   };
 
   // dist/esm/src/createDomql.js
   var prepareContext = async (app, context = {}) => {
-    const key = context.key = context.key || ((0, import_utils7.isString)(app) ? app : "smblsapp");
+    const key = context.key = context.key || ((0, import_utils8.isString)(app) ? app : "smblsapp");
     context.define = context.define || defaultDefine;
     context.cssPropsRegistry = import_css_in_props.CSS_PROPS_REGISTRY;
     context.window = prepareWindow(context);
@@ -836,14 +960,14 @@ var Smbls = (() => {
     return context;
   };
   var createDomqlElement = async (app, ctx) => {
-    if (!(0, import_utils7.isObject)(ctx)) ctx = {};
-    if ((0, import_utils7.isNode)(app)) {
+    if (!(0, import_utils8.isObject)(ctx)) ctx = {};
+    if ((0, import_utils8.isNode)(app)) {
       app = {};
       ctx.parent = app;
-    } else if ((0, import_utils7.isString)(app)) {
+    } else if ((0, import_utils8.isString)(app)) {
       app = {};
       ctx.key = app;
-    } else if (!(0, import_utils7.isObject)(app)) {
+    } else if (!(0, import_utils8.isObject)(app)) {
       app = {};
     }
     await prepareContext(app, ctx);
@@ -876,9 +1000,9 @@ var Smbls = (() => {
   };
 
   // dist/esm/src/index.js
-  var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils8.deepMerge)(
+  var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils9.deepMerge)(
     options,
-    (0, import_utils8.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON2 || {}
+    (0, import_utils9.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON2 || {}
   );
   var create = (App, options = options_default, optionsExternalFile) => {
     const redefinedOptions = {
@@ -927,10 +1051,10 @@ var Smbls = (() => {
   var createSkeleton = (App = {}, options = options_default, optionsExternalFile) => {
     return create(
       {
-        deps: { isUndefined: import_utils8.isUndefined },
+        deps: { isUndefined: import_utils9.isUndefined },
         ...App
       },
-      (0, import_utils8.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+      (0, import_utils9.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
       optionsExternalFile
     );
   };
@@ -944,15 +1068,15 @@ var Smbls = (() => {
   var initRouter2 = (element, context) => {
     if (context.router === false) return;
     else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS2;
-    else context.router = (0, import_utils9.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS2);
+    else context.router = (0, import_utils10.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS2);
     const routerOptions = context.router;
     const onRouterRenderDefault = async (el, s) => {
-      if (!import_utils9.window.location) return;
-      const { pathname, search, hash } = import_utils9.window.location;
+      if (!import_utils10.window.location) return;
+      const { pathname, search, hash } = import_utils10.window.location;
       const url = pathname + search + hash;
       if (el.routes) await (0, import_router4.router)(url, el, {}, { initialRender: true });
     };
-    const hasRenderRouter = element.on && !(0, import_utils9.isUndefined)(element.on.renderRouter) || !(0, import_utils9.isUndefined)(element.onRenderRouter);
+    const hasRenderRouter = element.on && !(0, import_utils10.isUndefined)(element.on.renderRouter) || !(0, import_utils10.isUndefined)(element.onRenderRouter);
     if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
       if (element.on) {
         element.on.renderRouter = onRouterRenderDefault;
@@ -972,8 +1096,8 @@ var Smbls = (() => {
     const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS2;
     if (!routerOptions.popState) return;
     const router = context.utils && context.utils.router ? context.utils.router : import_router4.router;
-    import_utils9.window.onpopstate = async (e) => {
-      const { pathname, search, hash } = import_utils9.window.location;
+    import_utils10.window.onpopstate = async (e) => {
+      const { pathname, search, hash } = import_utils10.window.location;
       const url = pathname + search + hash;
       await element.call(
         "router",
@@ -987,7 +1111,7 @@ var Smbls = (() => {
   var injectRouterInLinkComponent2 = (context, routerOptions) => {
     const { components } = context;
     if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-      return (0, import_utils9.deepMerge)(
+      return (0, import_utils10.deepMerge)(
         components["Link"] || components["smbls.Link"],
         components["RouterLink"] || components["smbls.RouterLink"]
       );
@@ -995,7 +1119,7 @@ var Smbls = (() => {
   };
 
   // src/fetchOnCreate.js
-  var import_utils10 = __require("@domql/utils");
+  var import_utils11 = __require("@domql/utils");
   var import_fetch2 = __require("@symbo.ls/fetch");
   var fetchSync2 = async (key, options) => {
     if (key && options.editor) {
@@ -1012,10 +1136,10 @@ var Smbls = (() => {
         if (options.editor.async) {
           (0, import_fetch2.fetchProjectAsync)(key, options, callback || ((data) => {
             const designSystem = data.designSystem;
-            if ((0, import_utils10.isObject)(designSystem)) {
+            if ((0, import_utils11.isObject)(designSystem)) {
               options.utils.init(designSystem);
             }
-            if ((0, import_utils10.isObject)(data.state)) {
+            if ((0, import_utils11.isObject)(data.state)) {
               app.state.set(data.state);
             }
           }));
@@ -1028,9 +1152,18 @@ var Smbls = (() => {
 
   // src/define.js
   var import_helmet2 = __require("@symbo.ls/helmet");
+  var import_utils12 = __require("@domql/utils");
+  var processCollectionParam2 = (param, state) => {
+    if ((0, import_utils12.isString)(param)) {
+      if (param === "state") return state.parse();
+      return (0, import_utils12.getChildStateInKey)(param, state);
+    }
+    if ((0, import_utils12.isState)(param)) return param.parse();
+    if ((0, import_utils12.isNot)(param)("array", "object")) return null;
+    return (0, import_utils12.deepClone)(param);
+  };
   var defaultDefine2 = {
     routes: (param) => param,
-    // deps: (param, el) => param || el.parent.deps,
     metadata: (param, el, state) => {
       if (!param) return;
       const doc = el.context?.document || typeof document !== "undefined" && document;
@@ -1048,6 +1181,121 @@ var Smbls = (() => {
         window.requestAnimationFrame(set5);
       } else await set5();
       return obj;
+    },
+    $collection: async (param, el, state) => {
+      const { __ref: ref } = el;
+      const {
+        children: childrenProps,
+        childrenAs,
+        childExtends
+      } = el.props || {};
+      const children = childrenProps && await (0, import_utils12.exec)(childrenProps, el, state);
+      const childrenAsDefault = childrenAs || "props";
+      if (children) {
+        if ((0, import_utils12.isObject)(children)) {
+          param = (0, import_utils12.deepClone)(children);
+          param = Object.keys(param).map((v) => {
+            const val = param[v];
+            return (0, import_utils12.isObjectLike)(val) ? { ...val, extends: v } : { extends: v, value: val };
+          });
+        } else if ((0, import_utils12.isArray)(children)) {
+          param = (0, import_utils12.deepClone)(children);
+          if (childrenAsDefault && childrenAsDefault !== "element") {
+            param = param.map((v) => ({
+              ...childExtends && { extends: childExtends },
+              [childrenAsDefault]: (0, import_utils12.isObjectLike)(v) ? v : childrenAsDefault === "state" ? { value: v } : { text: v }
+            }));
+          }
+        } else if ((0, import_utils12.isString)(children) || (0, import_utils12.isNumber)(children)) {
+          el.removeContent();
+          el.content = { text: param };
+          return;
+        }
+      }
+      if (!param) return;
+      param = processCollectionParam2(param, state);
+      if (!param) return;
+      if (ref.__collectionCache) {
+        const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache);
+        if (equals) {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+        ref.__collectionCache = (0, import_utils12.deepClone)(param);
+        delete ref.__noCollectionDifference;
+      } else {
+        ref.__collectionCache = (0, import_utils12.deepClone)(param);
+      }
+      const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
+      for (const key in param) {
+        const value = param[key];
+        if (value) obj[key] = (0, import_utils12.isObjectLike)(value) ? value : { value };
+      }
+      el.removeContent();
+      el.content = obj;
+    },
+    $setCollection: async (param, el, state) => {
+      if (!param) return;
+      param = processCollectionParam2(param, state);
+      if (!param) return;
+      const data = ((0, import_utils12.isArray)(param) ? param : (0, import_utils12.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils12.isObjectLike)(item) ? { value: item } : item);
+      if (data.length) {
+        const t = setTimeout(() => {
+          el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
+          clearTimeout(t);
+        });
+      }
+      return data;
+    },
+    $stateCollection: async (param, el, state) => {
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs) return;
+      param = processCollectionParam2(param, state);
+      if (!param) return;
+      const { __ref: ref } = el;
+      if (ref.__stateCollectionCache) {
+        const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache);
+        if (equals) {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+        ref.__stateCollectionCache = (0, import_utils12.deepClone)(param);
+        delete ref.__noCollectionDifference;
+      } else {
+        ref.__stateCollectionCache = (0, import_utils12.deepClone)(param);
+      }
+      const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
+      for (const key in param) {
+        const value = param[key];
+        if (value) obj[key] = { state: (0, import_utils12.isObjectLike)(value) ? value : { value } };
+      }
+      el.removeContent();
+      el.content = obj;
+    },
+    $propsCollection: async (param, el, state) => {
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs) return;
+      param = processCollectionParam2(param, state);
+      if (!param) return;
+      const { __ref: ref } = el;
+      if (ref.__propsCollectionCache) {
+        const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache);
+        if (equals) {
+          ref.__noCollectionDifference = true;
+          return;
+        }
+        ref.__propsCollectionCache = (0, import_utils12.deepClone)(param);
+        delete ref.__noCollectionDifference;
+      } else {
+        ref.__propsCollectionCache = (0, import_utils12.deepClone)(param);
+      }
+      const obj = { tag: "fragment", ignoreChildProps: true, childProps: el.props && el.props.childProps };
+      for (const key in param) {
+        const value = param[key];
+        if (value) obj[key] = { props: (0, import_utils12.isObjectLike)(value) ? value : { value } };
+      }
+      el.removeContent();
+      el.content = obj;
     }
   };
 
@@ -1095,21 +1343,21 @@ var Smbls = (() => {
   var import_domql2 = __toESM(__require("domql"), 1);
   var uikit4 = __toESM(__require("@symbo.ls/uikit"), 1);
   var import_css_in_props2 = __require("css-in-props");
-  var import_utils13 = __require("@domql/utils");
+  var import_utils15 = __require("@domql/utils");
   var import_element2 = __require("@domql/element");
 
   // src/syncExtend.js
-  var import_utils11 = __require("@domql/utils");
+  var import_utils13 = __require("@domql/utils");
   var import_sync2 = __require("@symbo.ls/sync");
   var initializeExtend2 = (app, ctx) => {
-    return (0, import_utils11.isObjectLike)(app.extends) ? app.extends : [];
+    return (0, import_utils13.isObjectLike)(app.extends) ? app.extends : [];
   };
   var initializeSync2 = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const liveSync = (0, import_utils11.isUndefined)(editor.liveSync) ? (0, import_utils11.isDevelopment)() : editor.liveSync;
+    const liveSync = (0, import_utils13.isUndefined)(editor.liveSync) ? (0, import_utils13.isDevelopment)() : editor.liveSync;
     if (liveSync) {
-      if ((0, import_utils11.isArray)(app.extends)) app.extends.push(import_sync2.SyncComponent);
+      if ((0, import_utils13.isArray)(app.extends)) app.extends.push(import_sync2.SyncComponent);
       else if (app.extends) {
         app.extends = [app.extends, import_sync2.SyncComponent];
       } else {
@@ -1120,9 +1368,9 @@ var Smbls = (() => {
   var initializeNotifications2 = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const verbose = (0, import_utils11.isUndefined)(editor.verbose) ? (0, import_utils11.isDevelopment)() || ctx.verbose : editor.verbose;
+    const verbose = (0, import_utils13.isUndefined)(editor.verbose) ? (0, import_utils13.isDevelopment)() || ctx.verbose : editor.verbose;
     if (verbose) {
-      if ((0, import_utils11.isArray)(app.extends)) app.extends.push(import_sync2.Notifications);
+      if ((0, import_utils13.isArray)(app.extends)) app.extends.push(import_sync2.Notifications);
       else if (app.extends) {
         app.extends = [app.extends, import_sync2.Notifications];
       } else {
@@ -1132,7 +1380,7 @@ var Smbls = (() => {
   };
 
   // src/prepare.js
-  var import_utils12 = __require("@domql/utils");
+  var import_utils14 = __require("@domql/utils");
   var import_initEmotion2 = __require("@symbo.ls/emotion/initEmotion.js");
   var uikit3 = __toESM(__require("@symbo.ls/uikit"), 1);
   var routerUtils2 = __toESM(__require("@domql/router"), 1);
@@ -1149,7 +1397,7 @@ var Smbls = (() => {
     const newObj = {};
     for (const key in uikit3) {
       if (Object.prototype.hasOwnProperty.call(uikit3, key)) {
-        if ((0, import_utils12.matchesComponentNaming)(key)) {
+        if ((0, import_utils14.matchesComponentNaming)(key)) {
           newObj[`smbls.${key}`] = uikit3[key];
         } else {
           newObj[key] = uikit3[key];
@@ -1204,7 +1452,7 @@ var Smbls = (() => {
       if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
         continue;
       }
-      const random = (0, import_utils12.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
+      const random = (0, import_utils14.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
       const url = (0, import_smbls_utils2.getCDNUrl)(dependency, version3, cdnProvider) + random;
       try {
         if (cachedDeps2[dependency]) return;
@@ -1244,7 +1492,7 @@ var Smbls = (() => {
       const documentOpts = ctx2.document || document;
       const windowOpts2 = ctx2.window || window;
       if (!windowOpts2.packages[key]) {
-        const random = (0, import_utils12.isDevelopment)() ? `?${Math.random()}` : "";
+        const random = (0, import_utils14.isDevelopment)() ? `?${Math.random()}` : "";
         if (dependenciesOnDemand && dependenciesOnDemand[key]) {
           const version3 = dependenciesOnDemand[key];
           const url = (0, import_smbls_utils2.getCDNUrl)(key, version3, provider) + random;
@@ -1286,7 +1534,7 @@ var Smbls = (() => {
       return await windowOpts2.require(key, provider);
     };
     if (windowOpts.packages) {
-      windowOpts.packages = (0, import_utils12.merge)(windowOpts.packages, packages);
+      windowOpts.packages = (0, import_utils14.merge)(windowOpts.packages, packages);
     } else {
       windowOpts.packages = packages;
     }
@@ -1306,13 +1554,13 @@ var Smbls = (() => {
   var prepareState2 = (app, context) => {
     const state = {};
     if (context.state) utilImports_exports.deepMerge(state, context.state);
-    if (app && app.state) (0, import_utils12.deepMerge)(state, app.state);
+    if (app && app.state) (0, import_utils14.deepMerge)(state, app.state);
     state.isRootState = true;
-    return (0, import_utils12.deepClone)(state);
+    return (0, import_utils14.deepClone)(state);
   };
   var preparePages2 = (app, context) => {
-    if ((0, import_utils12.isObject)(app.routes) && (0, import_utils12.isObject)(context.pages)) {
-      (0, import_utils12.merge)(app.routes, context.pages);
+    if ((0, import_utils14.isObject)(app.routes) && (0, import_utils14.isObject)(context.pages)) {
+      (0, import_utils14.merge)(app.routes, context.pages);
     }
     const pages = app.routes || context.pages || {};
     for (const v in pages) {
@@ -1329,16 +1577,16 @@ var Smbls = (() => {
       const sharedLib = sharedLibraries[i];
       if (context.type === "template") {
         overwriteShallow(context.designSystem, sharedLib.designSystem);
-        (0, import_utils12.deepMerge)(context, sharedLib, ["designSystem"], 1);
+        (0, import_utils14.deepMerge)(context, sharedLib, ["designSystem"], 1);
       } else {
-        (0, import_utils12.deepMerge)(context, sharedLib, [], 1);
+        (0, import_utils14.deepMerge)(context, sharedLib, [], 1);
       }
     }
   };
 
   // src/createDomql.js
   var prepareContext2 = async (app, context = {}) => {
-    const key = context.key = context.key || ((0, import_utils13.isString)(app) ? app : "smblsapp");
+    const key = context.key = context.key || ((0, import_utils15.isString)(app) ? app : "smblsapp");
     context.define = context.define || defaultDefine2;
     context.cssPropsRegistry = import_css_in_props2.CSS_PROPS_REGISTRY;
     context.window = prepareWindow2(context);
@@ -1368,14 +1616,14 @@ var Smbls = (() => {
     return context;
   };
   var createDomqlElement2 = async (app, ctx) => {
-    if (!(0, import_utils13.isObject)(ctx)) ctx = {};
-    if ((0, import_utils13.isNode)(app)) {
+    if (!(0, import_utils15.isObject)(ctx)) ctx = {};
+    if ((0, import_utils15.isNode)(app)) {
       app = {};
       ctx.parent = app;
-    } else if ((0, import_utils13.isString)(app)) {
+    } else if ((0, import_utils15.isString)(app)) {
       app = {};
       ctx.key = app;
-    } else if (!(0, import_utils13.isObject)(app)) {
+    } else if (!(0, import_utils15.isObject)(app)) {
       app = {};
     }
     await prepareContext2(app, ctx);
@@ -1408,9 +1656,9 @@ var Smbls = (() => {
   };
 
   // src/index.js
-  var mergeWithLocalFile4 = (options, optionsExternalFile) => (0, import_utils14.deepMerge)(
+  var mergeWithLocalFile4 = (options, optionsExternalFile) => (0, import_utils16.deepMerge)(
     options,
-    (0, import_utils14.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
+    (0, import_utils16.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
   );
   var create2 = (App, options = options_default2, optionsExternalFile) => {
     const redefinedOptions = {
@@ -1459,10 +1707,10 @@ var Smbls = (() => {
   var createSkeleton2 = (App = {}, options = options_default2, optionsExternalFile) => {
     return create2(
       {
-        deps: { isUndefined: import_utils14.isUndefined },
+        deps: { isUndefined: import_utils16.isUndefined },
         ...App
       },
-      (0, import_utils14.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+      (0, import_utils16.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
       optionsExternalFile
     );
   };

package/package.json

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

package/src/define.js

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