@dooboostore/simple-web-component 1.0.53 → 1.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -95,9 +95,9 @@
     "webpack-dev-server": "^5.2.0"
   },
   "dependencies": {
-    "@dooboostore/core": "1.0.33",
     "@dooboostore/core-web": "1.0.14",
-    "@dooboostore/simple-boot": "1.0.59"
+    "@dooboostore/simple-boot": "1.0.59",
+    "@dooboostore/core": "1.0.33"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/applyNode.ts

@@ -86,6 +86,12 @@ const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string
     targetEl.replaceChildren();
     return [];
   }
+
+  // remove: 대상 자체를 DOM에서 뗀다. $this 처럼 shadow root 로 잡혔으면 그 주인 엘리먼트를 뗀다.
+  if (pos === 'remove') {
+    (targetEl instanceof win.ShadowRoot ? (targetEl as any).host : targetEl).remove();
+    return [];
+  }
   
   const doc = win.document;
   const hostSet = SwcUtils.getHelperAndHostSet(currentThis);
@@ -232,6 +238,8 @@ export function applyNode(selectorOrOptions: ApplyNodeSelector | ApplyNodeOption
 
       const runApply = (target: any, val: any) => {
         const pos = options.position || 'beforeEnd';
+        // remove 는 값이 '지울지 말지' 다: truthy 일 때만 지운다 (undefined 는 위에서 이미 걸러짐)
+        if (pos === 'remove' && !val) return;
         // Delegate HTML/node processing to applyToDom which centralizes
         // processing. runApply should not call processHtml itself to avoid
         // duplicate processing.
@@ -323,6 +331,28 @@ export function clearChildrenNode(selectorOrOptions?: ApplyNodeSelector | Omit<A
 // Alias for clearChildrenNode
 export const clearNode = clearChildrenNode;
 
+/**
+ * @removeNode - 메서드 반환값이 truthy 면 대상 엘리먼트를 DOM에서 제거한다.
+ * 반환값(valueKey 가 있으면 그 값)이 falsy(undefined / null / false / 0 / '')면 제거하지 않는다. 반환값은 그대로 통과.
+ * 선택자에 맞는 첫 번째 엘리먼트를 지운다. 선택자가 없거나 '$this' 면 자기 자신을 지운다.
+ *
+ * - @removeNode('.toast')  /  @removeNode('.toast', { valueKey: 'close' })
+ * - @removeNode({ valueKey: 'done' })  ($this)
+ * - @removeNode  ($this, bare)
+ */
+export function removeNode(selector: ApplyNodeSelector, options?: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function removeNode(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function removeNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function removeNode(selectorOrOptions?: ApplyNodeSelector | Omit<ApplyNodeOptions, 'position'> | Object, maybeOptions?: Omit<ApplyNodeOptions, 'position'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+  if (descriptor !== undefined && (typeof maybeOptions === 'symbol' || typeof maybeOptions === 'string')) {
+    return applyNode({position: 'remove'})(selectorOrOptions as Object, maybeOptions, descriptor);
+  }
+  if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
+    return applyNode(selectorOrOptions as any, {...maybeOptions as Omit<ApplyNodeOptions, 'position'>, position: 'remove'});
+  }
+  return applyNode({...selectorOrOptions as Omit<ApplyNodeOptions, 'position'>, position: 'remove'});
+}
+
 /**
  * @innerHtmlNode decorator - sets innerHTML of target element
  *