@dooboostore/simple-web-component 1.0.24 → 1.0.26

package/src/decorators/setAttribute.ts

@@ -1,114 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit, getElementConfig } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
-
-export interface SetAttributeMetadata {
-  propertyKey: string | symbol;
-  selector: string;
-  name: string;
-  options: SwcQueryOptions;
-}
-
-export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attribute');
-
-/**
- * @setAttribute decorator to surgically update an attribute of a target element.
- * Usage: @setAttribute(':host', 'count')
- * Usage: @setAttribute('#child', 'disabled')
- */
-export function setAttribute(selector: string, name: string): MethodDecorator;
-export function setAttribute(selector: string, name: string, options?: SwcQueryOptions): MethodDecorator;
-export function setAttribute(selector: string, name: string, options: SwcQueryOptions = {}): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-    const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string | symbol, SetAttributeMetadata>;
-    if (!metaList) {
-      metaList = new Map<string | symbol, SetAttributeMetadata>();
-      ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, metaList, constructor);
-    }
-    metaList.set(propertyKey, { propertyKey, selector, name, options });
-
-    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);
-        const conf = getElementConfig(this);
-        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
-
-        const targetEls: any[] = [];
-        const r = options.root || 'auto';
-
-        const applyRoot = (t: any) => {
-          if (!t) return;
-          if (r === 'auto') {
-            // Attributes belong to the ELEMENT, not the ShadowRoot.
-            targetEls.push(t);
-          } else {
-            if (r === 'light' || r === 'all') targetEls.push(t);
-            if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
-          }
-        };
-
-        if (selector === ':window') targetEls.push(currentWin);
-        else if (selector === ':document') targetEls.push(currentWin.document as any);
-        else if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-        else if (selector === ':appHost') applyRoot(hostSet.$appHost);
-        else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-        else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-        else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
-        else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
-        else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
-        else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
-        else if (selector === ':host' || !selector) applyRoot(this);
-        else {
-          const roots: any[] = [];
-          if (r === 'shadow') {
-            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
-          } else if (r === 'light') {
-            roots.push(this as any);
-          } else if (r === 'all') {
-            roots.push(this as any);
-            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
-          } else {
-            roots.push((this as any).shadowRoot || (this as any));
-          }
-          roots.forEach(root => targetEls.push(...root.querySelectorAll(selector)));
-        }
-
-        targetEls.forEach(targetEl => {
-          if (!targetEl || typeof (targetEl as any).setAttribute !== 'function') return;
-          if (res === null) (targetEl as any).removeAttribute(name);
-          else (targetEl as any).setAttribute(name, String(res));
-        });
-      }
-      return res;
-    };
-  };
-}
-
-export const getSetAttributeMetadata = (target: any): Map<string | symbol, SetAttributeMetadata> | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor);
-};
-
-export const findAllSetAttributeMetadata = (target: any): Map<string | symbol, SetAttributeMetadata> => {
-  const result = new Map<string | symbol, SetAttributeMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, SetAttributeMetadata>>(SET_ATTRIBUTE_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};
-
-/**
- * @setAttributeHost decorator - simplified version of @setAttribute for :host selector
- * Usage: @setAttributeHost('aria-disabled')
- */
-export function setAttributeHost(name: string, options?: SwcQueryOptions): MethodDecorator {
-  return setAttribute(':host', name, options);
-}

package/src/decorators/style.ts

@@ -1,185 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
-
-export type StyleAction = 'set' | 'update' | 'remove';
-
-export interface StyleOptions extends SwcQueryOptions {}
-
-export interface StyleMetadata {
-  propertyKey: string | symbol;
-  selector: string;
-  action: StyleAction;
-  options: StyleOptions;
-}
-
-export const STYLE_METADATA_KEY = Symbol('simple-web-component:style');
-
-function createStyleDecorator(action: StyleAction) {
-  return (selector: string, options: StyleOptions = {}): MethodDecorator => {
-    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-      const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleMetadata>;
-      if (!metaList) {
-        metaList = new Map<string | symbol, StyleMetadata>();
-        ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
-      }
-      metaList.set(propertyKey, { propertyKey, selector, action, options });
-
-      const original = descriptor.value;
-      descriptor.value = async function (...args: any[]) {
-        ensureInit(this);
-        const res = await original.apply(this, args);
-        if (res !== undefined) {
-          const r = options.root || 'auto';
-          const hostSet = SwcUtils.getHostSet(this as any);
-          const targetEls: HTMLElement[] = [];
-
-          const applyRoot = (t: any) => {
-            if (!t || !(t instanceof HTMLElement)) return;
-            if (r === 'auto') {
-              // Styles belong to the ELEMENT, not the ShadowRoot.
-              targetEls.push(t);
-            } else {
-              if (r === 'light' || r === 'all') targetEls.push(t);
-              if ((r === 'shadow' || r === 'all') && t.shadowRoot) {
-                // ShadowRoot doesn't have a style property, so we skip it.
-              }
-            }
-          };
-
-          if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-          else if (selector === ':appHost') applyRoot(hostSet.$appHost);
-          else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-          else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-          else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
-          else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
-          else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
-          else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
-          else if (selector === ':host' || !selector) applyRoot(this);
-          else {
-            if (r === 'shadow') {
-              const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-            } else if (r === 'light') {
-              const found = (this as any).querySelectorAll(selector);
-              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-            } else if (r === 'all') {
-              const sFound = this.shadowRoot?.querySelectorAll(selector);
-              const lFound = (this as any).querySelectorAll(selector);
-              if (sFound) targetEls.push(...(Array.from(sFound) as HTMLElement[]));
-              if (lFound) targetEls.push(...(Array.from(lFound) as HTMLElement[]));
-            } else {
-              // auto
-              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
-              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-            }
-          }
-
-          targetEls.forEach(targetEl => {
-            if (action === 'set') {
-              targetEl.style.cssText = '';
-              if (typeof res === 'object' && res !== null) {
-                Object.assign(targetEl.style, res);
-              } else if (typeof res === 'string') {
-                targetEl.style.cssText = res;
-              }
-            } else if (action === 'update') {
-              if (typeof res === 'object' && res !== null) {
-                Object.assign(targetEl.style, res);
-              }
-            } else if (action === 'remove') {
-              const props = Array.isArray(res) ? res : [res];
-              props.forEach(p => targetEl.style.removeProperty(String(p)));
-            }
-          });
-        }
-        return res;
-      };
-    };
-  };
-}
-
-/**
- * @setStyle decorator to surgically set styles on a target element (replaces all existing styles).
- * Usage: @setStyle('#box') getStyles() { return { color: 'red', display: 'block' }; }
- * Usage: @setStyle('#box', { root: 'shadow' }) getStyles() { return { color: 'red' }; }
- */
-export const setStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('set')(selector, options);
-
-/**
- * @setStyleHost decorator - simplified version of @setStyle for :host selector.
- * Usage: @setStyleHost setHostStyle() { return { color: 'red' }; }
- * Usage: @setStyleHost() setHostStyle() { return { color: 'red' }; }
- * Usage: @setStyleHost({ ... }) setHostStyle() { return { color: 'red' }; }
- */
-export function setStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
-export function setStyleHost(): MethodDecorator;
-export function setStyleHost(options: StyleOptions): MethodDecorator;
-export function setStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = createStyleDecorator('set')(':host', {});
-    return decorator(targetOrOptions, propertyKey, descriptor);
-  }
-  return createStyleDecorator('set')(':host', (targetOrOptions as StyleOptions) || {});
-}
-
-/**
- * @updateStyle decorator to surgically update styles on a target element (merges with existing styles).
- * Usage: @updateStyle('#box') updateStyles() { return { color: 'blue' }; }
- * Usage: @updateStyle('#box', { root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
- */
-export const updateStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('update')(selector, options);
-
-/**
- * @updateStyleHost decorator - simplified version of @updateStyle for :host selector.
- * Usage: @updateStyleHost updateStyles() { return { color: 'blue' }; }
- * Usage: @updateStyleHost() updateStyles() { return { color: 'blue' }; }
- * Usage: @updateStyleHost({ ... }) updateStyles() { return { color: 'blue' }; }
- */
-export function updateStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
-export function updateStyleHost(): MethodDecorator;
-export function updateStyleHost(options: StyleOptions): MethodDecorator;
-export function updateStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = createStyleDecorator('update')(':host', {});
-    return decorator(targetOrOptions, propertyKey, descriptor);
-  }
-  return createStyleDecorator('update')(':host', (targetOrOptions as StyleOptions) || {});
-}
-
-/**
- * @removeStyle decorator to surgically remove styles from a target element.
- * Usage: @removeStyle('#box') clearStyles() { return ['color', 'display']; }
- * Usage: @removeStyle('#box', { root: 'shadow' }) clearStyles() { return ['color']; }
- */
-export const removeStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('remove')(selector, options);
-
-/**
- * @removeStyleHost decorator - simplified version of @removeStyle for :host selector.
- * Usage: @removeStyleHost clearStyles() { return ['color']; }
- * Usage: @removeStyleHost() clearStyles() { return ['color']; }
- * Usage: @removeStyleHost({ ... }) clearStyles() { return ['color']; }
- */
-export function removeStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
-export function removeStyleHost(): MethodDecorator;
-export function removeStyleHost(options: StyleOptions): MethodDecorator;
-export function removeStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = createStyleDecorator('remove')(':host', {});
-    return decorator(targetOrOptions, propertyKey, descriptor);
-  }
-  return createStyleDecorator('remove')(':host', (targetOrOptions as StyleOptions) || {});
-}
-
-export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
-  const result = new Map<string | symbol, StyleMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleMetadata>>(STYLE_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};