@dooboostore/simple-web-component 1.0.17 → 1.0.18

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -1252,9 +1252,9 @@ var FunctionUtils;
   };
 })(FunctionUtils || (FunctionUtils = {}));
 
-// src/decorators/innerHtml.ts
+// src/decorators/onConnectedInnerHtml.ts
 var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-function innerHtml(arg1, arg2, arg3) {
+function onConnectedInnerHtml(arg1, arg2, arg3) {
   const decorator = (options, target, propertyKey) => {
     const constructor = target.constructor;
     let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
@@ -1271,7 +1271,7 @@ function innerHtml(arg1, arg2, arg3) {
     decorator(arg1 || {}, target, propertyKey);
   };
 }
-var getInnerHtmlMetadataList = (target) => {
+var getOnConnectedInnerHtmlMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
 };
@@ -1408,6 +1408,58 @@ var findAllSetAttributeMetadata = (target) => {
   return result;
 };
 
+// src/decorators/replaceChildren.ts
+var REPLACE_CHILDREN_METADATA_KEY = Symbol("simple-web-component:replace-children");
+function replaceChildren(selector) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, selector);
+  };
+}
+var getReplaceChildrenMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
+};
+var findAllReplaceChildrenMetadata = (target) => {
+  const result = /* @__PURE__ */ new Map();
+  const maps = ReflectUtils.findAllMetadata(REPLACE_CHILDREN_METADATA_KEY, target);
+  maps.forEach((map) => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+
+// src/decorators/appendChild.ts
+var APPEND_CHILD_METADATA_KEY = Symbol("simple-web-component:append-child");
+function appendChild(selector, options = { position: "lastChild" }) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, { propertyKey, selector, options });
+  };
+}
+var findAllAppendChildMetadata = (target) => {
+  const result = /* @__PURE__ */ new Map();
+  const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+  maps.forEach((map) => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+
 // src/utils/Utils.ts
 var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
 var SwcUtils;
@@ -1674,10 +1726,12 @@ var elementDefine = (inConfig) => (constructor) => {
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const setAttrMap = findAllSetAttributeMetadata(constructor);
+  const replaceChildrenMap = findAllReplaceChildrenMetadata(constructor);
+  const appendChildMap = findAllAppendChildMetadata(constructor);
   const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
   const swcOnEvents = DOM_EVENT_NAMES.map((e) => `swc-on-${e}`);
   const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...attrChangeMap.keys(), ...setAttrMap.keys(), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
-  const innerHtmlList = getInnerHtmlMetadataList(constructor) || [];
+  const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
   const NewClass = class extends constructor {
     _executeSwcScript(attrName, hostSet, extraArgs = {}) {
       const script = this.getAttribute(attrName);
@@ -1744,7 +1798,7 @@ var elementDefine = (inConfig) => (constructor) => {
       this._boundListeners = [];
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-constructor", hostSet);
-      if (innerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
+      if (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
@@ -1764,9 +1818,9 @@ var elementDefine = (inConfig) => (constructor) => {
       }
       if (typeof this.initCore === "function")
         this.initCore();
-      if (innerHtmlList.length > 0) {
+      if (connectedInnerHtmlList.length > 0) {
         let sContent = "", lContent = "";
-        for (const meta of innerHtmlList) {
+        for (const meta of connectedInnerHtmlList) {
           const res = await this[meta.propertyKey]();
           if (res !== void 0) {
             if (meta.options.useShadow)
@@ -1810,8 +1864,9 @@ var elementDefine = (inConfig) => (constructor) => {
         }
       };
       DOM_EVENT_NAMES.forEach((type) => {
-        this.addEventListener(type, createDelegationHandler(this));
-        this._boundListeners.push({ target: this, type, handler: createDelegationHandler(this) });
+        const handler = createDelegationHandler(this);
+        this.addEventListener(type, handler);
+        this._boundListeners.push({ target: this, type, handler });
       });
       const hasParentHost = SwcUtils.findAllSwcHosts(this).length > 0;
       if (!hasParentHost) {
@@ -2013,6 +2068,79 @@ var elementDefine = (inConfig) => (constructor) => {
       };
     }
   });
+  replaceChildrenMap.forEach((selector, methodName) => {
+    const original = NewClass.prototype[methodName];
+    if (typeof original === "function") {
+      NewClass.prototype[methodName] = function(...args) {
+        const res = original.apply(this, args);
+        if (res !== void 0) {
+          const conf = getElementConfig(this);
+          const currentWin = conf?.window || window;
+          const currentDoc = currentWin.document;
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            targetEl = this;
+          } else {
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          }
+          if (targetEl) {
+            const nodes = Array.isArray(res) ? res : [res];
+            const normalizedNodes = nodes.map((n) => {
+              if (typeof n === "string") {
+                const t = currentDoc.createElement("template");
+                t.innerHTML = n;
+                return t.content;
+              }
+              return n;
+            });
+            targetEl.replaceChildren(...normalizedNodes);
+          }
+        }
+        return res;
+      };
+    }
+  });
+  appendChildMap.forEach((meta, methodName) => {
+    const { selector, options } = meta;
+    const original = NewClass.prototype[methodName];
+    if (typeof original === "function") {
+      NewClass.prototype[methodName] = function(...args) {
+        const res = original.apply(this, args);
+        if (res !== void 0) {
+          const conf = getElementConfig(this);
+          const currentWin = conf?.window || window;
+          const currentDoc = currentWin.document;
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            targetEl = this;
+          } else {
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          }
+          if (targetEl) {
+            const nodes = Array.isArray(res) ? res : [res];
+            const normalizedNodes = nodes.map((n) => {
+              if (typeof n === "string") {
+                const t = currentDoc.createElement("template");
+                t.innerHTML = n;
+                return t.content;
+              }
+              return n;
+            });
+            const pos = options.position || "lastChild";
+            if (pos === "lastChild")
+              targetEl.append(...normalizedNodes);
+            else if (pos === "firstChild")
+              targetEl.prepend(...normalizedNodes);
+            else if (pos === "nextSibling")
+              targetEl.after(...normalizedNodes);
+            else if (pos === "previousSibling")
+              targetEl.before(...normalizedNodes);
+          }
+        }
+        return res;
+      };
+    }
+  });
   const originalProto = constructor.prototype;
   const newProto = NewClass.prototype;
   Object.getOwnPropertyNames(originalProto).forEach((name) => {
@@ -2084,6 +2212,22 @@ function query(selector, options = {}) {
         }
         return (this.shadowRoot || this).querySelector(selector);
       },
+      set(nv) {
+        if (nv === null || nv === void 0) {
+          const r = options.root || "auto";
+          let targetEl = null;
+          if (r === "shadow")
+            targetEl = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+          else if (r === "light")
+            targetEl = this.querySelector(selector);
+          else if (r === "all")
+            targetEl = this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+          else
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          if (targetEl)
+            targetEl.remove();
+        }
+      },
       enumerable: true,
       configurable: true
     });
@@ -2139,6 +2283,24 @@ function queryAll(selector, options = {}) {
         const root = this.shadowRoot || this;
         return root.querySelectorAll(selector);
       },
+      set(nv) {
+        if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
+          const r = options.root || "auto";
+          let targets = [];
+          if (r === "shadow")
+            targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          else if (r === "light")
+            targets = Array.from(this.querySelectorAll(selector));
+          else if (r === "all") {
+            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+            const lNodes = Array.from(this.querySelectorAll(selector));
+            targets = [...sNodes, ...lNodes];
+          } else {
+            targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+          }
+          targets.forEach((t) => t.remove());
+        }
+      },
       enumerable: true,
       configurable: true
     });
@@ -10358,6 +10520,7 @@ SwcApp = __decorate63([
 ], SwcApp);
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
+  APPEND_CHILD_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
   ELEMENT_CONFIG_KEY,
   EMIT_CUSTOM_EVENT_METADATA_KEY,
@@ -10373,6 +10536,7 @@ export {
   ON_BEFORE_DISCONNECTED_METADATA_KEY,
   QUERY_ALL_METADATA_KEY,
   QUERY_METADATA_KEY,
+  REPLACE_CHILDREN_METADATA_KEY,
   SET_ATTRIBUTE_METADATA_KEY,
   SWC_NOT_FOUND,
   SwcApp,
@@ -10446,21 +10610,25 @@ export {
   SwcUtils,
   SwcWhen,
   addEventListener,
+  appendChild,
   changedAttribute,
   elementDefine,
   emitCustomEvent,
+  findAllAppendChildMetadata,
   findAllAttributeChangedMetadata,
   findAllLifecycleMetadata,
+  findAllReplaceChildrenMetadata,
   findAllSetAttributeMetadata,
   getAddEventListenerMetadata,
   getChangedAttributeMetadata,
   getElementConfig,
   getEmitCustomEventMetadataList,
-  getInnerHtmlMetadataList,
+  getOnConnectedInnerHtmlMetadata,
   getQueryAllMetadata,
   getQueryMetadata,
+  getReplaceChildrenMetadata,
   getSetAttributeMetadata,
-  innerHtml,
+  onConnectedInnerHtml as innerHtml,
   onAddEventListener,
   onAdopted,
   onAfterAdopted,
@@ -10470,9 +10638,11 @@ export {
   onBeforeConnected,
   onBeforeDisconnected,
   onConnected,
+  onConnectedInnerHtml,
   onDisconnected,
   query,
   queryAll,
+  replaceChildren,
   setAttribute
 };
 /*! Bundled license information: