@dooboostore/dom-render 1.0.110 → 1.0.111

package/dist/cjs/dist/DomRender.d.js

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DomRender_d_exports = {};
+module.exports = __toCommonJS(DomRender_d_exports);
+//# sourceMappingURL=DomRender.d.js.map

package/dist/cjs/dist/DomRender.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/DomRender.ts"],
+  "sourcesContent": ["import { DomRenderProxy } from './DomRenderProxy';\nimport { DomRenderConfig } from './configs/DomRenderConfig';\nimport { PathRouter } from './routers/PathRouter';\nimport { HashRouter } from './routers/HashRouter';\nimport { ConstructorType } from '@dooboostore/core/types';\nimport { DomRenderFinalProxy } from './types/Types';\nimport { RawSet } from './rawsets/RawSet';\nimport { DefaultMessenger } from './messenger/DefaultMessenger';\nimport { Router } from './routers/Router';\nimport { drComponent } from './components';\nimport { EventManager } from './events/EventManager';\nimport { RandomUtils } from '@dooboostore/core/random/RandomUtils';\n\nexport type DomRenderRunConfig<T = any> = Omit<DomRenderConfig<T>, 'router' | 'uuid' | 'eventManager' | 'messenger' | 'root' | 'rootElement'> & { routerType?: 'path' | 'hash' | ((obj: T, targetConfig: DomRenderConfig) => Router) | Router };\nexport type CreateComponentParam = { type: ConstructorType<any> | any, tagName?: string, noStrip?: boolean, template?: string, styles?: string[] | string };\nlet eventManager: EventManager | null = null;\nexport type DomRenderRunParameter<T extends object> = { rootObject: T | (() => T), target?: Element | null, config?: DomRenderRunConfig | DomRenderConfig };\n\nexport type ExecuteConfig = { firstUrl?: string };\n\nexport class DomRender<T extends object = any> {\n  private _config: DomRenderConfig;\n  private _target: Element | null | undefined;\n  private _rootObject: T;\n  private _router: Router;\n  private _eventManager: EventManager;\n\n  constructor(parameter: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig) {\n    const s = DomRender.runSet(parameter,executeConfig);\n    this._config = s.config;\n    this._target = s.target;\n    this._rootObject = s.rootObject;\n    this._router = s.config.router;\n    this._eventManager = s.config.eventManager;\n    // if (executeConfig && executeConfig?.autoGo) {\n    //   this._config.router?.go(executeConfig.autoGo);\n    // }\n  }\n\n  public get rootObject(): T {\n    return this._rootObject;\n  }\n\n  public get config(): DomRenderConfig {\n    return this._config;\n  }\n  public get router(): Router {\n    return this._router;\n  }\n\n  public get eventManager(): EventManager {\n    return this._eventManager;\n  }\n  public get target(): Element | null | undefined {\n    return this._target;\n  }\n\n  public static run<T extends object>(data: DomRenderRunParameter<T>): T {\n    return DomRender.runSet(data).rootObject;\n  }\n\n  public static runSet<T extends object>({\n    rootObject,\n    target,\n    config\n  }: DomRenderRunParameter<T>, executeConfig?: ExecuteConfig): { rootObject: T; target?: Element | null; config: DomRenderConfig } {\n    // public static run<T extends object>({rootObject, target, config}: DomRenderRunParameter<T>): T {\n    //   console.log('runSet')\n    rootObject = typeof rootObject === 'function' ? rootObject() : rootObject;\n    let targetObject = rootObject;\n    if ('_DomRender_isProxy' in rootObject) {\n      if (target) {\n        ((rootObject as any)._DomRender_proxy as DomRenderProxy<T>).initRender(target);\n      }\n      targetObject = rootObject;\n      // return targetObject;\n      return { rootObject: targetObject, target, config: (rootObject as any)._domRender_config };\n    }\n    const targetConfig = Object.assign({}, config) as DomRenderConfig;\n    eventManager ??= new EventManager(targetConfig.window);\n\n    targetConfig.uuid = RandomUtils.uuid4();\n    targetConfig.messenger = DomRenderFinalProxy.final(targetConfig.messenger ?? new DefaultMessenger(targetConfig));\n    targetConfig.proxyExcludeTyps = targetConfig.proxyExcludeTyps ?? [];\n    targetConfig.targetElements ??= [];\n\n    if (typeof Window !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Window)) {\n      targetConfig.proxyExcludeTyps.push(Window);\n    }\n    if (typeof Map !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Map)) {\n      targetConfig.proxyExcludeTyps.push(Map);\n    }\n    if (typeof Set !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Set)) {\n      targetConfig.proxyExcludeTyps.push(Set);\n    }\n    if (typeof Promise !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Promise)) {\n      targetConfig.proxyExcludeTyps.push(Promise);\n    }\n    if (typeof ResizeObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ResizeObserver)) {\n      targetConfig.proxyExcludeTyps.push(ResizeObserver);\n    }\n    if (typeof ImageBitmap !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === ImageBitmap)) {\n      targetConfig.proxyExcludeTyps.push(ImageBitmap);\n    }\n    if ( typeof CanvasRenderingContext2D !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CanvasRenderingContext2D) ) {\n      targetConfig.proxyExcludeTyps.push(CanvasRenderingContext2D);\n    }\n    if ( typeof CSSStyleDeclaration !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === CSSStyleDeclaration) ) {\n      targetConfig.proxyExcludeTyps.push(CSSStyleDeclaration);\n    }\n    if ( typeof Date !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === Date) ) {\n      targetConfig.proxyExcludeTyps.push(Date);\n    }\n    if ( typeof MutationObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {\n      targetConfig.proxyExcludeTyps.push(IntersectionObserver);\n    }\n    if ( typeof IntersectionObserver !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === IntersectionObserver) ) {\n      targetConfig.proxyExcludeTyps.push(IntersectionObserver);\n    }\n    if (typeof HTMLElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLElement)) {\n      targetConfig.proxyExcludeTyps.push(HTMLElement);\n    }\n    // if (typeof HTMLCanvasElement !== 'undefined' && !targetConfig.proxyExcludeTyps.some(it => it === HTMLCanvasElement)) {\n    //   targetConfig.proxyExcludeTyps.push(HTMLCanvasElement);\n    // }\n    if (!targetConfig.proxyExcludeTyps.some(it => it === RawSet)) {\n      targetConfig.proxyExcludeTyps.push(RawSet);\n    }\n    if (!targetConfig.proxyExcludeTyps.some(it => it === DomRender)) {\n      targetConfig.proxyExcludeTyps.push(DomRender);\n    }\n    targetConfig.rootElement = target;\n    targetConfig.eventManager = eventManager;\n    // (targetConfig.window as any).domRender ??= {configs: []};\n    // (targetConfig.window as any).domRender.configs.push(targetConfig);\n    const domRender = new DomRenderProxy(rootObject, target, targetConfig);\n    const dest = new Proxy(rootObject, domRender);\n    targetObject = dest;\n    targetConfig.root = targetObject;\n\n    // proxy \uB41C targetObject\uB97C \uB123\uC5B4\uC918\uC57C\uB418\uC11C \uB4A4\uCABD\uC5D0\uC11C router\uB97C \uC0DD\uC131\uD574\uC57C\uD568\n    if (!targetConfig.router) {\n      let targetRouter: Router<any> | undefined;\n      if ('routerType' in config && config?.routerType === 'hash') {\n        targetRouter = new HashRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });\n      } else if ('routerType' in config && config?.routerType === 'path') {\n        targetRouter = new PathRouter({ rootObject: targetObject, window: targetConfig.window, firstUrl: executeConfig?.firstUrl });\n      } else if ('routerType' in config && typeof config?.routerType === 'function') {\n        targetRouter = config.routerType(targetObject, targetConfig);\n      } else if ('routerType' in config && typeof config?.routerType === 'object') {\n        targetRouter = config.routerType;\n      }\n      targetConfig.router = targetRouter;\n    }\n\n    for (const value of Object.values(drComponent)) {\n      const a = value(targetConfig, DomRender);\n      if (!targetConfig.targetElements.some(it => it.name === a.name)) {\n        targetConfig.targetElements.push(a);\n      }\n    }\n    // console.log('cccccccccccccccccc', targetRouter)\n    // targetRouter.go({path: targetRouter.getUrl()})\n    // if (!config.router) {\n    //   if (config.routerType === 'path') {\n    //     config.router = new PathRouter(targetObject, config.window);\n    //   } else if (config.routerType === 'hash') {\n    //     config.router = new HashRouter(targetObject, config.window);\n    //   } else { // none\n    //     config.router = new HashRouter(targetObject, config.window);\n    //   }\n    // }\n    domRender.run(targetObject);\n    return { rootObject: targetObject, config: targetConfig, target };\n    // return targetObject;\n  }\n\n  public static createComponent(param: CreateComponentParam) {\n    // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)\n    const component = RawSet.createComponentTargetElement({\n      name: param.tagName ?? (typeof param.type === 'function' ? param.type.name : param.type.constructor.name),\n      objFactory: (e, o, r2, counstructorParam) => {\n        return typeof param.type === 'function' ? new param.type(...counstructorParam) : param.type;\n      },\n      noStrip: param.noStrip,\n      template: param.template ?? '',\n      styles: Array.isArray(param.styles) ? param.styles : param.styles ? [param.styles] : undefined\n    });\n    return component;\n  }\n\n  // ?? \uC5B8\uC81C \uC4F0\uB294\uAC70\uC9C0?? \uD6D4..\n  public static createAttribute(\n    attrName: string,\n    getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any,\n    factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment\n  ) {\n    const targetAttribute = RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);\n    return targetAttribute;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AACA;;",
+  "names": []
+}

package/dist/cjs/dist/DomRenderProxy.d.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DomRenderProxy_d_exports = {};
+module.exports = __toCommonJS(DomRenderProxy_d_exports);
+var import_reflect_metadata = require("reflect-metadata");
+//# sourceMappingURL=DomRenderProxy.d.js.map

package/dist/cjs/dist/DomRenderProxy.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/DomRenderProxy.ts"],
+  "sourcesContent": ["import { RawSet, RenderResult } from './rawsets/RawSet';\nimport { EventManager, NormalAttrDataType } from './events/EventManager';\nimport { DomRenderConfig } from './configs/DomRenderConfig';\nimport { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';\nimport { DomRenderFinalProxy, Shield } from './types/Types';\nimport { RawSetType } from './rawsets/RawSetType';\nimport { DrThisProperty } from './operators/DrThisProperty';\nimport { RawSetOperatorType } from './rawsets/RawSetOperatorType';\nimport { ComponentSet } from './components/ComponentSet';\nimport { DomRenderNoProxyKey, isDomRenderNoProxy } from './decorators/DomRenderNoProxy';\nimport { isOnCreateRender } from './lifecycle/OnCreateRender';\nimport { isOnInitRender } from './lifecycle/OnInitRender';\nimport { isOnCreateRenderData } from './lifecycle/OnCreateRenderData';\nimport { isOnChangeAttrRender } from './lifecycle/OnChangeAttrRender';\nimport { DocumentUtils } from '@dooboostore/core-web/document/DocumentUtils';\nimport { isDefined } from '@dooboostore/core/types';\nimport { isOnBeforeReturnSet } from './lifecycle/OnBeforeReturnSet';\nimport { isOnChildRenderedByProperty } from './lifecycle/OnChildRenderedByProperty';\nimport { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';\nimport { ValidUtils } from '@dooboostore/core/valid/ValidUtils';\nimport { isOnProxyDomRender } from './lifecycle/OnProxyDomRender';\nimport { isOnRawSetRendered } from './lifecycle/OnRawSetRendered';\n\nconst excludeGetSetPropertys = [\n  'onBeforeReturnGet',\n  'onBeforeReturnSet',\n  '__domrender_components',\n  '__render',\n  '_DomRender_isFinal',\n  '_domRender_ref',\n  '_rawSets',\n  '_domRender_proxy',\n  '_targets',\n  '_DomRender_origin',\n  '_DomRender_ref',\n  '_DomRender_proxy'\n];\nexport const isWrapProxyDomRenderProxy = <T>(obj: T): boolean => {\n  return obj && typeof obj === 'object' && '_DomRender_isProxy' in obj;\n};\nexport const getDomRenderOriginObject = <T>(obj: T): T => {\n  if (isWrapProxyDomRenderProxy(obj)) {\n    return (obj as any)._domRender_origin;\n  }\n  return obj;\n};\nexport const getDomRenderConfig = (obj: any): DomRenderConfig | undefined => {\n  if (isWrapProxyDomRenderProxy(obj)) {\n    return obj._domRender_config;\n  }\n  return undefined;\n};\n//@ts-ignore\nexport const getDomRenderProxy = <T>(obj: T): DomRenderProxy<T> | undefined => {\n  if (isWrapProxyDomRenderProxy(obj)) {\n    //@ts-ignore\n    return (obj as any)._domRender_proxy as DomRenderProxy<T>;\n  }\n  return undefined;\n};\nexport class DomRenderProxy<T extends object> implements ProxyHandler<T> {\n  public _domRender_ref = new Map<object, Set<string>>();\n  public _rawSets = new Map<string, Set<RawSet>>();\n  public _domRender_proxy?: T;\n  // public _firstTarget: Node;\n  public _targets = new Set<Node>();\n\n  constructor(\n    public _domRender_origin: T,\n    target: Node | null | undefined,\n    public _domRender_config: DomRenderConfig\n  ) {\n    if (target) {\n      this._targets.add(target);\n      // this._firstTarget = target;\n    }\n\n    // setInterval(() => {\n    //   this._rawSets.forEach(it => {\n    //     Array.from(it).forEach(it => {\n    //       console.log(it, it.isConnected)\n    //     })\n    //   });\n    // }, 1000)\n  }\n\n  public static unFinal<T = any>(obj: T): T {\n    return DomRenderFinalProxy.unFinal(obj);\n  }\n\n  public static final<T = any>(obj: T): T {\n    return DomRenderFinalProxy.final(obj);\n  }\n\n  public static isFinal<T = any>(obj: T) {\n    return ValidUtils.isNull(obj) || DomRenderFinalProxy.isFinal(obj);\n  }\n\n  public async run(objProxy: T) {\n    this._domRender_proxy = objProxy;\n    if (isOnProxyDomRender(objProxy)) {\n      objProxy.onProxyDomRender(this._domRender_config);\n    }\n    const obj = getDomRenderOriginObject<any>(objProxy);\n    if (obj) {\n      Object.keys(obj).forEach(it => {\n        // Reflect \uBA54\uD0C0\uB370\uC774\uD130\uC5D0\uC11C domRender:NoProxy \uC5EC\uBD80 \uD655\uC778\n        try {\n          const isNoProxy =\n            Reflect.getMetadata(DomRenderNoProxyKey, obj, it) ||\n            Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);\n          if (isNoProxy) {\n            return obj;\n          }\n        } catch (e) {}\n        const target = obj[it];\n        if (\n          target !== undefined &&\n          target !== null &&\n          typeof target === 'object' &&\n          !DomRenderProxy.isFinal(target) &&\n          !Object.isFrozen(target) &&\n          !(obj instanceof Shield)\n        ) {\n          const isExcluded = this._domRender_config.proxyExcludeTyps?.some(it => target instanceof it) ?? false;\n          // const filter = this._domRender_config.proxyExcludeTyps?.filter(it => target instanceof it) ?? [];\n          if (!isExcluded) {\n            const proxyAfter = this.proxy(objProxy, target, it);\n            obj[it] = proxyAfter;\n          }\n        }\n      });\n    }\n    // console.log('target', this._targets);\n    for (let target of this._targets) {\n      await this.initRender(target);\n    }\n  }\n\n  public async initRender(target: Node, rawSet?: RawSet) {\n    // if (target instanceof Element) {\n    //   target.setAttribute('dr-this', 'this');\n    //   const rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);\n    //   this.render(rawSets)\n    //   return;\n    // }\n    //\n    if (target instanceof Element) {\n      // \uC911\uC694: \uB098\uB97C\uD1B5\uD574 \uC774\uC5B4\uC9C4\uACF3\uC758 \uC704\uCE58\uB97C \uB0A8\uACA8\uC57C\uB41C\uB2E4 \uC548\uADF8\uB7EC\uBA74 TargetElement\uB294 \uC54C\uC218 \uC788\uB294 \uBC29\uBC95\uC774 \uC5C6\uB2E4. \uC5EC\uAE30\uC11C \uD754\uC801\uC744 \uB0A8\uACA8\uC918\uC57C \uD55C\uB2E4.\n      // const targetElementNames = (this.config.targetElements?.map(it => it.name.toLowerCase().replaceAll('.', '\\\\.')) ?? []).join(',');\n      // Array.from(target.querySelectorAll(targetElementNames)).forEach(it => it.setAttribute(EventManager.parentVariablePathAttrName, '@this@'));\n      target.innerHTML = target.innerHTML.replace(/@this@/g, 'this');\n    }\n    // TODO: \uD55C\uACF3\uC5D0\uC11C \uCC98\uB9AC \uD544\uC694\uD560\uB4EF.. \uB108\uBB34 \uC0B0\uBC1C\uC801\uC73C\uB85C \uC788\uC74C.\n    const onCreate = (target as any).getAttribute?.(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);\n    let createParam: any[] = [];\n    if (onCreate) {\n      createParam = ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy);\n      if (!Array.isArray(createParam)) {\n        createParam = [createParam];\n      }\n    }\n\n    if (isOnCreateRenderData(this._domRender_proxy)) {\n      this._domRender_proxy?.onCreateRenderData({ rootParent: this._domRender_proxy });\n    }\n\n    if (isOnCreateRender(this._domRender_proxy)) {\n      this._domRender_proxy.onCreateRender(...createParam);\n    }\n\n    // const innerHTML = (target as any).innerHTML ?? '';\n    this._targets.add(target);\n    const rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this._domRender_config);\n    // console.log('initRender -------rawSet', rawSets)\n    // \uC911\uC694 \uCD08\uAE30\uC5D0 \uD55C\uBC88 \uD295\uACA8\uC918\uC57C\uD568.\n    this._domRender_config.eventManager.applyEvent(\n      this._domRender_proxy,\n      this._domRender_config.eventManager.findAttrElements(target as Element, this._domRender_config),\n      this._domRender_config\n    );\n    rawSets.forEach(it => {\n      const variables = it.getUsingTriggerVariables(this._domRender_config);\n      if (variables.size <= 0) {\n        this.addRawSet('', it);\n      } else {\n        variables.forEach(sit => {\n          this.addRawSet(sit, it);\n        });\n      }\n    });\n\n    const targetRawSets = await this.render(this.getRawSets());\n    for (let targetRawSet of targetRawSets) {\n      const onInit = (target as any).getAttribute?.(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);\n      let initParam: any;\n      if (onCreate) {\n        initParam = ScriptUtils.evaluateReturn(onCreate, this._domRender_proxy);\n      }\n      if (isOnInitRender(this._domRender_proxy)) {\n        await this._domRender_proxy.onInitRender(\n          initParam,\n          rawSet ?? ({ dataSet: { config: this._domRender_config } } as any)\n        );\n      }\n    }\n  }\n\n  public getRawSets() {\n    const set = new Set<RawSet>();\n    this._rawSets.forEach((v, k) => {\n      v.forEach(it => set.add(it));\n    });\n    return Array.from(set);\n  }\n\n  // \uC911\uC694 important\n  public async render(raws?: RawSet[] | string, fullPathStr?: string) {\n    if (typeof raws === 'string') {\n      const iter = this._rawSets.get(raws);\n      if (iter) {\n        raws = Array.from(iter);\n      } else {\n        raws = undefined;\n      }\n    }\n    const removeRawSets: RawSet[] = [];\n    const rawSets = raws ?? this.getRawSets();\n\n    // console.log('----', rawSets);\n    for (const it of rawSets as RawSet[]) {\n      it.getUsingTriggerVariables(this._domRender_config).forEach(path => {\n        // console.log('getUsingTriggerVariables->', path);\n        this.addRawSet(path, it);\n      });\n\n      let renderResult: RenderResult | undefined;\n      if (it.isConnected) {\n        // \uC911\uC694 render\uB420\uB54C targetAttribute \uCCB4\uD06C \uD574\uC57C\uD568.\n        const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);\n        // console.log('sssssssssSSS?',it, targetAttrMap)\n        // console.log('----2', it, fullPathStr, targetAttrMap, (it.fragment as any).render, it.isConnected, this.getRawSets());\n        if (it.detect?.action) {\n          it.detect.action();\n          // } else if (it.type === RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && (it.fragment as any).render) {\n        } else if (\n          it.type === RawSetType.TARGET_ELEMENT &&\n          it.dataSet?.render?.currentThis &&\n          fullPathStr &&\n          targetAttrMap\n        ) {\n          new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {\n            // it?.data.onChangeAttrRender(k, null, v);\n            // console.log('------->?',v,k);\n            const isUsing = v.variablePaths.some(it => EventManager.isUsingThisVar(it.inner, `this.${fullPathStr}`))\n            // console.log('------->?',v,k, isUsing);\n            if (isUsing) {\n              const targetAttrObject = RawSet.getAttributeObject(it.point.node as Element, {\n                script: it.dataSet?.render?.renderScript ?? '',\n                obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })\n              });\n              it.dataSet.render ??= {};\n              it.dataSet.render.attribute = targetAttrObject;\n              // const render = it.dataSet?.render;\n              // console.log('render-->!!!!!', it.dataSet.render);\n              // const script = `${render.renderScript} return ${v} `;\n              // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));\n              if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {\n                it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });\n              }\n            }\n            // console.log('---?', v, fullPathStr, isUsing);\n          });\n          // ------------------->\n        } else {\n          const rawSets = await it.render(this._domRender_proxy, this._domRender_config);\n          renderResult = rawSets;\n          // \uADF8\uC678 \uC790\uC2DD\uB4E4 render\n          if (rawSets && rawSets.raws.length > 0) {\n            await this.render(rawSets.raws);\n          }\n        }\n      } else {\n        removeRawSets.push(it);\n      }\n\n      const t = it.findNearThis(this._domRender_proxy);\n      // TODO: \uD638\uCD9C\uB41C\uACF3\uC5D0\uC11C \uB610 \uBCC0\uC218\uB97C \uC218\uC815\uD558\uAC8C\uB418\uBA74 \uBB34\uD55C\uB8E8\uD504\uB2C8\uAE50 \uC660\uB9CC\uD558\uBA74 \uC0AC\uC6A9\uBABB\uD558\uAC8C \uD574\uC57C\uD55C\uB2E4.\n      if (isOnRawSetRendered(t)) {\n        await t.onRawSetRendered(it, { path: fullPathStr, renderResult });\n      }\n      // console.log('----', it);\n    }\n\n    if (removeRawSets.length > 0) {\n      this.removeRawSet(...removeRawSets);\n    }\n    return this.getRawSets();\n  }\n\n  // domrender_ref\uB85C \uCC3E\uB294\uAC78\uB85C \uBC14\uAFC8\n  // public findRootDomRenderProxy(): DomRenderProxy<any> {\n  //   let current:DomRenderProxy<any>  = this;\n  //   while (current.parentProxy) {\n  //     current = current.parentProxy;\n  //   }\n  //   return current;\n  // }\n\n  public root(\n    pathInfos: { path: string; obj: any }[][],\n    value?: any,\n    lastDoneExecute = true\n  ): { path: string; obj: any }[][] {\n    // console.log('root--->', paths, value, this._domRender_ref, this._domRender_origin);\n    const fullPaths: { path: string; obj: any }[][] = [];\n    if (this._domRender_ref.size > 0) {\n      this._domRender_ref.forEach((it, key) => {\n        if ('_DomRender_isProxy' in key) {\n          it.forEach(sit => {\n            try {\n              const concat = pathInfos.concat([[{ path: sit, obj: key }]]);\n              const items: { path: string; obj: any }[][] = (key as any)._DomRender_proxy?.root(\n                concat,\n                value,\n                lastDoneExecute\n              );\n\n              fullPaths.push(items.flat());\n              // fullPaths.push({path: items.map(it=>it.path).join(','), obj: this._domRender_proxy});\n              // fullPaths.push({path: items.map(it=>it.path).join(','), obj: this._domRender_proxy});\n            } catch (e) {\n              // \uC624\uBE0C\uC81D\uD2B8\uB4E4 \uC5C6\uC5B4\uC84C\uC744\uC218\uB3C4\uC788\uB2E4 Destroy\uC2DC\uC810\uC5D0\uC11C \uC624\uB958\uB098\uB294\uACBD\uC6B0\uAC00 \uC788\uB2E4. \uB530\uB77C\uC11C \uCC38\uC870 \uD558\uB294\uBD80\uBD84 \uC5C6\uC5B4\uC838\uC57C\uD55C\uB2E4.\n              // console.error(e)\n              // it.delete(sit);\n            }\n          });\n        }\n      });\n    } else {\n      // const firstPathStr = paths.slice(1).reverse().join('.');\n      const strings = pathInfos.reverse().map(it => it.map(it => it.path).join(','));\n      // array\uAC19\uC740\uACBD\uC6B0\uB3C4 \uD0A4\uAC12\uC73C\uB85C \uC811\uADFC\uD558\uAE30\uB54C\uBB38\uC5D0 \uD2B9\uC815 \uC778\uB371\uC2A4\uB97C \uCC3E\uC544\uC11C \uADF8\uBD80\uBD84\uB9CC \uBC14\uAFD4\uC904\uC218 \uC788\uB2E4.\n      const fullPathStr = strings\n        .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))\n        .join('')\n        .slice(1);\n      // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);\n      if (lastDoneExecute) {\n        // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);\n        // console.log('-------', firstPathStr, firstData);\n        // if (firstData instanceof Dictionary) {\n        // }\n        const iterable = this._rawSets.get(fullPathStr);\n        // array check\n        const front = strings\n          .slice(0, strings.length - 1)\n          .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))\n          .join('');\n        const lastPropertyName = strings[strings.length - 1];\n        const path = 'this' + front;\n        const data = ScriptUtils.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);\n        // console.log('root-->', this._rawSets, path, data );\n        // console.log('--!!!!', fullPathStr, iterable, data, front, last);\n        // \uC65C\uC5EC\uAE30\uC11C promise\uB97C \uD588\uC744\uAE4C\uB97C \uC0DD\uAC01\uD574\uBCF4\uBA74......\uD6D4.. \uBCC0\uC218\uBCC0\uACBD\uACFC \uD654\uBA74 \uBFCC\uB824\uC8FC\uB294\uAC78 \uB3D9\uAE30\uB85C\uD558\uBA74 \uC131\uB2A5\uC774 \uC548\uB098\uC624\uACE0 \uBE44\uD604\uC2E4\uC801\uC774\uB2E4.  \uADF8\uB798\uC11C promise\n        new Promise<RawSet[]>(async resolve => {\n          let rData: RawSet[] = [];\n          const firstPathStr = front.slice(1);\n\n          // check dictionary\n          // console.log('-promise-------', firstPathStr, this)\n          const firstTargets = this._rawSets.get(firstPathStr);\n          const firstTargetDictionary: RawSet[] = [];\n          firstTargets?.forEach(it => {\n            // console.log('----forEach---', it);\n            const type = (it.point.start as Element)?.getAttribute?.('type');\n            if (type === RawSetOperatorType.DR_THIS_PROPERTY) {\n              firstTargetDictionary.push(it);\n            }\n          });\n          if (firstTargetDictionary.length > 0) {\n            // console.log('ddddddddddd', firstTargetDictionary);\n            const rawSets: RawSet[] = [];\n            let skip = false;\n            firstTargetDictionary.forEach(it => {\n              const startElement = it.point.start as Element;\n              const keys = startElement.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)?.split(',') ?? [];\n              if (value === undefined) {\n                const rawSet = it.getHasRawSet(lastPropertyName);\n                rawSet?.remove();\n                startElement.setAttribute(\n                  RawSet.DR_HAS_KEYS_OPTIONNAME,\n                  keys.filter(it => it !== lastPropertyName).join(',')\n                );\n              }\n              if (!keys.includes(lastPropertyName)) {\n                const raws = DrThisProperty.append(\n                  this._domRender_proxy,\n                  fullPathStr,\n                  lastPropertyName,\n                  it,\n                  this._domRender_config\n                );\n                if (raws) {\n                  rawSets.push(...raws);\n                }\n              } else {\n                skip = true;\n              }\n            });\n            if (skip === false || rawSets.length > 0) {\n              rData = await this.render(rawSets);\n            }\n          }\n\n          if (lastPropertyName === 'length' && Array.isArray(data)) {\n            const aIterable = this._rawSets.get(firstPathStr);\n            if (aIterable) {\n              rData = await this.render(Array.from(aIterable));\n            }\n          } else if (iterable) {\n            // console.log('------------',iterable, fullPaths)\n            rData = await this.render(Array.from(iterable), fullPathStr);\n          }\n\n          // console.log('-----------', this, lastPropertyName );\n          // this._targets.forEach(it => {\n          //   // return;\n          //   if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {\n          //     const targets = eventManager.findAttrElements((it as DocumentFragment | Element), this.config);\n          //     eventManager.changeVar(this._domRender_proxy, targets, `this.${fullPathStr}`, this.config);\n          //   }\n          // });\n\n          const Node = ((this._domRender_config.window as any).Node)\n          this._targets.forEach(it => {\n            // return;\n            if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {\n              const targets = this._domRender_config.eventManager.findAttrElements(\n                it as DocumentFragment | Element,\n                this._domRender_config\n              );\n              this._domRender_config.eventManager.changeVar(\n                this._domRender_proxy,\n                targets,\n                `this.${fullPathStr}`,\n                this._domRender_config\n              );\n            }\n          });\n\n          //\uB79C\uB354\uB300\uC0C1\uB41C\uAC8C\uC788\uC73C\uBA74\n          if (rData?.length > 0 && isOnChildRenderedByProperty(data)) {\n            const propertyValue = ScriptUtils.evaluateReturn(`this.${lastPropertyName}`, data);\n            data.onChildRenderedByProperty(lastPropertyName, propertyValue);\n            // data\n          }\n          resolve(rData);\n        }).then(it => {\n          // console.log('DonrenderProxy root RenderDone')\n        });\n      }\n      fullPaths.push([{ path: fullPathStr, obj: this._domRender_proxy }]);\n    }\n\n    // console.log('dddddd', fullPaths.flatMap(it=>it).map(it=>it.path))\n    return fullPaths;\n  }\n\n  public set(target: T, p: string | symbol, value: any, receiver: T): boolean {\n    // console.log('set------->', target, p, value, receiver, Date.now())\n    // console.log('set------->', p,value)\n    // console.log('set------->', target, p, value, receiver, Date.now())\n    // try {\n    //   const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, target, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);\n    //   if (isNoProxy) {\n    //     return obj;\n    //   }\n    // }catch (e) {}\n\n    // console.log('set-->', p, value, target, receiver, Reflect.getMetadata(DomRenderNoProxyKey, target, p) );\n\n    if (\n      (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) ||\n      Reflect.getMetadata(DomRenderNoProxyKey, target, p)\n    ) {\n      (target as any)[p] = value;\n      return true;\n    }\n    // const old =  (target as any)[p];\n    // console.log('set proxy-->', target, p, value, this._rawSets, this._domRender_ref);\n    // if (typeof p === 'string' && '__render' === p) {\n    //     (target as any)[p] = value;\n    //     return true;\n    // }\n    // console.log('set--?', p, target, value);\n\n    if (typeof p === 'string') {\n      value = this.proxy(receiver, value, p);\n    }\n\n    // console.log('set typeChecked',  (target as any)[p] instanceof ComponentSet, value instanceof ComponentSet);\n    // if ((target as any)[p] instanceof ComponentSet) {\n    //   (target as any)[p]?.obj?.onDrThisUnBind?.();\n    // }\n    // is ComponentSet\n    if (value instanceof ComponentSet && (target as any)[p] instanceof ComponentSet) {\n      value.config.beforeComponentSet = (target as any)[p];\n    }\n    (target as any)[p] = value;\n    let fullPathInfo: { path: string; obj: any }[][] = [];\n    if (typeof p === 'string') {\n      fullPathInfo = this.root([[{ path: p, obj: this._domRender_proxy }]], value);\n    }\n\n    // console.log('setRooot', fullPathInfo);\n\n    //normal attribute \uB610\uD55C \uB9C1\uD06C\uB791 \uAC19\uC740 \uC99D\uC138\uB77C\uC11C \uC774\uB807\uAC8C \uD574\uC918\uC57C\uD55C\uB2E4!!\n    // const rootDomRenderProxy = this.findRootDomRenderProxy();\n    // console.log('set!!!!!!!', fullPathInfo, rootDomRenderProxy)\n    // console.log('--------rootDom',fullPathInfo, rootDomRenderProxy, rootDomRenderProxy._domRender_proxy)\n    const rootElement = this._domRender_config.rootElement ?? this._domRender_config.window.document;\n    DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.normalAttrMapAttrName)?.forEach(\n      elementInfo => {\n        // @ts-ignore\n        // const optionalPath = ObjectUtils.Path.toOptionalChainPath(elementInfo.value);\n        const targets = new Map<string, NormalAttrDataType>(\n          ObjectUtils.Script.evaluateReturn<[string, NormalAttrDataType][]>(elementInfo.value)\n        );\n        Array.from(targets.entries())\n          .filter(isDefined)\n          .flatMap(([key, valueScript]) => {\n            return fullPathInfo\n              .flat()\n              .filter(it => valueScript.variablePaths?.some(vit=> vit.inner.includes(`this.${it.path}`)))\n              .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));\n          })\n          .forEach(it => {\n            // const optionalPaths = it.valueScript.variablePaths.map(it => ObjectUtils.Path.toOptionalChainPath(it))\n            const variablePaths = it.valueScript.variablePaths;\n            let targetScript = it.valueScript.originalAttrValue;\n              let script: string;\n              if (it.valueScript.isStringTemplate) {\n                  variablePaths.forEach(it => {\n                      let r = ObjectUtils.Path.toOptionalChainPath(it.inner);\n                      targetScript = targetScript.replaceAll(it.origin, `\\${${r}}`);\n                  })\n                  script = '`' + targetScript + '`';\n              } else {\n                  variablePaths.forEach(it => {\n                      let r = ObjectUtils.Path.toOptionalChainPath(it.inner);\n                      targetScript = targetScript.replaceAll(it.origin, `${r}`);\n                  })\n                  script = targetScript;\n              }\n            // variablePaths.forEach(it => {\n            //   let r = ObjectUtils.Path.toOptionalChainPath(it.inner);\n            //   targetScript = targetScript.replaceAll(it.origin,`\\${${r}}`);\n            // })\n            const value1 = ObjectUtils.Script.evaluateReturn(script, it.pathInfo.obj);\n            // console.log('proxy set!Attribut======', it.key, value1)\n            if (value1 === null) {\n              elementInfo.element.removeAttribute(it.key);\n              elementInfo.element[it.key] = null;\n            } else {\n              elementInfo.element.setAttribute(it.key, value1);\n              elementInfo.element[it.key] = value1;\n            }\n          });\n      }\n    );\n\n    //\uC5EC\uAE30\uC11C \uB9C1\uD06C \uAC19\uC740\uAC70 \uD574\uC918\uC57C\uD568  *-link\uB85C \uBCC0\uC218\uAC12\uC774 \uBCC0\uACBD\uB418\uBA74 \uADF8\uAC78 \uCC38\uACE0\uD558\uACE0\uC788\uB294 \uB2E4\uB978\uAC83\uB4E4\uC5D0\uB3C4 \uD574\uC918\uC57C\uD55C\uB2E4.\n    DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.linkTargetMapAttrName)?.forEach(\n      elementInfo => {\n        // @ts-ignore\n        const targets = new Map<string, string>(ScriptUtils.evaluateReturn<[string, string][]>(elementInfo.value));\n\n        Array.from(targets.entries())\n          .filter(([key, value]) => value.trim())\n          .filter(isDefined)\n          .flatMap(([key, valueScript]) => {\n            return fullPathInfo\n              .flat()\n              .filter(it => valueScript.includes(`this.${it.path}`))\n              .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));\n          })\n          .forEach(info => {\n            const value1 = ScriptUtils.evaluateReturn(info.valueScript, info.pathInfo.obj);\n            const applyAttributeName = EventManager.linkAttrs.find(it => it.name === info.key);\n            if (applyAttributeName) {\n              if (value1 === null) {\n                elementInfo.element.removeAttribute(applyAttributeName.property);\n              } else {\n                // console.log('ppppppppppppppppppppppp', applyAttributeName, elementInfo)\n                elementInfo.element.setAttribute(applyAttributeName.property, value1);\n              }\n            }\n          });\n\n        Array.from(targets.entries())\n          .filter(([key, value]) => value.trim())\n          .filter(isDefined)\n          .flatMap(([key, valueScript]) => {\n            return fullPathInfo\n              .flat()\n              .filter(it => valueScript.includes(`this.${it.path}`))\n              .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));\n          })\n          .forEach(info => {\n            const linkInfo = EventManager.linkAttrs.find(it => it.name === info.key);\n            if (linkInfo) {\n              elementInfo.element[linkInfo.property] = value;\n            }\n          });\n      }\n    );\n\n    // console.log('---end',receiver);\n    if (\n      'onBeforeReturnSet' in receiver &&\n      typeof p === 'string' &&\n      !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)\n    ) {\n      if (isOnBeforeReturnSet(receiver)) {\n        receiver.onBeforeReturnSet?.(\n          p,\n          value,\n          fullPathInfo.map(it => it.map(it => it.path).join())\n        );\n      }\n    }\n    return true;\n  }\n\n  get(target: T, p: string | symbol, receiver: any): any {\n    // console.log('get-->', target, p, receiver);\n    if (p === '_DomRender_origin' || p === '_domRender_origin') {\n      return this._domRender_origin;\n    } else if (p === '_DomRender_ref' || p === '_domRender_ref') {\n      return this._domRender_ref;\n    } else if (p === '_DomRender_config' || p === '_domRender_config') {\n      return this._domRender_config;\n    } else if (p === '_DomRender_proxy' || p === '_domRender_proxy') {\n      return this;\n    } else {\n      // Date\uB77C\uB358\uC9C0 \uC774\uB7F0\uB188\uB4E4\uC740-_-\uD504\uB85D\uC2DC\uAC00 \uC774\uC0C1\uD558\uAC8C \uB3D9\uC791\uD574\uC11C\n      // console.log('--->', p, target, target.bind, 'bind' in target)\n      // if ((p in target) && ('bind' in target)) {\n      //     try{\n      //     return (target as any)[p].bind(target);\n      //     }catch (e) {\n      //         console.error(e)\n      //     }\n      // } else {\n      //     return (target as any)[p]\n      // }\n      // return (p in target) ? (target as any)[p].bind(target) : (target as any)[p]\n      // console.log('-->', p, Object.prototype.toString.call((target as any)[p]), (target as any)[p])\n      // return (target as any)[p]\n      let it = (target as any)[p];\n      if (\n        it &&\n        typeof it === 'object' &&\n        '_DomRender_isProxy' in it &&\n        Object.prototype.toString.call(it._DomRender_origin) === '[object Date]'\n      ) {\n        it = it._DomRender_origin;\n      }\n\n      if (\n        'onBeforeReturnGet' in receiver &&\n        typeof p === 'string' &&\n        !(this._domRender_config.proxyExcludeOnBeforeReturnGets ?? []).concat(excludeGetSetPropertys).includes(p)\n      ) {\n        (receiver as any)?.onBeforeReturnGet?.(\n          p,\n          it,\n          this.root([[{ path: p, obj: this._domRender_proxy }]], it, false)\n        );\n      }\n      return it;\n    }\n  }\n\n  deleteProperty(target: T, p: string | symbol): boolean {\n    delete (target as any)[p];\n    if (typeof p === 'string') {\n      this.root([[{ path: p, obj: this._domRender_proxy }]]);\n    }\n    return true;\n  }\n\n  has(target: T, p: string | symbol): boolean {\n    return p === '_DomRender_isProxy' || p in target;\n  }\n\n  proxy(parentProxy: T, obj: T | any, p: string) {\n    try {\n      // const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, obj, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);\n      const isObject = typeof obj === 'object';\n      const isNoProxy = isObject && isDomRenderNoProxy(obj, p);\n      const isExclude = this._domRender_config.proxyExcludeTyps?.some(it => obj instanceof it) ?? false;\n      const isFinal = isObject && DomRenderProxy.isFinal(obj);\n      const isFrozen = Object.isFrozen(obj);\n      const isShield = obj instanceof Shield;\n      if (\n        obj === undefined ||\n        obj === null ||\n        isNoProxy ||\n        isExclude ||\n        ValidUtils.isNullOrUndefined(obj) ||\n        !isObject ||\n        isFinal ||\n        isFrozen ||\n        isShield\n      ) {\n        return obj;\n      }\n    } catch (e) {}\n\n    /*\n    const proxyTarget = (this._domRender_config.proxyExcludeTyps?.filter(it => obj instanceof it) ?? []).length <= 0;\n    if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && !('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {\n      const domRender = new DomRenderProxy(obj, undefined, this._domRender_config);\n      domRender.addRef(parentProxy, p);\n      const proxy = new Proxy(obj, domRender);\n      domRender.run(proxy);\n      return proxy;\n    }\n    if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && ('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {\n      const d = (obj as any)._DomRender_proxy as DomRenderProxy<T>;\n      d.addRef(this._domRender_proxy!, p);\n      return obj;\n    } else {\n      return obj;\n    }\n */\n    if (!isWrapProxyDomRenderProxy(obj)) {\n      const domRender = new DomRenderProxy(obj, undefined, this._domRender_config);\n      domRender.addRef(parentProxy, p);\n      const proxy = new Proxy(obj, domRender);\n      domRender.run(proxy);\n      return proxy;\n    }\n    if (isWrapProxyDomRenderProxy(obj)) {\n      const d = (obj as any)._DomRender_proxy as DomRenderProxy<T>;\n      d.addRef(this._domRender_proxy!, p);\n      return obj;\n    } else {\n      return obj;\n    }\n  }\n\n  public addRef(parent: object, path: string) {\n    if (!this._domRender_ref.get(parent)) {\n      this._domRender_ref.set(parent, new Set<string>());\n    }\n    this._domRender_ref.get(parent)?.add(path);\n  }\n\n  public addRawSetAndRender(path: string, rawSet: RawSet) {\n    this.addRawSet(path, rawSet);\n    this.render([rawSet]);\n  }\n\n  public addRawSet(path: string, rawSet: RawSet) {\n    // console.log('addRawSet--> path:', path, 'rawSet:', rawSet)\n    if (!this._rawSets.get(path)) {\n      this._rawSets.set(path, new Set<RawSet>());\n    }\n    this._rawSets.get(path)?.add(rawSet);\n  }\n\n  // public removeRawSet(...raws: RawSet[]) {\n  //     this._rawSets.forEach(it => {\n  //         raws.forEach(sit => it.delete(sit));\n  //     })\n  //     this.garbageRawSet();\n  // }\n\n  public removeRawSet(...raws: RawSet[]) {\n    this._rawSets.forEach(it => {\n      it.forEach(sit => {\n        if (!sit.isConnected) {\n          it.delete(sit);\n        } else if (raws.includes(sit)) {\n          it.delete(sit);\n        }\n      });\n    });\n    this.targetGarbageRawSet();\n  }\n\n  private targetGarbageRawSet() {\n    this._targets.forEach(it => {\n      if (!it.isConnected) {\n        this._targets.delete(it);\n      }\n    });\n  }\n\n  private garbageRawSet() {\n    this._targets.forEach(it => {\n      if (!it.isConnected) {\n        this._targets.delete(it);\n      }\n    });\n\n    this._rawSets.forEach(it => {\n      it.forEach(sit => {\n        if (!sit.isConnected) {\n          it.delete(sit);\n        }\n      });\n    });\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AAAA;;8BAAO;",
+  "names": []
+}

package/dist/cjs/dist/components/ComponentBase.d.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ComponentBase_d_exports = {};
+module.exports = __toCommonJS(ComponentBase_d_exports);
+var import_reflect_metadata = require("reflect-metadata");
+//# sourceMappingURL=ComponentBase.d.js.map

package/dist/cjs/dist/components/ComponentBase.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ComponentBase.ts"],
+  "sourcesContent": ["import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';\nimport { OnChangeAttrRender, OtherData } from '../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';\nimport { RawSet } from '../rawsets/RawSet';\nimport { ConstructorType } from '@dooboostore/core/types';\nimport { OnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';\nimport { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';\nimport { OnInitRender } from '../lifecycle/OnInitRender';\nimport { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';\nimport { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';\nimport { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';\nimport { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';\nimport type { Render } from '../rawsets/Render';\nimport { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\nimport { DomRenderConfig } from '../configs/DomRenderConfig';\nimport { Subject } from '@dooboostore/core/message/Subject';\nimport { debounceTime } from '@dooboostore/core/message/operators/debounceTime';\nimport type { Subscription } from '@dooboostore/core/message/Subscription';\nimport { OnRawSetRendered, OnRawSetRenderedOtherData } from \"../lifecycle/OnRawSetRendered\";\n\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('attribute');\nexport const QUERY_METADATA_KEY = Symbol('query');\nexport const EVENT_METADATA_KEY = Symbol('event');\n\nexport interface AttributeMetadata {\n    propertyKey: string | symbol;\n    name: string;\n    converter?: (value: any | string | null) => any;\n    isMethod: boolean;\n}\n\nexport interface QueryMetadata {\n    selector: string;\n    propertyKey: string | symbol;\n    isMethod: boolean;\n    convert?: (e: Element) => any;\n    onDestroy?: (componentInstance: any, element: Element) => void;\n    refreshTime?: number; // milliseconds\n    refreshRawSetRendered?: boolean;\n}\n\nexport interface EventMetadata {\n    query: string;\n    eventName: string;\n    methodName: string | symbol;\n    onDestroy?: (componentInstance: any, element: Element) => void;\n    refreshTime?: number; // milliseconds\n    refreshRawSetRendered?: boolean;\n}\n\nexport function attribute(nameOrOptions?: string | { name?: string, converter?: (value: any | string | null) => any }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {\n    return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n        const attributes = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target.constructor) || [];\n        \n        let name: string;\n        let converter: ((value: any | string | null) => any) | undefined;\n        \n        if (typeof nameOrOptions === 'string') {\n            name = nameOrOptions;\n        } else if (nameOrOptions) {\n            name = nameOrOptions.name || String(propertyKey);\n            converter = nameOrOptions.converter;\n        } else {\n            name = String(propertyKey);\n        }\n        \n        const attributeMetadata: AttributeMetadata = {\n            propertyKey: propertyKey,\n            name: name,\n            converter: converter,\n            isMethod: !!descriptor\n        };\n        \n        attributes.push(attributeMetadata);\n        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, attributes, target.constructor);\n    };\n}\n\nexport function query(selectorOrOptions: string | { selector: string, convert?: (e: Element) => any, onDestroy?: (componentInstance: any, element: Element) => void, refreshIntervalTime?: number, refreshRawSetRendered?: boolean }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {\n    return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n        const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, target.constructor) || [];\n        \n        let selector: string;\n        let convert: ((e: Element) => any) | undefined;\n        let onDestroy: ((componentInstance: any, element: Element) => void) | undefined;\n        let refreshTime: number | undefined;\n        let refreshRawSetRendered: boolean | undefined;\n\n        if (typeof selectorOrOptions === 'string') {\n            selector = selectorOrOptions;\n        } else {\n            selector = selectorOrOptions.selector;\n            convert = selectorOrOptions.convert;\n            onDestroy = selectorOrOptions.onDestroy;\n            refreshTime = selectorOrOptions.refreshIntervalTime;\n            refreshRawSetRendered = selectorOrOptions.refreshRawSetRendered;\n        }\n        \n        const queryMetadata: QueryMetadata = {\n            selector: selector,\n            propertyKey: propertyKey,\n            isMethod: !!descriptor,\n            convert: convert,\n            onDestroy: onDestroy,\n            refreshTime: refreshTime,\n            refreshRawSetRendered\n        };\n        \n        queries.push(queryMetadata);\n        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, target.constructor);\n    };\n}\n\nexport function event(options: { query: string, name: string, onDestroy?: (componentInstance: any, element: Element) => void, refreshTime?: number, refreshRawSetRendered?: boolean }): MethodDecorator {\n    return (target: object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n        const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, target.constructor) || [];\n        \n        const eventMetadata: EventMetadata = {\n            query: options.query,\n            eventName: options.name,\n            methodName: propertyKey,\n            onDestroy: options.onDestroy,\n            refreshTime: options.refreshTime,\n            refreshRawSetRendered: options.refreshRawSetRendered\n        };\n        \n        events.push(eventMetadata);\n        ReflectUtils.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);\n    };\n}\n\n\nexport type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>, createChildrenDebounce?: number };\n\nexport type ChildrenSet = { instance: any, data: OnCreateRenderDataParams };\n\nexport class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered {\n  @DomRenderNoProxy\n  private _rawSet?: RawSet;\n  @DomRenderNoProxy\n  private _children: ChildrenSet[] = [];\n  @DomRenderNoProxy\n  private _render: Render | undefined;\n  @DomRenderNoProxy\n  private _attribute?: T;\n  @DomRenderNoProxy\n  private _boundEventListeners: { element: Element, eventName: string, listener: (e: Event) => void }[] = [];\n  @DomRenderNoProxy\n  private _queryBindings: { element: Element, metadata: QueryMetadata }[] = [];\n  @DomRenderNoProxy\n  private _eventBindings: { element: Element, metadata: EventMetadata, listener: (e: Event) => void }[] = [];\n  @DomRenderNoProxy\n  private _refreshTimers: Map<QueryMetadata | EventMetadata, NodeJS.Timeout> = new Map();\n\n  @DomRenderNoProxy\n  private childrenSetSubject = new Subject<ChildrenSet[]>();\n  @DomRenderNoProxy\n  private createChildrenDebounceSubscription?: Subscription | undefined;\n\n  constructor(private _config?: C) {\n  }\n  get componentConfig(): C | undefined {\n    return this._config;\n  }\n  get render(): Render | undefined {\n    return this._render;\n  }\n\n  get rawSet(): RawSet | undefined {\n    return this._rawSet;\n  }\n\n  get domRenderConfig(): DomRenderConfig | undefined {\n    return this.rawSet?.dataSet.config;\n  }\n\n  private _queryElements(selector: string, rawSet:RawSet): Element[] {\n    const e = this.getElement();\n    // console.log('queryElement-->', e);\n    if (e) {\n      return ElementUtils.querySelectorAll(e, selector);\n    } else {\n      let startNode = rawSet.point?.start;\n      let endNode = rawSet.point?.end;\n      // console.log('-----', startNode, endNode)\n      // console.log('-----', startNode?.isConnected, endNode?.isConnected)\n      if (rawSet.point?.start && startNode && !startNode.isConnected && startNode instanceof HTMLElement && startNode.hasAttribute('id')) {\n        rawSet.point.start = startNode = rawSet.dataSet.config.window.document.querySelector('#' + startNode.id) as HTMLMetaElement\n      }\n      if (rawSet.point?.end && endNode && !endNode.isConnected && endNode instanceof HTMLElement && endNode.hasAttribute('id')) {\n        rawSet.point.end = endNode = rawSet.dataSet.config.window.document.querySelector('#' + endNode.id) as HTMLMetaElement\n      }\n      if (startNode && endNode) {\n        // console.log('query!!', startNode, endNode);\n        return ElementUtils.querySelectorAll({ start: startNode as Element, end: endNode as Element }, selector);\n      }\n    }\n    return [];\n  }\n\n  private _cleanupEventListeners() {\n    for (const { element, eventName, listener } of this._boundEventListeners) {\n      element.removeEventListener(eventName, listener);\n    }\n    this._boundEventListeners = [];\n  }\n\n  private _cleanupQueryBindings() {\n    for (const { element, metadata } of this._queryBindings) {\n      if (metadata.onDestroy) {\n        metadata.onDestroy(this, element);\n      }\n      this._clearRefreshTimer(metadata);\n    }\n    this._queryBindings = [];\n  }\n\n  private _cleanupEventBindings() {\n    for (const { element, metadata, listener } of this._eventBindings) {\n      element.removeEventListener(metadata.eventName, listener);\n      if (metadata.onDestroy) {\n        metadata.onDestroy(this, element);\n      }\n      this._clearRefreshTimer(metadata);\n    }\n    this._eventBindings = [];\n  }\n\n  private _applyQueryBinding(queryInfo: QueryMetadata, elements: Element[], newElementsOnly: Element[] = elements) {\n    const { propertyKey, isMethod, convert } = queryInfo;\n    \n    // Track bindings for cleanup\n    elements.forEach(element => {\n      this._queryBindings.push({ element, metadata: queryInfo });\n    });\n    \n    // Apply convert function if provided\n    const processedElements = convert ? elements.map(convert) : elements;\n    const processedNewElements = convert ? newElementsOnly.map(convert) : newElementsOnly;\n    \n    if (isMethod) {\n      const method = (this as any)[propertyKey];\n      if (typeof method === 'function') {\n          const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);\n          if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {\n              // For array methods, pass only new elements\n              method.call(this, processedNewElements, {all: processedElements});\n          } else {\n              // For single element methods, pass first new element\n              if (processedNewElements.length > 0) {\n                  method.call(this, processedNewElements[0], {all: processedElements, newAll: processedNewElements});\n              }\n          }\n      }\n    } else {\n      // For properties, always set all elements (not just new ones)\n      const propertyType = ReflectUtils.getType(this, propertyKey);\n      if (propertyType === Array) {\n        (this as any)[propertyKey] = processedElements;\n      } else {\n        (this as any)[propertyKey] = processedElements[0] || null;\n      }\n    }\n  }\n\n  private _setupQueryDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    // console.group('_setupQueryDecorators')\n    // console.log('queries', queries);\n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        const elements = this._queryElements(queryInfo.selector, rawSet);\n        // console.log('------elements', elements);\n        this._applyQueryBinding(queryInfo, elements);\n        \n        // Setup refresh timer if specified\n        this._setupRefreshTimer(queryInfo);\n      }\n    }\n    // console.groupEnd();\n  }\n\n  private _updateQueryBinding(queryInfo: QueryMetadata, rawSet: RawSet, forceUpdate = false) {\n    const newElements = this._queryElements(queryInfo.selector, rawSet);\n    \n    // Get current bindings for this query\n    const currentBindings = this._queryBindings.filter(binding => binding.metadata === queryInfo);\n    const currentElements = currentBindings.map(binding => binding.element);\n    \n    // Check if elements have changed\n    const elementsChanged = forceUpdate || !this._arraysEqual(currentElements, newElements);\n    \n    if (elementsChanged) {\n      let addedElements: Element[] = [];\n      \n      if (forceUpdate) {\n        // Force update: cleanup all old bindings, treat all as new\n        currentBindings.forEach(({ element, metadata }) => {\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n        addedElements = newElements;\n      } else {\n        // Smart update: only cleanup removed elements, find added elements\n        const removedElements = currentElements.filter(element => !newElements.includes(element));\n        addedElements = newElements.filter(element => !currentElements.includes(element));\n        \n        removedElements.forEach(element => {\n          if (queryInfo.onDestroy) {\n            queryInfo.onDestroy(this, element);\n          }\n        });\n      }\n      \n      // Remove old bindings\n      this._queryBindings = this._queryBindings.filter(binding => binding.metadata !== queryInfo);\n      \n      // Apply new bindings, but pass only added elements to methods\n      this._applyQueryBinding(queryInfo, newElements, addedElements);\n    }\n  }\n\n  private _updateQueryDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        this._updateQueryBinding(queryInfo, rawSet);\n      }\n    }\n  }\n\n  private _arraysEqual(arr1: Element[], arr2: Element[]): boolean {\n    if (arr1.length !== arr2.length) return false;\n    return arr1.every((element, index) => element === arr2[index]);\n  }\n\n  private _setupRefreshTimer(metadata: QueryMetadata | EventMetadata) {\n    if (!metadata.refreshTime || !this._rawSet) return;\n\n    const timer = setInterval(() => {\n      if (!this._rawSet) return;\n\n      if ('selector' in metadata) {\n        // QueryMetadata\n        this._updateQueryBinding(metadata as QueryMetadata, this._rawSet);\n      } else {\n        // EventMetadata\n        this._updateEventBinding(metadata as EventMetadata, this._rawSet);\n      }\n    }, metadata.refreshTime);\n\n    this._refreshTimers.set(metadata, timer);\n  }\n\n  private _clearRefreshTimer(metadata: QueryMetadata | EventMetadata) {\n    const timer = this._refreshTimers.get(metadata);\n    if (timer) {\n      clearInterval(timer);\n      this._refreshTimers.delete(metadata);\n    }\n  }\n\n  private _clearAllRefreshTimers() {\n    for (const timer of Array.from(this._refreshTimers.values())) {\n      clearInterval(timer);\n    }\n    this._refreshTimers.clear();\n  }\n\n  async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    if (queries) {\n      queries.filter(it => it.refreshRawSetRendered).forEach(queryInfo => {\n        this._updateQueryBinding(queryInfo, rawSet, true);\n      });\n    }\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events) {\n      events.filter(it => it.refreshRawSetRendered).forEach(eventInfo => {\n        this._updateEventBinding(eventInfo, rawSet, true);\n      });\n    }\n  }\n  /**\n   * Manually refresh all query and event decorators\n   * Useful when DOM elements are dynamically added/removed and you want to update bindings\n   */\n  refreshDecorators(): void {\n    if (this._rawSet) {\n      this._updateQueryDecorators(this._rawSet);\n      this._updateEventDecorators(this._rawSet);\n    }\n  }\n\n  /**\n   * Manually refresh specific query decorators by property key\n   * @param propertyKeys - Array of property keys to refresh, or single property key\n   */\n  refreshQueryDecorators(propertyKeys: (string | symbol) | (string | symbol)[]): void {\n    if (!this._rawSet) return;\n\n    const keys = Array.isArray(propertyKeys) ? propertyKeys : [propertyKeys];\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    \n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        if (keys.includes(queryInfo.propertyKey)) {\n          this._updateQueryBinding(queryInfo, this._rawSet, true); // Force update\n        }\n      }\n    }\n  }\n\n  /**\n   * Manually refresh specific event decorators by method name\n   * @param methodNames - Array of method names to refresh, or single method name\n   */\n  refreshEventDecorators(methodNames: (string | symbol) | (string | symbol)[]): void {\n    if (!this._rawSet) return;\n\n    const names = Array.isArray(methodNames) ? methodNames : [methodNames];\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    \n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        if (names.includes(eventInfo.methodName)) {\n          this._updateEventBinding(eventInfo, this._rawSet, true); // Force update\n        }\n      }\n    }\n  }\n\n  private _applyEventBinding(eventInfo: EventMetadata, elements: Element[]) {\n    elements.forEach(element => {\n      const listener = (this as any)[eventInfo.methodName].bind(this);\n      // console.log('bind?????', element);\n      element.addEventListener(eventInfo.eventName, listener);\n      \n      // Track bindings for cleanup\n      this._eventBindings.push({ element, metadata: eventInfo, listener });\n      this._boundEventListeners.push({ element, eventName: eventInfo.eventName, listener });\n    });\n  }\n\n  private _setupEventDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        const elements = this._queryElements(eventInfo.query, rawSet);\n        this._applyEventBinding(eventInfo, elements);\n        \n        // Setup refresh timer if specified\n        this._setupRefreshTimer(eventInfo);\n      }\n    }\n  }\n\n  private _updateEventBinding(eventInfo: EventMetadata, rawSet: RawSet, forceUpdate = false) {\n    const newElements = this._queryElements(eventInfo.query, rawSet);\n    \n    // Get current bindings for this event\n    const currentBindings = this._eventBindings.filter(binding => binding.metadata === eventInfo);\n    const currentElements = currentBindings.map(binding => binding.element);\n    \n    // Check if elements have changed\n    const elementsChanged = forceUpdate || !this._arraysEqual(currentElements, newElements);\n    \n    if (elementsChanged) {\n      if (forceUpdate) {\n        // Force update: cleanup all old bindings\n        currentBindings.forEach(({ element, metadata, listener }) => {\n          element.removeEventListener(metadata.eventName, listener);\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n      } else {\n        // Smart update: only cleanup removed elements\n        const removedElements = currentElements.filter(element => !newElements.includes(element));\n        const removedBindings = currentBindings.filter(binding => removedElements.includes(binding.element));\n        \n        removedBindings.forEach(({ element, metadata, listener }) => {\n          element.removeEventListener(metadata.eventName, listener);\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n      }\n      \n      // Remove old bindings from tracking arrays\n      this._eventBindings = this._eventBindings.filter(binding => binding.metadata !== eventInfo);\n      this._boundEventListeners = this._boundEventListeners.filter(binding => \n        !currentBindings.some(cb => cb.element === binding.element && cb.metadata.eventName === binding.eventName)\n      );\n      \n      // Apply new bindings\n      this._applyEventBinding(eventInfo, newElements);\n    }\n  }\n\n  private _updateEventDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        this._updateEventBinding(eventInfo, rawSet);\n      }\n    }\n  }\n\n  getAttribute<K extends keyof T>(name: K, attribute = this._attribute): T[K] | null {\n    const target = attribute as any;\n    if (!target) {\n      return null;\n    }\n\n    const nameString = String(name);\n    let p = nameString;\n    if (p in target) {\n      return target[p];\n    }\n    p = ConvertUtils.snakeToCamelCase(nameString);\n    if (p in target) {\n      return target[p];\n    }\n    p = ConvertUtils.camelToSnakeCase(nameString);\n    if (p in target) {\n      return target[p];\n    }\n    p = nameString.toUpperCase()\n    if (p in target) {\n      return target[p];\n    }\n    p = nameString.toLowerCase()\n    if (p in target) {\n      return target[p];\n    }\n    return null;\n  }\n\n  hasAttribute(name: keyof T) {\n    return this.getAttribute(name) !==null;\n  }\n\n  equalsAttributeName(n: string, name: keyof T) {\n    return n === name ||\n    ConvertUtils.snakeToCamelCase(n) === name ||\n    ConvertUtils.camelToSnakeCase(n) === name ||\n      n.toUpperCase() === (name as string).toUpperCase() ||\n      n.toLowerCase() === (name as string).toLowerCase()\n    ;\n  }\n\n  get uuid(): string | undefined {\n    return this._rawSet?.uuid;\n  }\n\n  get childrenSet() {\n    return this._children;\n  }\n\n  get children(): any[] {\n    return this._children.map(it=>it.instance);\n  }\n\n  getElement<T extends Element>(): T | undefined {\n    return (this.render ?? this.rawSet?.dataSet?.render)?.getElement?.();\n  }\n\n  getFirstChild<T>(type: ConstructorType<T>): T | undefined {\n    return this._children.find(it => it.instance instanceof type)?.instance;\n  }\n\n  getParentThis<P>():P {\n    return this.render?.parentThis as P;\n  }\n\n  getChildren<C extends ConstructorType<any>>(type: C): InstanceType<C>[];\n  getChildren<C extends ConstructorType<any>[]>(types: C): InstanceType<C[number]>[];\n  getChildren(typeOrTypes: ConstructorType<any> | ConstructorType<any>[]): any[] {\n    const targets = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];\n    return this._children.filter(childSet =>\n      targets.some(targetConstructor => childSet.instance instanceof targetConstructor)\n    )?.map(it=>it.instance);\n  }\n\n\n\n  private setRawSet(rawSet: RawSet) {\n    this._rawSet = rawSet;\n    if (this._rawSet) {\n      this.setAttribute(this._rawSet.dataSet?.render?.attribute as T);\n    }\n  }\n\n  setAttribute(attribute: T) {\n    this._attribute = attribute;\n  }\n\n  // TODO: rawSet isConnected\uB85C \uCCB4\uD06C\uD574\uC11C \uB4E4\uC5B4\uAC00\uC788\uB294\uAC83\uB9CC \uCC98\uB9AC\uB418\uB3C4\uB85D \uB610\uB294 \uC774\uBBF8\uB4E4\uC5B4\uAC00\uC788\uB294\uAC83\uB3C4 \uBEB4\uC57C\uB420\uAC83\uAC19\uC740\uB370.. \uC801\uC6A9\uD558\uAE34\uD588\uC74C..\uC9C0\uCF1C\uBD10\uC57C\uB420\uB4EF.\n  onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n    // console.log('onCreatedThisChild------------------------',child, data, data.render?.rawSet?.isConnected)\n    const n = [...this._children];\n    n.push({instance:child, data});\n    this._children = n.filter(it=>it.data.render?.rawSet?.isConnected)\n    this.childrenSetSubject.next(this._children);\n    \n    // Update decorators when children change (DOM might have changed)\n    // Only update if elements actually changed\n    if (this._rawSet) {\n      this._updateQueryDecorators(this._rawSet);\n      this._updateEventDecorators(this._rawSet);\n    }\n  }\n\n  onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n\n  }\n\n  onCreateRenderData(data: OnCreateRenderDataParams): void {\n    this._render = data.render;\n    if (data.render?.rawSet) {\n      this.setRawSet(data.render.rawSet);\n    }\n    if (this._config?.onlyParentType) {\n      const isOk = Array.isArray(this._config?.onlyParentType) ? this._config?.onlyParentType : [this._config?.onlyParentType].some(it => data.render?.parentThis instanceof it);\n      if (!isOk) {\n        throw new Error('only my parentThis ' + this._config?.onlyParentType);\n      }\n    }\n  }\n\n  onChangeAttrRender(name: string, value: any, other: OtherData): void {\n    if (other.rawSet) {\n      this.setRawSet(other.rawSet);\n    }\n\n    const attributes = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, this.constructor);\n    if (attributes && Array.isArray(attributes)) {\n        for (const attrInfo of attributes) {\n            if (this.equalsAttributeName(name, attrInfo.name as any)) {\n                const finalValue = attrInfo.converter ? attrInfo.converter(value) : value;\n                if (attrInfo.isMethod) {\n                    const method = (this as any)[attrInfo.propertyKey];\n                    if (typeof method === 'function') {\n                        method.call(this, finalValue);\n                    }\n                } else {\n                    (this as any)[attrInfo.propertyKey] = finalValue;\n                }\n            }\n        }\n    }\n  }\n\n  async onInitRender(param: any, rawSet: RawSet) {\n    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(debounceTime(this.componentConfig?.createChildrenDebounce??0)).subscribe(it => {\n      this.onCreatedThisChildDebounce(it);\n    });\n    if (rawSet) {\n      this.setRawSet(rawSet);\n\n      const e = this.getElement();\n      if (e) {\n        (e as any).component = this;\n      }\n\n      // Setup decorators\n      this._setupQueryDecorators(rawSet);\n      this._setupEventDecorators(rawSet);\n    }\n  }\n\n  onDrThisBind() {\n    // Logic moved to onInitRender for robustness\n  }\n\n  onDrThisUnBind() {\n    this.onDestroy();\n  }\n\n  onDestroyRender(data?: OnDestroyRenderParams): void {\n    this.onDestroy();\n  }\n\n  onDestroy() {\n    this._cleanupEventListeners();\n    this._cleanupQueryBindings();\n    this._cleanupEventBindings();\n    this._clearAllRefreshTimers();\n    this.createChildrenDebounceSubscription?.unsubscribe();\n  }\n\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AAAA;;8BAAO;",
+  "names": []
+}

package/dist/cjs/dist/components/ComponentSet.d.js

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ComponentSet_d_exports = {};
+module.exports = __toCommonJS(ComponentSet_d_exports);
+//# sourceMappingURL=ComponentSet.d.js.map

package/dist/cjs/dist/components/ComponentSet.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ComponentSet.ts"],
+  "sourcesContent": ["import { DomRenderFinalProxy } from '../types/Types';\n\nexport type ComponentSetConfig = {objPath?: string | null, beforeComponentSet?: ComponentSet};\nexport class ComponentSet<T = any> {\n    private _config: ComponentSetConfig;\n    private _template?: string;\n    private _styles?: string[] | string;\n    constructor(public obj: T, source: {template?: string, styles?: (string[]) | string}, config?: ComponentSetConfig) {\n        this._template = source.template;\n        this._styles = source.styles;\n        this._config = DomRenderFinalProxy.final(Object.assign({objPath: 'obj'} as ComponentSetConfig, config))\n    }\n    get template() {\n        return this._template;\n    }\n    get styles() {\n        return this._styles;\n    }\n    get config() {\n        return this._config;\n    }\n    public setTemplateStyle(set: {template?: string, styles?: string | (string[])}) {\n        this._template = set.template;\n        this._styles = set.styles;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AAEA;;",
+  "names": []
+}

package/dist/cjs/dist/components/appender/Appender.d.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Appender_d_exports = {};
+__export(Appender_d_exports, {
+  default: () => Appender_d_default
+});
+module.exports = __toCommonJS(Appender_d_exports);
+var Appender_d_default = _default;
+//# sourceMappingURL=Appender.d.js.map

package/dist/cjs/dist/components/appender/Appender.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/appender/Appender.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { Appender as DomRenderAppender } from '../../operators/Appender';\n\n\nexport namespace Appender {\n  export const selector = 'dr-appender';\n  // export type AppenderInterface<D> = {\n  //   push(...data:D[]):void;\n  //   set(key: string, ...v:D[]):void\n  //   delete(key: string):void\n  //   clear():void\n  // }\n  export type Attribute<D> = {\n    value: DomRenderAppender<D>;\n    onCreate?: (appender: DomRenderAppender) => void;\n  }\n\n  // @Component({\n  //   template: '<div dr-appender=\"@this@.appender\" dr-option-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}`\n  // })\n  export class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    private value?:DomRenderAppender\n\n    // onCreateRender(...param: any) {\n    //   console.log('--onCreateRender')\n    // }\n\n    // test() {\n    //   console.log('t', this.getAttribute('appender'))\n    // }\n\n\n    // push(...data:D[]) {\n    //   console.log('push/////', data);\n    //   this.appender.push(...data);\n    // }\n    //\n    // set(key: string, v: D): void {\n    //   this.appender.set(key, v)\n    // }\n    //\n    // delete(key: string): void {\n    //   this.appender.delete(key);\n    // }\n    //\n    // clear(): void {\n    //   this.appender.clear();\n    // }\n\n\n\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if(this.equalsAttributeName(name, 'value')) {\n        this.value = value;\n      }\n      // console.log('------>appender', name, value);\n    }\n  }\n}\n\n\nexport default {\n  appender: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: Appender.selector,\n      template: '<div dr-appender=\"@this@.value\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e,o,r2, counstructorParam) => {\n        return DomRender.run({rootObject: new Appender.Appender(...counstructorParam), config: config});\n      }\n    })\n  },\n}\n\n\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;AAyEA,IAAA,qBAAA;",
+  "names": []
+}

package/dist/cjs/dist/components/checkbox/CheckBox.d.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CheckBox_d_exports = {};
+__export(CheckBox_d_exports, {
+  default: () => CheckBox_d_default
+});
+module.exports = __toCommonJS(CheckBox_d_exports);
+var CheckBox_d_default = _default;
+//# sourceMappingURL=CheckBox.d.js.map

package/dist/cjs/dist/components/checkbox/CheckBox.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/checkbox/CheckBox.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace CheckBox {\n  export const selector = 'dr-checkbox';\n  export type Attribute = {\n    class?: string;\n  };\n  export type ChangeOption = { type: 'initialize' | 'event' | 'attributeChange' };\n  export type WrapAttribute = {\n    class?: string;\n    name?: string;\n    checked?: boolean;\n    change?: (checked: boolean, option: ChangeOption) => void;\n  };\n\n  class CheckBoxBase extends ComponentBase<Attribute> {\n    public hidden = true;\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   styles: '',\n  //   selector: `${selector}.Checked`\n  // })\n  export class Checked extends CheckBoxBase {\n    public name = 'checked';\n\n    constructor() {\n      super({ onlyParentType: CheckBox });\n    }\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   styles: '',\n  //   selector: `${selector}.UnChecked`\n  // })\n  export class UnChecked extends CheckBoxBase {\n    public name = 'unChecked';\n\n    constructor() {\n      super({ onlyParentType: CheckBox });\n    }\n  }\n\n  // @Component({\n  //   template: template,\n  //   styles: style,\n  //   selector: `${selector}`\n  // })\n  export class CheckBox extends ComponentBase<WrapAttribute> {\n    private checked = false;\n    private inputElement?: HTMLInputElement;\n\n    change(option: ChangeOption, checked?: boolean) {\n      checked = checked ?? this.checked;\n      this.checked = checked;\n      this.setChildrenHidden(checked);\n      this.getAttribute('change')?.(checked, option);\n    }\n\n    private setChildrenHidden(checked: boolean) {\n      this.getChildren(Checked).forEach(it => {\n        it.hidden = !checked;\n      });\n      this.getChildren(UnChecked).forEach(it => {\n        it.hidden = checked;\n      });\n    }\n\n    onCreatedThisChild(child: CheckBoxBase, childData: OnCreateRenderDataParams): void {\n      super.onCreatedThisChild(child, childData);\n      this.setChildrenHidden(this.checked);\n    }\n\n    onInitInputElement(element: HTMLInputElement) {\n      // console.log('---cr', element)\n      this.inputElement = element;\n      this.inputElement.checked = !!this.getAttribute('checked');\n      this.change({ type: 'initialize' }, !!this.getAttribute('checked'));\n    }\n\n    onChangeAttrRender(name: string, val: any, other: OtherData) {\n      super.onChangeAttrRender(name, val, other);\n      // console.log('Checkbox ChangeAttr------', name, val, this.inputElement)\n      if (this.inputElement && this.getAttribute('checked') !== this.checked) {\n        this.inputElement.checked = !!this.getAttribute('checked');\n        this.change({ type: 'attributeChange' }, !!this.getAttribute('checked'));\n      }\n    }\n  }\n}\n\nexport default {\n  checkBoxChecked: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${CheckBox.selector}-checked`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new CheckBox.Checked(), config: config });\n      }\n    });\n  },\n  checkBoxUnchecked: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${CheckBox.selector}-unchecked`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new CheckBox.UnChecked(), config: config });\n      }\n    });\n  },\n  checkBox: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${CheckBox.selector}`,\n      template:\n        '<label class=\"${@this@.getAttribute(\\'class\\')}$\">\\n' +\n        '  <input\\n' +\n        '    name=\"${@this@.getAttribute(\\'name\\')}$\"\\n' +\n        '    dr-on-init=\"@this@.onInitInputElement($element)\"\\n' +\n        '    dr-event-change=\"@this@.change({type: \\'event\\'},$element.checked);\"\\n' +\n        '    type=\"checkbox\" hidden=\"hidden\"/>\\n' +\n        '  #innerHTML#\\n' +\n        '</label>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new CheckBox.CheckBox(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;AAqGA,IAAA,qBAAA;",
+  "names": []
+}

package/dist/cjs/dist/components/choose/Choose.d.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Choose_d_exports = {};
+__export(Choose_d_exports, {
+  default: () => Choose_d_default
+});
+module.exports = __toCommonJS(Choose_d_exports);
+var Choose_d_default = _default;
+//# sourceMappingURL=Choose.d.js.map

package/dist/cjs/dist/components/choose/Choose.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/choose/Choose.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace Choose {\n  export const selector = 'dr-choose';\n  export type Attribute<D> = {\n    data: D;\n  };\n  export type WhenAttribute<D> = {\n    test: (data?: D | null) => boolean;\n  };\n\n  class ChildOtherWiseBase<A> extends ComponentBase<A> {\n    public hidden = true;\n  }\n\n  class ChildBase<D> extends ChildOtherWiseBase<WhenAttribute<D>> {\n    data?: D;\n  }\n\n  export class When<D> extends ChildBase<D> {\n    constructor() {\n      super({ onlyParentType: Choose<D> });\n    }\n  }\n\n  export class OtherWise<D> extends ChildBase<D> {\n    constructor() {\n      super({ onlyParentType: Choose<D> });\n    }\n  }\n\n  export class Choose<D> extends ComponentBase<Attribute<D>> {\n    private choose?: When<D> | OtherWise<D>;\n\n    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n      super.onCreatedThisChild(child, data);\n      this.setChange(child);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if (this.equalsAttributeName(name, 'data')) {\n        this.choose = undefined;\n        const children = this.getChildren([When, OtherWise]).sort(\n          (a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0)\n        );\n        children.forEach(it => this.setChange(it as any));\n      }\n    }\n\n    private setChange(child: When<D> | OtherWise<D>) {\n      child.data = this.getAttribute('data') as any;\n      // when.hidden = true;\n\n      console.log('eeeeeee?', child, child.getAttribute('test'), this.getAttribute('data'));\n      if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {\n        console.log('eeeeeee?2');\n        // console.log('------------', child.attribute?.test?.(this.attribute?.data))\n        this.choose = child;\n        if (child.hidden) {\n          child.hidden = false;\n        }\n        // console.log('--------', when)\n      } else if (this.choose !== child) {\n        child.hidden = true;\n      }\n\n      console.log('eeeeeee?3');\n      if (!this.choose && child instanceof OtherWise) {\n        this.choose = child;\n        if (child.hidden) {\n          child.hidden = false;\n        }\n      }\n      console.log('eeeeeee?34');\n    }\n  }\n}\n\nexport default {\n  chooseWhen: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Choose.selector}-when`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Choose.When(), config: config });\n      }\n    });\n  },\n  chooseOtherWise: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Choose.selector}-other-wise`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Choose.OtherWise(), config: config });\n      }\n    });\n  },\n  choose: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Choose.selector}`,\n      template: '#innerHTML#',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Choose.Choose(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;AAkFA,IAAA,mBAAA;",
+  "names": []
+}

package/dist/cjs/dist/components/details/Details.d.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Details_d_exports = {};
+__export(Details_d_exports, {
+  default: () => Details_d_default
+});
+module.exports = __toCommonJS(Details_d_exports);
+var Details_d_default = _default;
+//# sourceMappingURL=Details.d.js.map

package/dist/cjs/dist/components/details/Details.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/details/Details.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { type Subscription } from '@dooboostore/core/message/Subscription';\nimport { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';\nimport { EventUtils } from '@dooboostore/core-web/event/EventUtils';\n\nexport namespace Details {\n  export const selector = 'dr-details';\n\n  export type Attribute = {\n    class?: string;\n    toggle_form_reset?: boolean;\n    disableOtherClickClose?: boolean;\n    toggle?: (open: boolean) => void;\n  };\n  export type BodyAttribute = {\n    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  } & Attribute;\n\n  export type FormAttribute = {\n    disabledSubmit?: null;\n    submit?: (event: SubmitEvent, element: HTMLFormElement) => void;\n  } & BodyAttribute;\n\n  // @Component({\n  //   template: '<summary class=\"${`${@this@.getAttribute(\\'class\\')} details-summary-container`}$\">#innerHTML#</summary>',\n  //   styles: '',\n  //   selector: `${selector}.Summary`\n  // })\n  export class Summary extends ComponentBase<Attribute> {\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n  }\n\n  // @Component({\n  //   template: '<div class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>',\n  //   selector: `${selector}.Body`\n  // })\n  export class Body extends ComponentBase<BodyAttribute> {\n    private $element?: HTMLDivElement;\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n  }\n\n  export const isBody = (instance: any): instance is Body => {\n    return instance instanceof Body;\n  };\n\n  // @Component({\n  //   template: '<form class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container details-form-container`}$\" dr-on-init=\"@this@.$element = $element;\" dr-event-submit=\"@this@.submit($element,$event);\">#innerHTML#</form>',\n  //   styles: detailsFormStyle,\n  //   selector: `${selector}.Form`\n  // })\n  export class Form extends ComponentBase<FormAttribute> {\n    private $element?: HTMLFormElement;\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n    submit(element: HTMLFormElement, event: SubmitEvent) {\n      if (this.hasAttribute('disabledSubmit')) {\n        event.preventDefault();\n      }\n      if (this.hasAttribute('submit')) {\n        this.getAttribute('submit')?.(event, element);\n      }\n    }\n    reset() {\n      this.$element?.reset();\n    }\n  }\n  export const isForm = (instance: any): instance is Form => {\n    return instance instanceof Form;\n  };\n\n  // @Component({\n  //   template: template,\n  //   styles: style,\n  //   // noStrip: true,\n  //   selector: `${selector}`\n  // })\n  export class Details extends ComponentBase<Attribute> implements OnCreateRender, OnInitRender {\n    // private detailsElement?: HTMLDetailsElement;\n    private documentClickSubscription?: Subscription;\n    private toggleSubscription?: Subscription;\n    private element?: HTMLDetailsElement;\n    onCreateRenderData(data: OnCreateRenderDataParams) {\n      super.onCreateRenderData(data);\n    }\n\n    onCreateRender(...param: any[]): void {}\n\n    toggle(element: HTMLDetailsElement) {\n      const toggleAttribute = this.getAttribute('toggle');\n      if (toggleAttribute) {\n        toggleAttribute?.(element.open);\n      }\n    }\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n\n      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {\n        const detailsElement = this.element;\n\n        const document = this.rawSet.dataSet!.config!.window!.document!;\n        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {\n          if (this.getAttribute('disableOtherClickClose')) {\n            return;\n          }\n          if (detailsElement && !detailsElement?.contains(event?.target as Node)) {\n            detailsElement.open = false;\n          }\n        });\n        if (detailsElement) {\n          this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, 'toggle').subscribe(it => {\n            if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute('toggle_form_reset'))) {\n              this.children?.filter(isForm).forEach(it => {\n                it.reset();\n              });\n            }\n          });\n        }\n      }\n      // console.log('aaaaaaaaaaaaaaaaaaaaa', rawSet);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n    }\n\n    onDestroyRender(...metaData: any[]): void {\n      this.toggleSubscription?.unsubscribe();\n      this.documentClickSubscription?.unsubscribe();\n      // console.log('onDestroyRender', metaData);\n      // if (ValidUtils.isBrowser()) {\n      //   document.removeEventListener('click', this.ccc)\n      // }\n    }\n\n    // changeAttribute(attribute: { className: string } | undefined) {\n    // }\n  }\n}\n\nexport default {\n  detailsSummary: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-summary`,\n      template:\n        '<summary class=\"${`${@this@.getAttribute(\\'class\\')} details-summary-container`}$\">#innerHTML#</summary>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Summary(), config: config });\n      }\n    });\n  },\n  detailsBody: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-body`,\n      template:\n        '<div class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Body(), config: config });\n      }\n    });\n  },\n  detailsForm: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-form`,\n      template:\n        '<form class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container details-form-container`}$\" dr-on-init=\"@this@.$element = $element;\" dr-event-submit=\"@this@.submit($element,$event);\">#innerHTML#</form>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Form(), config: config });\n      }\n    });\n  },\n  details: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}`,\n      styles: `\n        .details-container {\n            position: relative;\n        }\n\n        .details-container .details-body-container {\n            position: absolute;\n        }\n\n\n        .details-container .details-body-bottom-left-container {\n            position: absolute;\n            left: 0;\n            top: 100%;\n            /*margin-top: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-bottom-right-container {\n            position: absolute;\n            right: 0;\n            top: 100%;\n            /*margin-top: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-top-left-container {\n            position: absolute;\n            left: 0;\n            bottom: 100%;\n            /*margin-bottom: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-top-right-container {\n            position: absolute;\n            right: 0;\n            bottom: 100%;\n            /*margin-bottom: 0px;*/\n        }\n      `,\n      template:\n        '<details class=\"${`${@this@.getAttribute(\\'class\\')} details-container`}$\" dr-on-init=\"@this@.element = $element;\" dr-event-toggle=\"@this@.toggle($element)\"> #innerHTML# </details>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Details(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;AA6JA,IAAA,oBAAA;",
+  "names": []
+}

package/dist/cjs/dist/components/dialog/Dialog.d.js

@@ -0,0 +1 @@
+//# sourceMappingURL=Dialog.d.js.map

package/dist/cjs/dist/components/dialog/Dialog.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/cjs/dist/components/dialog/example/ImageEditorDialog.d.js

@@ -0,0 +1 @@
+//# sourceMappingURL=ImageEditorDialog.d.js.map

package/dist/cjs/dist/components/dialog/example/ImageEditorDialog.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/cjs/dist/components/forOf/ForOf.d.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ForOf_d_exports = {};
+__export(ForOf_d_exports, {
+  default: () => ForOf_d_default
+});
+module.exports = __toCommonJS(ForOf_d_exports);
+var ForOf_d_default = _default;
+//# sourceMappingURL=ForOf.d.js.map

package/dist/cjs/dist/components/forOf/ForOf.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/forOf/ForOf.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\n\nexport namespace ForOf {\n  export const selector = 'dr-for-of';\n  export type Attribute<D> = {\n    value: D;\n  };\n\n  // @Component({\n  //   template: '<div dr-for-of=\"@this@.data\" dr-option-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}`\n  // })\n  export class ForOf<D> extends ComponentBase<Attribute<D>> {\n    private value?: D;\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if (this.equalsAttributeName(name, 'value')) {\n        this.value = value;\n      }\n    }\n  }\n}\n\nexport default {\n  forOf: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: ForOf.selector,\n      template: '<div dr-for-of=\"@this@.value\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new ForOf.ForOf(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;AA8BA,IAAA,kBAAA;",
+  "names": []
+}

package/dist/cjs/dist/components/if/If.d.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var If_d_exports = {};
+__export(If_d_exports, {
+  default: () => If_d_default
+});
+module.exports = __toCommonJS(If_d_exports);
+var If_d_default = _default;
+//# sourceMappingURL=If.d.js.map

package/dist/cjs/dist/components/if/If.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/if/If.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { DomRender } from '../../DomRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { DomRenderConfig } from '../../configs/DomRenderConfig';\n\nexport namespace If {\n  export const selector = 'dr-if';\n  // export type AppenderInterface<D> = {\n  //   push(...data:D[]):void;\n  //   set(key: string, ...v:D[]):void\n  //   delete(key: string):void\n  //   clear():void\n  // }\n  export type Attribute<D> = {\n    value?: null | boolean;\n  };\n\n  export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    private sw: boolean = false;\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      super.onInitRender(param, rawSet);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n\n      if (this.equalsAttributeName(name, 'value')) {\n        // console.log('--', value, typeof value);\n        this.sw = value;\n      }\n    }\n  }\n}\n\n// const iif = DomRender.createComponent({\n//   type: If.If,\n//   tagName: If.selector,\n//   template: '<div dr-if=\"@this@.sw\" dr-option-strip=\"true\">#innerHTML#</div>' });\nexport default {\n  if: (config?: DomRenderConfig) => {\n    // if (!customElements.get(If.selector)) {\n    //   customElements.define(If.selector, class extends HTMLElement {\n    //     constructor() {\n    //       super();\n    //       this.hidden = true;\n    //     }\n    //   });\n    // }\n\n    return RawSet.createComponentTargetElement({\n      name: If.selector,\n      template: '<div dr-if=\"@this@.sw\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });\n      }\n    });\n  }\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;AAwCA,IAAA,eAAA;",
+  "names": []
+}

package/dist/cjs/dist/components/index.d.js

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_d_exports = {};
+module.exports = __toCommonJS(index_d_exports);
+//# sourceMappingURL=index.d.js.map

package/dist/cjs/dist/components/index.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/index.ts"],
+  "sourcesContent": ["\nexport * from './ComponentBase';\nexport * from './ComponentRouterBase';\nexport * from './ComponentSet';\nexport * from './a';\nexport * from './appender';\nexport * from './checkbox';\nexport * from './choose';\nexport * from './details';\nexport * from './forOf';\nexport * from './if';\nexport * from './input';\nexport * from './promise';\nexport * from './radio';\nexport * from './router';\nexport * from './select';\nexport * from './this';\nexport * from './timer';\n\nimport If from './if/If';\nimport This from './this/This';\nimport Appender from './appender/Appender';\nimport PromiseSwitch from './promise/PromiseSwitch';\nimport Choose from './choose/Choose';\nimport CheckBox from './checkbox/CheckBox';\nimport Radio from './radio/Radio';\nimport RouterOutlet from './router/RouterOutlet';\nimport Select from './select/Select';\nimport Timer from './timer/Timer';\nimport Details from './details/Details';\nimport Input from './input/Input';\nimport Route from './router/Route';\nimport A from './a/A';\nimport ForOf from './forOf/ForOf';\n\nexport const drComponent = {\n  ...If,\n  ...This,\n  ...Appender,\n  ...PromiseSwitch,\n  ...Choose,\n  ...CheckBox,\n  ...Radio,\n  ...Select,\n  ...Timer,\n  ...Details,\n  ...Input,\n  ...Route,\n  ...RouterOutlet,\n  ...A,\n...ForOf\n}"],
+  "mappings": ";;;;;;;;;;;;;AAaA;;",
+  "names": []
+}