@dooboostore/simple-web-component 1.0.34 → 1.0.36

package/src/utils/Utils.ts

@@ -1,6 +1,7 @@
 import { SwcAppInterface, HostSet, HelperSet, HelperHostSet } from '../types';
 import {getElementConfig} from "../decorators";
 import { getExpression, ExpressionResult, GetExpressionConfig, GetExpressionResult } from '@dooboostore/core';
+import {Router} from "@dooboostore/core-web";
 
 export const SWC_NOT_FOUND = Symbol.for('simple-web-component:not-found');
 
@@ -151,14 +152,30 @@ export const htmlArticleElement = (options?: { doc?: Document; attrs?: Record<st
 export namespace SwcUtils {
 
 
+  export const getParentContainer = (e: Node) => {
+    return e.parentElement ?? e.getRootNode() as any;
+  }
+
   export const parsePathPatternsSetAttributeString = (pathPattern: string[], path: string) => {
     return JSON.stringify(SwcUtils.parsePathPatternsSet(pathPattern, path)).replace(/"/g, "'");
   }
 
-  export const parsePathPatternsSet = (pathPattern: string[], path: string) => {
+  export const parsePathPatternsSet = (pathPattern: string[], urlAndRouter?: string | Router) => {
+    // if (!path) {
+    //   return;
+    // }
+    urlAndRouter ??= '/'
+    const p = typeof urlAndRouter === 'string' ? urlAndRouter : urlAndRouter.value.url;
+    const searchParams = new URLSearchParams();
+    const qs = p.split('?')[1];
+    qs?.split('&').forEach(it => {
+      const [k, v] = it.split('=');
+      searchParams.set(k,v);
+    })
     return {
-      path: path,
-      pathData: SwcUtils.parsePathPatterns(pathPattern, path)
+      path: p,
+      searchParams,
+      pathData: SwcUtils.parsePathPatterns(pathPattern, p)
     };
   };
   export const parsePathPatterns = (pathPattern: string[], path: string) => {
@@ -208,9 +225,9 @@ export namespace SwcUtils {
    * Finds the nearest logical SWC host for an element.
    * Checks __swc_host property first, then climbs the DOM tree.
    */
-  export const findNearestSwcHost = (el: HTMLElement | Node): HTMLElement | undefined => {
-    if ((el as any).__swc_host) return (el as any).__swc_host;
-    // if ((el as any).__swc_proto_setup) return (el as any).__swc_proto_setup;
+  export const findNearestSwcHostIncludingSelf = (el: HTMLElement | Node): HTMLElement | undefined => {
+    const el1 = el as any;
+    if (el1.__swc_host) return el1.__swc_host;
 
     let current: any = el.parentElement || (el.getRootNode?.() as any)?.host;
     const doc = el.ownerDocument;
@@ -226,32 +243,32 @@ export namespace SwcUtils {
   /**
    * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.
    */
-  export const findAllSwcHosts = (el: HTMLElement | Node): HTMLElement[] => {
+  export const findAllSwcHostsIncludingSelf = (el: HTMLElement | Node): HTMLElement[] => {
     const hosts: HTMLElement[] = [];
-    let current = findNearestSwcHost(el);
+    let current = findNearestSwcHostIncludingSelf(el);
     while (current) {
       hosts.push(current);
       // To find the next ancestor, we must start searching from the PARENT of the found host
-      current = findNearestSwcHost(current);
+      current = findNearestSwcHostIncludingSelf(current);
     }
     return hosts.reverse();
   };
 
   export const getHosts = (el: HTMLElement): HTMLElement[] => {
-    const ancestors = findAllSwcHosts(el);
+    const ancestors = findAllSwcHostsIncludingSelf(el);
     if (getElementConfig(el)) return [...ancestors, el];
     return ancestors;
   };
 
   export const getHost = (el: HTMLElement): HTMLElement | undefined => {
     if (getElementConfig(el)) return el;
-    return findNearestSwcHost(el);
+    return findNearestSwcHostIncludingSelf(el);
   };
 
   export const getAppHosts = (el: HTMLElement): SwcAppInterface[] => {
     // const hosts = getHosts(el);
     // return hosts.filter(host => host.tagName.toLowerCase() === 'swc-app' || host.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
-    const hosts = SwcUtils.findAllParentAppHostsDirect(el);
+    const hosts = SwcUtils.findAllAppHostsIncludingSelfDirect(el);
     return hosts;
   };
 
@@ -262,22 +279,22 @@ export namespace SwcUtils {
   };
 
   /**
-   * Find parent app host by traversing DOM tree directly.
+   * Find the closest app host by traversing DOM tree directly, including the element itself.
    * Only checks tagName and is attribute - no SWC host discovery.
    * Useful for Safari polyfill compatibility where is="" elements upgrade in child-first order.
    */
-  export const findParentAppHostDirect = (el: HTMLElement): SwcAppInterface | null => {
-    const appHosts = findAllParentAppHostsDirect(el);
+  export const findAppHostIncludingSelfDirect = (el: HTMLElement): SwcAppInterface | null => {
+    const appHosts = findAllAppHostsIncludingSelfDirect(el);
     return appHosts.length > 0 ? appHosts[appHosts.length - 1] : null;
   };
 
   /**
-   * Find all parent app hosts by traversing DOM tree directly.
-   * Returns array of all parent app hosts in [closest-parent, ..., root] order.
+   * Find all app hosts by traversing DOM tree directly, including the element itself.
+   * Returns array of all app hosts in [root, ..., closest-parent-or-self] order.
    * Only checks tagName and is attribute - no SWC host discovery.
    * Useful for Safari polyfill compatibility where is="" elements upgrade in child-first order.
    */
-  export const findAllParentAppHostsDirect = (el: HTMLElement): SwcAppInterface[] => {
+  export const findAllAppHostsIncludingSelfDirect = (el: HTMLElement): SwcAppInterface[] => {
     const appHosts: SwcAppInterface[] = [];
 
     const w = el.ownerDocument?.defaultView || ((typeof window !== 'undefined' ? window : undefined) as any);
@@ -315,11 +332,11 @@ export namespace SwcUtils {
         }
       }
     }
-    return appHosts.reverse(); // [root, ..., closest-parent]
+    return appHosts.reverse(); // [root, ..., closest-parent-or-self]
   };
 
   export const getHostSet = (el: HTMLElement): HostSet => {
-    const ancestors = findAllSwcHosts(el); // [root, ..., parent]
+    const ancestors = findAllSwcHostsIncludingSelf(el); // [root, ..., parent]
     
     const $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
     const $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;
@@ -337,8 +354,7 @@ export namespace SwcUtils {
       curr = curr.parentElement || (curr.getRootNode() as any).host;
     }
 
-    const $appHosts = SwcUtils.findAllParentAppHostsDirect(el); //$hosts.filter(h => h.tagName.toLowerCase() === 'swc-app' || h.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
-    // console.log('apphosts00000000', $appHosts)
+    const $appHosts = SwcUtils.findAllAppHostsIncludingSelfDirect(el);
     const $appHost = $appHosts.length > 0 ? ($appHosts[$appHosts.length - 1] === el ? ($appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null) : $appHosts[$appHosts.length - 1]) : null;
     const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
 
@@ -347,7 +363,8 @@ export namespace SwcUtils {
       $parentHost,
       $hosts,
       $firstHost,
-      $lastHost: $parentHost,
+      $lastHost: $host,
+      $templateHost: (el as any).__swc_template_host,
       $appHost,
       $appHosts,
       $firstAppHost,

package/tsconfig.json

@@ -6,9 +6,9 @@
     "declaration": true,
     "declarationMap": true,
     "stripInternal": true,
-    "target": "es2020",
+    "target": "es2022",
     "noEmit": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "es2024", "esnext"],
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "esModuleInterop": true,

package/dist/cjs/decorators/changedAttributeHost.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/changedAttributeHost.ts"],
-  "sourcesContent": ["import {ReflectUtils} from '@dooboostore/core';\n\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');\n\nexport interface ChangedAttributeHostOptions {\n  type?: typeof Number | typeof Boolean | typeof String;\n}\n\nexport interface ChangedAttributeHostMetadata {\n  attributeName: string;\n  propertyKey: string | symbol;\n  options: ChangedAttributeHostOptions;\n}\n\nconst convertValue = (val: any, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\n/**\n * @changedAttributeHost decorator - fires when any attribute on :host changes\n * Usage: @changedAttributeHost('data-product-id')\n *        @changedAttributeHost('count', { type: Number })\n */\nexport function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);\n    }\n\n    const name = attributeName || String(propertyKey);\n    metaList.push({\n      attributeName: name,\n      propertyKey,\n      options\n    });\n  };\n}\n\nexport const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n\nexport const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];\n  \n  const result = new Map<string, ChangedAttributeHostMetadata[]>();\n  metaList.forEach(meta => {\n    meta.forEach(item => {\n      if (!result.has(item.attributeName)) {\n        result.set(item.attributeName, []);\n      }\n      result.get(item.attributeName)!.push(item);\n    });\n  });\n  return result;\n};\n\nexport const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {\n  return convertValue(val, type);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2B;AAEpB,MAAM,oCAAoC,OAAO,IAAI,2CAA2C;AAYvG,MAAM,eAAe,CAAC,KAAU,SAAmB;AACjD,MAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,MAAI,SAAS,OAAQ,QAAO,OAAO,GAAG;AACtC,MAAI,SAAS,QAAS,QAAO,QAAQ,WAAW,QAAQ,MAAM,QAAQ;AACtE,SAAO;AACT;AAOO,SAAS,qBAAqB,eAAwB,UAAuC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,WAAW,yBAAa,eAAe,mCAAmC,WAAW;AACzF,QAAI,CAAC,UAAU;AACb,iBAAW,CAAC;AACZ,+BAAa,eAAe,mCAAmC,UAAU,WAAW;AAAA,IACtF;AAEA,UAAM,OAAO,iBAAiB,OAAO,WAAW;AAChD,aAAS,KAAK;AAAA,MACZ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,8BAA8B,CAAC,WAA4D;AACtG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,mCAAmC,WAAW;AAChF;AAEO,MAAM,kCAAkC,CAAC,WAA6D;AAC3G,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,QAAM,WAAW,yBAAa,gBAAgD,mCAAmC,WAAW,KAAK,CAAC;AAElI,QAAM,SAAS,oBAAI,IAA4C;AAC/D,WAAS,QAAQ,UAAQ;AACvB,SAAK,QAAQ,UAAQ;AACnB,UAAI,CAAC,OAAO,IAAI,KAAK,aAAa,GAAG;AACnC,eAAO,IAAI,KAAK,eAAe,CAAC,CAAC;AAAA,MACnC;AACA,aAAO,IAAI,KAAK,aAAa,EAAG,KAAK,IAAI;AAAA,IAC3C,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,KAAU,SAA+D;AAC7G,SAAO,aAAa,KAAK,IAAI;AAC/B;",
-  "names": []
-}

package/dist/esm/decorators/changedAttributeHost.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/changedAttributeHost.ts"],
-  "sourcesContent": ["import {ReflectUtils} from '@dooboostore/core';\n\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');\n\nexport interface ChangedAttributeHostOptions {\n  type?: typeof Number | typeof Boolean | typeof String;\n}\n\nexport interface ChangedAttributeHostMetadata {\n  attributeName: string;\n  propertyKey: string | symbol;\n  options: ChangedAttributeHostOptions;\n}\n\nconst convertValue = (val: any, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\n/**\n * @changedAttributeHost decorator - fires when any attribute on :host changes\n * Usage: @changedAttributeHost('data-product-id')\n *        @changedAttributeHost('count', { type: Number })\n */\nexport function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);\n    }\n\n    const name = attributeName || String(propertyKey);\n    metaList.push({\n      attributeName: name,\n      propertyKey,\n      options\n    });\n  };\n}\n\nexport const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n\nexport const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];\n  \n  const result = new Map<string, ChangedAttributeHostMetadata[]>();\n  metaList.forEach(meta => {\n    meta.forEach(item => {\n      if (!result.has(item.attributeName)) {\n        result.set(item.attributeName, []);\n      }\n      result.get(item.attributeName)!.push(item);\n    });\n  });\n  return result;\n};\n\nexport const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {\n  return convertValue(val, type);\n};\n"],
-  "mappings": "AAAA,SAAQ,oBAAmB;AAEpB,MAAM,oCAAoC,OAAO,IAAI,2CAA2C;AAYvG,MAAM,eAAe,CAAC,KAAU,SAAmB;AACjD,MAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,MAAI,SAAS,OAAQ,QAAO,OAAO,GAAG;AACtC,MAAI,SAAS,QAAS,QAAO,QAAQ,WAAW,QAAQ,MAAM,QAAQ;AACtE,SAAO;AACT;AAOO,SAAS,qBAAqB,eAAwB,UAAuC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,WAAW,aAAa,eAAe,mCAAmC,WAAW;AACzF,QAAI,CAAC,UAAU;AACb,iBAAW,CAAC;AACZ,mBAAa,eAAe,mCAAmC,UAAU,WAAW;AAAA,IACtF;AAEA,UAAM,OAAO,iBAAiB,OAAO,WAAW;AAChD,aAAS,KAAK;AAAA,MACZ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,8BAA8B,CAAC,WAA4D;AACtG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,mCAAmC,WAAW;AAChF;AAEO,MAAM,kCAAkC,CAAC,WAA6D;AAC3G,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,QAAM,WAAW,aAAa,gBAAgD,mCAAmC,WAAW,KAAK,CAAC;AAElI,QAAM,SAAS,oBAAI,IAA4C;AAC/D,WAAS,QAAQ,UAAQ;AACvB,SAAK,QAAQ,UAAQ;AACnB,UAAI,CAAC,OAAO,IAAI,KAAK,aAAa,GAAG;AACnC,eAAO,IAAI,KAAK,eAAe,CAAC,CAAC;AAAA,MACnC;AACA,aAAO,IAAI,KAAK,aAAa,EAAG,KAAK,IAAI;AAAA,IAC3C,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,KAAU,SAA+D;AAC7G,SAAO,aAAa,KAAK,IAAI;AAC/B;",
-  "names": []
-}

package/dist/types/decorators/changedAttributeHost.d.ts

@@ -1,19 +0,0 @@
-export declare const ON_ATTRIBUTE_CHANGED_METADATA_KEY: unique symbol;
-export interface ChangedAttributeHostOptions {
-    type?: typeof Number | typeof Boolean | typeof String;
-}
-export interface ChangedAttributeHostMetadata {
-    attributeName: string;
-    propertyKey: string | symbol;
-    options: ChangedAttributeHostOptions;
-}
-/**
- * @changedAttributeHost decorator - fires when any attribute on :host changes
- * Usage: @changedAttributeHost('data-product-id')
- *        @changedAttributeHost('count', { type: Number })
- */
-export declare function changedAttributeHost(attributeName?: string, options?: ChangedAttributeHostOptions): MethodDecorator;
-export declare const getChangedAttributeMetadata: (target: any) => ChangedAttributeHostMetadata[] | undefined;
-export declare const findAllAttributeChangedMetadata: (target: any) => Map<string, ChangedAttributeHostMetadata[]>;
-export declare const convertAttributeValue: (val: any, type?: typeof Number | typeof Boolean | typeof String) => any;
-//# sourceMappingURL=changedAttributeHost.d.ts.map

package/dist/types/decorators/changedAttributeHost.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"changedAttributeHost.d.ts","sourceRoot":"","sources":["../../../src/decorators/changedAttributeHost.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iCAAiC,eAA0D,CAAC;AAEzG,MAAM,WAAW,2BAA2B;IAC1C,IAAI,CAAC,EAAE,OAAO,MAAM,GAAG,OAAO,OAAO,GAAG,OAAO,MAAM,CAAC;CACvD;AAED,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,2BAA2B,CAAC;CACtC;AASD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,2BAAgC,GAAG,eAAe,CAgBvH;AAED,eAAO,MAAM,2BAA2B,GAAI,QAAQ,GAAG,KAAG,4BAA4B,EAAE,GAAG,SAG1F,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAAI,QAAQ,GAAG,KAAG,GAAG,CAAC,MAAM,EAAE,4BAA4B,EAAE,CAcvG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,KAAK,GAAG,EAAE,OAAO,OAAO,MAAM,GAAG,OAAO,OAAO,GAAG,OAAO,MAAM,KAAG,GAEvG,CAAC"}