@lynx-js/react 0.116.3 → 0.116.5

package/runtime/lib/debug/profile.js

@@ -1,134 +1,29 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { Component, options } from 'preact';
-import { globalPatchOptions } from '../lifecycle/patch/commit.js';
-import { __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
-import { COMMIT, COMPONENT, DIFF, DIFF2, DIFFED, DIRTY, NEXT_STATE, RENDER } from '../renderToOpcodes/constants.js';
-import { getDisplayName, hook } from '../utils.js';
-export function initProfileHook() {
-    // early-exit if required profiling APIs are unavailable
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+export const isProfiling = /* @__PURE__ */ Boolean(lynx.performance?.isProfileRecording?.());
+const noop = () => { };
+const noopFlowId = () => 0;
+export const profileStart = /* @__PURE__ */ ((() => {
     let p;
-    /* v8 ignore start */
-    if (!(p = lynx.performance)
-        || typeof p.profileStart !== 'function'
-        || typeof p.profileEnd !== 'function'
-        || typeof p.profileMark !== 'function'
-        || typeof p.profileFlowId !== 'function') {
-        return;
+    if (!(p = lynx.performance) || typeof p.profileStart !== 'function') {
+        return noop;
     }
-    /* v8 ignore stop */
-    const profileStart = p.profileStart.bind(p);
-    const profileEnd = p.profileEnd.bind(p);
-    const profileMark = p.profileMark.bind(p);
-    const profileFlowId = p.profileFlowId.bind(p);
-    // for each setState call, we will add a profiling trace and
-    // attach a flowId to the component instance.
-    // This allows us to trace the flow of its diffing, committing and patching.
-    {
-        const sFlowID = Symbol('FLOW_ID');
-        if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
-            function buildSetStateProfileMarkArgs(currentState, nextState) {
-                const EMPTY_OBJ = {};
-                currentState ??= EMPTY_OBJ;
-                nextState ??= EMPTY_OBJ;
-                return {
-                    'current state keys': JSON.stringify(Object.keys(currentState)),
-                    'next state keys': JSON.stringify(Object.keys(nextState)),
-                    'changed (shallow diff) state keys': JSON.stringify(
-                    // the setState is in assign manner, we assume nextState is a superset of currentState
-                    Object.keys(nextState).filter(key => currentState[key] !== nextState[key])),
-                };
-            }
-            hook(Component.prototype, 'setState', function (old, state, callback) {
-                old?.call(this, state, callback);
-                if (this[DIRTY]) {
-                    profileMark('ReactLynx::setState', {
-                        flowId: this[sFlowID] ??= profileFlowId(),
-                        args: buildSetStateProfileMarkArgs(this.state, this[NEXT_STATE]),
-                    });
-                }
-            });
-        }
-        hook(options, DIFF2, (old, vnode, oldVNode) => {
-            // We only add profiling trace for Component
-            if (typeof vnode.type === 'function') {
-                const profileOptions = {};
-                if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
-                    const c = oldVNode[COMPONENT];
-                    if (c) {
-                        const flowId = c[sFlowID];
-                        delete c[sFlowID];
-                        if (flowId) {
-                            globalPatchOptions.flowIds ??= [];
-                            globalPatchOptions.flowIds.push(flowId);
-                            profileOptions.flowId = flowId;
-                        }
-                    }
-                }
-                profileStart(`ReactLynx::diff::${ /* #__INLINE__ */getDisplayName(vnode.type)}`, profileOptions);
-            }
-            old?.(vnode, oldVNode);
-        });
-        hook(options, DIFFED, (old, vnode) => {
-            if (typeof vnode.type === 'function') {
-                profileEnd(); // for options[DIFF]
-            }
-            old?.(vnode);
-        });
-        if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
-            hook(options, COMMIT, (old, vnode, commitQueue) => {
-                profileStart('ReactLynx::commit', {
-                    ...globalPatchOptions.flowIds
-                        ? {
-                            flowId: globalPatchOptions.flowIds[0],
-                            flowIds: globalPatchOptions.flowIds,
-                        }
-                        : {},
-                });
-                old?.(vnode, commitQueue);
-                profileEnd();
-            });
-        }
+    return p.profileStart.bind(p);
+})());
+export const profileEnd = /* @__PURE__ */ ((() => {
+    let p;
+    if (!(p = lynx.performance) || typeof p.profileEnd !== 'function') {
+        return noop;
     }
-    // Profile the user-provided `render`.
-    hook(options, RENDER, (old, vnode) => {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        const originalRender = vnode[COMPONENT].render;
-        vnode[COMPONENT].render = function render(props, state, context) {
-            profileStart(`ReactLynx::render::${ /* #__INLINE__ */getDisplayName(vnode.type)}`);
-            try {
-                return originalRender.call(this, props, state, context);
-            }
-            finally {
-                profileEnd();
-                vnode[COMPONENT].render = originalRender;
-            }
-        };
-        old?.(vnode);
-    });
-    if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
-        const sPatchLength = Symbol('PATCH_LENGTH');
-        hook(options, DIFF, (old, vnode) => {
-            if (typeof vnode.type === 'function' && __globalSnapshotPatch) {
-                vnode[sPatchLength] = __globalSnapshotPatch.length;
-            }
-            old?.(vnode);
-        });
-        hook(options, DIFFED, (old, vnode) => {
-            if (typeof vnode.type === 'function' && __globalSnapshotPatch) {
-                if (vnode[sPatchLength] === __globalSnapshotPatch.length) {
-                    // "NoPatch" is a conventional name in Lynx
-                    profileMark('ReactLynx::diffFinishNoPatch', {
-                        args: {
-                            componentName: /* #__INLINE__ */ getDisplayName(vnode.type),
-                        },
-                    });
-                }
-                delete vnode[sPatchLength];
-            }
-            old?.(vnode);
-        });
+    return p.profileEnd.bind(p);
+})());
+export const profileFlowId = /* @__PURE__ */ ((() => {
+    let p;
+    if (!(p = lynx.performance) || typeof p.profileFlowId !== 'function') {
+        return noopFlowId;
     }
-}
+    return p.profileFlowId.bind(p);
+})());
 //# sourceMappingURL=profile.js.map

package/runtime/lib/debug/profile.js.map

@@ -1 +1 @@
-{"version":3,"file":"profile.js","sourceRoot":"","sources":["../../src/debug/profile.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"profile.js","sourceRoot":"","sources":["../../src/debug/profile.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAE1D,qEAAqE;AAErE,MAAM,CAAC,MAAM,WAAW,GAAY,eAAe,CAAC,OAAO,CACzD,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,EAAE,CACzC,CAAC;AAEF,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AACtB,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE;IACjD,IAAI,CAAC,CAAC;IACN,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;QACpE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAChC,CAAC,CAAC,EAAE,CAAyC,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE;IAC/C,IAAI,CAAC,CAAC;IACN,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC,EAAE,CAAuC,CAAC;AAE5C,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE;IAClD,IAAI,CAAC,CAAC;IACN,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;QACrE,OAAO,UAAU,CAAC;IACpB,CAAC;IACD,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACjC,CAAC,CAAC,EAAE,CAA0C,CAAC"}

package/runtime/lib/debug/profileHooks.d.ts

@@ -0,0 +1 @@
+export declare function initProfileHook(): void;

package/runtime/lib/debug/profileHooks.js

@@ -0,0 +1,200 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { Component, options } from 'preact';
+import { globalPatchOptions } from '../lifecycle/patch/commit.js';
+import { __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
+import { COMMIT, COMPONENT, DIFF, DIFF2, DIFFED, DIRTY, HOOKS, LIST, NEXT_STATE, NEXT_VALUE, RENDER, VALUE, VNODE, } from '../renderToOpcodes/constants.js';
+import { getDisplayName, hook } from '../utils.js';
+const format = (val) => {
+    if (typeof val === 'function') {
+        return val.toString();
+    }
+    return val;
+};
+function safeJsonStringify(val) {
+    const seen = new WeakSet();
+    return JSON.stringify(val, function (_key, value) {
+        if (typeof value === 'object' && value !== null) {
+            if (seen.has(value)) {
+                return '[Unserializable: Circular]';
+            }
+            seen.add(value);
+        }
+        return value;
+    });
+}
+function buildSetStateProfileMarkArgs(type, currentState, nextState) {
+    const EMPTY_OBJ = {};
+    const currentStateObj = (currentState ?? EMPTY_OBJ);
+    const nextStateObj = (nextState ?? EMPTY_OBJ);
+    return {
+        componentName: (type && typeof type === 'function')
+            ? getDisplayName(type)
+            : 'Unknown',
+        'current state keys': JSON.stringify(Object.keys(currentStateObj)),
+        'next state keys': JSON.stringify(Object.keys(nextStateObj)),
+        'changed (shallow diff) state keys': JSON.stringify(
+        // the setState is in assign manner, we assume nextState is a superset of currentState
+        Object.keys(nextStateObj).filter(key => currentStateObj[key] !== nextStateObj[key])),
+        currentValue: safeJsonStringify(format(currentState)),
+        nextValue: safeJsonStringify(format(nextState)),
+    };
+}
+export function initProfileHook() {
+    // early-exit if required profiling APIs are unavailable
+    let p;
+    /* v8 ignore start */
+    if (!(p = lynx.performance)
+        || typeof p.profileStart !== 'function'
+        || typeof p.profileEnd !== 'function'
+        || typeof p.profileMark !== 'function'
+        || typeof p.profileFlowId !== 'function') {
+        return;
+    }
+    /* v8 ignore stop */
+    const profileStart = p.profileStart.bind(p);
+    const profileEnd = p.profileEnd.bind(p);
+    const profileMark = p.profileMark.bind(p);
+    const profileFlowId = p.profileFlowId.bind(p);
+    // for each setState call, we will add a profiling trace and
+    // attach a flowId to the component instance.
+    // This allows us to trace the flow of its diffing, committing and patching.
+    {
+        const sFlowID = Symbol('FLOW_ID');
+        if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
+            hook(Component.prototype, 'setState', function (old, state, callback) {
+                old?.call(this, state, callback);
+                if (this[DIRTY]) {
+                    const type = this[VNODE].type;
+                    const isClassComponent = typeof type === 'function' && ('prototype' in type)
+                        && ('render' in type.prototype);
+                    if (isClassComponent) {
+                        profileMark('ReactLynx::setState', {
+                            flowId: this[sFlowID] ??= profileFlowId(),
+                            args: buildSetStateProfileMarkArgs(type, this.state, this[NEXT_STATE]),
+                        });
+                    }
+                }
+            });
+        }
+        hook(options, DIFF2, (old, vnode, oldVNode) => {
+            // We only add profiling trace for Component
+            if (typeof vnode.type === 'function') {
+                const profileOptions = {};
+                if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
+                    const c = oldVNode[COMPONENT];
+                    if (c) {
+                        const flowId = c[sFlowID];
+                        delete c[sFlowID];
+                        if (flowId) {
+                            globalPatchOptions.flowIds ??= [];
+                            globalPatchOptions.flowIds.push(flowId);
+                            profileOptions.flowId = flowId;
+                        }
+                    }
+                }
+                profileStart(`ReactLynx::diff::${ /* #__INLINE__ */getDisplayName(vnode.type)}`, profileOptions);
+            }
+            old?.(vnode, oldVNode);
+        });
+        hook(options, DIFFED, (old, vnode) => {
+            if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
+                const hooks = vnode[COMPONENT]?.[HOOKS];
+                const hookList = hooks?.[LIST];
+                if (Array.isArray(hookList)) {
+                    hookList.forEach((hookState, hookIdx) => {
+                        hookState['internalNextValue'] = hookState[NEXT_VALUE];
+                        // define a setter for __N to track the next value of the hook
+                        Object.defineProperty(hookState, NEXT_VALUE, {
+                            get: () => hookState['internalNextValue'],
+                            set: (value) => {
+                                if (Array.isArray(value)) {
+                                    // hookState[VALUE] is [state, dispatch]
+                                    const currentValueTuple = hookState[VALUE];
+                                    const currentValue = currentValueTuple[0];
+                                    const [nextValue] = value;
+                                    const component = hookState[COMPONENT];
+                                    if (!component) {
+                                        hookState['internalNextValue'] = value;
+                                        return;
+                                    }
+                                    const type = component[VNODE].type;
+                                    const flowId = component[sFlowID] ??= profileFlowId();
+                                    profileMark('ReactLynx::hooks::setState', {
+                                        flowId,
+                                        args: {
+                                            hookIdx: String(hookIdx),
+                                            ...buildSetStateProfileMarkArgs(type, currentValue, nextValue),
+                                        },
+                                    });
+                                }
+                                hookState['internalNextValue'] = value;
+                            },
+                            configurable: true,
+                        });
+                    });
+                }
+            }
+            if (typeof vnode.type === 'function') {
+                profileEnd(); // for options[DIFF2]
+            }
+            old?.(vnode);
+        });
+        if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
+            hook(options, COMMIT, (old, vnode, commitQueue) => {
+                profileStart('ReactLynx::commit', {
+                    ...globalPatchOptions.flowIds
+                        ? {
+                            flowId: globalPatchOptions.flowIds[0],
+                            flowIds: globalPatchOptions.flowIds,
+                        }
+                        : {},
+                });
+                old?.(vnode, commitQueue);
+                profileEnd();
+            });
+        }
+    }
+    // Profile the user-provided `render`.
+    hook(options, RENDER, (old, vnode) => {
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const originalRender = vnode[COMPONENT].render;
+        vnode[COMPONENT].render = function render(props, state, context) {
+            profileStart(`ReactLynx::render::${ /* #__INLINE__ */getDisplayName(vnode.type)}`);
+            try {
+                return originalRender.call(this, props, state, context);
+            }
+            finally {
+                profileEnd();
+                vnode[COMPONENT].render = originalRender;
+            }
+        };
+        old?.(vnode);
+    });
+    if (typeof __BACKGROUND__ !== 'undefined' && __BACKGROUND__) {
+        const sPatchLength = Symbol('PATCH_LENGTH');
+        hook(options, DIFF, (old, vnode) => {
+            if (typeof vnode.type === 'function' && __globalSnapshotPatch) {
+                vnode[sPatchLength] = __globalSnapshotPatch.length;
+            }
+            old?.(vnode);
+        });
+        hook(options, DIFFED, (old, vnode) => {
+            if (typeof vnode.type === 'function') {
+                const patchLength = vnode[sPatchLength];
+                delete vnode[sPatchLength];
+                if (__globalSnapshotPatch && patchLength === __globalSnapshotPatch.length) {
+                    // "NoPatch" is a conventional name in Lynx
+                    profileMark('ReactLynx::diffFinishNoPatch', {
+                        args: {
+                            componentName: /* #__INLINE__ */ getDisplayName(vnode.type),
+                        },
+                    });
+                }
+            }
+            old?.(vnode);
+        });
+    }
+}
+//# sourceMappingURL=profileHooks.js.map

package/runtime/lib/debug/profileHooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profileHooks.js","sourceRoot":"","sources":["../../src/debug/profileHooks.ts"],"names":[],"mappings":"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"}

package/runtime/lib/debug/vnodeSource.d.ts

@@ -0,0 +1,4 @@
+export declare function setupVNodeSourceHook(): void;
+export declare function moveSnapshotVNodeSource(oldId: number, newId: number): void;
+export declare function getSnapshotVNodeSource(id: number): string | undefined;
+export declare function clearSnapshotVNodeSource(): void;

package/runtime/lib/debug/vnodeSource.js

@@ -0,0 +1,61 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { options } from 'preact';
+import { DIFFED, DOM } from '../renderToOpcodes/constants.js';
+const snapshotVNodeSourceMap = new Map();
+let hookInstalled = false;
+function formatSource(source) {
+    if (!source.fileName) {
+        return undefined;
+    }
+    if (typeof source.lineNumber === 'number' && typeof source.columnNumber === 'number') {
+        return `${source.fileName}:${source.lineNumber}:${source.columnNumber}`;
+    }
+    if (typeof source.lineNumber === 'number') {
+        return `${source.fileName}:${source.lineNumber}`;
+    }
+    return source.fileName;
+}
+function captureVNodeSource(vnode) {
+    if (typeof vnode.type !== 'string') {
+        return;
+    }
+    const source = vnode.__source;
+    const id = vnode[DOM]?.__id;
+    if (!source || typeof id !== 'number') {
+        return;
+    }
+    const formattedSource = formatSource(source);
+    if (formattedSource) {
+        snapshotVNodeSourceMap.set(id, formattedSource);
+    }
+}
+export function setupVNodeSourceHook() {
+    if (hookInstalled) {
+        return;
+    }
+    hookInstalled = true;
+    const oldDiffed = options[DIFFED];
+    options[DIFFED] = (vnode) => {
+        captureVNodeSource(vnode);
+        oldDiffed?.(vnode);
+    };
+}
+export function moveSnapshotVNodeSource(oldId, newId) {
+    if (oldId === newId) {
+        return;
+    }
+    const source = snapshotVNodeSourceMap.get(oldId);
+    if (source) {
+        snapshotVNodeSourceMap.set(newId, source);
+        snapshotVNodeSourceMap.delete(oldId);
+    }
+}
+export function getSnapshotVNodeSource(id) {
+    return snapshotVNodeSourceMap.get(id);
+}
+export function clearSnapshotVNodeSource() {
+    snapshotVNodeSourceMap.clear();
+}
+//# sourceMappingURL=vnodeSource.js.map

package/runtime/lib/debug/vnodeSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vnodeSource.js","sourceRoot":"","sources":["../../src/debug/vnodeSource.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAa9D,MAAM,sBAAsB,GAAwB,IAAI,GAAG,EAAE,CAAC;AAE9D,IAAI,aAAa,GAAG,KAAK,CAAC;AAE1B,SAAS,YAAY,CAAC,MAAkB;IACtC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;QACrB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,QAAQ,IAAI,OAAO,MAAM,CAAC,YAAY,KAAK,QAAQ,EAAE,CAAC;QACrF,OAAO,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;IAC1E,CAAC;IACD,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;QAC1C,OAAO,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;IACnD,CAAC;IACD,OAAO,MAAM,CAAC,QAAQ,CAAC;AACzB,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAmB;IAC7C,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QACnC,OAAO;IACT,CAAC;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC;IAC9B,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC;IAC5B,IAAI,CAAC,MAAM,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;QACtC,OAAO;IACT,CAAC;IACD,MAAM,eAAe,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IAC7C,IAAI,eAAe,EAAE,CAAC;QACpB,sBAAsB,CAAC,GAAG,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAClD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO;IACT,CAAC;IACD,aAAa,GAAG,IAAI,CAAC;IACrB,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE;QAC1B,kBAAkB,CAAC,KAAqB,CAAC,CAAC;QAC1C,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,KAAa,EAAE,KAAa;IAClE,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QACpB,OAAO;IACT,CAAC;IACD,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACjD,IAAI,MAAM,EAAE,CAAC;QACX,sBAAsB,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC1C,sBAAsB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,EAAU;IAC/C,OAAO,sBAAsB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,sBAAsB,CAAC,KAAK,EAAE,CAAC;AACjC,CAAC"}

package/runtime/lib/hooks/react.d.ts

@@ -1,26 +1,27 @@
-import { useCallback, useContext, useDebugValue, useErrorBoundary, useId, useImperativeHandle, useMemo, useReducer, useRef, useState } from 'preact/hooks';
+import { useCallback, useContext, useDebugValue, useErrorBoundary, useId, useImperativeHandle, useMemo, useState as usePreactState, useReducer, useRef } from 'preact/hooks';
 import type { DependencyList, EffectCallback } from 'react';
+declare const useState: typeof usePreactState;
 /**
- * `useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
- *
- * Accepts a function that contains imperative, possibly effectful code. The effects run after main thread dom update without blocking it.
+ * Accepts a function that contains imperative, possibly effectful code.
+ * The effects run after main thread dom update without blocking it.
  *
  * @param effect - Imperative function that can return a cleanup function
  * @param deps - If present, effect will only activate if the values in the list change (using ===).
  *
  * @public
- *
- * @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
  */
-declare function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
+declare const useEffect: (effect: EffectCallback, deps?: DependencyList) => void;
 /**
- * Accepts a function that contains imperative, possibly effectful code.
- * The effects run after main thread dom update without blocking it.
+ * `useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
+ *
+ * Accepts a function that contains imperative, possibly effectful code. The effects run after main thread dom update without blocking it.
  *
  * @param effect - Imperative function that can return a cleanup function
  * @param deps - If present, effect will only activate if the values in the list change (using ===).
  *
  * @public
+ *
+ * @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
  */
-declare function useEffect(effect: EffectCallback, deps?: DependencyList): void;
+declare const useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void;
 export { useState, useReducer, useRef, useImperativeHandle, useLayoutEffect, useEffect, useCallback, useMemo, useContext, useDebugValue, useErrorBoundary, useId, };

package/runtime/lib/hooks/react.js

@@ -1,34 +1,121 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { useCallback, useContext, useDebugValue, useErrorBoundary, useId, useImperativeHandle, useMemo, useEffect as usePreactEffect, useReducer, useRef, useState, } from 'preact/hooks';
+import { useCallback, useContext, useDebugValue, useErrorBoundary, useId, useImperativeHandle, useMemo, useEffect as usePreactEffect, useState as usePreactState, useReducer, useRef, } from 'preact/hooks';
+import { isProfiling, profileEnd, profileFlowId, profileStart } from '../debug/profile.js';
+// Cache profiled wrappers by the original preact setter to preserve stable
+// identity without introducing extra hooks in component render flow.
+const stateSetterTraceCache = /* @__PURE__ */ isProfiling
+    ? new WeakMap()
+    : undefined;
+function buildTraceOption(flowId, stack) {
+    if (!stack) {
+        return { flowId };
+    }
+    return {
+        flowId,
+        args: {
+            stack,
+        },
+    };
+}
+function withEffectProfile(effect, traceName, flowId, stack) {
+    const traceOption = buildTraceOption(flowId, stack);
+    return () => {
+        profileStart(traceName, traceOption);
+        try {
+            const cleanup = effect();
+            if (typeof cleanup !== 'function') {
+                return cleanup;
+            }
+            return () => {
+                profileStart(`${traceName}::cleanup`, traceOption);
+                try {
+                    cleanup();
+                }
+                finally {
+                    profileEnd();
+                }
+            };
+        }
+        finally {
+            profileEnd();
+        }
+    };
+}
+function useEffectWithProfile(effect, deps, traceName) {
+    const flowId = profileFlowId();
+    const stack = new Error().stack;
+    const traceOption = buildTraceOption(flowId, stack);
+    profileStart(traceName, traceOption);
+    try {
+        return usePreactEffect(withEffectProfile(effect, `${traceName}::callback`, flowId, stack), deps);
+    }
+    finally {
+        profileEnd();
+    }
+}
+function useLayoutEffectProfiled(effect, deps) {
+    return useEffectWithProfile(effect, deps, 'ReactLynx::hooks::useLayoutEffect');
+}
+function useEffectProfiled(effect, deps) {
+    return useEffectWithProfile(effect, deps, 'ReactLynx::hooks::useEffect');
+}
+function useStateWithProfile(initialState) {
+    const [state, setState] = (arguments.length === 0
+        ? usePreactState()
+        : usePreactState(initialState));
+    const genericSetState = setState;
+    const cachedTracedSetState = stateSetterTraceCache?.get(genericSetState);
+    if (cachedTracedSetState) {
+        return [state, cachedTracedSetState];
+    }
+    const tracedSetState = ((nextState) => {
+        const stack = new Error().stack;
+        const traceOption = stack
+            ? { args: { stack } }
+            : undefined;
+        profileStart('ReactLynx::hooks::useState::setter', traceOption);
+        try {
+            return setState(nextState);
+        }
+        finally {
+            profileEnd();
+        }
+    });
+    stateSetterTraceCache?.set(genericSetState, tracedSetState);
+    return [state, tracedSetState];
+}
+const useState = isProfiling
+    ? useStateWithProfile
+    : usePreactState;
 /**
- * `useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
- *
- * Accepts a function that contains imperative, possibly effectful code. The effects run after main thread dom update without blocking it.
+ * Accepts a function that contains imperative, possibly effectful code.
+ * The effects run after main thread dom update without blocking it.
  *
  * @param effect - Imperative function that can return a cleanup function
  * @param deps - If present, effect will only activate if the values in the list change (using ===).
  *
  * @public
- *
- * @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
  */
-function useLayoutEffect(effect, deps) {
-    return usePreactEffect(effect, deps);
-}
+const useEffect = isProfiling
+    ? useEffectProfiled
+    : usePreactEffect;
 /**
- * Accepts a function that contains imperative, possibly effectful code.
- * The effects run after main thread dom update without blocking it.
+ * `useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
+ *
+ * Accepts a function that contains imperative, possibly effectful code. The effects run after main thread dom update without blocking it.
  *
  * @param effect - Imperative function that can return a cleanup function
  * @param deps - If present, effect will only activate if the values in the list change (using ===).
  *
  * @public
+ *
+ * @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
  */
-function useEffect(effect, deps) {
-    return usePreactEffect(effect, deps);
-}
+const useLayoutEffect = isProfiling
+    ? useLayoutEffectProfiled
+    : usePreactEffect;
 export { 
 // preact
 useState, useReducer, useRef, useImperativeHandle, useLayoutEffect, useEffect, useCallback, useMemo, useContext, useDebugValue, useErrorBoundary, useId, };