haori 0.6.1 → 0.6.2

package/dist/src/fragment.js

@@ -8,6 +8,253 @@ import Queue from './queue';
 import Log from './log';
 import Expression from './expression';
 import Env from './env';
+import Dev from './dev';
+/**
+ * 開発時の属性・テキスト評価回数を集計するレジストリです。
+ */
+class EvaluationProfileRegistry {
+    /**
+     * 集計状態を初期化します。
+     */
+    static reset() {
+        EvaluationProfileRegistry.ELEMENT_STORES.clear();
+        EvaluationProfileRegistry.ensureGlobalAccess();
+    }
+    /**
+     * 現在の集計結果スナップショットを返します。
+     *
+     * @returns エレメントごとの集計結果
+     */
+    static snapshot() {
+        EvaluationProfileRegistry.ensureGlobalAccess();
+        return [...EvaluationProfileRegistry.ELEMENT_STORES.entries()]
+            .map(([elementId, store]) => ({
+            elementId,
+            tagName: store.tagName,
+            attributes: [...store.attributes.entries()]
+                .map(([name, counter]) => ({
+                name,
+                template: counter.template,
+                calls: counter.calls,
+                totalDurationMs: counter.totalDurationMs,
+                maxDurationMs: counter.maxDurationMs,
+                placeholders: EvaluationProfileRegistry.sortPlaceholders(counter.placeholders),
+            }))
+                .sort((left, right) => right.calls - left.calls),
+            texts: [...store.texts.entries()]
+                .map(([childIndex, counter]) => ({
+                childIndex: Number(childIndex),
+                template: counter.template,
+                calls: counter.calls,
+                totalDurationMs: counter.totalDurationMs,
+                maxDurationMs: counter.maxDurationMs,
+                placeholders: EvaluationProfileRegistry.sortPlaceholders(counter.placeholders),
+            }))
+                .sort((left, right) => right.calls - left.calls),
+        }))
+            .sort((left, right) => {
+            const leftCalls = left.attributes.reduce((sum, item) => sum + item.calls, 0) +
+                left.texts.reduce((sum, item) => sum + item.calls, 0);
+            const rightCalls = right.attributes.reduce((sum, item) => sum + item.calls, 0) +
+                right.texts.reduce((sum, item) => sum + item.calls, 0);
+            return rightCalls - leftCalls;
+        });
+    }
+    /**
+     * 評価呼び出しを記録します。
+     *
+     * @param context 評価コンテキスト
+     * @param expressions 今回評価した式一覧
+     */
+    static record(context, expressions, totalDurationMs) {
+        if (!Dev.isEnabled() || !context || expressions.length === 0) {
+            return;
+        }
+        EvaluationProfileRegistry.ensureGlobalAccess();
+        const store = EvaluationProfileRegistry.getOrCreateElementStore(context.element);
+        if (context.kind === 'attribute') {
+            const counter = EvaluationProfileRegistry.getOrCreateCounter(store.attributes, context.rawName, context.template);
+            EvaluationProfileRegistry.updateCounter(counter, expressions, totalDurationMs);
+            return;
+        }
+        const counter = EvaluationProfileRegistry.getOrCreateCounter(store.texts, String(context.childIndex), context.template);
+        EvaluationProfileRegistry.updateCounter(counter, expressions, totalDurationMs);
+    }
+    /**
+     * globalThis から dev-only の取得窓口を参照できるようにします。
+     */
+    static ensureGlobalAccess() {
+        if (!Dev.isEnabled()) {
+            return;
+        }
+        const globalRecord = globalThis;
+        if (globalRecord[EvaluationProfileRegistry.GLOBAL_KEY] !== undefined) {
+            return;
+        }
+        globalRecord[EvaluationProfileRegistry.GLOBAL_KEY] = {
+            reset: () => EvaluationProfileRegistry.reset(),
+            snapshot: () => EvaluationProfileRegistry.snapshot(),
+        };
+    }
+    /**
+     * エレメント単位の集計ストアを取得または初期化します。
+     *
+     * @param element 対象エレメント
+     * @returns 集計ストア
+     */
+    static getOrCreateElementStore(element) {
+        const elementId = EvaluationProfileRegistry.createElementId(element);
+        const existing = EvaluationProfileRegistry.ELEMENT_STORES.get(elementId);
+        if (existing) {
+            return existing;
+        }
+        const store = {
+            tagName: element.tagName.toLowerCase(),
+            attributes: new Map(),
+            texts: new Map(),
+        };
+        EvaluationProfileRegistry.ELEMENT_STORES.set(elementId, store);
+        return store;
+    }
+    /**
+     * カウンタを取得または初期化します。
+     *
+     * @param counters 種別ごとのカウンタマップ
+     * @param key カウンタキー
+     * @param template 元テンプレート
+     * @returns カウンタ
+     */
+    static getOrCreateCounter(counters, key, template) {
+        const existing = counters.get(key);
+        if (existing) {
+            return existing;
+        }
+        const counter = {
+            template,
+            calls: 0,
+            totalDurationMs: 0,
+            maxDurationMs: 0,
+            placeholders: new Map(),
+        };
+        counters.set(key, counter);
+        return counter;
+    }
+    /**
+     * プレースホルダカウンタを取得または初期化します。
+     *
+     * @param placeholders プレースホルダカウンタマップ
+     * @param expression 式文字列
+     * @returns プレースホルダカウンタ
+     */
+    static getOrCreatePlaceholder(placeholders, expression) {
+        const existing = placeholders.get(expression);
+        if (existing) {
+            return existing;
+        }
+        const counter = {
+            calls: 0,
+            totalDurationMs: 0,
+            maxDurationMs: 0,
+        };
+        placeholders.set(expression, counter);
+        return counter;
+    }
+    /**
+     * カウンタへ今回の評価結果を加算します。
+     *
+     * @param counter 更新対象カウンタ
+     * @param expressions 今回評価した式一覧
+     * @param totalDurationMs 今回の総所要時間
+     */
+    static updateCounter(counter, expressions, totalDurationMs) {
+        counter.calls += 1;
+        counter.totalDurationMs += totalDurationMs;
+        counter.maxDurationMs = Math.max(counter.maxDurationMs, totalDurationMs);
+        expressions.forEach(expression => {
+            const placeholder = EvaluationProfileRegistry.getOrCreatePlaceholder(counter.placeholders, expression.expression);
+            placeholder.calls += 1;
+            placeholder.totalDurationMs += expression.durationMs;
+            placeholder.maxDurationMs = Math.max(placeholder.maxDurationMs, expression.durationMs);
+        });
+    }
+    /**
+     * プレースホルダ集計を calls 降順で返します。
+     *
+     * @param placeholders プレースホルダ集計
+     * @returns スナップショット
+     */
+    static sortPlaceholders(placeholders) {
+        return [...placeholders.entries()]
+            .map(([expression, counter]) => ({
+            expression,
+            calls: counter.calls,
+            totalDurationMs: counter.totalDurationMs,
+            maxDurationMs: counter.maxDurationMs,
+        }))
+            .sort((left, right) => {
+            if (right.calls !== left.calls) {
+                return right.calls - left.calls;
+            }
+            return right.totalDurationMs - left.totalDurationMs;
+        });
+    }
+    /**
+     * 現在時刻のタイムスタンプを返します。
+     *
+     * @returns ミリ秒
+     */
+    static now() {
+        return globalThis.performance?.now() ?? Date.now();
+    }
+    /**
+     * 評価処理の所要時間を計測します。
+     *
+     * @param callback 計測対象
+     * @returns 結果と所要時間
+     */
+    static measure(callback) {
+        const startedAt = EvaluationProfileRegistry.now();
+        const value = callback();
+        return {
+            value,
+            durationMs: EvaluationProfileRegistry.now() - startedAt,
+        };
+    }
+    /**
+     * エレメント識別子を生成します。
+     *
+     * @param element 対象エレメント
+     * @returns 識別子
+     */
+    static createElementId(element) {
+        const segments = [];
+        let current = element;
+        while (current) {
+            let segment = current.tagName.toLowerCase();
+            const rawId = current.getAttribute('id') || '';
+            if (rawId.trim() !== '') {
+                segment += `#${rawId.trim()}`;
+                segments.unshift(segment);
+                break;
+            }
+            const deriveName = current.getAttribute(`${Env.prefix}derive-name`);
+            if (deriveName && deriveName.trim() !== '') {
+                segment += `[${Env.prefix}derive-name="${deriveName.trim()}"]`;
+            }
+            const parent = current.parentElement;
+            if (parent) {
+                segment += `:nth-child(${[...parent.children].indexOf(current) + 1})`;
+            }
+            segments.unshift(segment);
+            current = parent;
+        }
+        return segments.join(' > ');
+    }
+}
+/** globalThis に公開するキー */
+EvaluationProfileRegistry.GLOBAL_KEY = '__HAORI_EVALUATION_PROFILE__';
+/** エレメントごとの集計 */
+EvaluationProfileRegistry.ELEMENT_STORES = new Map();
 /**
  * 仮想DOMのフラグメントの抽象クラス。
  */
@@ -237,6 +484,10 @@ export class ElementFragment extends Fragment {
         this.renderSignature = null;
         /** 直近に描画した data-each 全体の入力署名 */
         this.eachInputSignature = null;
+        /** 直近に公開した data-derive subtree の入力署名 */
+        this.deriveSubtreeSignature = null;
+        /** 直近に評価した data-derive の入力署名 */
+        this.deriveInputSignature = null;
         /** fresh clone 初期化を subtree ごと省略できるかどうか */
         this.freshInitializationSkippable = false;
         /** valueプロパティの値 */
@@ -327,6 +578,8 @@ export class ElementFragment extends Fragment {
         clone.template = this.template;
         clone.renderSignature = this.renderSignature;
         clone.eachInputSignature = this.eachInputSignature;
+        clone.deriveSubtreeSignature = null;
+        clone.deriveInputSignature = null;
         clone.freshInitializationSkippable = this.freshInitializationSkippable;
         clone.normalizeClonedVisibilityState();
         return clone;
@@ -372,6 +625,8 @@ export class ElementFragment extends Fragment {
             this.template = null;
         }
         this.eachInputSignature = null;
+        this.deriveSubtreeSignature = null;
+        this.deriveInputSignature = null;
         promises.push(super.remove(unmount));
         return Promise.all(promises).then(() => undefined);
     }
@@ -538,6 +793,38 @@ export class ElementFragment extends Fragment {
     setEachInputSignature(signature) {
         this.eachInputSignature = signature;
     }
+    /**
+     * 直近に公開した data-derive subtree の入力署名を取得します。
+     *
+     * @returns 入力署名
+     */
+    getDeriveSubtreeSignature() {
+        return this.deriveSubtreeSignature;
+    }
+    /**
+     * 直近に公開した data-derive subtree の入力署名を設定します。
+     *
+     * @param signature 入力署名
+     */
+    setDeriveSubtreeSignature(signature) {
+        this.deriveSubtreeSignature = signature;
+    }
+    /**
+     * 直近に評価した data-derive の入力署名を取得します。
+     *
+     * @returns 入力署名
+     */
+    getDeriveInputSignature() {
+        return this.deriveInputSignature;
+    }
+    /**
+     * 直近に評価した data-derive の入力署名を設定します。
+     *
+     * @param signature 入力署名
+     */
+    setDeriveInputSignature(signature) {
+        this.deriveInputSignature = signature;
+    }
     /**
      * fresh clone 初期化を subtree ごと省略できるかどうかを返します。
      *
@@ -785,7 +1072,12 @@ export class ElementFragment extends Fragment {
         }
         this.attributeMap.set(rawName, contents);
         const element = this.getTarget();
-        const detail = contents.evaluateDetailed(this.getBindingData());
+        const detail = contents.evaluateDetailed(this.getBindingData(), {
+            kind: 'attribute',
+            element,
+            rawName,
+            template: value,
+        });
         const hasTemplateExpression = contents.isEvaluate || contents.isRawEvaluate;
         const isBooleanAttribute = rawName === targetName &&
             ElementFragment.BOOLEAN_ATTRIBUTES.has(targetName.toLowerCase());
@@ -905,7 +1197,12 @@ export class ElementFragment extends Fragment {
         if (contents === undefined) {
             return null;
         }
-        const detail = contents.evaluateDetailed(this.getBindingData());
+        const detail = contents.evaluateDetailed(this.getBindingData(), {
+            kind: 'attribute',
+            element: this.getTarget(),
+            rawName: name,
+            template: contents.getValue(),
+        });
         if (detail.results.length === 1) {
             return {
                 value: detail.results[0],
@@ -1291,10 +1588,20 @@ export class TextFragment extends Fragment {
             this.skipMutation = true;
             let nextText = this.text;
             if (this.contents.isRawEvaluate) {
-                nextText = this.contents.evaluate(this.parent.getBindingData())[0];
+                nextText = this.contents.evaluate(this.parent.getBindingData(), {
+                    kind: 'text',
+                    element: this.parent.getTarget(),
+                    childIndex: this.parent.getChildren().indexOf(this),
+                    template: this.text,
+                })[0];
             }
             else if (this.contents.isEvaluate) {
-                nextText = TextContents.joinEvaluateResults(this.contents.evaluate(this.parent.getBindingData()));
+                nextText = TextContents.joinEvaluateResults(this.contents.evaluate(this.parent.getBindingData(), {
+                    kind: 'text',
+                    element: this.parent.getTarget(),
+                    childIndex: this.parent.getChildren().indexOf(this),
+                    template: this.text,
+                }));
             }
             const currentText = this.contents.isRawEvaluate
                 ? this.parent.getTarget().innerHTML
@@ -1496,8 +1803,8 @@ class TextContents {
      * @param bindingValues バインディングされた値のオブジェクト
      * @returns 評価結果のリスト
      */
-    evaluate(bindingValues) {
-        return this.evaluateDetailed(bindingValues).results;
+    evaluate(bindingValues, profileContext) {
+        return this.evaluateDetailed(bindingValues, profileContext).results;
     }
     /**
      * 式評価を行い、未解決参照の有無を含む結果を返します。
@@ -1505,33 +1812,58 @@ class TextContents {
      * @param bindingValues バインディングされた値のオブジェクト
      * @returns 評価結果と未解決参照の有無
      */
-    evaluateDetailed(bindingValues) {
+    evaluateDetailed(bindingValues, profileContext) {
         if (!this.isEvaluate && !this.isRawEvaluate) {
             return {
                 results: this.contents.map(c => c.text),
                 hasUnresolvedReference: false,
             };
         }
+        return this.evaluateWithProfile(bindingValues, profileContext, content => content.type === ExpressionType.EXPRESSION ||
+            content.type === ExpressionType.RAW_EXPRESSION, 'text');
+    }
+    /**
+     * 式評価と profiler 記録をまとめて実行します。
+     *
+     * @param bindingValues バインディングされた値のオブジェクト
+     * @param profileContext profiler 用コンテキスト
+     * @param shouldEvaluate 評価対象判定
+     * @param errorKind エラーログ種別
+     * @returns 評価結果と未解決参照の有無
+     */
+    evaluateWithProfile(bindingValues, profileContext, shouldEvaluate, errorKind) {
         const results = [];
+        const profileExpressions = [];
+        let totalDurationMs = 0;
         let hasUnresolvedReference = false;
-        this.contents.forEach(c => {
+        this.contents.forEach(content => {
             try {
-                if (c.type === ExpressionType.EXPRESSION ||
-                    c.type === ExpressionType.RAW_EXPRESSION) {
-                    const result = Expression.evaluateDetailed(c.text, bindingValues);
+                if (shouldEvaluate(content)) {
+                    const measured = EvaluationProfileRegistry.measure(() => Expression.evaluateDetailed(content.text, bindingValues));
+                    const result = measured.value;
+                    totalDurationMs += measured.durationMs;
+                    profileExpressions.push({
+                        expression: content.text,
+                        durationMs: measured.durationMs,
+                    });
                     hasUnresolvedReference =
                         hasUnresolvedReference || result.unresolvedReference;
                     results.push(result.value);
                 }
                 else {
-                    results.push(c.text);
+                    results.push(content.text);
                 }
             }
             catch (error) {
-                Log.error('[Haori]', `Error evaluating text expression: ${c.text}`, error);
+                Log.error('[Haori]', `Error evaluating ${errorKind} expression: ${content.text}`, error);
+                profileExpressions.push({
+                    expression: content.text,
+                    durationMs: 0,
+                });
                 results.push('');
             }
         });
+        EvaluationProfileRegistry.record(profileContext, profileExpressions, totalDurationMs);
         return { results, hasUnresolvedReference };
     }
 }
@@ -1567,8 +1899,8 @@ class AttributeContents extends TextContents {
      * @param bindingValues バインディングされた値のオブジェクト
      * @returns 評価結果のリスト
      */
-    evaluate(bindingValues) {
-        return this.evaluateDetailed(bindingValues).results;
+    evaluate(bindingValues, profileContext) {
+        return this.evaluateDetailed(bindingValues, profileContext).results;
     }
     /**
      * 式評価を行い、未解決参照の有無を含む結果を返します。
@@ -1576,42 +1908,24 @@ class AttributeContents extends TextContents {
      * @param bindingValues バインディングされた値のオブジェクト
      * @returns 評価結果と未解決参照の有無
      */
-    evaluateDetailed(bindingValues) {
+    evaluateDetailed(bindingValues, profileContext) {
         if (!this.isEvaluate && !this.forceEvaluation) {
             return {
                 results: this.contents.map(c => c.text),
                 hasUnresolvedReference: false,
             };
         }
-        const results = [];
-        let hasUnresolvedReference = false;
-        this.contents.forEach(c => {
-            try {
-                if ((this.forceEvaluation && c.type === ExpressionType.TEXT) ||
-                    c.type === ExpressionType.EXPRESSION ||
-                    c.type === ExpressionType.RAW_EXPRESSION) {
-                    const result = Expression.evaluateDetailed(c.text, bindingValues);
-                    hasUnresolvedReference =
-                        hasUnresolvedReference || result.unresolvedReference;
-                    results.push(result.value);
-                }
-                else {
-                    results.push(c.text);
-                }
-            }
-            catch (error) {
-                Log.error('[Haori]', `Error evaluating attribute expression: ${c.text}`, error);
-                results.push('');
-            }
-        });
-        if (this.forceEvaluation && results.length > 1) {
-            Log.error('[Haori]', 'each or if expressions must have a single content.', results);
+        const detail = this.evaluateWithProfile(bindingValues, profileContext, content => (this.forceEvaluation && content.type === ExpressionType.TEXT) ||
+            content.type === ExpressionType.EXPRESSION ||
+            content.type === ExpressionType.RAW_EXPRESSION, 'attribute');
+        if (this.forceEvaluation && detail.results.length > 1) {
+            Log.error('[Haori]', 'each or if expressions must have a single content.', detail.results);
             return {
-                results: [results[0]],
-                hasUnresolvedReference,
+                results: [detail.results[0]],
+                hasUnresolvedReference: detail.hasUnresolvedReference,
             };
         }
-        return { results, hasUnresolvedReference };
+        return detail;
     }
 }
 /** 強制評価する属性名 */