@dooboostore/simple-web-component 1.0.18 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.18",
+  "version": "1.0.21",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -54,6 +54,11 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
+    "./bundle-entry": {
+      "types": "./dist/types/bundle-entry.d.ts",
+      "import": "./dist/esm/bundle-entry.js",
+      "require": "./dist/cjs/bundle-entry.js"
+    },
     "./*": {
       "types": "./dist/types/*.d.ts",
       "import": "./dist/esm/*.js",
@@ -87,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.28",
-    "@dooboostore/core-node": "1.0.10",
-    "@dooboostore/core-web": "1.0.9",
-    "@dooboostore/simple-boot": "1.0.53"
+    "@dooboostore/core": "1.0.30",
+    "@dooboostore/core-node": "1.0.12",
+    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core-web": "1.0.10"
   },
   "scripts": {
     "clean": "rm -rf dist",
@@ -108,7 +113,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 { ReflectUtils } from '@dooboostore/core';
+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

@@ -1,6 +1,7 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
 
-export type AppendChildPosition = 'firstChild' | 'lastChild' | 'nextSibling' | 'previousSibling';
+export type AppendChildPosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd';
 
 export interface AppendChildOptions {
   position?: AppendChildPosition;
@@ -14,19 +15,62 @@ export interface AppendChildMetadata {
 
 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: 'lastChild' }): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol) => {
+export function appendChild(selector: string, options: AppendChildOptions = { position: 'beforeEnd' }): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = target.constructor;
-    let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor) as Map<string | symbol, AppendChildMetadata>;
-    if (!meta) {
-      meta = new Map<string | symbol, AppendChildMetadata>();
-      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, 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);
     }
-    meta.set(propertyKey, { propertyKey, selector, options });
+    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;
+    };
   };
 }
 

package/src/decorators/attribute.ts

@@ -0,0 +1,158 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
+
+export interface AttributeOptions extends SwcQueryOptions {
+  name?: string;
+  connectedInitialize?: boolean;
+  type?: typeof Number | typeof Boolean | typeof String;
+}
+
+export interface AttributeMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: AttributeOptions;
+  privateKey: symbol; // Added to bypass getter during initialization
+}
+
+export const ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:attribute');
+
+/**
+ * Helper to perform type conversion from string to target type
+ */
+const convertValue = (val: string | null, type: any): any => {
+  if (val === null || val === undefined) return val;
+  if (type === Number) return Number(val);
+  if (type === Boolean) return val === 'false' || val === '0' ? false : true;
+  return val;
+};
+
+/**
+ * Helper to resolve target elements based on selector and root options
+ */
+export const resolveTargetEls = (inst: any, selector: string, options: AttributeOptions, currentWin: any): HTMLElement[] => {
+  const r = options.root || 'auto';
+  const results: HTMLElement[] = [];
+
+  const applyRoot = (target: any) => {
+    if (!target) return;
+    if (r === 'auto') {
+      // Attributes belong to the ELEMENT, not the ShadowRoot.
+      // So for :host and direct attribute sync, we mostly want the element itself.
+      results.push(target);
+    } else {
+      if (r === 'light' || r === 'all') results.push(target);
+      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);
+    }
+  };
+
+  if (selector === ':host' || !selector) {
+    applyRoot(inst);
+  } else if (selector === ':window') {
+    results.push(currentWin);
+  } else if (selector === ':document') {
+    results.push(currentWin.document);
+  } else {
+    const hostSet = SwcUtils.getHostSet(inst);
+    if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+    else if (selector === ':appHost') applyRoot(hostSet.$appHost as any);
+    else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+    else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+    else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else {
+      if (r === 'shadow') {
+        const found = inst.shadowRoot?.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'light') {
+        const found = inst.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'all') {
+        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
+        const lMatch = inst.querySelectorAll(selector);
+        if (sMatch) results.push(...sMatch);
+        if (lMatch) results.push(...lMatch);
+      } else {
+        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        if (found) results.push(...found);
+      }
+    }
+  }
+  return results;
+};
+
+/**
+ * @attribute decorator to sync a field value with an element's attribute.
+ */
+export function attribute(selector: string, options: AttributeOptions = {}): PropertyDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    const privateKey = Symbol(String(propertyKey));
+
+    const designType = (Reflect as any).getMetadata('design:type', target, propertyKey);
+
+    let metaList = ReflectUtils.getOwnMetadata(ATTRIBUTE_METADATA_KEY, constructor) as AttributeMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({ propertyKey, selector, options, privateKey });
+
+    Object.defineProperty(target, propertyKey, {
+      get(this: any) {
+        const attrName = options.name || String(propertyKey);
+        const conf = getElementConfig(this);
+        const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+        const targetType = options.type || designType;
+
+        console.log('type-->', propertyKey, targetType);
+        // During early init phase, if syncing memory to DOM, return memory.
+        if (this.__swc_syncing_init || (options.connectedInitialize && !this.__swc_connected)) {
+          return convertValue(this[privateKey], targetType);
+        }
+
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        const primaryTarget = targets[0];
+
+        if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
+          if ((primaryTarget as any).hasAttribute(attrName)) {
+            const domVal = (primaryTarget as any).getAttribute(attrName);
+            return convertValue(domVal, targetType);
+          }
+          return null;
+        }
+
+        return convertValue(this[privateKey], targetType);
+      },
+      set(this: any, nv: any) {
+        const targetType = options.type || designType;
+        // const convertedValue = convertValue(nv, targetType);
+        // console.log('---set', propertyKey, targetType, nv, convertedValue);
+
+        const attrName = options.name || String(propertyKey);
+        const conf = getElementConfig(this);
+        const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+        const targets = resolveTargetEls(this, selector, options, currentWin);
+        targets.forEach(it => {
+          console.log('----->', it)
+          if (it && typeof (it as any).setAttribute === 'function') {
+            if (nv === null) {
+              (it as any).removeAttribute(attrName);
+            } else {
+              (it as any).setAttribute(attrName, String(nv));
+            }
+          } else {
+            this[privateKey] = nv;
+          }
+        })
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+
+export const findAllAttributeMetadata = (target: any): AttributeMetadata[] => {
+  return ReflectUtils.findAllMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target).flat();
+};

package/src/decorators/changedAttribute.ts

@@ -1,4 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
+import { ReflectUtils } from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol('simple-web-component:on-attribute-changed');
 

package/src/decorators/classList.ts

@@ -0,0 +1,117 @@
+import { ReflectUtils } from '@dooboostore/core';
+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;
+};