@dooboostore/simple-web-component 1.0.37 → 1.0.38

package/README.md

@@ -67,44 +67,223 @@ Replace child nodes with new content.
 replaceChildren(node: Node) {
   return node;
 }
-```
+### 3.5 **Slot Management with @applySlot**
+
+Manage dynamic content insertion into named slots using the `@applySlot` decorator. Slots are placeholders in templates that can be updated dynamically.
 
-### slot
 ```typescript
- @applySlot('zzz')
-nodeSlot!: NodeSlot;
+@elementDefine('content-manager')
+class ContentManager extends HTMLElement {
+  // Property: Get NodeSlot instance for manual slot manipulation
+  @applySlot('main-content')
+  mainSlot?: NodeSlot;
+
+  @applySlot('sidebar')
+  sidebarSlot?: NodeSlot;
+
+  // Method: Replace children in slot with HTML
+  @addEventListener('.update-btn', 'click')
+  @applySlotReplaceChildren('main-content')
+  updateContent() {
+    return '<div>Updated content here</div>';
+  }
 
-@addEventListener('.test-btn', 'click' )
-@applySlotReplaceChildren('zzz')
-ttt() {
-  return '<div>zzzzzzzzzz</div>'
-}
+  // Method: Append HTML to slot
+  @applySlotAppendHtml('main-content')
+  addMoreContent() {
+    return '<p>Additional content</p>';
+  }
 
-@addEventListener('.test-clear-btn', 'click' )
-// @applySlot('zzz', {position: 'clear'})
-@applySlotClear('zzz')
-ttct() {
-  return true;
-}
+  // Method: Append text to slot
+  @applySlotAppendText('sidebar')
+  addSidebarText() {
+    return 'Sidebar text: ' + new Date().toISOString();
+  }
 
-@onConnectedAfter
-ttttt() {
-  console.log('vvvvvvvvvvvvvvv??', this.nodeSlot)
-  this.nodeSlot.appendText('zzz22zzz'+new Date().toISOString())
+  // Method: Clear slot content
+  @addEventListener('.clear-btn', 'click')
+  @applySlotClear('main-content')
+  clearContent() {
+    return true;
+  }
+
+  // Lifecycle: Manual slot manipulation
+  @onConnectedAfter
+  setupSlots() {
+    // Access slot via property for manual manipulation
+    if (this.mainSlot) {
+      this.mainSlot.appendText('main-content', 'Initial text');
+    }
+  }
+
+  @onConnectedInnerHtml
+  render() {
+    return `
+      <div>
+        <h2>Main Content</h2>
+        <!--[[ main-content ]]-->
+        
+        <aside>
+          <h3>Sidebar</h3>
+          <!--[[ sidebar ]]-->
+        </aside>
+        
+        <button class="update-btn">Update Content</button>
+        <button class="clear-btn">Clear Content</button>
+      </div>
+    `;
+  }
 }
-@onConnectedInnerHtml
-render()
-{
-
-  return `
-        [[ zzz ]]
-        <button class="test-btn">test222222222222222</button>
-        <button class="test-clear-btn">clear</button>
-        [[ zzz ]]
-  `
+```
+
+**Slot Syntax in Templates:**
+- `<!--[[ slot-id ]]-->` - Named slot placeholder (HTML comment syntax)
+
+**@applySlot Decorator Variants:**
+- `@applySlot(id, options)` - Generic slot operation with position option
+- `@applySlotReplaceChildren(id)` - Replace all children with HTML
+- `@applySlotReplaceChildrenText(id)` - Replace all children with text
+- `@applySlotAppendHtml(id)` - Append HTML to slot
+- `@applySlotAppendText(id)` - Append text to slot
+- `@applySlotPrependHtml(id)` - Prepend HTML to slot
+- `@applySlotPrependText(id)` - Prepend text to slot
+- `@applySlotClear(id)` - Clear slot content
+
+**Position Options:**
+```typescript
+export type ApplySlotPosition = 
+  | 'prependHtml'        // Add HTML at beginning
+  | 'prependText'        // Add text at beginning
+  | 'appendHtml'         // Add HTML at end
+  | 'appendText'         // Add text at end
+  | 'replaceChildrenHtml' // Replace all with HTML
+  | 'replaceChildrenText' // Replace all with text
+  | 'clear';             // Clear all content
+```
+
+**Manual Slot Manipulation:**
+```typescript
+// Via @applySlot property
+@applySlot('content')
+contentSlot?: NodeSlot;
+
+// In lifecycle or methods
+this.contentSlot?.appendHtml('content', '<p>New content</p>');
+this.contentSlot?.appendText('content', 'Text content');
+this.contentSlot?.replaceChildrenHtml('content', '<div>Replaced</div>');
+this.contentSlot?.clear('content');
+```
+
+### 3.6 **State Management with @state**
+
+Reactive state management with automatic DOM updates when state changes. State values are accessible in templates and scripts using special syntax.
+
+```typescript
+@elementDefine('counter-app')
+class CounterApp extends HTMLElement {
+  // Declare reactive state
+  @state('count')
+  count: number = 0;
+
+  @state('message')
+  message: string = 'Hello';
+
+  @state('isActive')
+  isActive: boolean = false;
+
+  @addEventListener('button', 'click')
+  increment() {
+    this.count++;  // Triggers automatic DOM update
+  }
+
+  @onConnectedInnerHtml
+  render() {
+    return `
+      <div>
+        <!-- HTML directive: render HTML content -->
+        <!--[html @message@ ]-->
+        
+        <!-- Text directive: render as text -->
+        <!--[text Count: @count@ ]-->
+        
+        <!-- Attribute binding with a: prefix -->
+        <div a:title="Count is @count@"></div>
+        
+        <!-- Event binding with e: prefix -->
+        <button e:click="increment">Increment (@count@)</button>
+        
+        <!-- Conditional rendering -->
+        <div a:style="@isActive@ ? 'color: green' : 'color: red'">
+          Status: @isActive@
+        </div>
+      </div>
+    `;
+  }
 }
 ```
 
+**State Syntax in Templates:**
+
+**Reading State Values:**
+- `@stateName@` - Read state value as text/attribute
+- `@stateName@()` - Call state property as function (if it's a function)
+- `@expression@` - Evaluate expressions with state variables
+
+**Template Directives:**
+- `<!--[html @state@ ]-->` - Render state value as HTML
+- `<!--[text @state@ ]-->` - Render state value as text
+- `a:attributeName="@state@"` - Bind state to HTML attributes
+- `e:eventName="methodName"` - Bind events to methods
+
+**How @state Works:**
+1. Declare property with `@state('stateName')`
+2. When property value changes via `this.count++`, setter is triggered
+3. Setter automatically applies state context to templates
+4. All `@stateName@` expressions in templates are re-evaluated
+5. DOM updates automatically with new values
+
+**State Context Available:**
+- `@propertyName@` - Access state properties
+- `@methodName@()` - Call methods
+- `@expression@` - Evaluate JavaScript expressions
+- All state variables available in template expressions
+
+**Advanced Example:**
+```typescript
+@elementDefine('user-profile')
+class UserProfile extends HTMLElement {
+  @state('user')
+  user = { name: 'Alice', age: 30, email: 'alice@example.com' };
+
+  @state('isEditing')
+  isEditing = false;
+
+  @addEventListener('.edit-btn', 'click')
+  toggleEdit() {
+    this.isEditing = !this.isEditing;
+  }
+
+  @onConnectedInnerHtml
+  render() {
+    return `
+      <div>
+        <!-- Display user info -->
+        <h2><!--[text @user.name@ ]--></h2>
+        <p a:title="Email: @user.email@">Age: @user.age@</p>
+        
+        <!-- Conditional rendering based on state -->
+        <div a:style="@isEditing@ ? 'border: 1px solid blue' : 'border: none'">
+          <!--[html @isEditing@ ? '<input type="text" />' : '<span>View Mode</span>' ]-->
+        </div>
+        
+        <button e:click="toggleEdit">
+          @isEditing@ ? 'Save' : 'Edit'
+        </button>
+      </div>
+    `;
+  }
+}
+```
 
 ### 4. **Event Handling**
 
@@ -624,63 +803,6 @@ class CustomLoop extends HTMLElement {
 
 ---
 
-#### 8.5 **Declarative Routing with swc-choose**
-
-Combine `@subscribeSwcAppRouteChangeWhileConnected` with `swc-choose` for clean, declarative routing without boilerplate.
-
-```typescript
-@elementDefine('root-router')
-class RootRouter extends HTMLElement {
-  private router: Router;
-
-  @onInitialize
-  onconstructor(router: Router) {
-    this.router = router;
-  }
-
-  @setProperty('#router', 'value')
-  @subscribeSwcAppRouteChangeWhileConnected(['/', '/users', '/users/{id}', '/products/{id}'])
-  routeChanged(route: RouterEventType) {
-    return route;
-  }
-
-  navigate(path: string): void {
-    this.router?.go(path);
-  }
-
-  @onConnectedInnerHtml
-  render() {
-    return `
-      <template id="router" is="swc-choose">
-        <template is="swc-when" test="['', '/'].includes($value?.path)">
-          <home-page/>
-        </template>
-        
-        <!-- Users List Page -->
-        <template is="swc-when" test="$value?.path === '/users'">
-          <users-list-page/>
-        </template>
-        
-        <!-- User Detail Page: Using {{= }} for dynamic attributes from route params -->
-        <template is="swc-when" test="$value?.path.startsWith('/users/')">
-          <user-detail-page user-id="{{= $value?.pathData?.id }}"></user-detail-page>
-        </template>
-        
-        <!-- Product Detail Page: Using {{= }} for dynamic route parameters -->
-        <template is="swc-when" test="$value?.path.startsWith('/products/')">
-          <product-detail-page product-id="{{= $value?.pathData?.id }}"></product-detail-page>
-        </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 `user-id` update automatically
@@ -783,7 +905,145 @@ class ProductDetail extends HTMLElement {
 
 ---
 
-### 10. **Accommodation Pattern**
+### 10. **SwcApp - Multiple Element Types with Mixin Pattern**
+
+SWC provides a flexible Mixin-based architecture for creating SwcApp elements that extend different HTMLElement types. This enables building SPAs with any semantic HTML element as the root.
+
+#### Available SwcApp Variants
+
+```typescript
+import {
+  SwcApp,           // swc-app (HTMLElement)
+  SwcAppBody,       // swc-app-body (HTMLBodyElement, is="body")
+  SwcAppDiv,        // swc-app-div (HTMLDivElement, is="div")
+  SwcAppSection,    // swc-app-section (HTMLElement, is="section")
+  SwcAppMain,       // swc-app-main (HTMLElement, is="main")
+  SwcAppArticle,    // swc-app-article (HTMLElement, is="article")
+  SwcAppHeader,     // swc-app-header (HTMLElement, is="header")
+  SwcAppFooter,     // swc-app-footer (HTMLElement, is="footer")
+  SwcAppNav,        // swc-app-nav (HTMLElement, is="nav")
+  SwcAppAside,      // swc-app-aside (HTMLElement, is="aside")
+  defineSwcAppAll,  // Register all SwcApp variants at once
+  swcAppFactories   // Array of all definition functions
+} from '@dooboostore/simple-web-component';
+```
+
+#### Using SwcAppBody (Recommended for SPAs)
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>My SPA</title>
+</head>
+<!-- Use is="swc-app-body" for semantic HTML -->
+<body id="app" is="swc-app-body">
+  <root-router></root-router>
+</body>
+<script src="bundle.js"></script>
+</html>
+```
+
+```typescript
+// index.ts
+import 'reflect-metadata';
+import { SwcAppInterface, defineSwcAppAll } 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);
+
+  // Register all SwcApp variants
+  await defineSwcAppAll(w);
+
+  // Get app root element
+  const appElement = w.document.querySelector('#app') as SwcAppInterface;
+  
+  if (appElement && typeof appElement.connect === 'function') {
+    appElement.connect({
+      path: '/',
+      routeType: 'path',
+      container: container,
+      window: w,
+      onEngineStarted: () => {
+        console.log('🚀 Application started successfully');
+      }
+    });
+  }
+});
+```
+
+#### SwcAppMixin - Reusable Component Logic
+
+The `SwcAppMixin` extracts all SwcApp functionality into a reusable mixin that can be applied to any HTMLElement type:
+
+```typescript
+import { SwcAppMixin } from '@dooboostore/simple-web-component';
+import { elementDefine } from '@dooboostore/simple-web-component';
+
+// Create custom SwcApp variant extending HTMLDivElement
+@elementDefine('custom-app', { window: w, extends: 'div' })
+class CustomApp extends SwcAppMixin(w.HTMLDivElement) implements SwcAppInterface {
+  // All SwcApp functionality inherited from mixin
+  // Add custom logic here if needed
+}
+```
+
+#### SwcAppMixin Features
+
+The mixin provides:
+- **Lifecycle Management**: `connectedCallback`, `disconnectedCallback` with parent class support
+- **Routing**: `routing(path)`, `back()`, `forward()`, `reload()`
+- **Message Bus**: `publishMessage()` for inter-component communication
+- **Route Subscriptions**: Automatic route change handling for connected components
+- **SSR Support**: `isSSR()`, `setSSRAttribute()`, `removeSSRAttribute()` utilities
+- **DI Integration**: Full dependency injection support via `@onInitialize`
+
+#### Factory Pattern - Component Registration
+
+```typescript
+// Component factory
+export default (w: Window) => {
+  const tagName = 'my-component';
+  const existing = w.customElements.get(tagName);
+  if (existing) return tagName;
+
+  @elementDefine(tagName, { window: w })
+  class MyComponent extends w.HTMLElement {
+    @onInitialize
+    onconstructor(service: MyService) {
+      this.service = service;
+    }
+  }
+  
+  return tagName;
+};
+
+// Boot factory
+export default (w: Window, container: symbol) => {
+  serviceFactories.forEach(s => s(container));
+  register(w, [...pageFactories, ...componentFactories]);
+};
+
+// Entry point
+const container = Symbol('app');
+bootFactory(w, container);
+appElement.connect({
+  container,
+  window: w,
+  onEngineStarted: () => {
+    appElement.innerHTML = '<root-router></root-router>';
+  }
+});
+```
+
+### 11. **Accommodation Pattern**
 Factory-based component registration with explicit DI.
 
 ```typescript
@@ -822,7 +1082,7 @@ appElement.connect({
 });
 ```
 
-### 11. **Quickstart - Basic SPA Setup**
+### 12. **Quickstart - Basic SPA Setup**
 
 Complete example of setting up a production SPA with routing, services, and components.
 
@@ -837,6 +1097,7 @@ Complete example of setting up a production SPA with routing, services, and comp
   <!-- Web Components polyfill for older browsers -->
   <script src="https://unpkg.com/@ungap/custom-elements"></script>
 </head>
+<!-- Use is="swc-app-body" for semantic HTML root -->
 <body id="app" is="swc-app-body">
   <!-- Root router will render pages here -->
   <root-router></root-router>
@@ -941,7 +1202,7 @@ const rootRouterFactory = (w: Window) => {
           
           <!-- User Detail -->
           <template is="swc-when" test="$value?.path.startsWith('/users/')">
-            <user-detail-page user-id="{{$value?.pathData?.id}}"/>
+            <user-detail-page user-id="{{= $value?.pathData?.id}}"/>
           </template>
           
           <!-- Not Found -->
@@ -1043,7 +1304,7 @@ export default UsersListPage;
 #### Step 4-1. Reusable Components
 ```typescript
 // components/UserCard.ts
-import { elementDefine, onConnectedInnerHtml, attributeHost } from '@dooboostore/simple-web-component';
+import { elementDefine, onConnectedInnerHtml, attributeThis } from '@dooboostore/simple-web-component';
 
 const UserCard = (w: Window) => {
   const tagName = 'user-card';
@@ -1139,11 +1400,41 @@ export default (w: Window, container: symbol) => {
 ```typescript
 // index.ts
 import 'reflect-metadata';
-import { SwcAppInterface } from '@dooboostore/simple-web-component';
+import { SwcAppInterface, defineSwcAppAll } 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);
+
+  // Register all SwcApp variants (swc-app, swc-app-body, swc-app-div, etc.)
+  await defineSwcAppAll(w);
+
+  // 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');
+  }
+});
+```ow;
+
 w.document.addEventListener('DOMContentLoaded', async () => {
   const container = Symbol('app');
   
@@ -1198,11 +1489,11 @@ src/
 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
+4. App waits for `swc-app-body` to be defined via `defineSwcAppAll()`
 5. `appElement.connect()` initializes routing & DI
 6. `<root-router>` becomes active with `@subscribeSwcAppRouteChangeWhileConnected` + `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
+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`
 
 

package/dist/cjs/SwcAppEngine.js

@@ -59,6 +59,9 @@ class SwcAppEngine {
       });
       if (this.router) otherInstanceSim.set(import_core_web.Router, this.router);
       this.simpleApplication.run(otherInstanceSim);
+      if (this._config.onStartedLazyDefineComponent) {
+        await Promise.all(this._config.onStartedLazyDefineComponent.map((it) => it(this._config.window)));
+      }
       if (this._config.onEngineStarted) {
         await this._config.onEngineStarted(this.simpleApplication, this.host);
       }

package/dist/cjs/SwcAppEngine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SwcAppEngine.ts"],
-  "sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot';\nimport { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';\nimport { ElementRouter } from './router/ElementRouter';\nimport { SimOption } from '@dooboostore/simple-boot';\nimport { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';\n\nimport { SwcAppInterface } from './types';\nimport { SimConfig } from '@dooboostore/simple-boot';\n\nexport type SwcConfigType = {\n  routeType: 'path' | 'hash' | 'element';\n  connectMode?: 'direct' | 'swap' | 'clear-swap' | 'hydrate'; // hydrate \uC544\uC9C1 \uAC1C\uBC1C\uC911\n  container?: symbol;\n  otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;\n  path?: string;\n  window: Window;\n  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => Promise<void> | void;\n  onConnectedChildAfter?: (swcEl: HTMLElement) => void;\n  onConnectedChildBefore?: (swcEl: HTMLElement) => void;\n  onDisconnectedChildAfter?: (swcEl: HTMLElement) => void;\n  onDisconnectedChildBefore?: (swcEl: HTMLElement) => void;\n  onConnected?: (app: SwcAppInterface) => void;\n  onDisconnected?: (app: SwcAppInterface) => void;\n  ssr?: boolean;\n\n  onChildrenConnectedDone?: (app: SwcAppInterface) => void;\n  // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;\n  // childrenSwcAppStartedDoneCheckIntervalTime?: number;\n  onChildrenRouteChanged?: (event: RouterEventType, app: SwcAppInterface) => void;\n  childrenRouteChangedCheckIntervalTime?: number; // \uC790\uC2DD \uC5F0\uACB0 \uC644\uB8CC \uC774\uBCA4\uD2B8 \uB514\uBC14\uC6B4\uC2A4 \uD0C0\uC784 (ms)\n  childrenConnectedDoneCheckIntervalTime?: number;\n};\n\nexport type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;\n\nexport class SwcAppEngine {\n  public simpleApplication?: SimpleApplication;\n  public router?: Router;\n  private routerSubscription?: Subscription;\n  private _config?: SwcConfigType;\n\n  constructor(private host: HTMLElement) {}\n\n  get config() {\n    return this._config;\n  }\n\n  async connect(config: SwcConfigType) {\n    try {\n      this._config = config;\n\n      // Router Selection\n      if (this._config.routeType === 'path') {\n        this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });\n      } else if (this._config.routeType === 'hash') {\n        this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });\n      } else if (this._config.routeType === 'element') {\n        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });\n      }\n\n      // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)\n\n      // App start\n      this.simpleApplication = new SimpleApplication(\n        new SimOption({\n          excludeProxys: [(this._config.window as any).Node],\n          container: this._config.container\n        })\n      );\n\n      const otherInstanceSim = new Map<any, any>();\n      this.config?.otherInstanceSim?.forEach((v, k) => {\n        otherInstanceSim.set(k, v);\n      });\n      if (this.router) otherInstanceSim.set(Router, this.router);\n      this.simpleApplication.run(otherInstanceSim);\n\n      if (this._config.onEngineStarted) {\n        await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);\n      }\n    } catch (e) {\n      console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);\n    }\n  }\n\n  disconnect() {\n    this.routerSubscription?.unsubscribe();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAkC;AAClC,sBAAgE;AAChE,2BAA8B;AAC9B,IAAAA,sBAA0B;AAgCnB,MAAM,aAAa;AAAA,EAMxB,YAAoB,MAAmB;AAAnB;AALpB,wBAAO;AACP,wBAAO;AACP,wBAAQ;AACR,wBAAQ;AAAA,EAEgC;AAAA,EAExC,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,QAAQ,QAAuB;AACnC,QAAI;AACF,WAAK,UAAU;AAGf,UAAI,KAAK,QAAQ,cAAc,QAAQ;AACrC,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,QAAQ;AAC5C,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,WAAW;AAC/C,aAAK,SAAS,IAAI,mCAAc,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC9F;AAKA,WAAK,oBAAoB,IAAI;AAAA,QAC3B,IAAI,8BAAU;AAAA,UACZ,eAAe,CAAE,KAAK,QAAQ,OAAe,IAAI;AAAA,UACjD,WAAW,KAAK,QAAQ;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,YAAM,mBAAmB,oBAAI,IAAc;AAC3C,WAAK,QAAQ,kBAAkB,QAAQ,CAAC,GAAG,MAAM;AAC/C,yBAAiB,IAAI,GAAG,CAAC;AAAA,MAC3B,CAAC;AACD,UAAI,KAAK,OAAQ,kBAAiB,IAAI,wBAAQ,KAAK,MAAM;AACzD,WAAK,kBAAkB,IAAI,gBAAgB;AAE3C,UAAI,KAAK,QAAQ,iBAAiB;AAChC,cAAM,KAAK,QAAQ,gBAAgB,KAAK,mBAAmB,KAAK,IAAkC;AAAA,MACpG;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,iCAAiC,GAAG,KAAK,OAAO;AAAA,IAChE;AAAA,EACF;AAAA,EAEA,aAAa;AACX,SAAK,oBAAoB,YAAY;AAAA,EACvC;AACF;",
+  "sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot';\nimport { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';\nimport { ElementRouter } from './router/ElementRouter';\nimport { SimOption } from '@dooboostore/simple-boot';\nimport { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';\nimport { SwcAppInterface } from './types';\nimport { SimConfig } from '@dooboostore/simple-boot';\n\nexport type SwcConfigType = {\n  routeType: 'path' | 'hash' | 'element';\n  // connectMode?: 'direct' | 'swap' | 'clear-swap'; // hydrate \uC544\uC9C1 \uAC1C\uBC1C\uC911\n  container?: symbol;\n  otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;\n  path?: string;\n  window: Window;\n  onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => Promise<void> | void;\n  onConnectedChildAfter?: (swcEl: HTMLElement) => void;\n  onConnectedChildBefore?: (swcEl: HTMLElement) => void;\n  onDisconnectedChildAfter?: (swcEl: HTMLElement) => void;\n  onDisconnectedChildBefore?: (swcEl: HTMLElement) => void;\n  onConnected?: (app: SwcAppInterface) => void;\n  onDisconnected?: (app: SwcAppInterface) => void;\n  ssr?: boolean;\n  onStartedLazyDefineComponent?: ((w: Window)=> Promise<CustomElementConstructor> | void | string | any | CustomElementConstructor)[];\n\n  onChildrenConnectedDone?: (app: SwcAppInterface) => void;\n  // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;\n  // childrenSwcAppStartedDoneCheckIntervalTime?: number;\n  onChildrenRouteChanged?: (event: RouterEventType, app: SwcAppInterface) => void;\n  childrenRouteChangedCheckIntervalTime?: number; // \uC790\uC2DD \uC5F0\uACB0 \uC644\uB8CC \uC774\uBCA4\uD2B8 \uB514\uBC14\uC6B4\uC2A4 \uD0C0\uC784 (ms)\n  childrenConnectedDoneCheckIntervalTime?: number;\n};\n\nexport type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;\n\nexport class SwcAppEngine {\n  public simpleApplication?: SimpleApplication;\n  public router?: Router;\n  private routerSubscription?: Subscription;\n  private _config?: SwcConfigType;\n\n  constructor(private host: HTMLElement) {}\n\n  get config() {\n    return this._config;\n  }\n\n  async connect(config: SwcConfigType) {\n    try {\n      this._config = config;\n\n      // Router Selection\n      if (this._config.routeType === 'path') {\n        this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });\n      } else if (this._config.routeType === 'hash') {\n        this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });\n      } else if (this._config.routeType === 'element') {\n        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });\n      }\n\n      // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)\n\n      // App start\n      this.simpleApplication = new SimpleApplication(\n        new SimOption({\n          excludeProxys: [(this._config.window as any).Node],\n          container: this._config.container\n        })\n      );\n\n      const otherInstanceSim = new Map<any, any>();\n      this.config?.otherInstanceSim?.forEach((v, k) => {\n        otherInstanceSim.set(k, v);\n      });\n      if (this.router) otherInstanceSim.set(Router, this.router);\n      this.simpleApplication.run(otherInstanceSim);\n\n\n      if (this._config.onStartedLazyDefineComponent) {\n        await Promise.all(this._config.onStartedLazyDefineComponent.map(it => it(this._config.window)))\n      }\n      if (this._config.onEngineStarted) {\n        await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);\n      }\n    } catch (e) {\n      console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);\n    }\n  }\n\n  disconnect() {\n    this.routerSubscription?.unsubscribe();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAkC;AAClC,sBAAgE;AAChE,2BAA8B;AAC9B,IAAAA,sBAA0B;AAgCnB,MAAM,aAAa;AAAA,EAMxB,YAAoB,MAAmB;AAAnB;AALpB,wBAAO;AACP,wBAAO;AACP,wBAAQ;AACR,wBAAQ;AAAA,EAEgC;AAAA,EAExC,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,QAAQ,QAAuB;AACnC,QAAI;AACF,WAAK,UAAU;AAGf,UAAI,KAAK,QAAQ,cAAc,QAAQ;AACrC,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,QAAQ;AAC5C,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,WAAW;AAC/C,aAAK,SAAS,IAAI,mCAAc,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC9F;AAKA,WAAK,oBAAoB,IAAI;AAAA,QAC3B,IAAI,8BAAU;AAAA,UACZ,eAAe,CAAE,KAAK,QAAQ,OAAe,IAAI;AAAA,UACjD,WAAW,KAAK,QAAQ;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,YAAM,mBAAmB,oBAAI,IAAc;AAC3C,WAAK,QAAQ,kBAAkB,QAAQ,CAAC,GAAG,MAAM;AAC/C,yBAAiB,IAAI,GAAG,CAAC;AAAA,MAC3B,CAAC;AACD,UAAI,KAAK,OAAQ,kBAAiB,IAAI,wBAAQ,KAAK,MAAM;AACzD,WAAK,kBAAkB,IAAI,gBAAgB;AAG3C,UAAI,KAAK,QAAQ,8BAA8B;AAC7C,cAAM,QAAQ,IAAI,KAAK,QAAQ,6BAA6B,IAAI,QAAM,GAAG,KAAK,QAAQ,MAAM,CAAC,CAAC;AAAA,MAChG;AACA,UAAI,KAAK,QAAQ,iBAAiB;AAChC,cAAM,KAAK,QAAQ,gBAAgB,KAAK,mBAAmB,KAAK,IAAkC;AAAA,MACpG;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,iCAAiC,GAAG,KAAK,OAAO;AAAA,IAChE;AAAA,EACF;AAAA,EAEA,aAAa;AACX,SAAK,oBAAoB,YAAY;AAAA,EACvC;AACF;",
   "names": ["import_simple_boot"]
 }

package/dist/cjs/decorators/addEventListener.js

@@ -20,6 +20,10 @@ __export(addEventListener_exports, {
   ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
   addEventListener: () => addEventListener,
   addEventListenerAppHost: () => addEventListenerAppHost,
+  addEventListenerDelegate: () => addEventListenerDelegate,
+  addEventListenerDelegateAllDom: () => addEventListenerDelegateAllDom,
+  addEventListenerDelegateLightDom: () => addEventListenerDelegateLightDom,
+  addEventListenerDelegateShadowDom: () => addEventListenerDelegateShadowDom,
   addEventListenerDocument: () => addEventListenerDocument,
   addEventListenerThis: () => addEventListenerThis,
   addEventListenerWindow: () => addEventListenerWindow,
@@ -39,10 +43,18 @@ function addEventListener(selectorOrTarget, type, options = {}) {
     listeners.push({ propertyKey, selector: selectorOrTarget, type, options });
   };
 }
-const getAddEventListenerMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return import_core.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
-};
+function addEventListenerDelegateLightDom(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "light", delegate: true });
+}
+function addEventListenerDelegateShadowDom(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "shadow", delegate: true });
+}
+function addEventListenerDelegateAllDom(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "all", delegate: true });
+}
+function addEventListenerDelegate(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "auto", delegate: true });
+}
 function addEventListenerThis(type, options) {
   return addEventListener("$this", type, options);
 }
@@ -55,4 +67,8 @@ function addEventListenerWindow(type, options) {
 function addEventListenerDocument(type, options) {
   return addEventListener("$document", type, options);
 }
+const getAddEventListenerMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return import_core.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+};
 //# sourceMappingURL=addEventListener.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface AddEventListenerBaseOptions extends EventListenerOptions {\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  removeOnDisconnected?: boolean;\n  delegate?: boolean;\n  filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  type: string;\n  options: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean };\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');\n\nexport function addEventListener(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions): MethodDecorator;\nexport function addEventListener(selector: string, type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener decorator to bind events to elements.\n */\nexport function addEventListener(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {\n  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = targetObj.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n\n    listeners.push({ propertyKey, selector: selectorOrTarget, type, options });\n  };\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n\n/**\n * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector\n */\nexport function addEventListenerThis(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$this', type, options);\n}\n\n/**\n * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector\n */\nexport function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$appHost', type, options);\n}\nexport function addEventListenerWindow(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$window', type, options);\n}\nexport function addEventListenerDocument(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$document', type, options);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAsBtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAO5F,SAAS,iBAAiB,kBAA0B,MAAc,UAAe,CAAC,GAAoB;AAC3G,SAAO,CAAC,WAAmB,aAA8B,eAAmC;AAC1F,UAAM,cAAc,UAAU;AAE9B,QAAI,YAAY,yBAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,+BAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AAEA,cAAU,KAAK,EAAE,aAAa,UAAU,kBAAkB,MAAM,QAAQ,CAAC;AAAA,EAC3E;AACF;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,iCAAiC,WAAW;AAC9E;AAKO,SAAS,qBAAqB,MAAc,SAA0E;AAC3H,SAAO,iBAAiB,SAAS,MAAM,OAAO;AAChD;AAKO,SAAS,wBAAwB,MAAc,SAA0E;AAC9H,SAAO,iBAAiB,YAAY,MAAM,OAAO;AACnD;AACO,SAAS,uBAAuB,MAAc,SAA0E;AAC7H,SAAO,iBAAiB,WAAW,MAAM,OAAO;AAClD;AACO,SAAS,yBAAyB,MAAc,SAA0E;AAC/H,SAAO,iBAAiB,aAAa,MAAM,OAAO;AACpD;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface AddEventListenerBaseOptions extends EventListenerOptions {\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  // removeOnDisconnected?: boolean;\n  delegate?: boolean;\n  filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;\n}\n\nexport interface AddEventListenerMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  type: string;\n  options: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean };\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');\n\nexport function addEventListener(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions): MethodDecorator;\nexport function addEventListener(selector: string, type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener decorator to bind events to elements.\n */\nexport function addEventListener(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {\n  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = targetObj.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n\n    listeners.push({ propertyKey, selector: selectorOrTarget, type, options });\n  };\n}\n\n\nexport function addEventListenerDelegateLightDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'light', delegate: true});\n}\n\nexport function addEventListenerDelegateShadowDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'shadow', delegate: true});\n}\nexport function addEventListenerDelegateAllDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'all', delegate: true});\n}\nexport function addEventListenerDelegate(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'auto', delegate: true});\n}\n\n/**\n * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector\n */\nexport function addEventListenerThis(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$this', type, options);\n}\n\n/**\n * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector\n */\nexport function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$appHost', type, options);\n}\n\nexport function addEventListenerWindow(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$window', type, options);\n}\nexport function addEventListenerDocument(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$document', type, options);\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAsBtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAO5F,SAAS,iBAAiB,kBAA0B,MAAc,UAAe,CAAC,GAAoB;AAC3G,SAAO,CAAC,WAAmB,aAA8B,eAAmC;AAC1F,UAAM,cAAc,UAAU;AAE9B,QAAI,YAAY,yBAAa,YAAwC,iCAAiC,WAAW;AACjH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,+BAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AAEA,cAAU,KAAK,EAAE,aAAa,UAAU,kBAAkB,MAAM,QAAQ,CAAC;AAAA,EAC3E;AACF;AAGO,SAAS,iCAAiC,UAAkB,MAAc,SAA0E;AACzJ,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAS,UAAU,KAAI,CAAC;AACxF;AAEO,SAAS,kCAAkC,UAAkB,MAAc,SAA0E;AAC1J,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,UAAU,UAAU,KAAI,CAAC;AACzF;AACO,SAAS,+BAA+B,UAAkB,MAAc,SAA0E;AACvJ,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,OAAO,UAAU,KAAI,CAAC;AACtF;AACO,SAAS,yBAAyB,UAAkB,MAAc,SAA0E;AACjJ,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,QAAQ,UAAU,KAAI,CAAC;AACvF;AAKO,SAAS,qBAAqB,MAAc,SAA0E;AAC3H,SAAO,iBAAiB,SAAS,MAAM,OAAO;AAChD;AAKO,SAAS,wBAAwB,MAAc,SAA0E;AAC9H,SAAO,iBAAiB,YAAY,MAAM,OAAO;AACnD;AAEO,SAAS,uBAAuB,MAAc,SAA0E;AAC7H,SAAO,iBAAiB,WAAW,MAAM,OAAO;AAClD;AACO,SAAS,yBAAyB,MAAc,SAA0E;AAC/H,SAAO,iBAAiB,aAAa,MAAM,OAAO;AACpD;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }