@dooboostore/dom-render 1.0.110 → 1.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/dom-render",
-  "version": "1.0.110",
+  "version": "1.0.112",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -90,9 +90,9 @@
     "typescript": "^5.9.2",
     "esbuild-plugin-tsc": "^0.5.0",
     "esbuild": "^0.23.0",
-    "@dooboostore/core": "1.0.26",
-    "@dooboostore/core-web": "1.0.8",
-    "@dooboostore/core-node": "1.0.9"
+    "@dooboostore/core": "1.0.28",
+    "@dooboostore/core-node": "1.0.10",
+    "@dooboostore/core-web": "1.0.9"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/DomRenderProxy.ts

@@ -20,6 +20,7 @@ import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
 import { isOnProxyDomRender } from './lifecycle/OnProxyDomRender';
 import { isOnRawSetRendered } from './lifecycle/OnRawSetRendered';
+import { isOnChildRawSetRendered } from "./lifecycle/OnChildRawSetRendered";
 
 const excludeGetSetPropertys = [
   'onBeforeReturnGet',
@@ -62,8 +63,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
   public _domRender_ref = new Map<object, Set<string>>();
   public _rawSets = new Map<string, Set<RawSet>>();
   public _domRender_proxy?: T;
-  // public _firstTarget: Node;
   public _targets = new Set<Node>();
+  // public name = Math.random();
 
   constructor(
     public _domRender_origin: T,
@@ -112,7 +113,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           if (isNoProxy) {
             return obj;
           }
-        } catch (e) {}
+        } catch (e) { }
         const target = obj[it];
         if (
           target !== undefined &&
@@ -195,7 +196,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       const onInit = (target as any).getAttribute?.(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);
       let initParam: any;
       if (onCreate) {
-        initParam = ScriptUtils.evaluateReturn(onCreate, this._domRender_proxy);
+        initParam = ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy);
       }
       if (isOnInitRender(this._domRender_proxy)) {
         await this._domRender_proxy.onInitRender(
@@ -226,70 +227,99 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     }
     const removeRawSets: RawSet[] = [];
     const rawSets = raws ?? this.getRawSets();
+    // console.log('Total RawSets to render:', Array.isArray(rawSets) ? rawSets.length : 0);
 
     // console.log('----', rawSets);
-    for (const it of rawSets as RawSet[]) {
-      it.getUsingTriggerVariables(this._domRender_config).forEach(path => {
-        // console.log('getUsingTriggerVariables->', path);
-        this.addRawSet(path, it);
-      });
+    // console.log('----', rawSets);
+    const CHUNK_SIZE = 50;
+    const chunks = [];
+    const rawSetsArray = Array.from(rawSets as RawSet[]);
+    for (let i = 0; i < rawSetsArray.length; i += CHUNK_SIZE) {
+      chunks.push(rawSetsArray.slice(i, i + CHUNK_SIZE));
+    }
 
-      let renderResult: RenderResult | undefined;
-      if (it.isConnected) {
-        // 중요 render될때 targetAttribute 체크 해야함.
-        const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);
-        // console.log('sssssssssSSS?',it, targetAttrMap)
-        // console.log('----2', it, fullPathStr, targetAttrMap, (it.fragment as any).render, it.isConnected, this.getRawSets());
-        if (it.detect?.action) {
-          it.detect.action();
-          // } else if (it.type === RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && (it.fragment as any).render) {
-        } else if (
-          it.type === RawSetType.TARGET_ELEMENT &&
-          it.dataSet?.render?.currentThis &&
-          fullPathStr &&
-          targetAttrMap
-        ) {
-          new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {
-            // it?.data.onChangeAttrRender(k, null, v);
-            // console.log('------->?',v,k);
-            const isUsing = v.variablePaths.some(it => EventManager.isUsingThisVar(it.inner, `this.${fullPathStr}`))
-            // console.log('------->?',v,k, isUsing);
-            if (isUsing) {
-              const targetAttrObject = RawSet.getAttributeObject(it.point.node as Element, {
-                script: it.dataSet?.render?.renderScript ?? '',
-                obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })
-              });
-              it.dataSet.render ??= {};
-              it.dataSet.render.attribute = targetAttrObject;
-              // const render = it.dataSet?.render;
-              // console.log('render-->!!!!!', it.dataSet.render);
-              // const script = `${render.renderScript} return ${v} `;
-              // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));
-              if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {
-                it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });
+    for (const chunk of chunks) {
+      const promises = chunk.map(async (it) => {
+        it.getUsingTriggerVariables(this._domRender_config).forEach(path => {
+          // console.log('getUsingTriggerVariables->', path);
+          this.addRawSet(path, it);
+        });
+
+        let renderResult: RenderResult | undefined;
+        if (it.isConnected) {
+          // 중요 render될때 targetAttribute 체크 해야함.
+          const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);
+          // console.log('sssssssssSSS?',it, targetAttrMap)
+          // console.log('----2', it, fullPathStr, targetAttrMap, (it.fragment as any).render, it.isConnected, this.getRawSets());
+          if (it.detect?.action) {
+            it.detect.action();
+            // } else if (it.type === RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && (it.fragment as any).render) {
+          } else if (
+            it.type === RawSetType.TARGET_ELEMENT &&
+            it.dataSet?.render?.currentThis &&
+            fullPathStr &&
+            targetAttrMap
+          ) {
+            const attrStart = performance.now();
+            new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {
+              // it?.data.onChangeAttrRender(k, null, v);
+              // console.log('------->?',v,k);
+              const isUsing = v.variablePaths.some(it => EventManager.isUsingThisVar(it.inner, `this.${fullPathStr}`))
+              // console.log('------->?',v,k, isUsing);
+              if (isUsing) {
+                const targetAttrObject = RawSet.getAttributeObject(it.point.node as Element, {
+                  script: it.dataSet?.render?.renderScript ?? '',
+                  obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })
+                });
+                it.dataSet.render ??= {};
+                it.dataSet.render.attribute = targetAttrObject;
+                // const render = it.dataSet?.render;
+                // console.log('render-->!!!!!', it.dataSet.render);
+                // const script = `${render.renderScript} return ${v} `;
+                // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));
+                if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {
+                  it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });
+                }
               }
+              // console.log('---?', v, fullPathStr, isUsing);
+            });
+            const attrEnd = performance.now();
+            // if (attrEnd - attrStart > 10) {
+              // console.log('Slow Attr Update:', attrEnd - attrStart, it);
+            // }
+            // ------------------->
+          } else {
+            const renderStart = performance.now();
+            const rawSets = await it.render(this._domRender_proxy, this._domRender_config);
+            const renderEnd = performance.now();
+            // if (renderEnd - renderStart > 10) {
+            //   console.log('Slow RawSet Render:', renderEnd - renderStart, it);
+            // }
+            renderResult = rawSets;
+            // 그외 자식들 render
+            if (rawSets && rawSets.raws.length > 0) {
+              await this.render(rawSets.raws);
             }
-            // console.log('---?', v, fullPathStr, isUsing);
-          });
-          // ------------------->
-        } else {
-          const rawSets = await it.render(this._domRender_proxy, this._domRender_config);
-          renderResult = rawSets;
-          // 그외 자식들 render
-          if (rawSets && rawSets.raws.length > 0) {
-            await this.render(rawSets.raws);
           }
+        } else {
+          removeRawSets.push(it);
         }
-      } else {
-        removeRawSets.push(it);
-      }
 
-      const t = it.findNearThis(this._domRender_proxy);
-      // TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
-      if (isOnRawSetRendered(t)) {
-        await t.onRawSetRendered(it, { path: fullPathStr, renderResult });
+        const t = it.findNearThis(this._domRender_proxy);
+        // TODO: 호출된곳에서 또 변수를 수정하게되면 무한루프니깐 왠만하면 사용못하게 해야한다.
+        if (isOnRawSetRendered(t)) {
+          await t.onRawSetRendered(it, { path: fullPathStr, value: ObjectUtils.Script.evaluateReturn(`this.${fullPathStr}`, this._domRender_proxy), root: this._domRender_proxy, renderResult });
+        }
+        // console.log('----', it);
+      });
+      await Promise.all(promises);
+      if (chunks.length > 1) {
+        await new Promise(resolve => requestAnimationFrame(resolve));
       }
-      // console.log('----', it);
+    }
+
+    if (isOnChildRawSetRendered(this._domRender_proxy)) {
+      await this._domRender_proxy.onChildRawSetRendered();
     }
 
     if (removeRawSets.length > 0) {
@@ -312,19 +342,26 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     value?: any,
     lastDoneExecute = true
   ): { path: string; obj: any }[][] {
-    // console.log('root--->', paths, value, this._domRender_ref, this._domRender_origin);
+    // console.time('root_total');
+    const rootStartTime = Date.now();
+    const pathKey = pathInfos.flat().map(i => i.path).join('.');
+
+    // console.group(`🌳 DomRenderProxy root: ${pathKey}`);
+    // console.log('root--->', pathInfos, value, this._domRender_ref, this._domRender_origin);
     const fullPaths: { path: string; obj: any }[][] = [];
     if (this._domRender_ref.size > 0) {
       this._domRender_ref.forEach((it, key) => {
         if ('_DomRender_isProxy' in key) {
           it.forEach(sit => {
             try {
+              const recursiveStartTime = Date.now();
               const concat = pathInfos.concat([[{ path: sit, obj: key }]]);
               const items: { path: string; obj: any }[][] = (key as any)._DomRender_proxy?.root(
                 concat,
                 value,
                 lastDoneExecute
               );
+              // console.log(`🔄 Recursive root call for ${sit}: ${Date.now() - recursiveStartTime}ms`);
 
               fullPaths.push(items.flat());
               // fullPaths.push({path: items.map(it=>it.path).join(','), obj: this._domRender_proxy});
@@ -338,6 +375,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         }
       });
     } else {
+      // console.time('root_recursive');
+      const pathProcessStartTime = Date.now();
       // const firstPathStr = paths.slice(1).reverse().join('.');
       const strings = pathInfos.reverse().map(it => it.map(it => it.path).join(','));
       // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
@@ -345,7 +384,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))
         .join('')
         .slice(1);
-      // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
+      // console.log(`🛤️ Path processing time: ${Date.now() - pathProcessStartTime}ms for path: ${fullPathStr}`);
       if (lastDoneExecute) {
         // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
         // console.log('-------', firstPathStr, firstData);
@@ -359,15 +398,20 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           .join('');
         const lastPropertyName = strings[strings.length - 1];
         const path = 'this' + front;
-        const data = ScriptUtils.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
+        const data = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);
         // console.log('root-->', this._rawSets, path, data );
         // console.log('--!!!!', fullPathStr, iterable, data, front, last);
         // 왜여기서 promise를 했을까를 생각해보면......훔.. 변수변경과 화면 뿌려주는걸 동기로하면 성능이 안나오고 비현실적이다.  그래서 promise
+        const promiseStartTime = Date.now();
+        // console.timeEnd('root_recursive');
+        // console.time('root_render_wait');
         new Promise<RawSet[]>(async resolve => {
+          const promiseInnerStartTime = Date.now();
           let rData: RawSet[] = [];
           const firstPathStr = front.slice(1);
 
           // check dictionary
+          const dictionaryCheckStartTime = Date.now();
           // console.log('-promise-------', firstPathStr, this)
           const firstTargets = this._rawSets.get(firstPathStr);
           const firstTargetDictionary: RawSet[] = [];
@@ -378,6 +422,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
               firstTargetDictionary.push(it);
             }
           });
+          // console.log(`📚 Dictionary check time: ${Date.now() - dictionaryCheckStartTime}ms (${firstTargetDictionary.length} found)`);
+
           if (firstTargetDictionary.length > 0) {
             // console.log('ddddddddddd', firstTargetDictionary);
             const rawSets: RawSet[] = [];
@@ -413,6 +459,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
             }
           }
 
+          const renderStartTime = Date.now();
           if (lastPropertyName === 'length' && Array.isArray(data)) {
             const aIterable = this._rawSets.get(firstPathStr);
             if (aIterable) {
@@ -422,6 +469,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
             // console.log('------------',iterable, fullPaths)
             rData = await this.render(Array.from(iterable), fullPathStr);
           }
+          // console.log(`🎨 Render time: ${Date.now() - renderStartTime}ms (${rData?.length || 0} rawSets)`);
 
           // console.log('-----------', this, lastPropertyName );
           // this._targets.forEach(it => {
@@ -432,38 +480,52 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           //   }
           // });
 
+          const eventProcessStartTime = Date.now();
           const Node = ((this._domRender_config.window as any).Node)
           this._targets.forEach(it => {
             // return;
             if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
+              const findAttrStartTime = Date.now();
               const targets = this._domRender_config.eventManager.findAttrElements(
                 it as DocumentFragment | Element,
                 this._domRender_config
               );
+              const targetCount = (targets as any)?.size || (targets as any)?.length || 0;
+              // console.log(`🔍 findAttrElements time: ${Date.now() - findAttrStartTime}ms (${targetCount} elements)`, it);
+
+              const changeVarStartTime = Date.now();
               this._domRender_config.eventManager.changeVar(
                 this._domRender_proxy,
                 targets,
                 `this.${fullPathStr}`,
                 this._domRender_config
               );
+              // console.log(`🔄 changeVar time: ${Date.now() - changeVarStartTime}ms`);
             }
           });
+          // console.log(`⚡ Event processing time: ${Date.now() - eventProcessStartTime}ms (${this._targets.size} targets)`);
+
+          // console.log(`🔄 Promise inner total time: ${Date.now() - promiseInnerStartTime}ms`);
 
           //랜더대상된게있으면
           if (rData?.length > 0 && isOnChildRenderedByProperty(data)) {
-            const propertyValue = ScriptUtils.evaluateReturn(`this.${lastPropertyName}`, data);
+            const propertyValue = ObjectUtils.Script.evaluateReturn(`this.${lastPropertyName}`, data);
             data.onChildRenderedByProperty(lastPropertyName, propertyValue);
             // data
           }
           resolve(rData);
         }).then(it => {
           // console.log('DonrenderProxy root RenderDone')
+          // console.timeEnd('root_render_wait');
+          // console.timeEnd('root_total');
         });
       }
       fullPaths.push([{ path: fullPathStr, obj: this._domRender_proxy }]);
     }
 
-    // console.log('dddddd', fullPaths.flatMap(it=>it).map(it=>it.path))
+    // console.log(`🏁 Root method total time: ${Date.now() - rootStartTime}ms`);
+    // console.log('dddddd', fullPaths.flatMap(it => it).map(it => it.path))
+    // console.groupEnd();
     return fullPaths;
   }
 
@@ -494,15 +556,19 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     //     return true;
     // }
     // console.log('set--?', p, target, value);
-
+    let start = performance.now()
     if (typeof p === 'string') {
       value = this.proxy(receiver, value, p);
     }
+    // console.log('set proxy time', performance.now() - start, p);
+    // start = performance.now();
+
 
     // console.log('set typeChecked',  (target as any)[p] instanceof ComponentSet, value instanceof ComponentSet);
     // if ((target as any)[p] instanceof ComponentSet) {
     //   (target as any)[p]?.obj?.onDrThisUnBind?.();
     // }
+    // console.log('---', this._domRender_ref, p, this._domRender_proxy)
     // is ComponentSet
     if (value instanceof ComponentSet && (target as any)[p] instanceof ComponentSet) {
       value.config.beforeComponentSet = (target as any)[p];
@@ -513,6 +579,10 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       fullPathInfo = this.root([[{ path: p, obj: this._domRender_proxy }]], value);
     }
 
+
+    // console.log('set proxy root time', performance.now() - start, p);
+    // start = performance.now();
+    //
     // console.log('setRooot', fullPathInfo);
 
     //normal attribute 또한 링크랑 같은 증세라서 이렇게 해줘야한다!!
@@ -532,22 +602,36 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
           .flatMap(([key, valueScript]) => {
             return fullPathInfo
               .flat()
-              .filter(it => valueScript.variablePaths?.some(vit=> vit.inner.includes(`this.${it.path}`)))
+              .filter(it => valueScript.variablePaths?.some(vit => vit.inner.includes(`this.${it.path}`)))
               .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));
           })
           .forEach(it => {
             // const optionalPaths = it.valueScript.variablePaths.map(it => ObjectUtils.Path.toOptionalChainPath(it))
             const variablePaths = it.valueScript.variablePaths;
             let targetScript = it.valueScript.originalAttrValue;
-            variablePaths.forEach(it => {
-              let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
-              targetScript = targetScript.replaceAll(it.origin,`\${${r}}`);
-            })
-            const value1 = ObjectUtils.Script.evaluateReturn('`'+targetScript+'`', it.pathInfo.obj);
+            let script: string;
+            if (it.valueScript.isStringTemplate) {
+              variablePaths.forEach(it => {
+                let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+                targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+              })
+              script = '`' + targetScript + '`';
+            } else {
+              variablePaths.forEach(it => {
+                let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+                targetScript = targetScript.replaceAll(it.origin, `${r}`);
+              })
+              script = targetScript;
+            }
+            // variablePaths.forEach(it => {
+            //   let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+            //   targetScript = targetScript.replaceAll(it.origin,`\${${r}}`);
+            // })
+            const value1 = ObjectUtils.Script.evaluateReturn(script, it.pathInfo.obj);
             // console.log('proxy set!Attribut======', it.key, value1)
-            if (value1 === null) {
+            if (value1 === null || value1 === undefined) {
               elementInfo.element.removeAttribute(it.key);
-              elementInfo.element[it.key] = null;
+              // elementInfo.element[it.key] = null;
             } else {
               elementInfo.element.setAttribute(it.key, value1);
               elementInfo.element[it.key] = value1;
@@ -556,11 +640,16 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       }
     );
 
+    // console.log('set proxy normalAttrMapAttrName time', performance.now() - start, p);
+    // start = performance.now();
+
+
+
     //여기서 링크 같은거 해줘야함  *-link로 변수값이 변경되면 그걸 참고하고있는 다른것들에도 해줘야한다.
     DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.linkTargetMapAttrName)?.forEach(
       elementInfo => {
         // @ts-ignore
-        const targets = new Map<string, string>(ScriptUtils.evaluateReturn<[string, string][]>(elementInfo.value));
+        const targets = new Map<string, string>(ObjectUtils.Script.evaluateReturn<[string, string][]>(elementInfo.value));
 
         Array.from(targets.entries())
           .filter(([key, value]) => value.trim())
@@ -572,7 +661,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
               .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));
           })
           .forEach(info => {
-            const value1 = ScriptUtils.evaluateReturn(info.valueScript, info.pathInfo.obj);
+            const value1 = ObjectUtils.Script.evaluateReturn(info.valueScript, info.pathInfo.obj);
             const applyAttributeName = EventManager.linkAttrs.find(it => it.name === info.key);
             if (applyAttributeName) {
               if (value1 === null) {
@@ -602,6 +691,9 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       }
     );
 
+    // console.log('set proxy linkTargetMapAttrName time', performance.now() - start, p);
+    // start = performance.now();
+
     // console.log('---end',receiver);
     if (
       'onBeforeReturnSet' in receiver &&
@@ -616,6 +708,8 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
         );
       }
     }
+
+    // console.log('done!!')
     return true;
   }
 
@@ -703,7 +797,7 @@ export class DomRenderProxy<T extends object> implements ProxyHandler<T> {
       ) {
         return obj;
       }
-    } catch (e) {}
+    } catch (e) { }
 
     /*
     const proxyTarget = (this._domRender_config.proxyExcludeTyps?.filter(it => obj instanceof it) ?? []).length <= 0;