@dooboostore/simple-web-component 1.0.8 → 1.0.10

package/dist/cjs/decorators/attribute.js

@@ -24,10 +24,9 @@ __export(attribute_exports, {
 module.exports = __toCommonJS(attribute_exports);
 var import_ReflectUtils = require("@dooboostore/core/reflect/ReflectUtils");
 const ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
-function attribute(nameOrOptions) {
-  return (target, propertyKey) => {
+function attribute(arg1, arg2) {
+  const decorator = (options, target, propertyKey) => {
     const constructor = target.constructor;
-    const options = typeof nameOrOptions === "string" ? { name: nameOrOptions } : nameOrOptions || {};
     if (!options.name) options.name = String(propertyKey);
     if (!options.type) options.type = String;
     if (options.disableReflect === void 0) options.disableReflect = false;
@@ -56,6 +55,9 @@ function attribute(nameOrOptions) {
           }
         }
         this[internalKey] = convertedVal;
+        if (typeof this._updateState === "function") {
+          this._updateState(options.name);
+        }
         if (!options.disableReflect && this.setAttribute) {
           if (convertedVal === null || convertedVal === void 0 || convertedVal === false) {
             this.removeAttribute(options.name);
@@ -71,6 +73,13 @@ function attribute(nameOrOptions) {
       configurable: true
     });
   };
+  if (arg1 && typeof arg2 === "string") {
+    return decorator({}, arg1, arg2);
+  }
+  return (target, propertyKey) => {
+    const options = typeof arg1 === "string" ? { name: arg1 } : arg1 || {};
+    decorator(options, target, propertyKey);
+  };
 }
 const getAttributeMetadataList = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;

package/dist/cjs/decorators/attribute.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/attribute.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AttributeOptions {\n  name?: string;\n  type?: any; // String, Number, Boolean, Object\n  disableReflect?: boolean; // Default is false (reflect is enabled by default)\n}\n\nexport interface AttributeMetadata {\n  propertyKey: string | symbol;\n  options: AttributeOptions;\n}\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');\n\nexport function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    const options: AttributeOptions = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions || {};\n\n    if (!options.name) options.name = String(propertyKey);\n    if (!options.type) options.type = String;\n    if (options.disableReflect === undefined) options.disableReflect = false;\n\n    let list = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n\n    // Define getter and setter for the property\n    const internalKey = Symbol(String(propertyKey));\n    Object.defineProperty(target, propertyKey, {\n      get(this: any) {\n        return this[internalKey];\n      },\n      set(this: any, val: any) {\n        const oldVal = this[internalKey];\n        if (oldVal === val) return;\n\n        // Type conversion\n        let convertedVal = val;\n        if (options.type === Number) convertedVal = Number(val);\n        else if (options.type === Boolean) convertedVal = Boolean(val);\n        else if (options.type === Object && typeof val === 'string') {\n          try {\n            convertedVal = JSON.parse(val);\n          } catch (e) {\n            convertedVal = val;\n          }\n        }\n\n        this[internalKey] = convertedVal;\n\n        // Reflection\n        if (!options.disableReflect && this.setAttribute) {\n          if (convertedVal === null || convertedVal === undefined || convertedVal === false) {\n            this.removeAttribute(options.name);\n          } else {\n            const attrVal = typeof convertedVal === 'object' ? JSON.stringify(convertedVal) : String(convertedVal);\n            if (this.getAttribute(options.name) !== attrVal) {\n              this.setAttribute(options.name, attrVal);\n            }\n          }\n        }\n      },\n      enumerable: true,\n      configurable: true\n    });\n  };\n}\n\nexport const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAatB,MAAM,yBAAyB,OAAO,gCAAgC;AAEtE,SAAS,UAAU,eAA8D;AACtF,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,UAAM,UAA4B,OAAO,kBAAkB,WAAW,EAAE,MAAM,cAAc,IAAI,iBAAiB,CAAC;AAElH,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO,OAAO,WAAW;AACpD,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO;AAClC,QAAI,QAAQ,mBAAmB,OAAW,SAAQ,iBAAiB;AAEnE,QAAI,OAAO,iCAAa,YAAiC,wBAAwB,WAAW;AAC5F,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,wBAAwB,MAAM,WAAW;AAAA,IACvE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAGlC,UAAM,cAAc,OAAO,OAAO,WAAW,CAAC;AAC9C,WAAO,eAAe,QAAQ,aAAa;AAAA,MACzC,MAAe;AACb,eAAO,KAAK,WAAW;AAAA,MACzB;AAAA,MACA,IAAe,KAAU;AACvB,cAAM,SAAS,KAAK,WAAW;AAC/B,YAAI,WAAW,IAAK;AAGpB,YAAI,eAAe;AACnB,YAAI,QAAQ,SAAS,OAAQ,gBAAe,OAAO,GAAG;AAAA,iBAC7C,QAAQ,SAAS,QAAS,gBAAe,QAAQ,GAAG;AAAA,iBACpD,QAAQ,SAAS,UAAU,OAAO,QAAQ,UAAU;AAC3D,cAAI;AACF,2BAAe,KAAK,MAAM,GAAG;AAAA,UAC/B,SAAS,GAAG;AACV,2BAAe;AAAA,UACjB;AAAA,QACF;AAEA,aAAK,WAAW,IAAI;AAGpB,YAAI,CAAC,QAAQ,kBAAkB,KAAK,cAAc;AAChD,cAAI,iBAAiB,QAAQ,iBAAiB,UAAa,iBAAiB,OAAO;AACjF,iBAAK,gBAAgB,QAAQ,IAAI;AAAA,UACnC,OAAO;AACL,kBAAM,UAAU,OAAO,iBAAiB,WAAW,KAAK,UAAU,YAAY,IAAI,OAAO,YAAY;AACrG,gBAAI,KAAK,aAAa,QAAQ,IAAI,MAAM,SAAS;AAC/C,mBAAK,aAAa,QAAQ,MAAM,OAAO;AAAA,YACzC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AACF;AAEO,MAAM,2BAA2B,CAAC,WAAiD;AACxF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,wBAAwB,WAAW;AACrE;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\n\nexport interface AttributeOptions {\n  name?: string;\n  type?: any; // String, Number, Boolean, Object\n  disableReflect?: boolean; // Default is false (reflect is enabled by default)\n}\n\nexport interface AttributeMetadata {\n  propertyKey: string | symbol;\n  options: AttributeOptions;\n}\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');\n\nexport function attribute(nameOrOptions?: string | AttributeOptions): PropertyDecorator;\nexport function attribute(target: Object, propertyKey: string | symbol): void;\nexport function attribute(arg1?: string | AttributeOptions | Object, arg2?: string | symbol): any {\n  const decorator = (options: AttributeOptions, target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    if (!options.name) options.name = String(propertyKey);\n    if (!options.type) options.type = String;\n    if (options.disableReflect === undefined) options.disableReflect = false;\n\n    let list = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n\n    // Define getter and setter for the property\n    const internalKey = Symbol(String(propertyKey));\n    Object.defineProperty(target, propertyKey, {\n      get(this: any) {\n        return this[internalKey];\n      },\n      set(this: any, val: any) {\n        const oldVal = this[internalKey];\n        if (oldVal === val) return;\n\n        // Type conversion\n        let convertedVal = val;\n        if (options.type === Number) convertedVal = Number(val);\n        else if (options.type === Boolean) convertedVal = Boolean(val);\n        else if (options.type === Object && typeof val === 'string') {\n          try {\n            convertedVal = JSON.parse(val);\n          } catch (e) {\n            convertedVal = val;\n          }\n        }\n\n        this[internalKey] = convertedVal;\n\n        // Surgical Update Trigger\n        if (typeof (this as any)._updateState === 'function') {\n          (this as any)._updateState(options.name);\n        }\n\n        // Reflection\n        if (!options.disableReflect && this.setAttribute) {\n          if (convertedVal === null || convertedVal === undefined || convertedVal === false) {\n            this.removeAttribute(options.name!);\n          } else {\n            const attrVal = typeof convertedVal === 'object' ? JSON.stringify(convertedVal) : String(convertedVal);\n            if (this.getAttribute(options.name!) !== attrVal) {\n              this.setAttribute(options.name!, attrVal);\n            }\n          }\n        }\n      },\n      enumerable: true,\n      configurable: true\n    });\n  };\n\n  // Case: @attribute (parameterless decorator)\n  if (arg1 && typeof arg2 === 'string') {\n    return decorator({}, arg1 as Object, arg2 as string | symbol);\n  }\n\n  // Case: @attribute('name') or @attribute({ ... })\n  return (target: Object, propertyKey: string | symbol) => {\n    const options: AttributeOptions = typeof arg1 === 'string' ? { name: arg1 } : (arg1 as AttributeOptions) || {};\n    decorator(options, target, propertyKey);\n  };\n}\n\nexport const getAttributeMetadataList = (target: any): AttributeMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA6B;AAatB,MAAM,yBAAyB,OAAO,gCAAgC;AAItE,SAAS,UAAU,MAA2C,MAA6B;AAChG,QAAM,YAAY,CAAC,SAA2B,QAAgB,gBAAiC;AAC7F,UAAM,cAAc,OAAO;AAC3B,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO,OAAO,WAAW;AACpD,QAAI,CAAC,QAAQ,KAAM,SAAQ,OAAO;AAClC,QAAI,QAAQ,mBAAmB,OAAW,SAAQ,iBAAiB;AAEnE,QAAI,OAAO,iCAAa,YAAiC,wBAAwB,WAAW;AAC5F,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,uCAAa,eAAe,wBAAwB,MAAM,WAAW;AAAA,IACvE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAGlC,UAAM,cAAc,OAAO,OAAO,WAAW,CAAC;AAC9C,WAAO,eAAe,QAAQ,aAAa;AAAA,MACzC,MAAe;AACb,eAAO,KAAK,WAAW;AAAA,MACzB;AAAA,MACA,IAAe,KAAU;AACvB,cAAM,SAAS,KAAK,WAAW;AAC/B,YAAI,WAAW,IAAK;AAGpB,YAAI,eAAe;AACnB,YAAI,QAAQ,SAAS,OAAQ,gBAAe,OAAO,GAAG;AAAA,iBAC7C,QAAQ,SAAS,QAAS,gBAAe,QAAQ,GAAG;AAAA,iBACpD,QAAQ,SAAS,UAAU,OAAO,QAAQ,UAAU;AAC3D,cAAI;AACF,2BAAe,KAAK,MAAM,GAAG;AAAA,UAC/B,SAAS,GAAG;AACV,2BAAe;AAAA,UACjB;AAAA,QACF;AAEA,aAAK,WAAW,IAAI;AAGpB,YAAI,OAAQ,KAAa,iBAAiB,YAAY;AACpD,UAAC,KAAa,aAAa,QAAQ,IAAI;AAAA,QACzC;AAGA,YAAI,CAAC,QAAQ,kBAAkB,KAAK,cAAc;AAChD,cAAI,iBAAiB,QAAQ,iBAAiB,UAAa,iBAAiB,OAAO;AACjF,iBAAK,gBAAgB,QAAQ,IAAK;AAAA,UACpC,OAAO;AACL,kBAAM,UAAU,OAAO,iBAAiB,WAAW,KAAK,UAAU,YAAY,IAAI,OAAO,YAAY;AACrG,gBAAI,KAAK,aAAa,QAAQ,IAAK,MAAM,SAAS;AAChD,mBAAK,aAAa,QAAQ,MAAO,OAAO;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB,CAAC;AAAA,EACH;AAGA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,UAAU,CAAC,GAAG,MAAgB,IAAuB;AAAA,EAC9D;AAGA,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,UAA4B,OAAO,SAAS,WAAW,EAAE,MAAM,KAAK,IAAK,QAA6B,CAAC;AAC7G,cAAU,SAAS,QAAQ,WAAW;AAAA,EACxC;AACF;AAEO,MAAM,2BAA2B,CAAC,WAAiD;AACxF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,iCAAa,YAAY,wBAAwB,WAAW;AACrE;",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -35,13 +35,7 @@ var import_emitCustomEvent = require("./emitCustomEvent");
 var import_Utils = require("../utils/Utils");
 const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
 const STATE_CHANGE_EVENT = "swc:state-change";
-const BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
-const registerTag = (className, tagName) => {
-  if (typeof globalThis !== "undefined" && globalThis[className]) {
-    BUILT_IN_TAG_MAP.set(globalThis[className], tagName);
-  }
-};
-[
+const HTML_TAG_ENTRIES = [
   ["HTMLAnchorElement", "a"],
   ["HTMLAreaElement", "area"],
   ["HTMLAudioElement", "audio"],
@@ -98,9 +92,28 @@ const registerTag = (className, tagName) => {
   ["HTMLUListElement", "ul"],
   ["HTMLVideoElement", "video"],
   ["HTMLHeadingElement", "h1"]
-].forEach(([cls, tag]) => registerTag(cls, tag));
+];
+function buildEnv(configWindow) {
+  const win = configWindow || (typeof window !== "undefined" ? window : void 0);
+  const doc = win?.document;
+  const builtInTagMap = /* @__PURE__ */ new Map();
+  for (const [cls, tag] of HTML_TAG_ENTRIES) {
+    if (win?.[cls]) builtInTagMap.set(win[cls], tag);
+  }
+  const domHelpers = {
+    $d: doc,
+    $w: win,
+    $q: (sel, root) => (root ?? doc).querySelector(sel),
+    $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
+    $qi: (id, root) => (root ?? doc).getElementById(id)
+  };
+  return { win, doc, builtInTagMap, domHelpers };
+}
 const elementDefine = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
+  const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
+  const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS);
+  const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map((k) => SWC_DOM_HELPERS[k]);
   let extendsTagName = config.extends;
   if (!extendsTagName) {
     let proto = Object.getPrototypeOf(constructor);
@@ -115,18 +128,23 @@ const elementDefine = (inConfig) => (constructor) => {
   const stateList = (0, import_state.getStateMetadataList)(constructor);
   const observedFromProps = attributePropsList ? attributePropsList.map((it) => it.options.name) : [];
   const observedFromEmits = emitCustomEventList ? emitCustomEventList.map((it) => it.options.attributeName) : [];
-  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromProps, ...observedFromEmits])];
+  const swcLifecycleAttributes = ["swc-on-constructor", "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 mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromProps, ...observedFromEmits, ...swcLifecycleAttributes])];
   const NewClass = class extends constructor {
     constructor(...args) {
       super(...args);
       this._swcId = Math.random().toString(36).substring(2, 11);
       this._observer = null;
+      this._shadowObserver = null;
       this._boundElements = /* @__PURE__ */ new WeakMap();
       this._activeListeners = [];
       this._emitHandlers = /* @__PURE__ */ new Map();
       this._stateBindings = /* @__PURE__ */ new Map();
       this._internalStates = /* @__PURE__ */ new Map();
       this._externalSources = /* @__PURE__ */ new Map();
+      this._isSyncing = false;
+      this._isUpdatingState = false;
+      this._executeSwcScript("swc-on-constructor");
       if (stateList) {
         stateList.forEach((meta) => {
           const key = meta.propertyKey;
@@ -151,16 +169,95 @@ const elementDefine = (inConfig) => (constructor) => {
           });
         });
       }
+      if (attributePropsList) {
+        attributePropsList.forEach((meta) => {
+          const key = meta.propertyKey;
+          const attrName = meta.options.name;
+          const attrValue = this.getAttribute(attrName);
+          let initialVal = attrValue !== null ? attrValue : this[key];
+          if (initialVal === void 0) initialVal = null;
+          if (attrValue !== null) {
+            if (meta.options.type === Number) initialVal = Number(attrValue);
+            else if (meta.options.type === Boolean) initialVal = true;
+            else if (meta.options.type === Object) {
+              try {
+                initialVal = JSON.parse(attrValue);
+              } catch (e) {
+              }
+            }
+          }
+          this._internalStates.set(key, initialVal);
+          Object.defineProperty(this, key, {
+            get: () => this._internalStates.get(key),
+            set: (newVal) => {
+              if (this._internalStates.get(key) === newVal) return;
+              this._internalStates.set(key, newVal);
+              if (typeof this._updateState === "function") this._updateState(attrName);
+              if (!meta.options.disableReflect && this.setAttribute && typeof newVal !== "object") {
+                if (newVal === null || newVal === void 0 || newVal === false) this.removeAttribute(attrName);
+                else this.setAttribute(attrName, String(newVal));
+              }
+            },
+            enumerable: true,
+            configurable: true
+          });
+        });
+      }
       const innerHtmlList = (0, import_innerHtml.getInnerHtmlMetadataList)(this);
       if (innerHtmlList?.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
+    // name→value 컨텍스트 반환 (applyData의 hostContext용)
+    _getHostContext() {
+      const ctx = {};
+      if (stateList) {
+        stateList.forEach((meta) => {
+          const name = meta.options.name;
+          const val = this._internalStates.get(meta.propertyKey);
+          ctx[name] = val;
+        });
+      }
+      if (attributePropsList) {
+        attributePropsList.forEach((meta) => {
+          const name = meta.options.name;
+          const val = this._internalStates.get(meta.propertyKey);
+          ctx[name] = val;
+        });
+      }
+      return ctx;
+    }
     static get observedAttributes() {
       return mergedObservedAttributes;
     }
+    _executeSwcScript(attrName, extraArgs = {}) {
+      const script = this.getAttribute(attrName);
+      if (script) {
+        try {
+          const $hosts = import_Utils.SwcUtils.findAllSwcHosts(this);
+          const $firstHost = $hosts[0] || null;
+          const $lastHost = $hosts[$hosts.length - 1] || null;
+          const $host = $lastHost;
+          const args = { $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPERS, ...extraArgs };
+          const argNames = Object.keys(args);
+          const argValues = Object.values(args);
+          new Function(...argNames, script).apply(this, argValues);
+        } catch (e) {
+          console.error(`[SWC] Failed to execute ${attrName} script:`, e);
+        }
+      }
+    }
     _syncDecorators() {
-      this._buildStateMap();
+      if (this._isSyncing) return;
+      this._isSyncing = true;
+      try {
+        this._buildStateMap();
+        this._syncEventListenersAndQueries();
+      } finally {
+        this._isSyncing = false;
+      }
+    }
+    _syncEventListenersAndQueries() {
       const getSearchRoots = (rootOption) => {
         const roots = [];
         if (rootOption === "shadow") {
@@ -247,7 +344,7 @@ const elementDefine = (inConfig) => (constructor) => {
     }
     _buildStateMap() {
       const scan = (root) => {
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+        const walker = doc.createTreeWalker(root, win.NodeFilter.SHOW_ELEMENT | win.NodeFilter.SHOW_TEXT);
         let node = null;
         while (node = walker.nextNode()) {
           if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, "text");
@@ -256,9 +353,79 @@ const elementDefine = (inConfig) => (constructor) => {
             const alias = el.getAttribute("as");
             if (alias && !this._externalSources.has(alias)) {
               this._externalSources.set(alias, el);
-              el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+              const aliasKey = `alias-event:${alias}`;
+              let bound = this._boundElements.get(el);
+              if (!bound) {
+                bound = /* @__PURE__ */ new Set();
+                this._boundElements.set(el, bound);
+              }
+              if (!bound.has(aliasKey)) {
+                el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+                bound.add(aliasKey);
+              }
+            }
+            Array.from(el.attributes).forEach((attr) => {
+              if (attr.name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(attr.name)) {
+                const eventName = attr.name.substring(7);
+                if (eventName === "connected") {
+                  const eventKey2 = `attr-once:${attr.name}`;
+                  let bound2 = this._boundElements.get(el);
+                  if (!bound2) {
+                    bound2 = /* @__PURE__ */ new Set();
+                    this._boundElements.set(el, bound2);
+                  }
+                  if (!bound2.has(eventKey2)) {
+                    const script = el.getAttribute(attr.name);
+                    if (script) {
+                      try {
+                        const $hosts = import_Utils.SwcUtils.findAllSwcHosts(el);
+                        const $firstHost = $hosts[0] || null;
+                        const $lastHost = $hosts[$hosts.length - 1] || null;
+                        const $host = $lastHost;
+                        new Function("event", "$data", "$host", "$hosts", "$firstHost", "$lastHost", ...SWC_DOM_HELPER_KEYS, script).call(el, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                      } catch (e) {
+                        console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                      }
+                    }
+                    bound2.add(eventKey2);
+                  }
+                  return;
+                }
+                const eventKey = `attr-event:${attr.name}`;
+                let bound = this._boundElements.get(el);
+                if (!bound) {
+                  bound = /* @__PURE__ */ new Set();
+                  this._boundElements.set(el, bound);
+                }
+                if (!bound.has(eventKey)) {
+                  const handler = (event) => {
+                    const rawScript = el.getAttribute(attr.name);
+                    if (rawScript) {
+                      try {
+                        const $hosts = import_Utils.SwcUtils.findAllSwcHosts(el);
+                        const $firstHost = $hosts[0] || null;
+                        const $lastHost = $hosts[$hosts.length - 1] || null;
+                        const $host = $lastHost;
+                        new Function("event", "$data", "$host", "$hosts", "$firstHost", "$lastHost", ...SWC_DOM_HELPER_KEYS, rawScript).call(el, event, event.detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                      } catch (e) {
+                        console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                      }
+                    }
+                  };
+                  el.addEventListener(eventName, handler);
+                  bound.add(eventKey);
+                  if (config.autoRemoveEventListeners) this._activeListeners.push({ el, type: eventName, handler });
+                }
+              }
+              this._parseAndBind(attr, "attribute", el);
+            });
+            const isSwcChild = el._swcId || getElementConfig(el.constructor) || (el.getAttribute("is")?.startsWith("swc-") ?? false);
+            if (isSwcChild) {
+              const next = walker.nextSibling();
+              if (!next) break;
+              node = next;
+              if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, "text");
             }
-            Array.from(el.attributes).forEach((attr) => this._parseAndBind(attr, "attribute", el));
           }
         }
       };
@@ -270,16 +437,17 @@ const elementDefine = (inConfig) => (constructor) => {
       const isAlreadyBound = node.__swc_bound_ids?.has(this._swcId);
       const content = node[tplKey] || node.textContent || "";
       const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
-      if (matches.length === 0) return;
-      if (isAlreadyBound) return;
+      if (matches.length === 0 || isAlreadyBound) return;
       matches.forEach((match) => {
         const fullPath = match[1].trim();
         const rootName = fullPath.split(".")[0];
         const isState = stateList?.some((s) => s.options.name === rootName);
+        const isAttr = attributePropsList?.some((a) => a.options.name === rootName);
         const isLogicKey = this._asKey === rootName || this._asIndexKey === rootName;
         const isExternal = this._externalSources.has(rootName);
         const isSelfAlias = this.getAttribute("as") === rootName;
-        if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
+        const isInstanceProp = rootName in this;
+        if (!isState && !isAttr && !isLogicKey && !isExternal && !isSelfAlias && !isInstanceProp) return;
         if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
         if (!node[tplKey]) node[tplKey] = content;
         if (!node.__swc_bound_ids) node.__swc_bound_ids = /* @__PURE__ */ new Set();
@@ -290,10 +458,16 @@ const elementDefine = (inConfig) => (constructor) => {
     }
     _updateState(stateName) {
       if (!this._stateBindings) return;
-      this._executeBindingUpdate(stateName);
-      const selfAlias = this.getAttribute("as");
-      if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
-      this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+      if (this._isUpdatingState) return;
+      this._isUpdatingState = true;
+      try {
+        this._executeBindingUpdate(stateName);
+        const selfAlias = this.getAttribute("as");
+        if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
+        this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+      } finally {
+        this._isUpdatingState = false;
+      }
     }
     _executeBindingUpdate(stateName) {
       const bindings = this._stateBindings.get(stateName);
@@ -313,33 +487,59 @@ const elementDefine = (inConfig) => (constructor) => {
             const currentNewClass = current;
             if (current.getAttribute("as") === root) {
               val = import_Utils.SwcUtils.getValueByPath(current, path.split(".").slice(1).join(".") || "value", "value");
-              if (val !== void 0) break;
+              if (val !== import_Utils.SWC_NOT_FOUND) break;
             }
             const externalSource = currentNewClass._externalSources?.get(root);
             if (externalSource) {
               val = import_Utils.SwcUtils.getValueByPath(externalSource, path.split(".").slice(1).join(".") || "value", "value");
-              if (val !== void 0) break;
+              if (val !== import_Utils.SWC_NOT_FOUND) break;
             }
             const cStates = (0, import_state.getStateMetadataList)(current.constructor);
             const cAttrs = (0, import_attribute.getAttributeMetadataList)(current.constructor);
             const sMeta = cStates?.find((s) => s.options.name === root);
             const aMeta = cAttrs?.find((a) => a.options.name === root);
             if (sMeta || aMeta) {
-              let aPath = path;
-              if (sMeta && sMeta.options.name !== String(sMeta.propertyKey)) aPath = path.replace(sMeta.options.name, String(sMeta.propertyKey));
-              else if (aMeta && aMeta.options.name !== String(aMeta.propertyKey)) aPath = path.replace(aMeta.options.name, String(aMeta.propertyKey));
-              val = import_Utils.SwcUtils.getValueByPath(current, aPath, root);
-              if (val !== void 0) break;
+              const propKey = sMeta ? String(sMeta.propertyKey) : String(aMeta.propertyKey);
+              const rootVal = current[propKey];
+              const subPath = path.split(".").slice(1).join(".");
+              if (subPath) {
+                val = import_Utils.SwcUtils.getValueByPath(rootVal, subPath, subPath.split(".")[0]);
+                if (val === import_Utils.SWC_NOT_FOUND) {
+                  const parts = subPath.split(".");
+                  let cur = rootVal;
+                  for (const p of parts) {
+                    if (cur === null || cur === void 0) {
+                      cur = import_Utils.SWC_NOT_FOUND;
+                      break;
+                    }
+                    cur = cur[p];
+                  }
+                  if (cur !== void 0 && cur !== import_Utils.SWC_NOT_FOUND) val = cur;
+                }
+              } else {
+                val = rootVal;
+              }
+              if (val !== import_Utils.SWC_NOT_FOUND && val !== void 0) break;
+            }
+            if (root in current) {
+              val = import_Utils.SwcUtils.getValueByPath(current, path, root);
+              if (val !== import_Utils.SWC_NOT_FOUND) break;
             }
             current = current.parentElement || current.getRootNode().host;
           }
-          if (val !== void 0) {
-            const strVal = val === null || val === void 0 ? "" : typeof val === "object" ? "[Object]" : String(val);
+          if (val !== import_Utils.SWC_NOT_FOUND && val !== void 0) {
+            const strVal = val === null ? "" : typeof val === "object" ? JSON.stringify(val) : String(val);
             updatedText = updatedText.replace(match[0], strVal);
             if (bin.type === "attribute" && bin.owner) {
               const attrName = bin.node.name;
-              if (val === null || val === void 0) bin.owner.removeAttribute(attrName);
-              else {
+              const ownerAttrs = (0, import_attribute.getAttributeMetadataList)(bin.owner.constructor);
+              const attrMeta = ownerAttrs?.find((a) => a.options.name === attrName);
+              const propName = attrMeta ? String(attrMeta.propertyKey) : attrName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+              if (val === null || val === void 0) {
+                bin.owner.removeAttribute(attrName);
+                if (propName in bin.owner) bin.owner[propName] = val;
+              } else {
+                if (propName in bin.owner) bin.owner[propName] = val;
                 bin.owner.setAttribute(attrName, updatedText);
                 if ((attrName === "value" || attrName === "checked") && bin.owner.tagName.match(/INPUT|TEXTAREA|SELECT/)) {
                   bin.owner[attrName] = updatedText;
@@ -352,11 +552,13 @@ const elementDefine = (inConfig) => (constructor) => {
       });
     }
     disconnectedCallback() {
+      this._executeSwcScript("swc-on-before-disconnected");
       const bMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_DISCONNECTED_METADATA_KEY);
       bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
       if (this._observer) this._observer.disconnect();
+      if (this._shadowObserver) this._shadowObserver.disconnect();
       if (config.autoRemoveEventListeners) {
         this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
         this._activeListeners = [];
@@ -366,8 +568,10 @@ const elementDefine = (inConfig) => (constructor) => {
       aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
+      this._executeSwcScript("swc-on-after-disconnected");
     }
     adoptedCallback() {
+      this._executeSwcScript("swc-on-before-adopted");
       const bMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_ADOPTED_METADATA_KEY);
       bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
@@ -377,8 +581,10 @@ const elementDefine = (inConfig) => (constructor) => {
       aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
+      this._executeSwcScript("swc-on-after-adopted");
     }
     async connectedCallback() {
+      this._executeSwcScript("swc-on-before-connected");
       const bMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_CONNECTED_METADATA_KEY);
       bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
@@ -399,20 +605,100 @@ const elementDefine = (inConfig) => (constructor) => {
       if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
       if (lContent) this.innerHTML = lContent;
       this._syncDecorators();
-      this._observer = new MutationObserver(() => this._syncDecorators());
-      this._observer.observe(this.shadowRoot || this, { childList: true, subtree: true });
+      const isManagedByParent = !!import_Utils.SwcUtils.findNearestSwcHost(this);
+      if (!isManagedByParent) {
+        Array.from(this.attributes).forEach((attr) => {
+          if (attr.name.startsWith("swc-on-") && swcLifecycleAttributes.indexOf(attr.name) === -1) {
+            const eventName = attr.name.substring(7);
+            if (eventName === "connected") {
+              const eventKey2 = `host-attr-once:${attr.name}`;
+              let bound2 = this._boundElements.get(this);
+              if (!bound2) {
+                bound2 = /* @__PURE__ */ new Set();
+                this._boundElements.set(this, bound2);
+              }
+              if (!bound2.has(eventKey2)) {
+                const script = this.getAttribute(attr.name);
+                if (script) {
+                  try {
+                    const $hosts = import_Utils.SwcUtils.findAllSwcHosts(this);
+                    const $firstHost = $hosts[0] || null;
+                    const $lastHost = $hosts[$hosts.length - 1] || null;
+                    const $host = $lastHost;
+                    new Function("event", "$data", "$host", "$hosts", "$firstHost", "$lastHost", ...SWC_DOM_HELPER_KEYS, script).call(this, null, null, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                  } catch (e) {
+                    console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                  }
+                }
+                bound2.add(eventKey2);
+              }
+              return;
+            }
+            const eventKey = `host-attr-event:${attr.name}`;
+            let bound = this._boundElements.get(this);
+            if (!bound) {
+              bound = /* @__PURE__ */ new Set();
+              this._boundElements.set(this, bound);
+            }
+            if (!bound.has(eventKey)) {
+              const handler = (event) => {
+                const script = this.getAttribute(attr.name);
+                if (script) {
+                  try {
+                    const $hosts = import_Utils.SwcUtils.findAllSwcHosts(this);
+                    const $firstHost = $hosts[0] || null;
+                    const $lastHost = $hosts[$hosts.length - 1] || null;
+                    const $host = $lastHost;
+                    new Function("event", "$data", "$host", "$hosts", "$firstHost", "$lastHost", ...SWC_DOM_HELPER_KEYS, script).call(this, event, event.detail, $host, $hosts, $firstHost, $lastHost, ...SWC_DOM_HELPER_VALS());
+                  } catch (e) {
+                    console.error(`[SWC] Failed to execute ${attr.name} script:`, e);
+                  }
+                }
+              };
+              this.addEventListener(eventName, handler);
+              bound.add(eventKey);
+              if (config.autoRemoveEventListeners) this._activeListeners.push({ el: this, type: eventName, handler });
+            }
+          }
+        });
+      }
+      const mutationMetaList = (0, import_lifecycles.getMutationSubscribeMetadataList)(this);
+      const fireMutationCallbacks = (mutationList, observer, root) => {
+        mutationMetaList?.forEach((meta) => {
+          const r = meta.options.root ?? "auto";
+          const matches = r === "all" || r === root || r === "auto" && (this.shadowRoot ? root === "shadow" : root === "light");
+          if (matches && typeof this[meta.propertyKey] === "function") {
+            this[meta.propertyKey](mutationList, observer, root);
+          }
+        });
+      };
+      this._observer = new win.MutationObserver((mutationList, observer) => {
+        this._syncDecorators();
+        fireMutationCallbacks(mutationList, observer, "light");
+      });
+      this._observer.observe(this, { childList: true, subtree: true });
+      if (this.shadowRoot) {
+        this._shadowObserver = new win.MutationObserver((mutationList, observer) => {
+          this._syncDecorators();
+          fireMutationCallbacks(mutationList, observer, "shadow");
+        });
+        this._shadowObserver.observe(this.shadowRoot, { childList: true, subtree: true });
+      }
       if (super.connectedCallback) await super.connectedCallback();
       const aMethods = (0, import_lifecycles.getLifecycleMetadata)(this, import_lifecycles.ON_AFTER_CONNECTED_METADATA_KEY);
       aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
+      this._executeSwcScript("swc-on-after-connected");
     }
     attributeChangedCallback(name, oldValue, newValue) {
       if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue);
       if (attributePropsList) {
         attributePropsList.forEach((meta) => {
           if (meta.options.name === name) {
-            if (String(this[meta.propertyKey]) !== String(newValue)) this[meta.propertyKey] = newValue;
+            const current = this[meta.propertyKey];
+            if (typeof current === "object" && current !== null) return;
+            if (String(current) !== String(newValue)) this[meta.propertyKey] = newValue;
           }
         });
       }
@@ -443,11 +729,13 @@ const elementDefine = (inConfig) => (constructor) => {
         wMethodsKeys.forEach((key) => {
           if (typeof this[key] === "function") this[key](newValue, oldValue, name);
         });
+      this._executeSwcScript("swc-on-attribute-changed", { $new: newValue, $old: oldValue, $name: name });
     }
   };
-  const registry = config.customElementRegistry || (typeof customElements !== "undefined" ? customElements : void 0);
+  const registry = config.customElementRegistry || (typeof win !== "undefined" ? win.customElements : void 0);
   if (registry && !registry.get(config.name)) {
-    registry.define(config.name, NewClass, config.extends ? { extends: config.extends } : void 0);
+    const options = config.extends ? { extends: config.extends } : void 0;
+    registry.define(config.name, NewClass, options);
   }
   import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
   return NewClass;