@dooboostore/simple-web-component 1.0.36 → 1.0.38

package/src/decorators/lifecycles.ts

@@ -8,21 +8,76 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-compone
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
+export const ON_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component');
 export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
-export const INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
+export const ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for('simple-web-component:on-completed');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 export interface InnerHtmlOptions {
-  replaceWrap?:{ start: string, end:string},
+  ssrFirst?: boolean;
+  // replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
 }
-
 export interface InnerHtmlMetadata {
   propertyKey: string | symbol;
   options: InnerHtmlOptions;
 }
 
+export interface OnConnectedOptions {
+  ssrFirst?: boolean;
+}
+export interface OnConnectedMetadata {
+  propertyKey: string | symbol;
+  options: OnConnectedOptions;
+}
+
+
+export function onConnectedBefore(options: OnConnectedOptions): MethodDecorator;
+export function onConnectedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedBefore(arg1?: OnConnectedOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: OnConnectedOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    return decorator({}, arg1!, arg2);
+  }
+
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as OnConnectedOptions) || {}, target, propertyKey);
+  };
+}
+
+export function onConnectedAfter(options: OnConnectedOptions): MethodDecorator;
+export function onConnectedAfter(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  const decorator = (options: OnConnectedOptions, target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ON_AFTER_CONNECTED_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+
+  if (arg2) {
+    return decorator({}, arg1!, arg2);
+  }
+
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((arg1 as OnConnectedOptions) || {}, target, propertyKey);
+  };
+}
+
+
 function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
@@ -36,9 +91,9 @@ function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
 }
 
 export const onInitialize = createLifecycleDecorator(ON_INITIALIZE_METADATA_KEY);
-export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
-export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-export const onConnected = onConnectedAfter;
+// export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
+// export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
+// export const onConnected = onConnectedAfter;
 
 export const onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
 export const onDisconnectedAfter = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
@@ -50,42 +105,76 @@ export const onAdopted = onAdoptedAfter;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
-// export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+export const onConnectedCompleted = createLifecycleDecorator(ON_CONNECTED_COMPLETED_METADATA_KEY);
 
-/**
- * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
- */
-export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
-export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
-  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-  };
 
-  if (arg2) {
-    return decorator({}, arg1!, arg2);
+
+
+
+const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+  const constructor = target.constructor;
+  let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(ON_CONNECTED_METADATA_KEY, constructor);
+  if (!list) {
+    list = [];
+    ReflectUtils.defineMetadata(ON_CONNECTED_METADATA_KEY, list, constructor);
+  }
+  list.push({ propertyKey, options });
+};
+
+export function onConnectedShadowDom(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedShadowDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedShadowDom(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey) { // no parameter option  @decorator
+    return decorator({useShadow: true}, optionOrTarget!, propertyKey);
   }
+  // parameter option @decorator()
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator({...optionOrTarget??{}, useShadow: true}, target, propertyKey);
+  };
+}
 
+export function onConnectedLightDom(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedLightDom(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey) { // no parameter option  @decorator
+    return decorator({useShadow: false}, optionOrTarget!, propertyKey);
+  }
+  // parameter option @decorator()
   return (target: Object, propertyKey: string | symbol) => {
-    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
+    decorator({...optionOrTarget??{}, useShadow: false}, target, propertyKey);
+  };
+}
+export function onConnected(options: InnerHtmlOptions): MethodDecorator;
+export function onConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnected(optionOrTarget: InnerHtmlOptions | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey) { // no parameter option  @decorator
+    return decorator({}, optionOrTarget!, propertyKey);
+  }
+  // parameter option @decorator()
+  return (target: Object, propertyKey: string | symbol) => {
+    decorator((optionOrTarget as InnerHtmlOptions) || {}, target, propertyKey);
   };
 }
 
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
-export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
-  const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
-  return results.length > 0 ? (results as unknown as T) : undefined;
+// export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
+export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] => {
+  const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target)??[];
+  return results;
 };
 
-export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
+export const findAllOnConnectedMetadata = (target: any): InnerHtmlMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+};
+export const findAllOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+};
+export const findAllOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+  return ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
 };

package/src/decorators/publishSwcAppMessage.ts

@@ -1,6 +1,5 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { SwcAppMessage } from '../types';
-import { SwcUtils } from '../utils/Utils';
+import {ReflectUtils} from '@dooboostore/core';
+import {SwcUtils} from '../utils/Utils';
 
 export const PUBLISH_SWC_APP_MESSAGE_METADATA_KEY = Symbol.for('simple-web-component:publish-swc-app-message');
 

package/src/decorators/query.ts

@@ -1,12 +1,12 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface QueryMetadata {
   propertyKey: string | symbol;
   selector: string;
-  options: SwcQueryOptions;
+  options: SwcQueryOptions ;
 }
 
 export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
@@ -180,7 +180,7 @@ export function queryAppHost(targetOrOptions?: any, propertyKey?: string | symbo
   }
 }
 
-export const getQueryMetadata = (target: any): QueryMetadata[] | undefined => {
+export const getQueryMetadata = (target: any): QueryMetadata[]  => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];
 };

package/src/decorators/queryAll.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface QueryAllMetadata {
   propertyKey: string | symbol;

package/src/decorators/setProperty.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { HelperHostSet, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export interface PropertySetOptions extends SwcQueryOptions {
   name?: string;

package/src/decorators/state.ts

@@ -0,0 +1,84 @@
+import {ReflectUtils} from '@dooboostore/core';
+import {ElementApply} from "@dooboostore/core-web";
+import {SwcUtils} from "../utils/Utils";
+import {getElementConfig} from "./elementDefine";
+
+export interface StateMetadata {
+  propertyKey: string | symbol;
+  name: string;
+}
+
+export const STATE_METADATA_KEY = Symbol.for('simple-web-component:state');
+
+// export function state(target: SpecialSelector): PropertyDecorator;
+// export function state(): PropertyDecorator;
+export function state(target: Object, propertyKey: string | symbol): void;
+export function state(name: string): PropertyDecorator;
+/**
+ * Supports both forms:
+ * - @state
+ * - @state()
+ * - @state('selector')
+ */
+export function state(nameOrTarget?: string | Object, propertyKey?: string | symbol): any {
+
+  const stateDefine = (targetObj: any, stateMetadata: StateMetadata) => {
+
+    let storage = targetObj[stateMetadata.propertyKey];
+    // console.log('ssssssssssssssss', storage, stateMetadata.propertyKey)
+    Object.defineProperty(targetObj, stateMetadata.propertyKey, {
+      set(this: any, nv: string) {
+        console.log('setState!!', nv)
+        storage = nv;
+        const config = getElementConfig(this)
+        const ea = new ElementApply(this, {id: this._swcId});
+        const helperHostSet = SwcUtils.getHelperAndHostSet(config.window, this);
+        const stateContext: any = {...helperHostSet};
+        findAllStateMetadata(this).forEach(it => {
+          stateContext[it.name] = this[it.propertyKey]
+        })
+        ea.apply({context:stateContext, targetVariableName: stateMetadata.name, bind: this});
+      },
+      get(this: any) {
+        return storage;
+      },
+      enumerable: true,
+      configurable: true
+    });
+  }
+
+  // If used as @state (no parentheses), TypeScript will call this function with (target, propertyKey)
+  if (typeof nameOrTarget === 'object' && propertyKey) {
+    const targetObj = nameOrTarget as Object;
+    const name = String(propertyKey);
+    const constructor = (targetObj as any).constructor;
+    let states = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);
+    if (!states) {
+      states = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, states, constructor);
+    }
+    const stateMetadata = {propertyKey, name};
+    states.push(stateMetadata);
+    stateDefine(targetObj, stateMetadata);
+    return;
+  }
+
+  // Otherwise return a decorator factory
+  return (targetObj: Object, propertyKey: string | symbol): void => {
+    const name = String(nameOrTarget);
+    const constructor = targetObj.constructor;
+    let states = ReflectUtils.getMetadata<StateMetadata[]>(STATE_METADATA_KEY, constructor);
+    if (!states) {
+      states = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, states, constructor);
+    }
+    const stateMetadata = {propertyKey, name};
+    states.push(stateMetadata);
+    stateDefine(targetObj, stateMetadata);
+  };
+}
+
+export const findAllStateMetadata = (target: any): StateMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor) ?? [];
+};

package/src/decorators/subscribeSwcAppMessageWhileConnected.ts

@@ -1,5 +1,5 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { SwcAppMessage } from '../types';
+import { SwcAppMessage, SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
 export const SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-message-while-connected');
 

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -1,5 +1,6 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { Router } from '@dooboostore/core-web';
+import {ReflectUtils} from '@dooboostore/core';
+import {Router} from '@dooboostore/core-web';
+import {HelperHostSet} from '../types';
 
 export const SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-route-change-while-connected');
 
@@ -12,7 +13,7 @@ export interface SwcAppRouteChangeSubscriberMetadata {
 
 export interface SwcAppRouteChangeOptions {
   path?: RoutePathType;
-  filter?: (router: Router, currentThis: any) => boolean;
+  filter?: (router: Router, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {

package/src/elements/SwcApp.ts

@@ -0,0 +1,241 @@
+import {elementDefine} from "../decorators";
+import {SwcAppInterface} from "../types";
+import {SwcAppMixin} from "./SwcAppMixin";
+import {SwcUtils, createElement, CreateElementConfig} from "../utils/Utils";
+
+// ============================================
+// SwcApp (HTMLElement)
+// ============================================
+export const swcAppTagName = 'swc-app';
+
+export const SwcApp = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface>(w, swcAppTagName, data);
+};
+
+export const defineSwcApp = async (w: Window) => {
+  const existing = w.customElements.get(swcAppTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppTagName, {window: w})
+  class SwcAppImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppTagName);
+};
+
+// ============================================
+// SwcAppBody (HTMLBodyElement)
+// ============================================
+export const swcAppBodyTagName = 'swc-app-body';
+
+export const SwcAppBody = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLBodyElement>(w, swcAppBodyTagName, data);
+};
+
+export const defineSwcAppBody = async (w: Window) => {
+  const existing = w.customElements.get(swcAppBodyTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppBodyTagName, {window: w, extends: 'body'})
+  class SwcAppBodyImpl extends SwcAppMixin(w.HTMLBodyElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppBodyTagName);
+};
+
+// ============================================
+// SwcAppDiv (HTMLDivElement)
+// ============================================
+export const swcAppDivTagName = 'swc-app-div';
+
+export const SwcAppDiv = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLDivElement>(w, swcAppDivTagName, data);
+};
+
+export const defineSwcAppDiv = async (w: Window) => {
+  const existing = w.customElements.get(swcAppDivTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppDivTagName, {window: w, extends: 'div'})
+  class SwcAppDivImpl extends SwcAppMixin(w.HTMLDivElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppDivTagName);
+};
+
+// ============================================
+// SwcAppSection (HTMLElement)
+// ============================================
+export const swcAppSectionTagName = 'swc-app-section';
+
+export const SwcAppSection = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppSectionTagName, data);
+};
+
+export const defineSwcAppSection = async (w: Window) => {
+  const existing = w.customElements.get(swcAppSectionTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppSectionTagName, {window: w, extends: 'section'})
+  class SwcAppSectionImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppSectionTagName);
+};
+
+// ============================================
+// SwcAppMain (HTMLElement)
+// ============================================
+export const swcAppMainTagName = 'swc-app-main';
+
+export const SwcAppMain = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppMainTagName, data);
+};
+
+export const defineSwcAppMain = async (w: Window) => {
+  const existing = w.customElements.get(swcAppMainTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppMainTagName, {window: w, extends: 'main'})
+  class SwcAppMainImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppMainTagName);
+};
+
+// ============================================
+// SwcAppArticle (HTMLElement)
+// ============================================
+export const swcAppArticleTagName = 'swc-app-article';
+
+export const SwcAppArticle = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppArticleTagName, data);
+};
+
+export const defineSwcAppArticle = async (w: Window) => {
+  const existing = w.customElements.get(swcAppArticleTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppArticleTagName, {window: w, extends: 'article'})
+  class SwcAppArticleImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppArticleTagName);
+};
+
+// ============================================
+// SwcAppHeader (HTMLElement)
+// ============================================
+export const swcAppHeaderTagName = 'swc-app-header';
+
+export const SwcAppHeader = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppHeaderTagName, data);
+};
+
+export const defineSwcAppHeader = async (w: Window) => {
+  const existing = w.customElements.get(swcAppHeaderTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppHeaderTagName, {window: w, extends: 'header'})
+  class SwcAppHeaderImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppHeaderTagName);
+};
+
+// ============================================
+// SwcAppFooter (HTMLElement)
+// ============================================
+export const swcAppFooterTagName = 'swc-app-footer';
+
+export const SwcAppFooter = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppFooterTagName, data);
+};
+
+export const defineSwcAppFooter = async (w: Window) => {
+  const existing = w.customElements.get(swcAppFooterTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppFooterTagName, {window: w, extends: 'footer'})
+  class SwcAppFooterImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppFooterTagName);
+};
+
+// ============================================
+// SwcAppNav (HTMLElement)
+// ============================================
+export const swcAppNavTagName = 'swc-app-nav';
+
+export const SwcAppNav = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppNavTagName, data);
+};
+
+export const defineSwcAppNav = async (w: Window) => {
+  const existing = w.customElements.get(swcAppNavTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppNavTagName, {window: w, extends: 'nav'})
+  class SwcAppNavImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppNavTagName);
+};
+
+// ============================================
+// SwcAppAside (HTMLElement)
+// ============================================
+export const swcAppAsideTagName = 'swc-app-aside';
+
+export const SwcAppAside = (w: Window, data?: CreateElementConfig) => {
+  return createElement<SwcAppInterface & HTMLElement>(w, swcAppAsideTagName, data);
+};
+
+export const defineSwcAppAside = async (w: Window) => {
+  const existing = w.customElements.get(swcAppAsideTagName);
+  if (existing) return existing;
+
+  @elementDefine(swcAppAsideTagName, {window: w, extends: 'aside'})
+  class SwcAppAsideImpl extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
+    // SwcAppMixin에서 모든 기능을 상속받음
+  }
+
+  return w.customElements.whenDefined(swcAppAsideTagName);
+};
+
+// ============================================
+// Factory Array
+// ============================================
+export const swcAppFactories = [
+  defineSwcApp,
+  defineSwcAppBody,
+  defineSwcAppDiv,
+  defineSwcAppSection,
+  defineSwcAppMain,
+  defineSwcAppArticle,
+  defineSwcAppHeader,
+  defineSwcAppFooter,
+  defineSwcAppNav,
+  defineSwcAppAside
+];
+
+// ============================================
+// Define All SwcApp Elements
+// ============================================
+export const defineSwcAppAll = async (w: Window) => {
+  await Promise.all(swcAppFactories.map(factory => factory(w)));
+  return w.customElements.whenDefined(swcAppTagName);
+};
+
+// Default export for backward compatibility
+export default defineSwcAppAll;