@dooboostore/simple-web-component 1.0.38 → 1.0.40

package/src/decorators/applySlot.ts

@@ -1,7 +1,8 @@
-import {ReflectUtils} from '@dooboostore/core';
+import {OptionalType, ReflectUtils} from '@dooboostore/core';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from "../utils/Utils";
 import {NodeSlot} from "@dooboostore/core-web";
+import {HelperHostSet} from "../types";
 /*
 <!-- beforebegin -->
 <p> <-- it's me
@@ -11,10 +12,11 @@ import {NodeSlot} from "@dooboostore/core-web";
 </p>
 <!-- afterend -->
  */
-export type ApplySlotPosition = 'prependHtml' | 'prependText' | 'appendHtml' | 'appendText' | 'replaceChildrenHtml' | 'replaceChildrenText' | 'clear';
+export type ApplySlotPosition = 'prepend' | 'prependHtml' | 'prependText' | 'append' | 'appendHtml' | 'appendText' | 'replaceChildren' | 'replaceChildrenHtml' | 'replaceChildrenText' | 'clear';
 
 export interface ApplySlotOptions {
-  position?: ApplySlotPosition;
+  position: ApplySlotPosition;
+  fallback?: (helper: HelperHostSet) => string | Node;
   // root?: SwcRootType;
   /**
    * Filter function to determine whether to perform DOM operation.
@@ -29,8 +31,8 @@ export interface ApplySlotOptions {
 
 export interface ApplySlotMetadata {
   propertyKey: string | symbol;
-  id: string;
-  type: 'method' | 'property';
+  targetId: string;
+  // type: 'method' | 'property';
   options: ApplySlotOptions;
 }
 
@@ -75,33 +77,28 @@ export const APPLY_SLOT_METADATA_KEY = Symbol.for('simple-web-component:apply-sl
 //     }
 // };
 
+const applyToDom = (swcId: string, id: string, pos: ApplySlotPosition, nodes: Node[]) => {
+  const nodeSlot = new NodeSlot(this, swcId);
+  if (pos === 'replaceChildrenText' || pos === 'replaceChildren' || pos === 'replaceChildrenHtml') {
+    nodeSlot.replaceChildren(id, ...nodes);
+  } else if (pos === 'appendHtml' || pos === 'append' || pos === 'appendText') {
+    nodeSlot.append(id, ...nodes);
+  } else if (pos === 'prependHtml' || pos === 'prepend' || pos === 'prependText') {
+    nodeSlot.prepend(id, ...nodes);
+  } else if (pos === 'clear') {
+    nodeSlot.clear(id);
+  }
+}
+
 /**
  * @applyNode decorator to surgically add/replace nodes to a target element.
  */
-export function applySlot(id: string, options: ApplySlotOptions = { position: 'replaceChildrenHtml' }): MethodDecorator & PropertyDecorator {
-  return (targetObj: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
-    const type = descriptor === undefined ? 'property' : 'method';
-
-    if (type === 'property') {
-            Object.defineProperty(targetObj, propertyKey, {
-              get(this: any) {
-                const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
-                return nodeSlot;
-              },
-              set(this: any, nv: any) {
-                if(nv) {
-                  // 있을때 아무일도안함
-                } else {
-                  const nodeSlot = new NodeSlot(this, `${this._swcId}-${id}`);
-                  nodeSlot.clear();
-                }
-              },
-              configurable: true,
-              enumerable: true,
-            })
-     // return nodeSlot;
-     //  return;
-    }
+export function applySlot(targetId: string, opt: OptionalType<ApplySlotOptions, 'position'>): MethodDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<any>) => {
+
+
+    const options: ApplySlotOptions = {position: 'replaceChildren', ...opt};
+
 
     const constructor = targetObj.constructor;
     let metaList = ReflectUtils.getOwnMetadata(APPLY_SLOT_METADATA_KEY, constructor) as ApplySlotMetadata[];
@@ -109,80 +106,101 @@ export function applySlot(id: string, options: ApplySlotOptions = { position: 'r
       metaList = []
       ReflectUtils.defineMetadata(APPLY_SLOT_METADATA_KEY, metaList, constructor);
     }
-    metaList.push({ propertyKey, id, type, options });
-
-
-
-    if (type === 'method') {
-      const original = descriptor.value;
-      descriptor.value = function (...args: any[]) {
-        ensureInit(this);
-
-        const conf = getElementConfig(this);
-        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
-        const currentDoc = currentWin.document;
-        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
-        let res = original.apply(this, args);
-        if (res) {
-          // res = SwcUtils.projectProcessHtml(this, res)
-          const nodeSlot = new NodeSlot(this, this._swcId);
-          const pos = options.position || 'replaceChildrenHtml';
-          const doc = currentWin.document;
-          if (pos === 'replaceChildrenHtml') {
-            nodeSlot.replaceChildrenHtml(id, res);
-          } else if (pos === 'replaceChildrenText') {
-            nodeSlot.replaceChildrenText(id, res);
-          } else if (pos === 'appendHtml') {
-            nodeSlot.appendHtml(id, res);
-          } else if (pos === 'appendText') {
-            nodeSlot.appendText(id, res);
-          } else if (pos === 'prependHtml') {
-            nodeSlot.prependHtml(id, res);
-          } else if (pos === 'prependText') {
-            nodeSlot.prependText(id, res);
-          } else if (pos === 'clear') {
-            nodeSlot.clear(id);
-          }
-
-          // const stateContext: any = {...hostSet};
-          // getStateMetadata(this).forEach(it => {
-          //   stateContext[it.name] = this[it.propertyKey]
-          // })
-          // new ElementApply(this, {id: this._swcId}).apply({target:'noInitialized', context: stateContext, bind: this});
+    metaList.push({propertyKey, targetId, options});
+
+
+    const original = descriptor.value;
+    descriptor.value = function (...args: any[]) {
+      ensureInit(this);
+
+      const conf = getElementConfig(this);
+      const currentWin = conf.window;
+      const swcId = this._swcId;
+      const currentDoc = currentWin.document;
+      const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+      const pos = options.position;
+
+      const resToNodes = (res: string | Node) => {
+        const nodes: Node[] = [];
+
+        if (typeof res === 'string' && (pos === 'replaceChildrenHtml' || pos === 'appendHtml' || pos === 'prependHtml')) {
+          const t = currentWin.document.createElement('template');
+          t.innerHTML = res;
+          nodes.push(...Array.from(t.content.childNodes));
+        } else if (typeof res === 'string' && (pos === 'replaceChildrenText' || pos === 'prependText' || pos === 'appendText')) {
+          nodes.push(currentWin.document.createTextNode(res));
+        } else if (typeof res === 'object') {
+          nodes.push(res);
         }
-        return res;
-      };
-    }
+        SwcUtils.projectProcessHtml(swcId, nodes, currentDoc);
+        return nodes;
+      }
+
+      const fallbackNodes: Node[] = [];
+      if (options.fallback) {
+        const res: string | Node = options.fallback.call(this, hostSet);
+        const nodes: Node[] = resToNodes(res);
+        fallbackNodes.push(...nodes);
+        applyToDom(swcId, targetId, options.position, nodes);
+      }
+
+      let res = original.apply(this, args);
+      if (res instanceof Promise) {
+        return res.then(asyncRes => {
+          const nodes = resToNodes(asyncRes)
+          fallbackNodes.forEach((it: any) => it.remove());
+          applyToDom(swcId, targetId, options.position, nodes);
+        })
+      } else {
+        const nodes: Node[] = resToNodes(res);
+        applyToDom(swcId, targetId, options.position, nodes);
+      }
+    };
   };
 }
 
-// export const findAllApplySlotMetadata = (target: any): Map<string | symbol, ApplySlotMetadata> => {
-export const findAllApplySlotMetadata = (target: any): ApplySlotMetadata[] => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
-};
+export function clearSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'clear'});
+}
 
-export function applySlotClear(id: string): MethodDecorator {
-  return applySlot(id, { position: 'clear' });
+export function prependHtmlSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'prependHtml'});
 }
-export function applySlotPrependHtml(id: string): MethodDecorator {
-  return applySlot(id, { position: 'prependHtml' });
+
+export function prependSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'prepend'});
 }
-export const applySlotPrepend = applySlotPrependHtml;
-export function applySlotPrependText(id: string): MethodDecorator {
-  return applySlot(id, { position: 'prependText' });
+
+export function prependTextSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'prependText'});
 }
-export function applySlotAppendHtml(id: string): MethodDecorator {
-  return applySlot(id, { position: 'appendHtml' });
+
+export function appendHtmlSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'appendHtml'});
 }
-export function applySlotAppendText(id: string): MethodDecorator {
-  return applySlot(id, { position: 'appendText' });
+
+export function appendTextSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'appendText'});
 }
-export const applySlotAppend = applySlotAppendHtml;
-export function applySlotReplaceChildrenHtml(id: string): MethodDecorator {
-  return applySlot(id, { position: 'replaceChildrenHtml' });
+
+export function appendSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'append'});
 }
-export const applySlotReplaceChildren = applySlotReplaceChildrenHtml;
-export function applySlotReplaceChildrenText(id: string): MethodDecorator {
-  return applySlot(id, { position: 'replaceChildrenText' });
+
+export function replaceChildrenHtmlSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'replaceChildrenHtml'});
 }
+
+export function replaceChildrenSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'replaceChildren'});
+}
+
+export function replaceChildrenTextSlot(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'replaceChildrenText'});
+}
+
+// export const findAllApplySlotMetadata = (target: any): Map<string | symbol, ApplySlotMetadata> => {
+export const findAllApplySlotMetadata = (target: any): ApplySlotMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
+};

package/src/decorators/changedAttributeThis.ts

@@ -2,7 +2,7 @@ import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
-export interface ChangedAttributeThisOptions {
+export interface ChangedAttributeThisOptions  {
   type?: typeof Number | typeof Boolean | typeof String;
   while?: 'connected';
 }

package/src/decorators/elementDefine.ts

@@ -3,8 +3,7 @@ import {getAddEventListenerMetadata} from './addEventListener';
 import {findAllLifecycleMetadata, findAllOnConnectedAfterMetadata, findAllOnConnectedBeforeMetadata, findAllOnConnectedMetadata, ON_AFTER_ADOPTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_CONNECTED_COMPLETED_METADATA_KEY, ON_INITIALIZE_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
 import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttributeThis';
-import {findAllAttributeApplyMetadata} from './applyAttribute';
-import {findAllAttributeMetadata, getAttributeValue} from './attribute';
+import {findAllAttributeApplyMetadata, findAllAttributeMetadata, getAttributeValue} from './applyAttribute';
 import {getQueryMetadata} from './query';
 import {getQueryAllMetadata} from './queryAll';
 import {SwcUtils} from '../utils/Utils';
@@ -15,6 +14,7 @@ import {ConvertUtils, ElementApply, NodeSlot} from '@dooboostore/core-web';
 import {isSSR} from "../elements/SwcAppMixin";
 import {findAllApplySlotMetadata} from "./applySlot";
 import {findAllStateMetadata} from "./state";
+import {findAllPropertyMetadata} from "./applyProperty";
 
 // --- Core Interfaces & Types ---
 
@@ -69,16 +69,18 @@ export const ensureInit = (inst: any) => { // HTMLElement
     // ║ 4. own property를 삭제하면 JavaScript가 prototype의 getter를 찾게 됨          ║
     // ║    → getter 호출됨 → DOM 속성 값 동기화됨                                     ║
     // ╚════════════════════════════════════════════════════════════════════════════════╝
+    // 함수는 decorator에서 값자체를 descriptor.value = function (...args: any[]) {...
 
     // @attribute 필드의 own property 삭제 → getter/setter 작동
-    const attributeList = findAllAttributeMetadata(target);
-    attributeList.forEach(meta => {
-      const initUserData = (inst as any)[meta.propertyKey];
-      delete (inst as any)[meta.propertyKey];
-      // undefined 이면은 외부 attribute string html을 리스팩한다
-      if (initUserData !== undefined)
-      (inst as any)[meta.propertyKey] = initUserData;
-    });
+    // const attributeList = findAllAttributeMetadata(target);
+    const attributeAllList = findAllAttributeMetadata(target).filter(it => it.type === 'property');
+    if (attributeAllList) {
+      attributeAllList.forEach(meta => {
+        // const initUserData = (inst as any)[meta.propertyKey];
+        delete (inst as any)[meta.propertyKey];
+        // (inst as any)[meta.propertyKey] = initUserData;
+      });
+    }
 
     // @query 필드의 own property 삭제 → getter 작동
     const queryList = getQueryMetadata(target);
@@ -95,12 +97,21 @@ export const ensureInit = (inst: any) => { // HTMLElement
         delete (inst as any)[meta.propertyKey];
       });
     }
-    const slotAllList = findAllApplySlotMetadata(target);
-    if (slotAllList) {
-      slotAllList.filter(it => it.type === 'property').forEach(meta => {
+    // const slotAllList = findAllApplySlotMetadata(target);
+    // if (slotAllList) {
+    //   slotAllList.filter(it => it.type === 'property').forEach(meta => {
+    //     delete (inst as any)[meta.propertyKey];
+    //   });
+    // }
+
+
+    const propertyAllList = findAllPropertyMetadata(target).filter(it => it.type === 'property');
+    if (propertyAllList) {
+      propertyAllList.forEach(meta => {
         delete (inst as any)[meta.propertyKey];
       });
     }
+
     const stateAllList = findAllStateMetadata(target);
     if (stateAllList) {
       stateAllList.forEach(meta => {
@@ -170,24 +181,24 @@ const setupPrototype = (proto: any, win: Window) => {
   proto.__swc_proto_setup = true;
 
 
-  proto.createSlotString = function (id: string) {
-    return NodeSlot.slot(`${this._swcId}-${id}`);
-  }
-  proto.createEaHtml = function (id: string, script: string) {
-    return ElementApply.html(id, script);
-  }
-  proto.createEaText = function (id: string, script: string) {
-    return ElementApply.text(id, script);
-  }
-  proto.createEaAttribute = function (id: string, name: string, script: string) {
-    return ElementApply.attribute(id, name, script);
-  }
-  proto.createEaEvent = function (id: string, name: string, script: string) {
-    return ElementApply.event(id, name, script);
-  }
-  proto.createEaProperty = function (id: string, name: string, script: string) {
-    return ElementApply.property(id, name, script);
-  }
+  // proto.createSlotString = function (id: string) {
+  //   return NodeSlot.slot(`${this._swcId}-${id}`);
+  // }
+  // proto.createEaHtml = function (id: string, script: string) {
+  //   return ElementApply.html(id, script);
+  // }
+  // proto.createEaText = function (id: string, script: string) {
+  //   return ElementApply.text(id, script);
+  // }
+  // proto.createEaAttribute = function (id: string, name: string, script: string) {
+  //   return ElementApply.attribute(id, name, script);
+  // }
+  // proto.createEaEvent = function (id: string, name: string, script: string) {
+  //   return ElementApply.event(id, name, script);
+  // }
+  // proto.createEaProperty = function (id: string, name: string, script: string) {
+  //   return ElementApply.property(id, name, script);
+  // }
 
   // swc-id-asdasdasdasd-click="  :value=""    {: value fsdfsdafsad :}       {html: aaa :}   {text: asdas :}
 
@@ -339,9 +350,9 @@ export const elementDefine =
       const swcOnEvents = DOM_EVENT_NAMES.map(e => `swc-on-${e}`);
 
       const attributeApplyNames = Array.from(applyAttributeMap.values())
-        .map(it => it.options.name)
+        .map(it => it.targetAttributeName)
         .filter(Boolean) as string[];
-      const hostAttributes = attributeList.filter(it => it.selector === '$this').map(it => it.options.name || String(it.propertyKey));
+      const hostAttributes = attributeList.filter(it => it.selector === '$this').map(it => it.propertyKey || String(it.propertyKey));
       // Get original static observedAttributes before they're overwritten by Object.defineProperty
       const originalStaticObservedAttributes = (constructor.observedAttributes ?? []) as string[];
       const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];

package/src/decorators/index.ts

@@ -1,5 +1,5 @@
 export * from './addEventListener';
-export * from './attribute';
+export * from './applyAttribute';
 export * from './elementDefine';
 export * from './changedAttributeThis';
 export * from './emitCustomEvent';
@@ -10,10 +10,9 @@ export * from './queryAll';
 export * from './applyClass';
 export * from './applyStyle';
 export * from './applyAttribute';
-export * from './setProperty';
+export * from './applyProperty';
 export * from './subscribeSwcAppRouteChangeWhileConnected';
 export * from './subscribeSwcAppMessageWhileConnected';
 export * from './publishSwcAppMessage';
 export * from './applySlot';
 export * from './state';
-

package/src/decorators/lifecycles.ts

@@ -122,9 +122,9 @@ const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: strin
   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 {
+export function onConnectedShadow(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedShadow(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: true}, optionOrTarget!, propertyKey);
   }
@@ -134,9 +134,9 @@ export function onConnectedShadowDom(optionOrTarget: Omit<InnerHtmlOptions, 'use
   };
 }
 
-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 {
+export function onConnectedLight(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedLight(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: false}, optionOrTarget!, propertyKey);
   }

package/src/decorators/state.ts

@@ -28,7 +28,6 @@ export function state(nameOrTarget?: string | Object, propertyKey?: string | sym
     // 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});

package/src/elements/SwcApp.ts

@@ -41,7 +41,6 @@ export const defineSwcAppBody = async (w: Window) => {
   class SwcAppBodyImpl extends SwcAppMixin(w.HTMLBodyElement) implements SwcAppInterface {
     // SwcAppMixin에서 모든 기능을 상속받음
   }
-
   return w.customElements.whenDefined(swcAppBodyTagName);
 };
 

package/src/types/index.ts

@@ -64,11 +64,11 @@ export interface SwcAppInterface extends HTMLElement {
 }
 
 export interface SwcElement {
-  // _swcId: string;
-  createSlotString(id: string): string
-  createEaHtml(id: string, script: string): string
-  createEaText(id: string, script: string): string
-  createEaAttribute(id: string, attributeName: string): string
-  createEaEvent(id: string, eventName: string): string
-  createEaProperty(id: string, propertyName: string): string
+  _swcId: string;
+  // createSlotString(id: string): string
+  // createEaHtml(id: string, script: string): string
+  // createEaText(id: string, script: string): string
+  // createEaAttribute(id: string, attributeName: string): string
+  // createEaEvent(id: string, eventName: string): string
+  // createEaProperty(id: string, propertyName: string): string
 }