-
Notifications
You must be signed in to change notification settings - Fork 122
feat: simplify implement of hooks for main-thread runtime #2441
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@lynx-js/react': minor | ||
| '@lynx-js/react-alias-rsbuild-plugin': minor | ||
| --- | ||
|
|
||
| Simplify hooks for main-thread runtime, which only can run during the first screen. |
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,142 @@ | ||||||||||||||||||||||||||||||||
| // Copyright 2026 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. | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| /** | ||||||||||||||||||||||||||||||||
| * Implements hooks in main thread. | ||||||||||||||||||||||||||||||||
| * This module is modified from preact/hooks | ||||||||||||||||||||||||||||||||
| * | ||||||||||||||||||||||||||||||||
| * internal-preact/hooks/dist/hooks.mjs | ||||||||||||||||||||||||||||||||
| */ | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| import { COMPONENT, DIFF, DIFFED, HOOK, RENDER, HOOKS, LIST, VALUE } from '@lynx-js/react/internal/constants'; | ||||||||||||||||||||||||||||||||
| import { options } from 'preact'; | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| var currentIndex; | ||||||||||||||||||||||||||||||||
| var currentComponent; | ||||||||||||||||||||||||||||||||
| var previousComponent; | ||||||||||||||||||||||||||||||||
| var currentHook = 0; | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| var oldBeforeDiff = options[DIFF]; | ||||||||||||||||||||||||||||||||
| var oldBeforeRender = options[RENDER]; | ||||||||||||||||||||||||||||||||
| var oldAfterDiff = options[DIFFED]; | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| options[DIFF] = function(vnode) { | ||||||||||||||||||||||||||||||||
| currentComponent = null; | ||||||||||||||||||||||||||||||||
| if (oldBeforeDiff) oldBeforeDiff(vnode); | ||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| options[RENDER] = function(vnode) { | ||||||||||||||||||||||||||||||||
| if (oldBeforeRender) oldBeforeRender(vnode); | ||||||||||||||||||||||||||||||||
| currentComponent = vnode[COMPONENT]; | ||||||||||||||||||||||||||||||||
| currentIndex = 0; | ||||||||||||||||||||||||||||||||
| previousComponent = currentComponent; | ||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| options[DIFFED] = function(vnode) { | ||||||||||||||||||||||||||||||||
| if (oldAfterDiff) oldAfterDiff(vnode); | ||||||||||||||||||||||||||||||||
| previousComponent = currentComponent = null; | ||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function getHookState(index, type) { | ||||||||||||||||||||||||||||||||
| if (options[HOOK]) { | ||||||||||||||||||||||||||||||||
| options[HOOK](currentComponent, index, currentHook || type); | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
| currentHook = 0; | ||||||||||||||||||||||||||||||||
| var hooks = currentComponent[HOOKS] || (currentComponent[HOOKS] = { | ||||||||||||||||||||||||||||||||
| [LIST]: [], | ||||||||||||||||||||||||||||||||
| }); | ||||||||||||||||||||||||||||||||
| if (index >= hooks[LIST].length) { | ||||||||||||||||||||||||||||||||
| hooks[LIST].push({}); | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
| return hooks[LIST][index]; | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useState(initialState) { | ||||||||||||||||||||||||||||||||
| currentHook = 1; | ||||||||||||||||||||||||||||||||
| return useReducer(invokeOrReturn, initialState); | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useReducer(reducer, initialState, init) { | ||||||||||||||||||||||||||||||||
| var hookState = getHookState(currentIndex++, 2); | ||||||||||||||||||||||||||||||||
| hookState._reducer = reducer; | ||||||||||||||||||||||||||||||||
| if (!hookState[COMPONENT]) { | ||||||||||||||||||||||||||||||||
| hookState[VALUE] = [!init ? invokeOrReturn(undefined, initialState) : init(initialState), function(action) {}]; | ||||||||||||||||||||||||||||||||
| hookState[COMPONENT] = currentComponent; | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
| return hookState[VALUE]; | ||||||||||||||||||||||||||||||||
|
Comment on lines
+60
to
+67
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧩 Analysis chain🌐 Web query:
💡 Result: In Preact, the Concretely, Preact’s This matches the general Sources: Preact hooks implementation [1]; React 🏁 Script executed: # Get the full context of the useReducer implementation
cd packages/react/runtime/lepus/hooks || exit 1
cat -n index.js | head -100Repository: lynx-family/lynx-stack Length of output: 3376 🏁 Script executed: # Search for references to _nextValue to understand the update flow
rg "_nextValue" packages/react/runtime/lepus/hooks/Repository: lynx-family/lynx-stack Length of output: 48 🏁 Script executed: # Check if there's a complete implementation elsewhere or if this is the final version
git log --oneline -20 packages/react/runtime/lepus/hooks/index.jsRepository: lynx-family/lynx-stack Length of output: 119 Dispatcher must actually update state and schedule re-renders. The dispatcher created on Line 64 is an empty no-op function that never calls the reducer, updates state, or schedules re-renders. This makes all state transitions after mount silently fail, breaking the core contract of Per the Preact hooks model verified above,
The current empty function satisfies none of these requirements. This needs to be implemented properly to avoid silent state update failures. 🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| // background hooks | ||||||||||||||||||||||||||||||||
| function useEffect(callback, args) {} | ||||||||||||||||||||||||||||||||
| function useLayoutEffect(callback, args) {} | ||||||||||||||||||||||||||||||||
| function useImperativeHandle(ref, createHandle, args) {} | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useRef(initialValue) { | ||||||||||||||||||||||||||||||||
| currentHook = 5; | ||||||||||||||||||||||||||||||||
| return useMemo(function() { | ||||||||||||||||||||||||||||||||
| return { | ||||||||||||||||||||||||||||||||
| current: initialValue, | ||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||
| }, []); | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useMemo(factory, args) { | ||||||||||||||||||||||||||||||||
| var state = getHookState(currentIndex++, 7); | ||||||||||||||||||||||||||||||||
| state[VALUE] = factory(); | ||||||||||||||||||||||||||||||||
| return state[VALUE]; | ||||||||||||||||||||||||||||||||
|
Comment on lines
+84
to
+87
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧩 Analysis chain🌐 Web query:
💡 Result: Yes. In Preact, And yes,
Sources: 🏁 Script executed: # First, find and examine the hooks file
fd -t f "index.js" packages/react/runtime/lepus/hooks/
# Check file size before reading
wc -l packages/react/runtime/lepus/hooks/index.jsRepository: lynx-family/lynx-stack Length of output: 157 🏁 Script executed: cat -n packages/react/runtime/lepus/hooks/index.jsRepository: lynx-family/lynx-stack Length of output: 4504
The implementation ignores the dependency array ( Add dependency comparison logic to only recompute when 🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useCallback(callback, args) { | ||||||||||||||||||||||||||||||||
| currentHook = 8; | ||||||||||||||||||||||||||||||||
| return useMemo(function() { | ||||||||||||||||||||||||||||||||
| return callback; | ||||||||||||||||||||||||||||||||
| }, args); | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useContext(context) { | ||||||||||||||||||||||||||||||||
| var provider = currentComponent.context[context.__c]; | ||||||||||||||||||||||||||||||||
| var state = getHookState(currentIndex++, 9); | ||||||||||||||||||||||||||||||||
| state.c = context; | ||||||||||||||||||||||||||||||||
| if (!provider) return context.__; | ||||||||||||||||||||||||||||||||
| state[VALUE] = true; | ||||||||||||||||||||||||||||||||
| return provider.props.value; | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useDebugValue(value, formatter) { | ||||||||||||||||||||||||||||||||
| if (options.useDebugValue) { | ||||||||||||||||||||||||||||||||
| options.useDebugValue(formatter ? formatter(value) : /** @type {any}*/ value); | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useErrorBoundary(cb) { | ||||||||||||||||||||||||||||||||
| var state = getHookState(currentIndex++, 10); | ||||||||||||||||||||||||||||||||
| state[VALUE] = cb; | ||||||||||||||||||||||||||||||||
| return [undefined, function() {}]; | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function useId() { | ||||||||||||||||||||||||||||||||
| var state = getHookState(currentIndex++, 11); | ||||||||||||||||||||||||||||||||
| var mask = [0, 0]; | ||||||||||||||||||||||||||||||||
| state[VALUE] = 'P' + mask[0] + '-' + mask[1]++; | ||||||||||||||||||||||||||||||||
| return state[VALUE]; | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
Comment on lines
+118
to
+123
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The 🐛 Proposed fix: Use module-level counter or hook state for unique IDs+var idMask = [0, 0];
+
function useId() {
var state = getHookState(currentIndex++, 11);
- var mask = [0, 0];
- state[VALUE] = 'P' + mask[0] + '-' + mask[1]++;
+ if (!state[VALUE]) {
+ state[VALUE] = 'P' + idMask[0] + '-' + idMask[1]++;
+ }
return state[VALUE];
}📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| function invokeOrReturn(arg, f) { | ||||||||||||||||||||||||||||||||
| return typeof f == 'function' ? f(arg) : f; | ||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||
| export { | ||||||||||||||||||||||||||||||||
| useCallback, | ||||||||||||||||||||||||||||||||
| useContext, | ||||||||||||||||||||||||||||||||
| useDebugValue, | ||||||||||||||||||||||||||||||||
| useEffect, | ||||||||||||||||||||||||||||||||
| useErrorBoundary, | ||||||||||||||||||||||||||||||||
| useId, | ||||||||||||||||||||||||||||||||
| useImperativeHandle, | ||||||||||||||||||||||||||||||||
| useLayoutEffect, | ||||||||||||||||||||||||||||||||
| useMemo, | ||||||||||||||||||||||||||||||||
| useReducer, | ||||||||||||||||||||||||||||||||
| useRef, | ||||||||||||||||||||||||||||||||
| useState, | ||||||||||||||||||||||||||||||||
| }; | ||||||||||||||||||||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| // Copyright 2026 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. | ||
|
|
||
| export { | ||
| CHILDREN, | ||
| COMPONENT, | ||
| DIFF, | ||
| DIFFED, | ||
| DIRTY, | ||
| DOM, | ||
| FLAGS, | ||
| HOOK, | ||
| HOOKS, | ||
| INDEX, | ||
| LIST, | ||
| PARENT, | ||
| RENDER, | ||
| VALUE, | ||
| } from './renderToOpcodes/constants.js'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Clear the background snapshot state after switching runtimes.
Once this setup moves the test into background mode,
snapshotInstanceManager.clear()is no longer resetting the active tree. That letsBackgroundSnapshotInstancestate bleed between cases.Suggested fix
Based on learnings,
resetEnv()clears bothbackgroundSnapshotInstanceManagerandsnapshotInstanceManagerbefore reinitializing the environments.Also applies to: 34-35
🤖 Prompt for AI Agents