@dooboostore/simple-web-component 1.0.28 → 1.0.30

package/README.md

@@ -17,8 +17,7 @@ Register Web Components with automatic lifecycle management and DI support.
 @elementDefine('my-component')
 class MyComponent extends HTMLElement {
   @onInitialize
-  constructor(private service: MyService) {
-    super();
+  onconstructor(service: MyService) {
   }
 }
 ```
@@ -30,10 +29,9 @@ Inject services into Web Components using the `@onInitialize` decorator.
 @elementDefine('dashboard')
 class Dashboard extends HTMLElement {
   @onInitialize
-  constructor(
+  onconstructor(
     @Inject({ symbol: UserService.SYMBOL }) userService: UserService
   ) {
-    super();
     this.userService = userService;
   }
 }
@@ -220,8 +218,7 @@ Bind attributes on host element itself.
 productId: string = '';
 
 @onInitialize
-constructor() {
-  super();
+onconstructor() {
   if (this.productId) {
     this.loadProduct(this.productId);
   }
@@ -241,32 +238,65 @@ onDisconnected() {
   // Called when element leaves DOM
 }
 
-@onAttributeChanged
-onAttributeChanged(name: string, oldValue: string, newValue: string) {
-  // Called when attribute changes
+
+@onConnectedSwcApp
+onAppReady(router: Router) {
+  // Called after SwcApp.connect() completes on all already-connected components
+  // Full DI support available through hostSet
+  console.log('Application initialization complete!');
 }
 ```
 
-### 8. **Routing with @subscribeSwcAppRouteChange**
-Declarative route pattern matching with path parameters.
+### 8. **Declarative Routing with swc-choose**
+Combine `@subscribeSwcAppRouteChange` with `swc-choose` for clean, declarative routing without boilerplate.
 
 ```typescript
 @elementDefine('root-router')
 class RootRouter extends HTMLElement {
-  @subscribeSwcAppRouteChange('/')
-  @applyInnerHtmlNodeHost({ root: 'light' })
-  homeRoute(router: RouterEventType) {
-    return `<home-page/>`;
+  private router: Router;
+
+  @onInitialize
+  onconstructor(router: Router) {
+    this.router = router;
+  }
+
+  @setProperty('#router', 'value')
+  @subscribeSwcAppRouteChange(['/', '/product/{id}'])
+  routeChanged(router: RouterEventType) {
+    return router;
   }
 
-  @subscribeSwcAppRouteChange('/product/{id}')
-  @applyInnerHtmlNodeHost({ root: 'light' })
-  productRoute(router: RouterEventType, pathData: any) {
-    return `<product-page product-id="${pathData.id}"/>`;
+  @onConnectedInnerHtml
+  render() {
+    return `
+      <template id="router" is="swc-choose">
+        <!-- Home -->
+        <template is="swc-when" value="{{ ['', '/'].includes($value?.path) }}">
+          <home-page/>
+        </template>
+        
+        <!-- Product Detail -->
+        <template is="swc-when" value="{{ $value?.path.startsWith('/product/') }}">
+          <product-page product-id="{{$value?.pathData?.id}}"/>
+        </template>
+        
+        <!-- Not Found -->
+        <template is="swc-otherwise">
+          <not-found-page/>
+        </template>
+      </template>
+    `;
   }
 }
 ```
 
+**Benefits:**
+- ✅ **No imperative route methods** - routes are declarative templates
+- ✅ **Automatic re-rendering** - attributes like `product-id` update automatically
+- ✅ **Performance optimization** - use `skip-if-same` on templates to prevent re-renders
+- ✅ **Dynamic path parameters** - use `{{$value?.pathData?.id}}` syntax to inject route params
+- ✅ **Cleaner DX** - single unified routing pattern
+
 ### 9. **Accommodation Pattern**
 Factory-based component registration with explicit DI.
 
@@ -280,8 +310,7 @@ export default (w: Window) => {
   @elementDefine(tagName, { window: w })
   class MyComponent extends w.HTMLElement {
     @onInitialize
-    constructor(service: MyService) {
-      super();
+    onconstructor(service: MyService) {
       this.service = service;
     }
   }
@@ -307,6 +336,390 @@ appElement.connect({
 });
 ```
 
+### 10. **Quickstart - Basic SPA Setup**
+
+Complete example of setting up a production SPA with routing, services, and components.
+
+#### Step 1. HTML Entry Point
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>My SPA</title>
+  <!-- Web Components polyfill for older browsers -->
+  <script src="https://unpkg.com/@ungap/custom-elements"></script>
+</head>
+<body id="app" is="swc-app-body">
+  <!-- Root router will render pages here -->
+  <root-router></root-router>
+</body>
+<script src="bundle.js"></script>
+</html>
+```
+
+#### Step 2. Services (Dependency Injection)
+```typescript
+// services/UserService.ts
+import { Sim } from '@dooboostore/simple-boot';
+import { ConstructorType } from '@dooboostore/core';
+
+export namespace UserService {
+  export const SYMBOL = Symbol('UserService');
+
+  export interface User {
+    id: number;
+    name: string;
+    email: string;
+  }
+
+  const users: User[] = [
+    { id: 1, name: 'Alice', email: 'alice@example.com' },
+    { id: 2, name: 'Bob', email: 'bob@example.com' }
+  ];
+}
+
+export interface UserService {
+  getUser(id: number): UserService.User | undefined;
+  getAllUsers(): UserService.User[];
+}
+
+// Factory function: accepts container and returns service class
+export default (container: symbol): ConstructorType<any> => {
+  @Sim({ symbol: UserService.SYMBOL, container: container })
+  class UserServiceImpl implements UserService {
+    getUser(id: number) {
+      return UserService.users.find(u => u.id === id);
+    }
+
+    getAllUsers() {
+      return [...UserService.users];
+    }
+  }
+
+  return UserServiceImpl;
+};
+```
+
+```typescript
+// services/index.ts
+import userServiceFactory from './UserService';
+
+export const serviceFactories = [userServiceFactory];
+```
+
+#### Step 3. Router Configuration (Declarative with swc-choose)
+```typescript
+// pages/RootRouter.ts
+import { elementDefine, subscribeSwcAppRouteChange, setProperty, onConnectedInnerHtml, onInitialize } from '@dooboostore/simple-web-component';
+import { Router, RouterEventType } from '@dooboostore/core-web';
+
+const rootRouterFactory = (w: Window) => {
+  const tagName = 'root-router';
+  const existing = w.customElements.get(tagName);
+  if (existing) return tagName;
+
+  @elementDefine(tagName, { window: w })
+  class RootRouter extends w.HTMLElement {
+    private router: Router;
+
+    @onInitialize
+    onconstructor(router: Router) {
+      this.router = router;
+    }
+
+    @setProperty('#router', 'value')
+    @subscribeSwcAppRouteChange(['/', '/users', '/users/{id}'])
+    routeChanged(route: RouterEventType) {
+      return route;
+    }
+
+    navigate(path: string): void {
+      this.router?.go(path);
+    }
+
+    @onConnectedInnerHtml
+    render() {
+      return `
+        <template id="router" is="swc-choose">
+          <!-- Home Page -->
+          <template is="swc-when" value="{{ ['', '/'].includes($value?.path) }}">
+            <home-page/>
+          </template>
+          
+          <!-- Users List -->
+          <template is="swc-when" value="{{ $value?.path === '/users' }}">
+            <users-list-page/>
+          </template>
+          
+          <!-- User Detail -->
+          <template is="swc-when" value="{{ $value?.path.startsWith('/users/') }}">
+            <user-detail-page user-id="{{$value?.pathData?.id}}"/>
+          </template>
+          
+          <!-- Not Found -->
+          <template is="swc-otherwise">
+            <not-found-page/>
+          </template>
+        </template>
+      `;
+    }
+  }
+
+  return tagName;
+};
+
+export default rootRouterFactory;
+```
+
+#### Step 4. Page Components
+```typescript
+// pages/HomePage.ts
+import { elementDefine, onConnectedInnerHtml } from '@dooboostore/simple-web-component';
+
+const HomePage = (w: Window) => {
+  const tagName = 'home-page';
+  const existing = w.customElements.get(tagName);
+  if (existing) return tagName;
+
+  @elementDefine(tagName, { window: w })
+  class HomePage extends w.HTMLElement {
+    @onConnectedInnerHtml({ useShadow: true })
+    render() {
+      return `
+        <style>
+          :host { display: block; padding: 20px; }
+          h1 { color: #333; }
+          a { color: #0066cc; text-decoration: none; margin-right: 20px; }
+        </style>
+        <h1>Welcome to My SPA</h1>
+        <nav>
+          <a href="/users">View All Users</a>
+        </nav>
+      `;
+    }
+  }
+
+  return tagName;
+};
+
+export default HomePage;
+```
+
+```typescript
+// pages/UsersListPage.ts
+import { elementDefine, onConnectedInnerHtml, onConnectedSwcApp } from '@dooboostore/simple-web-component';
+import { Inject } from '@dooboostore/simple-boot';
+import { UserService } from '../services/UserService';
+
+const UsersListPage = (w: Window) => {
+  const tagName = 'users-list-page';
+  const existing = w.customElements.get(tagName);
+  if (existing) return tagName;
+
+  @elementDefine(tagName, { window: w })
+  class UsersListPage extends w.HTMLElement {
+    private users: any[] = [];
+
+    @onConnectedSwcApp
+    onconstructor(@Inject({ symbol: UserService.SYMBOL }) userService: UserService) {
+      this.users = userService.getAllUsers();
+    }
+
+    @onConnectedInnerHtml({ useShadow: true })
+    render() {
+      const usersList = this.users
+        .map(u => `<li><a href="/users/${u.id}">${u.name}</a></li>`)
+        .join('');
+      
+      return `
+        <style>
+          :host { display: block; padding: 20px; }
+          h1 { color: #333; }
+          ul { list-style: none; padding: 0; }
+          li { margin: 10px 0; }
+          a { color: #0066cc; text-decoration: none; }
+        </style>
+        <h1>Users</h1>
+        <ul>${usersList}</ul>
+        <a href="/">Back to Home</a>
+      `;
+    }
+  }
+
+  return tagName;
+};
+
+export default UsersListPage;
+```
+
+#### Step 4-1. Reusable Components
+```typescript
+// components/UserCard.ts
+import { elementDefine, onConnectedInnerHtml, attributeHost } from '@dooboostore/simple-web-component';
+
+const UserCard = (w: Window) => {
+  const tagName = 'user-card';
+  const existing = w.customElements.get(tagName);
+  if (existing) return tagName;
+
+  @elementDefine(tagName, { window: w })
+  class UserCard extends w.HTMLElement {
+    @attributeHost('data-username')
+    username: string;
+
+    @attributeHost('data-email')
+    email: string;
+
+    @onConnectedInnerHtml({ useShadow: true })
+    render() {
+      return `
+        <style>
+          :host { display: block; }
+          .card { border: 1px solid #ddd; border-radius: 4px; padding: 12px; }
+          .name { font-weight: bold; font-size: 14px; }
+          .email { color: #666; font-size: 12px; }
+        </style>
+        <div class="card">
+          <div class="name">${this.username}</div>
+          <div class="email">${this.email}</div>
+        </div>
+      `;
+    }
+  }
+
+  return tagName;
+};
+
+export default UserCard;
+```
+
+#### Step 5. Export Factories
+
+**services/index.ts** - Export all service factories
+```typescript
+// services/index.ts
+import userServiceFactory from './UserService';
+
+export const serviceFactories = [userServiceFactory];
+```
+
+**components/index.ts** - Export all component factories
+```typescript
+// components/index.ts
+import UserCard from './UserCard';
+
+export const componentFactories = [
+  UserCard,
+];
+```
+
+**pages/index.ts** - Export all page factories with router
+```typescript
+// pages/index.ts
+import rootRouterFactory from './RootRouter';
+import HomePage from './HomePage';
+import UsersListPage from './UsersListPage';
+import UserDetailPage from './UserDetailPage';
+
+export const pageFactories = [
+  rootRouterFactory,      // Router first
+  HomePage,
+  UsersListPage,
+  UserDetailPage
+];
+```
+
+#### Step 6. Application Bootstrap
+```typescript
+// bootFactory.ts
+import { register } from '@dooboostore/simple-web-component';
+import { serviceFactories } from './services';
+import { componentFactories } from './components';
+import { pageFactories } from './pages';
+
+export default (w: Window, container: symbol) => {
+  // Initialize services with container (dependency injection)
+  // Each factory receives the container symbol and registers its service in the DI container
+  serviceFactories.forEach(serviceFactory => serviceFactory(container));
+
+  // Register pages and components
+  register(w, [...pageFactories, ...componentFactories]);
+};
+```
+
+#### Step 7. Application Entry Point
+```typescript
+// index.ts
+import 'reflect-metadata';
+import { SwcAppInterface } from '@dooboostore/simple-web-component';
+import bootFactory from './bootFactory';
+
+const w = window;
+
+w.document.addEventListener('DOMContentLoaded', async () => {
+  const container = Symbol('app');
+  
+  // Initialize services and components
+  bootFactory(w, container);
+
+  // Wait for customized built-in element to be defined
+  await w.customElements.whenDefined('swc-app-body');
+
+  // Get app root element
+  const appElement = w.document.querySelector('#app') as SwcAppInterface;
+  
+  if (appElement && typeof appElement.connect === 'function') {
+    // Connect SPA with routing and DI
+    appElement.connect({
+      path: '/',
+      routeType: 'path',
+      container: container,
+      window: w,
+      onEngineStarted: () => {
+        console.log('🚀 Application started successfully');
+        // Root router automatically initialized via @elementDefine
+      }
+    });
+  } else {
+    console.error('Failed to initialize SPA');
+  }
+});
+```
+
+#### Resulting Application Structure
+```
+src/
+  ├── index.ts                 # Entry point
+  ├── index.html              # HTML root with <root-router>
+  ├── bootFactory.ts          # Bootstrap services & components via register()
+  ├── services/
+  │   ├── UserService.ts      # Service factory (export default)
+  │   └── index.ts            # Export serviceFactories
+  ├── pages/
+  │   ├── RootRouter.ts       # Router factory (export default)
+  │   ├── HomePage.ts         # Page factory (export default)
+  │   ├── UsersListPage.ts    # Page factory (export default)
+  │   ├── UserDetailPage.ts   # Page factory (export default)
+  │   └── index.ts            # Export pageFactories
+  └── components/
+      ├── UserCard.ts         # Component factory (export default)
+      └── index.ts            # Export componentFactories
+```
+
+**Key Flow:**
+1. HTML loads → `<root-router>` element already in DOM
+2. `index.ts` executes → calls `bootFactory`
+3. `bootFactory` registers services and components (including `rootRouterFactory`)
+4. App waits for `swc-app-body` to be defined
+5. `appElement.connect()` initializes routing & DI
+6. `<root-router>` becomes active with `@subscribeSwcAppRouteChange` + `swc-choose` template
+7. Route changes automatically trigger `swc-choose` re-evaluation and template re-rendering
+8. Template attributes like `user-id="{{$value?.pathData?.id}}"` are dynamically populated with route params
+9. All components have access to injected services via `@onInitialize` or `@onConnectedSwcApp`
+
+
 ---
 
 ## ⚠️ Critical Rules
@@ -316,14 +729,14 @@ appElement.connect({
 
 ```typescript
 // ✅ CORRECT
-@Sim()
+@Sim
 export class UserService { }
 
 @elementDefine(tagName, { window: w })
 class UserWidget extends w.HTMLElement { }
 
 // ❌ WRONG
-@Sim()
+@Sim
 @elementDefine(tagName, { window: w })
 class UserWidget extends w.HTMLElement { }
 ```
@@ -346,8 +759,7 @@ export default (w: Window) => {
 ```typescript
 // ✅ CORRECT
 @onInitialize
-constructor(@Inject({ symbol: Service.SYMBOL }) service: Service) {
-  super();
+onconstructor(@Inject({ symbol: Service.SYMBOL }) service: Service) {
   this.service = service;
 }
 

package/dist/cjs/decorators/attribute.js

@@ -120,7 +120,8 @@ function attribute(selector, options = {}) {
             }
             return null;
           }
-          return convertValue(this[privateKey], targetType);
+          const data = convertValue(this[privateKey], targetType);
+          return data;
         },
         set(nv) {
           const attrName = options.name || String(propertyKey);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/attribute.ts"],
-  "sourcesContent": ["import {ReflectUtils} from '@dooboostore/core';\nimport {ensureInit, getElementConfig} from './elementDefine';\nimport {SwcUtils} from '../utils/Utils';\nimport {SpecialSelector, SwcQueryOptions} from '../types';\nexport interface AttributeFieldOptions extends SwcQueryOptions {\n  name?: string;\n  // connectedInitialize?: boolean;\n  type?: typeof Number | typeof Boolean | typeof String;\n}\n\nexport interface AttributeFieldMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  options: AttributeFieldOptions;\n  privateKey: symbol;\n}\n\nexport const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for('simple-web-component:attribute-field');\n\nconst convertValue = (val: string | null, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\nexport const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {\n  const r = options.root || 'auto';\n  const results: HTMLElement[] = [];\n\n  const applyRoot = (target: any) => {\n    if (!target) return;\n    if (r === 'auto') {\n      results.push(target);\n    } else {\n      if (r === 'light' || r === 'all') results.push(target);\n      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);\n    }\n  };\n\n  if (selector === ':host' || !selector) {\n    applyRoot(inst);\n  } else if (selector === ':window') {\n    results.push(currentWin);\n  } else if (selector === ':document') {\n    results.push(currentWin.document);\n  } else {\n    const hostSet = SwcUtils.getHostSet(inst);\n    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);\n    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);\n    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);\n    else {\n      if (r === 'shadow') {\n        const found = inst.shadowRoot?.querySelectorAll(selector);\n        if (found) results.push(...found);\n      } else if (r === 'light') {\n        const found = inst.querySelectorAll(selector);\n        if (found) results.push(...found);\n      } else if (r === 'all') {\n        const sMatch = inst.shadowRoot?.querySelectorAll(selector);\n        const lMatch = inst.querySelectorAll(selector);\n        if (sMatch) results.push(...sMatch);\n        if (lMatch) results.push(...lMatch);\n      } else {\n        const found = (inst.shadowRoot || inst).querySelectorAll(selector);\n        if (found) results.push(...found);\n      }\n    }\n  }\n  return results;\n};\n\n/**\n * @attribute decorator to sync a field value with an element's attribute.\n */\nexport function attribute(selector: string, options: AttributeFieldOptions = {}): PropertyDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    const privateKey = Symbol(String(propertyKey));\n    //\n    const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);\n    //\n    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor) as AttributeFieldMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);\n    }\n    metaList.push({propertyKey, selector, options, privateKey});\n\n    const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {\n      targets.forEach(it => {\n        if (it && typeof (it as any).setAttribute === 'function') {\n          if (nv === null) {\n            (it as any).removeAttribute(attrName);\n          } else {\n            (it as any).setAttribute(attrName, String(nv));\n          }\n        } else {\n          inst[privateKey] = nv;\n        }\n      });\n    };\n\n    try {\n      // Own property\uB97C \uC0AD\uC81C\uD558\uC5EC getter\uAC00 \uC791\uB3D9\uD558\uB3C4\uB85D \uD568\n      // delete target[propertyKey];\n\n      // const defineTarget = target instanceof Function ? target : (target as any).constructor;\n      \n      Object.defineProperty(target, propertyKey, {\n        get(this: any) {\n          // try {\n            const attrName = options.name || String(propertyKey);\n            const conf = getElementConfig(this);\n            const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);\n            const targetType = options.type || designType;\n          //\n            // connectedInitialize: true\uC774\uBA74 privateKey \uAC12\uB9CC \uBC18\uD658 (DOM \uBB34\uC2DC)\n            // if (options.connectedInitialize === true && (this as any).__swc_syncing_init) {\n            //   console.log('cccccccc2');\n            //   return this[privateKey];\n            //   // return convertValue(this[privateKey], targetType);\n            // }\n\n            const targets = resolveTargetEls(this, selector, options, currentWin);\n            const primaryTarget = targets[0];\n\n            if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {\n              if ((primaryTarget as any).hasAttribute(attrName)) {\n                const domVal = (primaryTarget as any).getAttribute(attrName);\n                return convertValue(domVal, targetType);\n              }\n              return null;\n            }\n\n            return convertValue(this[privateKey], targetType);\n          // } catch (err) {\n          //   console.error('Error in getter:', err);\n          //   throw err;\n          // }\n        },\n        set(this: any, nv: any) {\n          // this[propertyKey] = nv;\n          const attrName = options.name || String(propertyKey);\n          const conf = getElementConfig(this);\n          const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);\n\n\n          // if (!this.__swc_connected) {\n          //   this[privateKey] = nv;\n          //   return;\n          // }\n\n          const targets = resolveTargetEls(this, selector, options, currentWin);\n          applySetAttribute(this, targets, attrName, nv);\n        },\n        enumerable: true,\n        configurable: true\n      });\n  } catch (err) {\n    console.error('[SWC] defineProperty error:', err);\n  }\n  };\n}\n\n/**\n * @attributeHost decorator to sync a field value with the :host element's attribute.\n */\nexport function attributeHost(target: Object, propertyKey: string | symbol): void;\nexport function attributeHost(options: AttributeFieldOptions): PropertyDecorator;\nexport function attributeHost(attrName: string): PropertyDecorator;\nexport function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;\nexport function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {\n  if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {\n    return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);\n  }\n\n  if (typeof targetOrAttrOrOptions === 'string') {\n    const attrName = targetOrAttrOrOptions;\n    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;\n    return attribute(':host', { ...options, name: attrName });\n  } else if (typeof targetOrAttrOrOptions === 'object') {\n    const options = targetOrAttrOrOptions as AttributeFieldOptions;\n    return (target: Object, propertyKey: string | symbol) => {\n      return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);\n    };\n  } else {\n    return (target: Object, propertyKey: string | symbol) => {\n      return attribute(':host', { name: String(propertyKey) })(target, propertyKey);\n    };\n  }\n}\n\nexport const findAllAttributeMetadata = (target: any): AttributeFieldMetadata[] => {\n  const actualTarget = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.findAllMetadata<AttributeFieldMetadata[]>(ATTRIBUTE_FIELD_METADATA_KEY, actualTarget).flat();\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {ReflectUtils} from '@dooboostore/core';\nimport {ensureInit, getElementConfig} from './elementDefine';\nimport {SwcUtils} from '../utils/Utils';\nimport {SpecialSelector, SwcQueryOptions} from '../types';\nexport interface AttributeFieldOptions extends SwcQueryOptions {\n  name?: string;\n  // connectedInitialize?: boolean;\n  type?: typeof Number | typeof Boolean | typeof String;\n}\n\nexport interface AttributeFieldMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  options: AttributeFieldOptions;\n  privateKey: symbol;\n}\n\nexport const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for('simple-web-component:attribute-field');\n\nconst convertValue = (val: string | null, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\nexport const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {\n  const r = options.root || 'auto';\n  const results: HTMLElement[] = [];\n\n  const applyRoot = (target: any) => {\n    if (!target) return;\n    if (r === 'auto') {\n      results.push(target);\n    } else {\n      if (r === 'light' || r === 'all') results.push(target);\n      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);\n    }\n  };\n\n  if (selector === ':host' || !selector) {\n    applyRoot(inst);\n  } else if (selector === ':window') {\n    results.push(currentWin);\n  } else if (selector === ':document') {\n    results.push(currentWin.document);\n  } else {\n    const hostSet = SwcUtils.getHostSet(inst);\n    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);\n    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);\n    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);\n    else {\n      if (r === 'shadow') {\n        const found = inst.shadowRoot?.querySelectorAll(selector);\n        if (found) results.push(...found);\n      } else if (r === 'light') {\n        const found = inst.querySelectorAll(selector);\n        if (found) results.push(...found);\n      } else if (r === 'all') {\n        const sMatch = inst.shadowRoot?.querySelectorAll(selector);\n        const lMatch = inst.querySelectorAll(selector);\n        if (sMatch) results.push(...sMatch);\n        if (lMatch) results.push(...lMatch);\n      } else {\n        const found = (inst.shadowRoot || inst).querySelectorAll(selector);\n        if (found) results.push(...found);\n      }\n    }\n  }\n  return results;\n};\n\n/**\n * @attribute decorator to sync a field value with an element's attribute.\n */\nexport function attribute(selector: string, options: AttributeFieldOptions = {}): PropertyDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    const privateKey = Symbol(String(propertyKey));\n    //\n    const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);\n    //\n    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_FIELD_METADATA_KEY, constructor) as AttributeFieldMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);\n    }\n    metaList.push({propertyKey, selector, options, privateKey});\n\n    const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {\n      targets.forEach(it => {\n        // console.log('sssssssssssss', it, attrName, nv);\n        if (it && typeof (it as any).setAttribute === 'function') {\n          if (nv === null) {\n            (it as any).removeAttribute(attrName);\n          } else {\n            (it as any).setAttribute(attrName, String(nv));\n          }\n        } else {\n          inst[privateKey] = nv;\n        }\n      });\n    };\n\n    try {\n      // Own property\uB97C \uC0AD\uC81C\uD558\uC5EC getter\uAC00 \uC791\uB3D9\uD558\uB3C4\uB85D \uD568\n      // delete target[propertyKey];\n\n      // const defineTarget = target instanceof Function ? target : (target as any).constructor;\n      \n      Object.defineProperty(target, propertyKey, {\n        get(this: any) {\n          // console.log('------>??gettttt', this,  propertyKey);\n          // try {\n            const attrName = options.name || String(propertyKey);\n            const conf = getElementConfig(this);\n            const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);\n            const targetType = options.type || designType;\n          //\n            // connectedInitialize: true\uC774\uBA74 privateKey \uAC12\uB9CC \uBC18\uD658 (DOM \uBB34\uC2DC)\n            // if (options.connectedInitialize === true && (this as any).__swc_syncing_init) {\n            //   console.log('cccccccc2');\n            //   return this[privateKey];\n            //   // return convertValue(this[privateKey], targetType);\n            // }\n\n            const targets = resolveTargetEls(this, selector, options, currentWin);\n            const primaryTarget = targets[0];\n\n            if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {\n              if ((primaryTarget as any).hasAttribute(attrName)) {\n                const domVal = (primaryTarget as any).getAttribute(attrName);\n                return convertValue(domVal, targetType);\n              }\n              return null;\n            }\n\n            const data =  convertValue(this[privateKey], targetType);\n          // console.log('get rrr', data);\n            return data;\n          // } catch (err) {\n          //   console.error('Error in getter:', err);\n          //   throw err;\n          // }\n        },\n        set(this: any, nv: any) {\n          // this[propertyKey] = nv;\n          // console.log('------>??settttt', this, nv, propertyKey);\n          const attrName = options.name || String(propertyKey);\n          const conf = getElementConfig(this);\n          const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);\n\n\n          // if (!this.__swc_connected) {\n          //   this[privateKey] = nv;\n          //   return;\n          // }\n\n          const targets = resolveTargetEls(this, selector, options, currentWin);\n          applySetAttribute(this, targets, attrName, nv);\n        },\n        enumerable: true,\n        configurable: true\n      });\n  } catch (err) {\n    console.error('[SWC] defineProperty error:', err);\n  }\n  };\n}\n\n/**\n * @attributeHost decorator to sync a field value with the :host element's attribute.\n */\nexport function attributeHost(target: Object, propertyKey: string | symbol): void;\nexport function attributeHost(options: AttributeFieldOptions): PropertyDecorator;\nexport function attributeHost(attrName: string): PropertyDecorator;\nexport function attributeHost(attrName: string, options: AttributeFieldOptions): PropertyDecorator;\nexport function attributeHost(targetOrAttrOrOptions?: any, propertyKeyOrOptions?: any): any {\n  if (propertyKeyOrOptions !== undefined && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {\n    return attribute(':host', { name: String(propertyKeyOrOptions) })(targetOrAttrOrOptions, propertyKeyOrOptions);\n  }\n\n  if (typeof targetOrAttrOrOptions === 'string') {\n    const attrName = targetOrAttrOrOptions;\n    const options = (typeof propertyKeyOrOptions === 'object' ? propertyKeyOrOptions : {}) as AttributeFieldOptions;\n    return attribute(':host', { ...options, name: attrName });\n  } else if (typeof targetOrAttrOrOptions === 'object') {\n    const options = targetOrAttrOrOptions as AttributeFieldOptions;\n    return (target: Object, propertyKey: string | symbol) => {\n      return attribute(':host', { ...options, name: String(propertyKey) })(target, propertyKey);\n    };\n  } else {\n    return (target: Object, propertyKey: string | symbol) => {\n      return attribute(':host', { name: String(propertyKey) })(target, propertyKey);\n    };\n  }\n}\n\nexport const findAllAttributeMetadata = (target: any): AttributeFieldMetadata[] => {\n  const actualTarget = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.findAllMetadata<AttributeFieldMetadata[]>(ATTRIBUTE_FIELD_METADATA_KEY, actualTarget).flat();\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -66,6 +66,7 @@ const ensureInit = (inst) => {
       });
     }
     const hostSet = import_Utils.SwcUtils.getHostSet(inst);
+    const appHosts = import_Utils.SwcUtils.findAllParentAppHostsDirect(inst);
     inst._executeSwcScript?.("swc-on-constructor", hostSet);
     const cMethods = (0, import_lifecycles.findAllLifecycleMetadata)(inst, import_lifecycles.ON_INITIALIZE_METADATA_KEY);
     if (cMethods) {
@@ -137,10 +138,11 @@ const setupPrototype = (proto) => {
   proto._invokeLifecycleMethod = function(methodName, hostSet, extraArgs = []) {
     ensureInit(this);
     if (typeof this[methodName] !== "function") return;
-    const app = hostSet.$appHost?.simpleApplication;
+    const useHostSet = hostSet ?? import_Utils.SwcUtils.getHostSet(this);
+    const app = useHostSet?.$appHost.simpleApplication;
     if (app) {
       const otherStorage = /* @__PURE__ */ new Map();
-      const situations = new import_Inject.SituationTypeContainers([new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST_SET, data: hostSet }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOST, data: hostSet.$appHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST, data: hostSet.$host }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOSTS, data: hostSet.$hosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
+      const situations = new import_Inject.SituationTypeContainers([new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST_SET, data: useHostSet }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST, data: useHostSet.$host }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOSTS, data: useHostSet.$hosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_APP_HOST, data: useHostSet.$firstAppHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
       otherStorage.set(import_Inject.SituationTypeContainers, situations);
       return app.simstanceManager.executeBindParameterSimPromise(
         {
@@ -409,8 +411,12 @@ const elementDefine = (name, config = {}) => (constructor) => {
     this._executeSwcScript("swc-on-connected", hostSet);
     this._executeSwcScript("swc-on-after-connected", hostSet);
     this.__swc_connected = true;
+    const appHostss = import_Utils.SwcUtils.findAllParentAppHostsDirect(this);
     if (appHost && typeof appHost._connected === "function") {
       appHost._connected(this);
+    } else if (appHost && typeof appHost) {
+      appHost._connected_safari ?? (appHost._connected_safari = []);
+      appHost._connected_safari.push(this);
     }
   };
   const originalDisconnected = proto.disconnectedCallback;