@dooboostore/simple-web-component 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -92,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.32",
     "@dooboostore/core-node": "1.0.12",
     "@dooboostore/core-web": "1.0.12",
-    "@dooboostore/simple-boot": "1.0.56"
+    "@dooboostore/simple-boot": "1.0.56",
+    "@dooboostore/core": "1.0.32"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/applyNode.ts

@@ -37,69 +37,60 @@ export interface ApplyNodeMetadata {
 
 export const APPLY_NODE_METADATA_KEY = Symbol.for('simple-web-component:apply-node');
 
-const normalizeNodes = (res: any, doc: Document): Node[] => {
-  const items = Array.isArray(res) ? res : [res];
-  return items.map(it => {
-    if (it instanceof Node) return it;
-    return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
-  });
-};
-
-const applyToDom = (currentThis: any, targetEl: HTMLElement, res: any, pos: ApplyNodePosition, win: Window, host?: any) => {
+// const normalizeNodes = (res: any, doc: Document): Node[] => {
+//   const items = Array.isArray(res) ? res : [res];
+//   return items.map(it => {
+//     if (it instanceof Node) return it;
+//     return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
+//   });
+// };
+
+const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string, pos: ApplyNodePosition, win: Window, host?: any) => {
   if (!targetEl) return;
-
-  // console.log('------------',currentThis.tagName, res)
   const doc = win.document;
   const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
   const id = currentThis._swcId;
-  // Allow processHtml to run here so all DOM insertions go through a single
-  // processing point. processHtml may mutate Node[] in-place or return a
-  // transformed string result for text processing.
-  try {
-    if (typeof res === 'string') {
-      const processed = SwcUtils.projectProcessHtml(id, res as string, doc);
-      if (processed !== undefined) res = processed;
-    } else if (res) {
-      SwcUtils.projectProcessHtml(id, res, doc);
-    }
-  } catch (e) {
-    // swallow and proceed with original res
-  }
 
-  if (pos === 'innerHtml') {
-    targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
-    return;
-  }
 
-  if (pos === 'innerText') {
-    if (targetEl.innerText !== undefined) {
-      targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
-    }
-    return;
+  const nodes: Node[] = [];
+
+  if (typeof res === 'string' && pos === 'innerHtml') {
+    const t = win.document.createElement('template');
+    t.innerHTML = res;
+    nodes.push(...Array.from(t.content.childNodes));
+  } else if (typeof res === 'string' && pos === 'innerText') {
+    nodes.push(win.document.createTextNode(res));
   }
 
-  const stateContext: any = {...hostSet};
-  findAllStateMetadata(currentThis).forEach(it => {
-    stateContext[it.name] = currentThis[it.propertyKey]
-  })
-  new ElementApply(currentThis, {id: currentThis._swcId}).apply({target: 'noInitialized', context: stateContext, bind: currentThis});
+  SwcUtils.projectProcessHtml(id, nodes, doc);
+
 
 
   const isShadowRoot = targetEl instanceof win.ShadowRoot;
-  const nodes = normalizeNodes(res, doc);
+  // const nodes = normalizeNodes(res, doc);
   if (pos === 'replace') {
     if (!isShadowRoot) targetEl.replaceWith(...nodes);
+  } else if (pos === 'innerHtml') {
+    targetEl.replaceChildren(...nodes);
+  } else if (pos === 'innerText') {
+    targetEl.replaceChildren(...nodes);
   } else if (pos === 'replaceChildren') {
     targetEl.replaceChildren(...nodes);
   } else {
     if (pos === 'beforeEnd') {
-      console.log('tarbbbbbbbbbbbbbb')
       targetEl.append(...nodes)
     }
     else if (pos === 'afterBegin') targetEl.prepend(...nodes);
     else if (pos === 'beforeBegin' && !isShadowRoot) targetEl.before(...nodes);
     else if (pos === 'afterEnd' && !isShadowRoot) targetEl.after(...nodes);
   }
+
+  const stateContext: any = {...hostSet};
+  findAllStateMetadata(currentThis).forEach(it => {
+    stateContext[it.name] = currentThis[it.propertyKey]
+  })
+  new ElementApply(targetEl, {id: id}).apply({target: 'noInitialized', context: stateContext, bind: currentThis});
+  return nodes;
 };
 
 /**
@@ -164,16 +155,17 @@ export function applyNode(selector: string, options: ApplyNodeOptions = {positio
         }
       };
 
-      if (res instanceof Promise) {
-        // 비동기일 때만 로딩 표시
-        if (targetEl && options.fallback) {
-          const loadingRes = options.fallback.call(this, hostSet);
-          // applyToDom expects a Window as the 4th argument
-          applyToDom(this, targetEl, loadingRes, options.position || 'beforeEnd', currentWin);
-        }
 
+        const fallbackNodes: Node[] = [];
+      if (targetEl && options.fallback) {
+        const loadingRes = options.fallback.call(this, hostSet);
+        // applyToDom expects a Window as the 4th argument
+        fallbackNodes.push(...applyToDom(this, targetEl, loadingRes, options.position || 'beforeEnd', currentWin));
+      }
+
+      if (res instanceof Promise) {
         return res.then(finalRes => {
-          console.log('amnkj')
+          fallbackNodes.forEach((it: any)=>it.remove());
           if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
           return finalRes;
         });
@@ -267,9 +259,9 @@ export function applyNodeThisAfterBeginLightDom(targetOrOptions?: any, propertyK
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyThisInnerHtmlNode(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
-export function applyThisInnerHtmlNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyThisInnerHtmlNode(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function applyNodeThisInnerHtml(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function applyNodeThisInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyNodeThisInnerHtml(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'innerHtml'}
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};

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,27 @@ 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: 'replaceChildrenHtml', ...opt};
+
 
     const constructor = targetObj.constructor;
     let metaList = ReflectUtils.getOwnMetadata(APPLY_SLOT_METADATA_KEY, constructor) as ApplySlotMetadata[];
@@ -109,50 +105,56 @@ 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);
+      }
+    };
   };
 }
 
@@ -162,27 +164,36 @@ export const findAllApplySlotMetadata = (target: any): ApplySlotMetadata[] => {
   return ReflectUtils.getMetadata(APPLY_SLOT_METADATA_KEY, constructor);
 };
 
-export function applySlotClear(id: string): MethodDecorator {
-  return applySlot(id, { position: 'clear' });
+export function applySlotClear(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'clear'});
 }
-export function applySlotPrependHtml(id: string): MethodDecorator {
-  return applySlot(id, { position: 'prependHtml' });
+
+export function applySlotPrependHtml(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'prependHtml'});
 }
+
 export const applySlotPrepend = applySlotPrependHtml;
-export function applySlotPrependText(id: string): MethodDecorator {
-  return applySlot(id, { position: 'prependText' });
+
+export function applySlotPrependText(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'prependText'});
 }
-export function applySlotAppendHtml(id: string): MethodDecorator {
-  return applySlot(id, { position: 'appendHtml' });
+
+export function applySlotAppendHtml(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'appendHtml'});
 }
-export function applySlotAppendText(id: string): MethodDecorator {
-  return applySlot(id, { position: 'appendText' });
+
+export function applySlotAppendText(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 applySlotReplaceChildrenHtml(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'replaceChildrenHtml'});
 }
+
 export const applySlotReplaceChildren = applySlotReplaceChildrenHtml;
-export function applySlotReplaceChildrenText(id: string): MethodDecorator {
-  return applySlot(id, { position: 'replaceChildrenText' });
+
+export function applySlotReplaceChildrenText(targetId: string): MethodDecorator {
+  return applySlot(targetId, {position: 'replaceChildrenText'});
 }

package/src/decorators/elementDefine.ts

@@ -95,12 +95,12 @@ 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 => {
-        delete (inst as any)[meta.propertyKey];
-      });
-    }
+    // const slotAllList = findAllApplySlotMetadata(target);
+    // if (slotAllList) {
+    //   slotAllList.filter(it => it.type === 'property').forEach(meta => {
+    //     delete (inst as any)[meta.propertyKey];
+    //   });
+    // }
     const stateAllList = findAllStateMetadata(target);
     if (stateAllList) {
       stateAllList.forEach(meta => {

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});