@dooboostore/simple-web-component 1.0.37 → 1.0.39

package/README.md

@@ -30,7 +30,7 @@ Inject services into Web Components using the `@onInitialize` decorator.
 class Dashboard extends HTMLElement {
   @onInitialize
   onconstructor(
-    @Inject({ symbol: UserService.SYMBOL }) userService: UserService
+    @inject(UserService.SYMBOL) userService: UserService
   ) {
     this.userService = userService;
   }
@@ -43,7 +43,7 @@ class Dashboard extends HTMLElement {
 Render HTML automatically when component connects to DOM.
 
 ```typescript
-@onConnectedInnerHtml({ useShadow: true })
+@onConnectedShadowDom
 render() {
   return `<div>Hello, <span>${this.name}</span>!</div>`;
 }
@@ -53,7 +53,7 @@ render() {
 Apply HTML to specific host element.
 
 ```typescript
-@applyNodeThisInnerHtml({ root: 'light' })
+@applyThisInnerHtmlNodeLightDom
 updateContent() {
   return `<p>Updated content</p>`;
 }
@@ -63,48 +63,204 @@ updateContent() {
 Replace child nodes with new content.
 
 ```typescript
-@applyNodeThisReplaceChildren({ root: 'light' })
+@applyNodeThisReplaceChildrenLightDom
 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 {
+ 
 
-@addEventListener('.test-btn', 'click' )
-@applySlotReplaceChildren('zzz')
-ttt() {
-  return '<div>zzzzzzzzzz</div>'
-}
+  // Method: Replace children in slot with HTML
+  @addEventListener('.update-btn', 'click')
+  @applySlotReplaceChildren('main-content')
+  updateContent() {
+    return '<div>Updated content here</div>';
+  }
 
-@addEventListener('.test-clear-btn', 'click' )
-// @applySlot('zzz', {position: 'clear'})
-@applySlotClear('zzz')
-ttct() {
-  return true;
-}
+  // Method: Append HTML to slot
+  @applySlotAppendHtml('main-content')
+  addMoreContent() {
+    return '<p>Additional content</p>';
+  }
+
+  // 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;
+  }
+
+ 
+
+  @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
+```
+
+
+### 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;
+  }
+
+  @onConnectedShadowDom
+  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**
 
@@ -211,7 +367,7 @@ listItems?: HTMLLIElement[];
 ```
 
 #### @queryThis
-Query the component element itself.
+Query the component element itself.  == this
 
 ```typescript
 @queryThis
@@ -222,18 +378,6 @@ printTag() {
 }
 ```
 
-#### @queryAllThis
-Query all direct children of the component.
-
-```typescript
-@queryAllThis
-children?: HTMLElement[];
-
-getChildCount() {
-  return this.children?.length ?? 0;
-}
-```
-
 ### 6. **Attribute Binding**
 
 #### @attribute
@@ -317,378 +461,6 @@ SWC supports two types of expression syntax for dynamic value evaluation:
 
 ---
 
-#### 8.1 **SwcChoose - Multi-Condition Rendering**
-
-Switch-case style conditional rendering with `swc-when` and `swc-otherwise` sub-templates.
-
-```typescript
-// Component with conditional rendering logic
-@elementDefine('status-display')
-class StatusDisplay extends HTMLElement {
-  @attributeThis('status')
-  status: string = 'pending';
-
-  @setProperty('#status-template', 'value')
-  getStatus() {
-    return this.status;
-  }
-
-  @onConnectedInnerHtml
-  render() {
-    return `
-      <template id="status-template" is="swc-choose">
-        <template is="swc-when" test="$value === 'pending'">
-          <div style="color: orange;">⏳ Processing...</div>
-        </template>
-        
-        <template is="swc-when" test="$value === 'success'">
-          <div style="color: green;">✓ Completed</div>
-        </template>
-        
-        <template is="swc-when" test="$value === 'error'">
-          <div style="color: red;">✗ Failed</div>
-        </template>
-        
-        <!-- Fallback -->
-        <template is="swc-otherwise">
-          <div style="color: gray;">Unknown status</div>
-        </template>
-      </template>
-    `;
-  }
-}
-```
-
-**Expression Features:**
-- `$value` contains the value passed to `swc-choose`
-- `skip-if-same` attribute prevents re-render when same template selected
-- **Attribute substitution with `{{= }}`**: `attribute-name="{{= expression }}"` automatically evaluated
-  
-**Attribute Substitution Example ({{= }} usage):**
-```html
-<template is="swc-choose">
-  <template is="swc-when" test="$value?.type === 'user'">
-    <user-card 
-      data-username="{{= $value?.name }}" 
-      data-email="{{= $value?.email }}"
-      data-id="{{= $value?.id }}"
-    ></user-card>
-  </template>
-  
-  <template is="swc-when" value="$value?.type === 'product'">
-    <product-card 
-      data-product-name="{{= $value?.title }}"
-      data-price="{{= $value?.price }}"
-    ></product-card>
-  </template>
-</template>
-```
-
----
-
-#### 8.2 **SwcIf - Binary Conditional**
-
-If-then-else rendering with optional `swc-default` fallback.
-
-```typescript
-@elementDefine('user-profile')
-class UserProfile extends HTMLElement {
-  private isLoggedIn = false;
-  private userData = { userName: 'Alice', userId: 123 };
-
-  @setProperty('#content', 'value')
-  checkAuth() {
-    return this.isLoggedIn;
-  }
-
-  @onConnectedInnerHtml
-  render() {
-    return `
-      <!-- True condition: renders main template using {{ }} -->
-      <template id="content" is="swc-if" value="{{ $host.isLoggedIn }}">
-        <!-- Attribute substitution with {{= }} expressions -->
-        <user-card 
-          data-username="{{= $host.userData.userName }}"
-          data-userid="{{= $host.userData.userId }}"
-        ></user-card>
-        <div>
-          <h2>Welcome, {{ $host.userData.userName }}</h2>
-          <button on-click="logout">Logout</button>
-        </div>
-        
-        <!-- Fallback template: renders if condition is false -->
-        <template is="swc-default">
-          <div>
-            <p>Please log in</p>
-            <button on-click="login">Login</button>
-          </div>
-        </template>
-      </template>
-    `;
-  }
-}
-```
-
-**Expression Features:**
-- Binary true/false logic with `{{ }} condition`
-- Main template renders when `value` is truthy
-- `swc-default` sub-template renders when value is falsy
-- Dynamic attribute substitution with `{{= }}` supported
-- Access `$host`, `$value`, and other context variables
-- `{{= functionCall() }}` executes functions and returns results for attributes
-
----
-
-#### 8.3 **SwcAsync - Promise/Loading State**
-
-Automatically handle async operations with loading, success, and error states.
-
-```typescript
-@elementDefine('data-loader')
-class DataLoader extends HTMLElement {
-  private data: any = null;
-
-  async fetchData() {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve({ id: 1, name: 'Sample Data', description: 'API response' });
-      }, 2000);
-    });
-  }
-
-  @setProperty('#async-content', 'value')
-  loadData() {
-    return this.fetchData();
-  }
-
-  @onConnectedInnerHtml
-  render() {
-    return `
-      <template id="async-content" is="swc-async" value="{{= $host.fetchData() }}">
-        <!-- Loading State: Shows while Promise is pending -->
-        <template is="swc-loading">
-          <div>🔄 Loading data...</div>
-        </template>
-        
-        <!-- Success State: Shows when Promise resolves -->
-        <!-- Using {{= }} to extract data from resolved Promise -->
-        <template is="swc-success">
-          <data-card
-            data-id="{{= $value.id }}"
-            data-name="{{= $value.name }}"
-          ></data-card>
-          <div>
-            <p>Data ID: {{ $value.id }}</p>
-            <p>Data Name: {{ $value.name }}</p>
-            <p>Description: {{= $value.description }}</p>
-          </div>
-        </template>
-        
-        <!-- Error State: Shows if Promise rejects -->
-        <template is="swc-error">
-          <div style="color: red;">❌ Failed to load data</div>
-        </template>
-      </template>
-    `;
-  }
-}
-```
-
-**Expression Features:**
-- Promise lifecycle management with `{{ }} conditions`
-- `{{= $host.fetchData() }}` - function call expression that executes and returns Promise
-- `{{= $value.propertyName }}` - extract properties from resolved value
-- `swc-loading` - displays during pending state
-- `swc-success` - displays on successful resolution, `$value` contains resolved result
-- `swc-error` - displays on Promise rejection, `$value` contains error
-- Dynamic attribute substitution with `{{= }}` in all states
-- `on-clone-node` and `on-clone-nodes` callbacks for DOM manipulation
-
----
-
-#### 8.4 **SwcLoop - List Rendering**
-
-Iterate over arrays and render templates for each item.
-
-```typescript
-@elementDefine('product-list')
-class ProductList extends HTMLElement {
-  private products = [
-    { id: 1, name: 'Laptop', price: 1200, category: 'electronics' },
-    { id: 2, name: 'Phone', price: 800, category: 'electronics' },
-    { id: 3, name: 'Tablet', price: 500, category: 'electronics' }
-  ];
-
-  @setProperty('#products-list', 'value')
-  getProducts() {
-    return this.products;
-  }
-
-  @onConnectedInnerHtml
-  render() {
-    return `
-      <template id="products-list" is="swc-loop" value="{{= $host.products }}">
-        <!-- Loop iteration with {{ }} for display and {{= }} for attributes -->
-        <div style="margin: 10px; padding: 10px; border: 1px solid #ddd;">
-          <!-- Using {{ }} for template content rendering -->
-          <h3>{{ $item.name }}</h3>
-          <p>Price: {{ $item.price }}</p>
-          <p>ID: {{ $item.id }} (Index: {{ $index }})</p>
-          
-          <!-- Using {{= }} for dynamic attribute substitution -->
-          <product-card
-            data-product-id="{{= $item.id }}"
-            data-product-name="{{= $item.name }}"
-            data-product-price="{{= $item.price }}"
-            data-product-category="{{= $item.category }}"
-          ></product-card>
-          
-          <!-- Computed expressions with {{= }} -->
-          <button data-id="{{= $item.id }}" data-price="{{= $item.price }}">
-            Add to Cart - {{ $item.price }}
-          </button>
-        </div>
-        
-        <!-- Empty fallback: renders when array is empty -->
-        <template is="swc-default">
-          <p>No products available</p>
-        </template>
-      </template>
-    `;
-  }
-}
-```
-
-**Context Variables (Available in loop):**
-- `$item` - current item in iteration
-- `$index` - zero-based index (0, 1, 2, ...)
-- `$value` - entire array being iterated
-- `$nodes` - cloned DOM nodes
-- `$elements` - cloned HTML elements
-- `$firstElement` - first element in cloned nodes
-
-**Expression Features:**
-- `{{= $host.products }}` - function call expression that returns the array to iterate
-- `{{ $item.propertyName }}` - display item properties using standard `{{ }}` 
-- `{{= $item.propertyName }}` - extract item properties for attributes using `{{= }}`
-- `{{= computedValue }}` - compute values in attributes (e.g., calculations, method calls)
-- `swc-default` fallback renders when array is empty
-- All cloned attributes support `{{ }}` and `{{= }}` substitution
-- `on-clone-node` callback fires for each cloned node
-- `on-clone-nodes` callback fires after all nodes cloned
-
-**Common Patterns:**
-```html
-<!-- Template functions with {{= }} -->
-<template is="swc-loop" value="{{= filterProducts($host.products) }}">
-  <!-- Dynamic calculations -->
-  <span>Total: {{= $item.price * $item.quantity }}</span>
-  
-  <!-- Conditional attributes -->
-  <div class="{{= $item.inStock ? 'available' : 'unavailable' }}"></div>
-  
-  <!-- Method calls as attributes -->
-  <button data-formatted="{{= formatPrice($item.price) }}">
-    Buy - {{ formatPrice($item.price) }}
-  </button>
-</template>
-```
-
-**Advanced: replace-wrap-start replace-wrap-end  for Custom Expression Syntax**
-
-Override default `{{ }}` and `{{= }}` syntax with custom wrappers:
-
-```typescript
-@elementDefine('custom-loop')
-class CustomLoop extends HTMLElement {
-  private items = [{ id: 1, name: 'Item 1' }];
-
-  @onConnectedInnerHtml
-  render() {
-    return `
-      <!-- Using custom wrapper syntax [(= ... )] instead of {{= ... }} -->
-      <template id="items" is="swc-loop" replace-wrap-start="[(" replace-wrap-end=")]" value="{{= $host.items }}">
-        <div>
-          <p>Name: [( $item.name )]</p>
-          <button data-id="[( $item.id )]">Click me</button>
-        </div>
-      </template>
-    `;
-  }
-}
-```
-
-**replace-wrap attribute options:**
-- Change expression wrapper from default `{#{ }#}` to custom pattern
-- Supported on: `SwcLoop`, `SwcChoose`, `SwcIf`, `SwcAsync`, `register()` directives
-
----
-
-#### 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
-- ✅ **Performance optimization** - use `skip-if-same` on templates to prevent re-renders
-- ✅ **Dynamic path parameters** - use `{{= $value?.pathData?.id }}` syntax to inject route params with `{{= }}`
-- ✅ **Cleaner DX** - single unified routing pattern
-- ✅ **Full expression support** - use `{{= }}` for complex parameter transformations
-
 ### 9. **Component Communication - Message Bus**
 
 SWC provides a powerful message bus system for inter-component communication through SwcApp. Components can publish and subscribe to typed messages while connected.
@@ -699,7 +471,7 @@ Subscribe to messages while component is connected to DOM.
 ```typescript
 @elementDefine('notification-panel')
 class NotificationPanel extends HTMLElement {
-  @subscribeSwcAppMessageWhileConnected()
+  @subscribeSwcAppMessageWhileConnected
   onAnyMessage(message: SwcAppMessage) {
     console.log('Received message:', message);
   }
@@ -783,363 +555,50 @@ class ProductDetail extends HTMLElement {
 
 ---
 
-### 10. **Accommodation Pattern**
-Factory-based component registration with explicit DI.
+### 10. **SwcApp - Multiple Element Types with Mixin Pattern**
 
-```typescript
-// Component factory
-export default (w: Window) => {
-  const tagName = 'my-component';
-  const existing = w.customElements.get(tagName);
-  if (existing) return tagName;
+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.
 
-  @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]);
-};
+#### Available SwcApp Variants
 
-// Entry point
-const container = Symbol('app');
-bootFactory(w, container);
-appElement.connect({
-  container,
-  window: w,
-  onEngineStarted: () => {
-    appElement.innerHTML = '<root-router></root-router>';
-  }
-});
+```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';
 ```
 
-### 11. **Quickstart - Basic SPA Setup**
+#### Using SwcAppBody (Recommended for SPAs)
 
-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>
+<!-- Use is="swc-app-body" for semantic HTML -->
 <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, subscribeSwcAppRouteChangeWhileConnected, 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')
-    @subscribeSwcAppRouteChangeWhileConnected(['/', '/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" test="['', '/'].includes($value?.path)">
-            <home-page/>
-          </template>
-          
-          <!-- Users List -->
-          <template is="swc-when" test="$value?.path === '/users'">
-            <users-list-page/>
-          </template>
-          
-          <!-- User Detail -->
-          <template is="swc-when" test="$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, onConnectedBefore } 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[] = [];
-
-    @onConnectedBefore
-    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 {
-    @attributeThis('data-username')
-    username: string;
-
-    @attributeThis('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 { defineSwcAppBody, SwcAppInterface, defineSwcAppAll } from '@dooboostore/simple-web-component';
 import bootFactory from './bootFactory';
 
 const w = window;
@@ -1148,64 +607,94 @@ w.document.addEventListener('DOMContentLoaded', async () => {
   const container = Symbol('app');
   
   // Initialize services and components
-  bootFactory(w, container);
+  await defineSwcAppBody(w);
 
-  // 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,
+      onStartedLazyDefineComponent: [yourComponentFactory1, yourComponentFactor2],
       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
+#### 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>';
+  }
+});
 ```
 
-**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 `@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
-9. All components have access to injected services via `@onInitialize`
+### 11. **Accommodation Pattern**
+Factory-based component registration with explicit DI.
+
+```typescript
+// Component factory
+import {SwcUtils, createElement, CreateElementConfig} from '@dooboostore/simple-web-component';
+const tagName = 'my-component';
+export interface MyComponent extends HTMLElement {
+  value: string;
+}
+export const MyComponent = (w: Window|Document, data?: CreateElementConfig) => {
+  return createElement<HTMLElement>(w, tagName, data);
+};
+export default (w: Window) => {
+  const existing = w.customElements.get(tagName);
+  if (existing) return existing;
 
+  @elementDefine(tagName, { window: w })
+  class MyComponentImp extends w.HTMLElement implements MyComponent{
+    value: string = 'value';
+    @onInitialize
+    onconstructor(service: MyService) {
+      this.service = service;
+    }
+  }
+  return w.customElements.whenDefined(swcAppTagName);
+};
 
+```
 ---
 
 ## ⚠️ Critical Rules
@@ -1227,17 +716,17 @@ class UserWidget extends w.HTMLElement { }
 class UserWidget extends w.HTMLElement { }
 ```
 
-### Factory Always Returns tagName (String)
+### Factory Always Returns 
 ```typescript
 export default (w: Window) => {
   const tagName = 'my-element';
   const existing = w.customElements.get(tagName);
-  if (existing) return tagName;  // ← Return string!
+  if (existing) return existing;  
 
   @elementDefine(tagName, { window: w })
   class MyElement extends w.HTMLElement { }
   
-  return tagName;  // ← Always return tagName, never class
+  return existing; 
 };
 ```
 
@@ -1245,7 +734,7 @@ export default (w: Window) => {
 ```typescript
 // ✅ CORRECT
 @onInitialize
-onconstructor(@Inject({ symbol: Service.SYMBOL }) service: Service) {
+onconstructor(@Inject(symbol: Service.SYMBOL) service: Service) {
   this.service = service;
 }