@dooboostore/simple-web-component 1.0.38 → 1.0.40

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;
   }
@@ -39,84 +39,74 @@ class Dashboard extends HTMLElement {
 
 ### 3. **Declarative DOM Updates**
 
-#### @onConnectedInnerHtml
+#### @onConnectedShadow
 Render HTML automatically when component connects to DOM.
 
 ```typescript
-@onConnectedInnerHtml({ useShadow: true })
+@onConnectedShadow
 render() {
   return `<div>Hello, <span>${this.name}</span>!</div>`;
 }
 ```
 
-#### @applyNodeThisInnerHtml
+#### @innerHtmlLightNodeThis
 Apply HTML to specific host element.
 
 ```typescript
-@applyNodeThisInnerHtml({ root: 'light' })
+@innerHtmlLightNodeThis
 updateContent() {
   return `<p>Updated content</p>`;
 }
 ```
 
-#### @applyNodeThisReplaceChildren
+#### @replaceChildrenLightNodeThis
 Replace child nodes with new content.
 
 ```typescript
-@applyNodeThisReplaceChildren({ root: 'light' })
+@replaceChildrenLightNodeThis
 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.
 
 ```typescript
+import {clearSlot} from "./applySlot";
+
 @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')
+  @replaceChildrenSlot('main-content')
   updateContent() {
     return '<div>Updated content here</div>';
   }
 
   // Method: Append HTML to slot
-  @applySlotAppendHtml('main-content')
+  @appendHtmlSlot('main-content')
   addMoreContent() {
     return '<p>Additional content</p>';
   }
 
   // Method: Append text to slot
-  @applySlotAppendText('sidebar')
+  @appendTextSlot('sidebar')
   addSidebarText() {
     return 'Sidebar text: ' + new Date().toISOString();
   }
 
   // Method: Clear slot content
   @addEventListener('.clear-btn', 'click')
-  @applySlotClear('main-content')
+  @clearSlot('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
+  @onConnectedLight
   render() {
     return `
       <div>
@@ -140,39 +130,33 @@ class ContentManager extends HTMLElement {
 - `<!--[[ 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
+- clearSlot
+- prependHtmlSlot
+- prependSlot
+- prependTextSlot
+- appendHtmlSlot
+- appendTextSlot
+- appendSlot
+- replaceChildrenHtmlSlot
+- replaceChildrenSlot
+- replaceChildrenTextSlot
+
 
 **Position Options:**
 ```typescript
 export type ApplySlotPosition = 
+  | 'prepend'
   | 'prependHtml'        // Add HTML at beginning
   | 'prependText'        // Add text at beginning
+  | 'append'         
   | 'appendHtml'         // Add HTML at end
   | 'appendText'         // Add text at end
+  | 'replaceChildren'
   | '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**
 
@@ -207,14 +191,13 @@ class CounterApp extends HTMLElement {
         <!--[text Count: @count@ ]-->
         
         <!-- Attribute binding with a: prefix -->
-        <div a:title="Count is @count@"></div>
+        <div a:title="'Count is'+@count@"></div>
         
         <!-- Event binding with e: prefix -->
-        <button e:click="increment">Increment (@count@)</button>
+        <button e:click="@increment@()">Increment (@count@)</button>
         
         <!-- Conditional rendering -->
         <div a:style="@isActive@ ? 'color: green' : 'color: red'">
-          Status: @isActive@
         </div>
       </div>
     `;
@@ -233,7 +216,7 @@ class CounterApp extends HTMLElement {
 - `<!--[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
+- `e:eventName="@methodName@()"` - Bind events to methods
 
 **How @state Works:**
 1. Declare property with `@state('stateName')`
@@ -263,7 +246,7 @@ class UserProfile extends HTMLElement {
     this.isEditing = !this.isEditing;
   }
 
-  @onConnectedInnerHtml
+  @onConnectedShadow
   render() {
     return `
       <div>
@@ -276,9 +259,7 @@ class UserProfile extends HTMLElement {
           <!--[html @isEditing@ ? '<input type="text" />' : '<span>View Mode</span>' ]-->
         </div>
         
-        <button e:click="toggleEdit">
-          @isEditing@ ? 'Save' : 'Edit'
-        </button>
+        <button e:click="toggleEdit"> toggleEdit </button>
       </div>
     `;
   }
@@ -307,6 +288,17 @@ onCriticalClick(event: Event) {
 }
 ```
 
+**other Event decorators**
+- addEventListenerDelegateLightDom
+- addEventListenerDelegateShadowDom
+- addEventListenerDelegateAllDom
+- addEventListenerDelegate
+- addEventListenerThis
+- addEventListenerAppHost
+- addEventListenerWindow
+- addEventListenerDocument
+
+
 #### @emitCustomEvent
 Emit custom events with data.
 
@@ -390,7 +382,7 @@ listItems?: HTMLLIElement[];
 ```
 
 #### @queryThis
-Query the component element itself.
+Query the component element itself.  == this
 
 ```typescript
 @queryThis
@@ -401,29 +393,17 @@ printTag() {
 }
 ```
 
-#### @queryAllThis
-Query all direct children of the component.
-
-```typescript
-@queryAllThis
-children?: HTMLElement[];
-
-getChildCount() {
-  return this.children?.length ?? 0;
-}
-```
-
 ### 6. **Attribute Binding**
 
 #### @attribute
 Bind HTML attributes to properties (automatic sync).
 
 ```typescript
-@attribute
-width: string = '100px';
+@attributeThis
+width: string = '100px';  // Bind to this.width
 
 @attribute('data-id')
-resourceId: string = '';
+resourceId: string;  // element attribute first 
 ```
 
 #### @attributeThis
@@ -431,7 +411,7 @@ Bind attributes on host element itself.
 
 ```typescript
 @attributeThis('product-id')
-productId: string = '';
+productId?: string;
 
 @onInitialize
 onconstructor() {
@@ -496,321 +476,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
-
----
-
-**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.
@@ -821,7 +486,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);
   }
@@ -948,7 +613,7 @@ import {
 ```typescript
 // index.ts
 import 'reflect-metadata';
-import { SwcAppInterface, defineSwcAppAll } from '@dooboostore/simple-web-component';
+import { defineSwcAppBody, SwcAppInterface, defineSwcAppAll } from '@dooboostore/simple-web-component';
 import bootFactory from './bootFactory';
 
 const w = window;
@@ -957,10 +622,8 @@ w.document.addEventListener('DOMContentLoaded', async () => {
   const container = Symbol('app');
   
   // Initialize services and components
-  bootFactory(w, container);
+  await defineSwcAppBody(w);
 
-  // Register all SwcApp variants
-  await defineSwcAppAll(w);
 
   // Get app root element
   const appElement = w.document.querySelector('#app') as SwcAppInterface;
@@ -970,6 +633,7 @@ w.document.addEventListener('DOMContentLoaded', async () => {
       path: '/',
       routeType: 'path',
       container: container,
+      onStartedLazyDefineComponent: [yourComponentFactory1, yourComponentFactor2],
       window: w,
       onEngineStarted: () => {
         console.log('🚀 Application started successfully');
@@ -979,64 +643,41 @@ w.document.addEventListener('DOMContentLoaded', async () => {
 });
 ```
 
-#### 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
+import {defineSwcApp} from "./SwcApp";
+
 export default (w: Window) => {
   const tagName = 'my-component';
   const existing = w.customElements.get(tagName);
   if (existing) return tagName;
 
-  @elementDefine(tagName, { window: w })
+  @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);
+await defineSwcAppBody(w)
+const appElement = w.document.querySelector('#app') as SwcAppInterface;
 appElement.connect({
   container,
   window: w,
+  onStartedLazyDefineComponent: [...pageFactories, ...componentFactories],
   onEngineStarted: () => {
     appElement.innerHTML = '<root-router></root-router>';
   }
@@ -1048,487 +689,62 @@ 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 tagName = 'my-component';
   const existing = w.customElements.get(tagName);
-  if (existing) return tagName;
+  if (existing) return existing;
 
   @elementDefine(tagName, { window: w })
-  class MyComponent extends w.HTMLElement {
+  class MyComponentImp extends w.HTMLElement implements MyComponent{
+    value: string = 'value';
     @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]);
+  return w.customElements.whenDefined(swcAppTagName);
 };
 
-// Entry point
-const container = Symbol('app');
-bootFactory(w, container);
-appElement.connect({
-  container,
-  window: w,
-  onEngineStarted: () => {
-    appElement.innerHTML = '<root-router></root-router>';
-  }
-});
 ```
-
-### 12. **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>
-<!-- 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>
-</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, attributeThis } 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, 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');
-  
-  // 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 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
-9. All components have access to injected services via `@onInitialize`
-
-
 ---
 
 ## ⚠️ Critical Rules
 
 ### DO NOT Use @Sim on Web Components
-`@Sim` is for **Services only**. Web Components should use `@elementDefine`.
+`@sim` is for **Services only**. Web Components should use `@elementDefine`.
 
 ```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 { }
 ```
 
-### 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; 
 };
 ```
 
@@ -1536,7 +752,7 @@ export default (w: Window) => {
 ```typescript
 // ✅ CORRECT
 @onInitialize
-onconstructor(@Inject({ symbol: Service.SYMBOL }) service: Service) {
+onconstructor(@inject(Service.SYMBOL) service: Service) {
   this.service = service;
 }
 
@@ -1548,19 +764,20 @@ constructor(private service: Service) { super(); }  // Web Components can't have
 
 ## 📚 Examples
 
-- **[Commerce (E-Commerce SPA)](./examples/commerce)** - Full shopping cart example
-- **[Stock (Market Dashboard)](./examples/stock)** - Real-time data with routing
-- **[Accommodation (Reference Pattern)](./examples/accommodation)** - Standard setup pattern
+- **[Commerce (E-Commerce SPA)](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-web-component/examples/commerce)** - Full shopping cart example
+- **[Stock (Market Dashboard)](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-web-component/examples/stock)** - Real-time data with routing
+- **[Accommodation (Reference Pattern)](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-web-component/examples/accommodation)** - Standard setup pattern
 
 ---
 
 ## 🔗 Related Packages
 
-- **[@dooboostore/simple-boot](../simple-boot)** - DI & AOP Container
-- **[@dooboostore/core-web](../core-web)** - Web Utilities & Router
-- **[@dooboostore/dom-parser](../dom-parser)** - HTML Parsing & AST
+- **[@dooboostore/simple-boot](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-boot)** - DI & AOP Container
+- **[@dooboostore/core-web](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/core-web)** - Web Utilities & Router
+- **[@dooboostore/dom-parser](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/dom-parser)** - HTML Parsing & AST
 
 ---
 
 ## 📄 License
-MIT © 2024 dooboostore-develop
+[MIT License](https://github.com/dooboostore-develop/packages/tree/main/%40dooboostore/simple-web-component/LICENSE.md)
+