@dooboostore/simple-web-component 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -108,7 +108,7 @@
     "ts:clean": "find . -name '*.js' -o -name '*.map' -o -name '*.d.ts' | xargs rm -f",
     "typecheck": "pnpm exec tsc --noEmit",
     "generate:is": "tsx generate-is.ts",
-    "generate:is:watch": "node --import tsx --watch --watch-path=./src/elements/base/SwcHTMLElementBase.ts --watch-path=./src/elements/SwcApp.ts generate-is.ts",
+    "generate:is:watch": "node --import tsx --watch --watch-path=./src/elements/SwcIf.ts --watch-path=./src/elements/SwcLoop.ts --watch-path=./src/elements/SwcChoose.ts --watch-path=./src/elements/SwcAsync.ts --watch-path=./src/elements/SwcAppMixin.ts --watch-path=./generate-is.ts generate-is.ts",
     "test": "echo test",
     "test:bundle": "pnpm --filter @dooboostore/simple-web-component-bundle-test dev"
   }

package/src/config/config.ts

@@ -59,3 +59,5 @@ export const HTML_TAG_ENTRIES: [string, string][] = [
 ];
 
 export const DOM_EVENT_NAMES = ['click', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'contextmenu', 'keydown', 'keypress', 'keyup', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'scroll', 'resize', 'load', 'unload', 'hashchange', 'connected'];
+
+export const BROWSER_GLOBALS = ['window', 'document', 'Node', 'Element', 'HTMLElement', 'DocumentFragment', 'CustomEvent', 'customElements', 'NodeFilter', ...HTML_TAG_ENTRIES.map(([className]) => className)];

package/src/decorators/addEventListener.ts

@@ -1,41 +1,42 @@
 import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
 
-export interface AddEventListenerOptions extends EventListenerOptions {
-  root?: 'light' | 'shadow' | 'all' | 'auto';
+export interface AddEventListenerBaseOptions extends EventListenerOptions {
   capture?: boolean;
   once?: boolean;
   passive?: boolean;
   stopPropagation?: boolean;
   stopImmediatePropagation?: boolean;
   preventDefault?: boolean;
-  delegate?: boolean;
   removeOnDisconnected?: boolean;
+  delegate?: boolean;
 }
 
 export interface AddEventListenerMetadata {
+  propertyKey: string | symbol;
   selector: string;
   type: string;
-  options: AddEventListenerOptions;
-  propertyKey: string | symbol;
+  options: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean };
 }
 
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol('simple-web-component:add-event-listener');
 
+export function addEventListener(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions): MethodDecorator;
+export function addEventListener(selector: string, type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;
 /**
  * @addEventListener decorator to bind events to elements.
- * Usage: @addEventListener('.btn', 'click') onClick() { ... }
- * Usage: @addEventListener('', 'scroll', { passive: true }) onScroll() { ... }
  */
-export function addEventListener(selector: string, type: string, options: AddEventListenerOptions = {}): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-    const constructor = target.constructor;
+export function addEventListener(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = targetObj.constructor;
 
     let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ selector, type, options, propertyKey });
+
+    listeners.push({ propertyKey, selector: selectorOrTarget, type, options });
   };
 }
 

package/src/decorators/appendChild.ts

@@ -0,0 +1,86 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ensureInit, getElementConfig } from './elementDefine';
+
+export type AppendChildPosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd';
+
+export interface AppendChildOptions {
+  position?: AppendChildPosition;
+}
+
+export interface AppendChildMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: AppendChildOptions;
+}
+
+export const APPEND_CHILD_METADATA_KEY = Symbol('simple-web-component:append-child');
+
+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) : '');
+  });
+};
+
+/**
+ * @appendChild decorator to surgically add nodes to a target element.
+ * Usage: @appendChild('#list') addItem() { return '<li>New Item</li>'; }
+ */
+export function appendChild(selector: string, options: AppendChildOptions = { position: 'beforeEnd' }): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor) as Map<string | symbol, AppendChildMetadata>;
+    if (!metaList) {
+      metaList = new Map<string | symbol, AppendChildMetadata>();
+      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, metaList, constructor);
+    }
+    metaList.set(propertyKey, { propertyKey, selector, options });
+
+    const original = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      ensureInit(this);
+      const res = await original.apply(this, args);
+      if (res !== undefined) {
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+        const currentDoc = currentWin.document;
+
+        let targetEl: HTMLElement | null = null;
+        if (selector === ':host' || !selector) {
+          targetEl = this as any;
+        } else {
+          targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+        }
+
+        if (targetEl) {
+          const nodes = normalizeNodes(res, currentDoc);
+          const pos = options.position || 'beforeEnd';
+
+          if (typeof res === 'string') {
+            targetEl.insertAdjacentText(pos as InsertPosition, res);
+          } else if (Array.isArray(res) && res.every(n => typeof n === 'string')) {
+            targetEl.insertAdjacentText(pos as InsertPosition, res.join(''));
+          } else {
+            if (pos === 'beforeEnd') targetEl.append(...nodes);
+            else if (pos === 'afterBegin') targetEl.prepend(...nodes);
+            else if (pos === 'beforeBegin') targetEl.before(...nodes);
+            else if (pos === 'afterEnd') targetEl.after(...nodes);
+          }
+        }
+      }
+      return res;
+    };
+  };
+}
+
+export const findAllAppendChildMetadata = (target: any): Map<string | symbol, AppendChildMetadata> => {
+  const result = new Map<string | symbol, AppendChildMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, AppendChildMetadata>>(APPEND_CHILD_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};

package/src/decorators/classList.ts

@@ -0,0 +1,117 @@
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ensureInit } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+
+export const CLASS_LIST_METADATA_KEY = Symbol('simple-web-component:class-list');
+
+export type ClassListAction = 'set' | 'update' | 'add' | 'remove' | 'toggle';
+
+export interface ClassListMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  action: ClassListAction;
+}
+
+function createClassListDecorator(action: ClassListAction) {
+  return (selector: string): MethodDecorator => {
+    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+      const constructor = target.constructor;
+      let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor) as Map<string | symbol, ClassListMetadata>;
+      if (!metaList) {
+        metaList = new Map<string | symbol, ClassListMetadata>();
+        ReflectUtils.defineMetadata(CLASS_LIST_METADATA_KEY, metaList, constructor);
+      }
+      metaList.set(propertyKey, { propertyKey, selector, action });
+
+      const original = descriptor.value;
+      descriptor.value = async function (...args: any[]) {
+        ensureInit(this);
+        const res = await original.apply(this, args);
+        if (res !== undefined) {
+          const hostSet = SwcUtils.getHostSet(this as any);
+
+          let targetEl: HTMLElement | null = null;
+          if (selector === ':host' || !selector) targetEl = this as any;
+          else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
+          else if (selector === ':appHost') targetEl = hostSet.$appHost;
+          else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+
+          if (targetEl) {
+            if (action === 'set') {
+              let classes = '';
+              if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
+                classes = Object.entries(res)
+                  .filter(([_, force]) => !!force)
+                  .map(([cls]) => cls)
+                  .join(' ');
+              } else {
+                classes = Array.isArray(res) ? res.join(' ') : String(res);
+              }
+              targetEl.className = classes;
+            } else if (action === 'update') {
+              if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
+                Object.entries(res).forEach(([cls, force]) => {
+                  targetEl!.classList.toggle(cls, !!force);
+                });
+              } else if (res !== undefined && res !== null) {
+                const classes = Array.isArray(res) ? res.map(String) : [String(res)];
+                targetEl.classList.add(...classes);
+              }
+            } else if (action === 'add') {
+              const classes = Array.isArray(res) ? res.map(String) : [String(res)];
+              targetEl.classList.add(...classes);
+            } else if (action === 'remove') {
+              const classes = Array.isArray(res) ? res.map(String) : [String(res)];
+              targetEl.classList.remove(...classes);
+            } else if (action === 'toggle') {
+              const classes = Array.isArray(res) ? res.map(String) : [String(res)];
+              classes.forEach(c => targetEl!.classList.toggle(c));
+            }
+          }
+        }
+        return res;
+      };
+    };
+  };
+}
+
+/**
+ * @setClassList decorator to surgically replace all classes on a target element.
+ * Returns: string | string[]
+ */
+export const setClassList = createClassListDecorator('set');
+
+/**
+ * @updateClassList decorator to surgically update specific classes.
+ * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
+ */
+export const updateClassList = createClassListDecorator('update');
+
+/**
+ * @addClassList decorator to surgically add classes to a target element.
+ * Returns: string | string[]
+ */
+export const addClassList = createClassListDecorator('add');
+
+/**
+ * @removeClassList decorator to surgically remove classes from a target element.
+ * Returns: string | string[]
+ */
+export const removeClassList = createClassListDecorator('remove');
+
+/**
+ * @toggleClassList decorator to surgically toggle classes on a target element.
+ * Returns: string | string[]
+ */
+export const toggleClassList = createClassListDecorator('toggle');
+
+export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
+  const result = new Map<string | symbol, ClassListMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ClassListMetadata>>(CLASS_LIST_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};