smbls 3.6.3 → 3.6.4

package/README.md

@@ -197,4 +197,48 @@ See the [@symbo.ls/cli](../cli/) package for the full command reference.
 
 ## Documentation
 
+## Define System
+
+The define system (`context.define` and `element.define`) maps special keys to handler functions. When a key with a matching define handler appears on an element, `throughInitialDefine` calls the handler instead of treating the key as a child or prop.
+
+### Built-in define handlers (in `defaultDefine`)
+
+| Key | Purpose |
+|-----|---------|
+| `routes` | Route definitions — passed through as-is |
+| `metadata` | SEO metadata — resolves and applies `<title>` and `<meta>` tags via helmet |
+| `$router` | Router content — wraps params in a fragment and calls `el.set()` |
+
+### Collection define handlers (deprecated in v3)
+
+The following collection define handlers existed in v2 but are **deprecated in v3**:
+
+| Key (deprecated) | Data source | v3 replacement |
+|-------------------|-------------|----------------|
+| `$collection` | Direct data array/object | Use `children` + `childExtends` |
+| `$propsCollection` | `element.props` as data source | Use `children: ({ props }) => props.items` |
+| `$stateCollection` | `element.state` as data source | Use `children: ({ state }) => state.items` |
+| `$setCollection` | Uses `set()` to update content | Use `content` or `children` |
+
+Some older projects still use these handlers via project-level `context.define`. The framework's propertization layer (`@domql/utils/props.js`) is define-aware to avoid moving these keys into `props` when define handlers are present.
+
+> **Lesson learned:** The `$` prefix overlaps between css-in-props selectors and define handlers. The propertization in `props.js` checks for define handlers before applying `CSS_SELECTOR_PREFIXES` to prevent define keys from being swallowed into props. This matters for backwards compatibility with v2 projects that still use `$propsCollection` etc.
+
+## Emotion Integration (`prepare.js`)
+
+`prepareDesignSystem()` calls `initEmotion()` from `@symbo.ls/emotion/initEmotion.js` to initialize the CSS-in-JS engine. This import must be present for Emotion to work.
+
+```javascript
+import { initEmotion } from '@symbo.ls/emotion/initEmotion.js'
+
+export const prepareDesignSystem = (key, context) => {
+  const [scratchDesignSystem, emotion, registry] = initEmotion(key, context)
+  return [scratchDesignSystem, emotion, registry]
+}
+```
+
+> **Lesson learned:** If the `initEmotion` import is missing or broken, no CSS classes are generated and components render unstyled (Bazaar rendering issue).
+
+## Documentation
+
 For full documentation visit [symbols.app/developers](https://symbols.app/developers).

package/dist/cjs/package.json

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

package/dist/cjs/src/define.js

@@ -22,16 +22,6 @@ __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,
   metadata: (param, el, state) => {
@@ -51,120 +41,5 @@ 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.1"}
+{"name":"smbls","version":"3.6.3"}

package/dist/esm/src/define.js

@@ -1,25 +1,4 @@
 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,
   metadata: (param, el, state) => {
@@ -39,121 +18,6 @@ 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_utils16 = __require("@domql/utils");
+  var import_utils14 = __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_utils10 = __require("@domql/utils");
+  var import_utils9 = __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_utils9 = __require("@domql/utils");
+  var import_utils8 = __require("@domql/utils");
 
   // dist/esm/src/utilImports.js
   var utilImports_exports2 = {};
@@ -496,16 +496,6 @@ 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,
     metadata: (param, el, state) => {
@@ -525,121 +515,6 @@ 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;
     }
   };
 
@@ -687,21 +562,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_utils8 = __require("@domql/utils");
+  var import_utils7 = __require("@domql/utils");
   var import_element = __require("@domql/element");
 
   // dist/esm/src/syncExtend.js
-  var import_utils6 = __require("@domql/utils");
+  var import_utils5 = __require("@domql/utils");
   var import_sync = __require("@symbo.ls/sync");
   var initializeExtend = (app, ctx) => {
-    return (0, import_utils6.isObjectLike)(app.extends) ? app.extends : [];
+    return (0, import_utils5.isObjectLike)(app.extends) ? app.extends : [];
   };
   var initializeSync = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const liveSync = (0, import_utils6.isUndefined)(editor.liveSync) ? (0, import_utils6.isDevelopment)() : editor.liveSync;
+    const liveSync = (0, import_utils5.isUndefined)(editor.liveSync) ? (0, import_utils5.isDevelopment)() : editor.liveSync;
     if (liveSync) {
-      if ((0, import_utils6.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
+      if ((0, import_utils5.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
       else if (app.extends) {
         app.extends = [app.extends, import_sync.SyncComponent];
       } else {
@@ -712,9 +587,9 @@ var Smbls = (() => {
   var initializeNotifications = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const verbose = (0, import_utils6.isUndefined)(editor.verbose) ? (0, import_utils6.isDevelopment)() || ctx.verbose : editor.verbose;
+    const verbose = (0, import_utils5.isUndefined)(editor.verbose) ? (0, import_utils5.isDevelopment)() || ctx.verbose : editor.verbose;
     if (verbose) {
-      if ((0, import_utils6.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
+      if ((0, import_utils5.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
       else if (app.extends) {
         app.extends = [app.extends, import_sync.Notifications];
       } else {
@@ -724,7 +599,7 @@ var Smbls = (() => {
   };
 
   // dist/esm/src/prepare.js
-  var import_utils7 = __require("@domql/utils");
+  var import_utils6 = __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"));
@@ -741,7 +616,7 @@ var Smbls = (() => {
     const newObj = {};
     for (const key in uikit) {
       if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-        if ((0, import_utils7.matchesComponentNaming)(key)) {
+        if ((0, import_utils6.matchesComponentNaming)(key)) {
           newObj[`smbls.${key}`] = uikit[key];
         } else {
           newObj[key] = uikit[key];
@@ -796,7 +671,7 @@ var Smbls = (() => {
       if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
         continue;
       }
-      const random = (0, import_utils7.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
+      const random = (0, import_utils6.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
       const url = (0, import_smbls_utils.getCDNUrl)(dependency, version3, cdnProvider) + random;
       try {
         if (cachedDeps[dependency]) return;
@@ -836,7 +711,7 @@ var Smbls = (() => {
       const documentOpts = ctx2.document || document;
       const windowOpts2 = ctx2.window || window;
       if (!windowOpts2.packages[key]) {
-        const random = (0, import_utils7.isDevelopment)() ? `?${Math.random()}` : "";
+        const random = (0, import_utils6.isDevelopment)() ? `?${Math.random()}` : "";
         if (dependenciesOnDemand && dependenciesOnDemand[key]) {
           const version3 = dependenciesOnDemand[key];
           const url = (0, import_smbls_utils.getCDNUrl)(key, version3, provider) + random;
@@ -878,7 +753,7 @@ var Smbls = (() => {
       return await windowOpts2.require(key, provider);
     };
     if (windowOpts.packages) {
-      windowOpts.packages = (0, import_utils7.merge)(windowOpts.packages, packages);
+      windowOpts.packages = (0, import_utils6.merge)(windowOpts.packages, packages);
     } else {
       windowOpts.packages = packages;
     }
@@ -898,13 +773,13 @@ var Smbls = (() => {
   var prepareState = (app, context) => {
     const state = {};
     if (context.state) utilImports_exports2.deepMerge(state, context.state);
-    if (app && app.state) (0, import_utils7.deepMerge)(state, app.state);
+    if (app && app.state) (0, import_utils6.deepMerge)(state, app.state);
     state.isRootState = true;
-    return (0, import_utils7.deepClone)(state);
+    return (0, import_utils6.deepClone)(state);
   };
   var preparePages = (app, context) => {
-    if ((0, import_utils7.isObject)(app.routes) && (0, import_utils7.isObject)(context.pages)) {
-      (0, import_utils7.merge)(app.routes, context.pages);
+    if ((0, import_utils6.isObject)(app.routes) && (0, import_utils6.isObject)(context.pages)) {
+      (0, import_utils6.merge)(app.routes, context.pages);
     }
     const pages = app.routes || context.pages || {};
     for (const v in pages) {
@@ -921,16 +796,16 @@ var Smbls = (() => {
       const sharedLib = sharedLibraries[i];
       if (context.type === "template") {
         overwriteShallow(context.designSystem, sharedLib.designSystem);
-        (0, import_utils7.deepMerge)(context, sharedLib, ["designSystem"], 1);
+        (0, import_utils6.deepMerge)(context, sharedLib, ["designSystem"], 1);
       } else {
-        (0, import_utils7.deepMerge)(context, sharedLib, [], 1);
+        (0, import_utils6.deepMerge)(context, sharedLib, [], 1);
       }
     }
   };
 
   // dist/esm/src/createDomql.js
   var prepareContext = async (app, context = {}) => {
-    const key = context.key = context.key || ((0, import_utils8.isString)(app) ? app : "smblsapp");
+    const key = context.key = context.key || ((0, import_utils7.isString)(app) ? app : "smblsapp");
     context.define = context.define || defaultDefine;
     context.cssPropsRegistry = import_css_in_props.CSS_PROPS_REGISTRY;
     context.window = prepareWindow(context);
@@ -960,14 +835,14 @@ var Smbls = (() => {
     return context;
   };
   var createDomqlElement = async (app, ctx) => {
-    if (!(0, import_utils8.isObject)(ctx)) ctx = {};
-    if ((0, import_utils8.isNode)(app)) {
+    if (!(0, import_utils7.isObject)(ctx)) ctx = {};
+    if ((0, import_utils7.isNode)(app)) {
       app = {};
       ctx.parent = app;
-    } else if ((0, import_utils8.isString)(app)) {
+    } else if ((0, import_utils7.isString)(app)) {
       app = {};
       ctx.key = app;
-    } else if (!(0, import_utils8.isObject)(app)) {
+    } else if (!(0, import_utils7.isObject)(app)) {
       app = {};
     }
     await prepareContext(app, ctx);
@@ -1000,9 +875,9 @@ var Smbls = (() => {
   };
 
   // dist/esm/src/index.js
-  var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils9.deepMerge)(
+  var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils8.deepMerge)(
     options,
-    (0, import_utils9.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON2 || {}
+    (0, import_utils8.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON2 || {}
   );
   var create = (App, options = options_default, optionsExternalFile) => {
     const redefinedOptions = {
@@ -1051,10 +926,10 @@ var Smbls = (() => {
   var createSkeleton = (App = {}, options = options_default, optionsExternalFile) => {
     return create(
       {
-        deps: { isUndefined: import_utils9.isUndefined },
+        deps: { isUndefined: import_utils8.isUndefined },
         ...App
       },
-      (0, import_utils9.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+      (0, import_utils8.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
       optionsExternalFile
     );
   };
@@ -1068,15 +943,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_utils10.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS2);
+    else context.router = (0, import_utils9.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS2);
     const routerOptions = context.router;
     const onRouterRenderDefault = async (el, s) => {
-      if (!import_utils10.window.location) return;
-      const { pathname, search, hash } = import_utils10.window.location;
+      if (!import_utils9.window.location) return;
+      const { pathname, search, hash } = import_utils9.window.location;
       const url = pathname + search + hash;
       if (el.routes) await (0, import_router4.router)(url, el, {}, { initialRender: true });
     };
-    const hasRenderRouter = element.on && !(0, import_utils10.isUndefined)(element.on.renderRouter) || !(0, import_utils10.isUndefined)(element.onRenderRouter);
+    const hasRenderRouter = element.on && !(0, import_utils9.isUndefined)(element.on.renderRouter) || !(0, import_utils9.isUndefined)(element.onRenderRouter);
     if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
       if (element.on) {
         element.on.renderRouter = onRouterRenderDefault;
@@ -1096,8 +971,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_utils10.window.onpopstate = async (e) => {
-      const { pathname, search, hash } = import_utils10.window.location;
+    import_utils9.window.onpopstate = async (e) => {
+      const { pathname, search, hash } = import_utils9.window.location;
       const url = pathname + search + hash;
       await element.call(
         "router",
@@ -1111,7 +986,7 @@ var Smbls = (() => {
   var injectRouterInLinkComponent2 = (context, routerOptions) => {
     const { components } = context;
     if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-      return (0, import_utils10.deepMerge)(
+      return (0, import_utils9.deepMerge)(
         components["Link"] || components["smbls.Link"],
         components["RouterLink"] || components["smbls.RouterLink"]
       );
@@ -1119,7 +994,7 @@ var Smbls = (() => {
   };
 
   // src/fetchOnCreate.js
-  var import_utils11 = __require("@domql/utils");
+  var import_utils10 = __require("@domql/utils");
   var import_fetch2 = __require("@symbo.ls/fetch");
   var fetchSync2 = async (key, options) => {
     if (key && options.editor) {
@@ -1136,10 +1011,10 @@ var Smbls = (() => {
         if (options.editor.async) {
           (0, import_fetch2.fetchProjectAsync)(key, options, callback || ((data) => {
             const designSystem = data.designSystem;
-            if ((0, import_utils11.isObject)(designSystem)) {
+            if ((0, import_utils10.isObject)(designSystem)) {
               options.utils.init(designSystem);
             }
-            if ((0, import_utils11.isObject)(data.state)) {
+            if ((0, import_utils10.isObject)(data.state)) {
               app.state.set(data.state);
             }
           }));
@@ -1152,16 +1027,6 @@ 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,
     metadata: (param, el, state) => {
@@ -1181,121 +1046,6 @@ 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;
     }
   };
 
@@ -1343,21 +1093,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_utils15 = __require("@domql/utils");
+  var import_utils13 = __require("@domql/utils");
   var import_element2 = __require("@domql/element");
 
   // src/syncExtend.js
-  var import_utils13 = __require("@domql/utils");
+  var import_utils11 = __require("@domql/utils");
   var import_sync2 = __require("@symbo.ls/sync");
   var initializeExtend2 = (app, ctx) => {
-    return (0, import_utils13.isObjectLike)(app.extends) ? app.extends : [];
+    return (0, import_utils11.isObjectLike)(app.extends) ? app.extends : [];
   };
   var initializeSync2 = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const liveSync = (0, import_utils13.isUndefined)(editor.liveSync) ? (0, import_utils13.isDevelopment)() : editor.liveSync;
+    const liveSync = (0, import_utils11.isUndefined)(editor.liveSync) ? (0, import_utils11.isDevelopment)() : editor.liveSync;
     if (liveSync) {
-      if ((0, import_utils13.isArray)(app.extends)) app.extends.push(import_sync2.SyncComponent);
+      if ((0, import_utils11.isArray)(app.extends)) app.extends.push(import_sync2.SyncComponent);
       else if (app.extends) {
         app.extends = [app.extends, import_sync2.SyncComponent];
       } else {
@@ -1368,9 +1118,9 @@ var Smbls = (() => {
   var initializeNotifications2 = (app, ctx) => {
     const { editor } = ctx;
     if (!editor) return;
-    const verbose = (0, import_utils13.isUndefined)(editor.verbose) ? (0, import_utils13.isDevelopment)() || ctx.verbose : editor.verbose;
+    const verbose = (0, import_utils11.isUndefined)(editor.verbose) ? (0, import_utils11.isDevelopment)() || ctx.verbose : editor.verbose;
     if (verbose) {
-      if ((0, import_utils13.isArray)(app.extends)) app.extends.push(import_sync2.Notifications);
+      if ((0, import_utils11.isArray)(app.extends)) app.extends.push(import_sync2.Notifications);
       else if (app.extends) {
         app.extends = [app.extends, import_sync2.Notifications];
       } else {
@@ -1380,7 +1130,7 @@ var Smbls = (() => {
   };
 
   // src/prepare.js
-  var import_utils14 = __require("@domql/utils");
+  var import_utils12 = __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);
@@ -1397,7 +1147,7 @@ var Smbls = (() => {
     const newObj = {};
     for (const key in uikit3) {
       if (Object.prototype.hasOwnProperty.call(uikit3, key)) {
-        if ((0, import_utils14.matchesComponentNaming)(key)) {
+        if ((0, import_utils12.matchesComponentNaming)(key)) {
           newObj[`smbls.${key}`] = uikit3[key];
         } else {
           newObj[key] = uikit3[key];
@@ -1452,7 +1202,7 @@ var Smbls = (() => {
       if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
         continue;
       }
-      const random = (0, import_utils14.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
+      const random = (0, import_utils12.isDevelopment)() && preventCaching ? `?${Math.random()}` : "";
       const url = (0, import_smbls_utils2.getCDNUrl)(dependency, version3, cdnProvider) + random;
       try {
         if (cachedDeps2[dependency]) return;
@@ -1492,7 +1242,7 @@ var Smbls = (() => {
       const documentOpts = ctx2.document || document;
       const windowOpts2 = ctx2.window || window;
       if (!windowOpts2.packages[key]) {
-        const random = (0, import_utils14.isDevelopment)() ? `?${Math.random()}` : "";
+        const random = (0, import_utils12.isDevelopment)() ? `?${Math.random()}` : "";
         if (dependenciesOnDemand && dependenciesOnDemand[key]) {
           const version3 = dependenciesOnDemand[key];
           const url = (0, import_smbls_utils2.getCDNUrl)(key, version3, provider) + random;
@@ -1534,7 +1284,7 @@ var Smbls = (() => {
       return await windowOpts2.require(key, provider);
     };
     if (windowOpts.packages) {
-      windowOpts.packages = (0, import_utils14.merge)(windowOpts.packages, packages);
+      windowOpts.packages = (0, import_utils12.merge)(windowOpts.packages, packages);
     } else {
       windowOpts.packages = packages;
     }
@@ -1554,13 +1304,13 @@ var Smbls = (() => {
   var prepareState2 = (app, context) => {
     const state = {};
     if (context.state) utilImports_exports.deepMerge(state, context.state);
-    if (app && app.state) (0, import_utils14.deepMerge)(state, app.state);
+    if (app && app.state) (0, import_utils12.deepMerge)(state, app.state);
     state.isRootState = true;
-    return (0, import_utils14.deepClone)(state);
+    return (0, import_utils12.deepClone)(state);
   };
   var preparePages2 = (app, context) => {
-    if ((0, import_utils14.isObject)(app.routes) && (0, import_utils14.isObject)(context.pages)) {
-      (0, import_utils14.merge)(app.routes, context.pages);
+    if ((0, import_utils12.isObject)(app.routes) && (0, import_utils12.isObject)(context.pages)) {
+      (0, import_utils12.merge)(app.routes, context.pages);
     }
     const pages = app.routes || context.pages || {};
     for (const v in pages) {
@@ -1577,16 +1327,16 @@ var Smbls = (() => {
       const sharedLib = sharedLibraries[i];
       if (context.type === "template") {
         overwriteShallow(context.designSystem, sharedLib.designSystem);
-        (0, import_utils14.deepMerge)(context, sharedLib, ["designSystem"], 1);
+        (0, import_utils12.deepMerge)(context, sharedLib, ["designSystem"], 1);
       } else {
-        (0, import_utils14.deepMerge)(context, sharedLib, [], 1);
+        (0, import_utils12.deepMerge)(context, sharedLib, [], 1);
       }
     }
   };
 
   // src/createDomql.js
   var prepareContext2 = async (app, context = {}) => {
-    const key = context.key = context.key || ((0, import_utils15.isString)(app) ? app : "smblsapp");
+    const key = context.key = context.key || ((0, import_utils13.isString)(app) ? app : "smblsapp");
     context.define = context.define || defaultDefine2;
     context.cssPropsRegistry = import_css_in_props2.CSS_PROPS_REGISTRY;
     context.window = prepareWindow2(context);
@@ -1616,14 +1366,14 @@ var Smbls = (() => {
     return context;
   };
   var createDomqlElement2 = async (app, ctx) => {
-    if (!(0, import_utils15.isObject)(ctx)) ctx = {};
-    if ((0, import_utils15.isNode)(app)) {
+    if (!(0, import_utils13.isObject)(ctx)) ctx = {};
+    if ((0, import_utils13.isNode)(app)) {
       app = {};
       ctx.parent = app;
-    } else if ((0, import_utils15.isString)(app)) {
+    } else if ((0, import_utils13.isString)(app)) {
       app = {};
       ctx.key = app;
-    } else if (!(0, import_utils15.isObject)(app)) {
+    } else if (!(0, import_utils13.isObject)(app)) {
       app = {};
     }
     await prepareContext2(app, ctx);
@@ -1656,9 +1406,9 @@ var Smbls = (() => {
   };
 
   // src/index.js
-  var mergeWithLocalFile4 = (options, optionsExternalFile) => (0, import_utils16.deepMerge)(
+  var mergeWithLocalFile4 = (options, optionsExternalFile) => (0, import_utils14.deepMerge)(
     options,
-    (0, import_utils16.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
+    (0, import_utils14.isObject)(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
   );
   var create2 = (App, options = options_default2, optionsExternalFile) => {
     const redefinedOptions = {
@@ -1707,10 +1457,10 @@ var Smbls = (() => {
   var createSkeleton2 = (App = {}, options = options_default2, optionsExternalFile) => {
     return create2(
       {
-        deps: { isUndefined: import_utils16.isUndefined },
+        deps: { isUndefined: import_utils14.isUndefined },
         ...App
       },
-      (0, import_utils16.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+      (0, import_utils14.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
       optionsExternalFile
     );
   };

package/package.json

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

package/src/define.js

@@ -1,28 +1,6 @@
 '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,
@@ -49,130 +27,5 @@ 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
   }
 }