feat: inline worklet-runtime into main-thread.js (ReactLynx)#2358
Open
feat: inline worklet-runtime into main-thread.js (ReactLynx)#2358
Conversation
Simplifies worklet-runtime loading by bundling it directly into main-thread.js as a webpack entry instead of injecting it as a separate Lepus chunk. This aligns with Vue Lynx's implementation and removes conditional chunk logic. - Move worklet-runtime to rspeedy entry setup - Remove beforeEncode hook chunk injection in ReactWebpackPlugin - Simplify loadWorkletRuntime() to a guard function - Update worklet-runtime tests to reflect inline bundling
Huxpro
requested review from
HuJean,
Yradex,
colinaaa,
hzy,
luhc228 and
upupming
as code owners
🦋 Changeset detectedLatest commit: 740efde The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughThe worklet runtime is no longer emitted as a separate Lepus chunk; it is resolved and inlined into the main-thread entry. The runtime loader was simplified to a boolean guard that checks for Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
❌ 99 Tests Failed:
View the top 3 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR simplifies ReactLynx worklet runtime loading by inlining the worklet-runtime into the generated main-thread.js bundle (as an entry import) instead of conditionally injecting it as a separate Lepus chunk, aligning behavior with the Vue Lynx approach.
Changes:
- Adds
@lynx-js/react/worklet-*-runtimeto the main-thread entry imports during rspeedy entry setup (and updates the worklet-runtime test case config accordingly). - Removes the
beforeEncodehook logic inReactWebpackPluginthat conditionally injected aworklet-runtimeLepus chunk. - Updates
loadWorkletRuntime()to a guard that checksglobalThis.lynxWorkletImpland adjusts tests to validate inline bundling.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/webpack/react-webpack-plugin/test/cases/worklet-runtime/chunk/rspack.config.js | Updates test bundler config to inline worklet runtime via entry imports. |
| packages/webpack/react-webpack-plugin/test/cases/worklet-runtime/chunk/index.js | Updates assertions to verify inline presence rather than a separate Lepus chunk. |
| packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts | Removes conditional worklet-runtime Lepus chunk injection logic from beforeEncode. |
| packages/rspeedy/plugin-react/src/entry.ts | Adds worklet-runtime path resolution earlier and includes it in main-thread entry imports. |
| packages/react/worklet-runtime/src/bindings/loadRuntime.ts | Changes loadWorkletRuntime() from chunk-loader behavior to a guard-only check. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .add({ | ||
| layer: LAYERS.MAIN_THREAD, | ||
| import: imports, | ||
| import: [...imports, workletRuntimePath], |
Comment on lines
+20
to
+21
| defaultConfig.entry['main__main-thread'].import, | ||
| require.resolve('@lynx-js/react/worklet-dev-runtime'), |
Comment on lines
262
to
266
| const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation); | ||
|
|
||
| const { RawSource, ConcatSource } = compiler.webpack.sources; | ||
| hooks.beforeEncode.tap( | ||
| this.constructor.name, | ||
| (args) => { | ||
| const lepusCode = args.encodeData.lepusCode; | ||
| if ( | ||
| lepusCode.root?.source.source().toString()?.includes( | ||
| 'registerWorkletInternal', | ||
| ) | ||
| ) { | ||
| lepusCode.chunks.push({ | ||
| name: 'worklet-runtime', | ||
| source: new RawSource(fs.readFileSync( | ||
| options.workletRuntimePath, | ||
| 'utf8', | ||
| )), | ||
| info: { | ||
| ['lynx:main-thread']: true, | ||
| }, | ||
| }); | ||
| } | ||
| return args; | ||
| }, | ||
| ); | ||
| const { ConcatSource } = compiler.webpack.sources; | ||
|
|
||
| // Inject `module.exports` for async main-thread chunks |
Comment on lines
+26
to
27
| expect(json['lepusCode']['root'].includes('lynxWorkletImpl')) | ||
| .toBe(true); |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts (1)
67-71: Consider removing unusedworkletRuntimePathoption.The
workletRuntimePathoption is declared and passed to the plugin (fromentry.tsline 284), but it's never used withinReactWebpackPlugin.apply(). The chunk injection logic that previously used this path has been removed—the runtime is now bundled via entry imports inentry.ts.Unless there's a planned future use for this option in the plugin, consider removing it to avoid confusion.
♻️ Proposed cleanup
interface ReactWebpackPluginOptions { // ... other options ... - /** - * The file path of `@lynx-js/react/worklet-runtime`. - */ - workletRuntimePath: string; }And in
defaultOptions:profile: undefined, - workletRuntimePath: '',And in
entry.ts:.use(ReactWebpackPlugin, [{ // ... other options ... - workletRuntimePath, }])🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts` around lines 67 - 71, Remove the unused workletRuntimePath option: delete the workletRuntimePath property from the plugin options interface/type, remove any defaultOptions entry for workletRuntimePath, stop passing workletRuntimePath into the ReactWebpackPlugin constructor (the callsite in entry.ts), and remove any references to workletRuntimePath inside ReactWebpackPlugin.apply(); ensure the plugin still compiles by updating the constructor signature and any usages of the options object (e.g., ReactWebpackPlugin and defaultOptions) to no longer include workletRuntimePath.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts`:
- Around line 67-71: Remove the unused workletRuntimePath option: delete the
workletRuntimePath property from the plugin options interface/type, remove any
defaultOptions entry for workletRuntimePath, stop passing workletRuntimePath
into the ReactWebpackPlugin constructor (the callsite in entry.ts), and remove
any references to workletRuntimePath inside ReactWebpackPlugin.apply(); ensure
the plugin still compiles by updating the constructor signature and any usages
of the options object (e.g., ReactWebpackPlugin and defaultOptions) to no longer
include workletRuntimePath.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f3c16259-b198-444b-84e1-4e8d35a21203
📒 Files selected for processing (5)
packages/react/worklet-runtime/src/bindings/loadRuntime.tspackages/rspeedy/plugin-react/src/entry.tspackages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.tspackages/webpack/react-webpack-plugin/test/cases/worklet-runtime/chunk/index.jspackages/webpack/react-webpack-plugin/test/cases/worklet-runtime/chunk/rspack.config.js
Web Explorer#8270 Bundle Size — 385.21KiB (0%).740efde(current) vs 726f600 main#8237(baseline) Bundle metrics
|
| Current #8270 |
Baseline #8237 |
|
|---|---|---|
 Initial JS |
155.59KiB |
155.59KiB |
| Initial CSS |
35.1KiB |
35.1KiB |
| Cache Invalidation |
0% |
0% |
| Chunks |
8 |
8 |
| Assets |
8 |
8 |
 Modules |
237(-0.42%) |
238 |
| Duplicate Modules |
16 |
16 |
| Duplicate Code |
2.97% |
2.97% |
| Packages |
4 |
4 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #8270 |
Baseline #8237 |
|
|---|---|---|
| JS |
254.26KiB |
254.26KiB |
| Other |
95.85KiB |
95.85KiB |
| CSS |
35.1KiB |
35.1KiB |
Bundle analysis report Branch Huxpro/inline-worklet-runtime Project dashboard
Generated by RelativeCI Documentation Report issue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Simplifies worklet-runtime loading by bundling it directly into main-thread.js as a webpack entry instead of injecting it as a separate Lepus chunk. This aligns with Vue Lynx's implementation (completed in PR #67) and removes conditional chunk logic.
Changes
Impact
Test Status
Test environment has pre-existing build issues preventing full verification. Changes are structurally sound and align with Vue Lynx pattern.
Summary by CodeRabbit
Performance
Chores