fix(react/runtime): delay applying mt:ref until hydration has finished#1001
fix(react/runtime): delay applying mt:ref until hydration has finished#1001Yradex merged 4 commits intolynx-family:mainfrom
Conversation
🦋 Changeset detectedLatest commit: aad8380 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
CodSpeed Performance ReportMerging #1001 will not alter performanceComparing Summary
|
899d69f to
8c3c683
Compare
Web Explorer#1468 Bundle Size — 255.42KiB (0%).aad8380(current) vs 51676ed main#1451(baseline) Bundle metrics
|
| Current #1468 |
Baseline #1451 |
|
|---|---|---|
138.7KiB |
138.7KiB |
|
31.79KiB |
31.79KiB |
|
0% |
0% |
|
4 |
4 |
|
4 |
4 |
|
201 |
201 |
|
14 |
14 |
|
3.29% |
3.29% |
|
4 |
4 |
|
0 |
0 |
Bundle size by type no changes
| Current #1468 |
Baseline #1451 |
|
|---|---|---|
223.63KiB |
223.63KiB |
|
31.79KiB |
31.79KiB |
Bundle analysis report Branch Yradex:mts-delay-ref-apply Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#1479 Bundle Size — 232.57KiB (+0.18%).aad8380(current) vs 51676ed main#1462(baseline) Bundle metrics
Bundle size by type
Bundle analysis report Branch Yradex:mts-delay-ref-apply Project dashboard Generated by RelativeCI Documentation Report issue |
8c3c683 to
43e45b9
Compare
Codecov ReportAttention: Patch coverage is ✅ All tests successful. No failed tests found.
📢 Thoughts on this report? Let us know! |
f32a2ab to
a101a29
Compare
0320790 to
aa44d80
Compare
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/react@0.110.0 ### Minor Changes - Fixed closure variable capture issue in effect hooks to prevent stale values and ensured proper execution order between refs, effects, and event handlers. ([#770](#770)) **Breaking Changes**: - The execution timing of `ref`, `useEffect()` callback, `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` and the callback of `setState` have been moved forward. These effects will now execute before hydration is complete, rather than waiting for the main thread update to complete. - For components inside `<list />`, `ref` callbacks will now be triggered during background thread rendering, regardless of component visibility. If your code depends on component visibility timing, use `main-thread:ref` instead of regular `ref`. ### Patch Changes - Fixed two memory leaks: ([#1071](#1071)) 1. When JSX is rendered on the main thread and removed, FiberElement can still be referenced by `__root.__jsx` through `props.children`; 2. When the SnapshotInstance tree is removed from the root node, its child nodes form a cycle reference because the `__previousSibling` and `__nextSibling` properties point to each other, thus causing a FiberElement leak. - Optimize the error message when snapshots cannot be found in the main thread. ([#1083](#1083)) - Fix a problem causing `MainThreadRef`s to not be updated correctly during hydration when they are set to `main-thread:ref`s. ([#1001](#1001)) - Add snapshot id report when throwing `snapshotPatchApply failed: ctx not found` error. ([#1107](#1107)) - Fix a bug in ReactLynx Testing Library that rendered snapshot of inline style was normalized incorrectly (eg. `flex:1` was normalized to `flex: 1 1 0%;` incorrectly). ([#1040](#1040)) ## @lynx-js/web-core@0.14.0 ### Minor Changes - refactor: the default thread-strategy will be all on ui ([#1105](#1105)) **This is a breaking change!!!** ### Patch Changes - feat: add `_SetSourceMapRelease(errInfo)` MTS API. ([#1118](#1118)) You can get `errInfo.release` through `e.detail.release` in the error event callback of lynx-view. The `_SetSourceMapRelease` function is not complete yet, because it is currently limited by the Web platform and some functions and some props such as `err.stack` do not need to be supported for the time being. - feat: add `_I18nResourceTranslation` api in mts && `init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view. ([#1065](#1065)) `init-i18n-resource` is the complete set of i18nResources that need to be maintained on the container side. Note: You need to pass this value when lynx-view is initialized. You can use `_I18nResourceTranslation` in MTS to get the corresponding i18nResource from `init-i18n-resources`. If it is undefined, the `i18nResourceMissed` event will be dispatched. ```js // ui thread lynxView.initI18nResources = [ { options: { locale: "en", channel: "1", fallback_url: "", }, resource: { hello: "hello", lynx: "lynx web platform1", }, }, ]; lynxView.addEventListener("i18nResourceMissed", (e) => { console.log(e); }); // mts _I18nResourceTranslation({ locale: "en", channel: "1", fallback_url: "", }); ``` - fix: lynx-view `updateGlobalProps` method will also update globalProps, so `reload()` will use the latest updated globalProps. ([#1119](#1119)) - feat: supports `lynx.getI18nResource()` and `onI18nResourceReady` event in bts. ([#1088](#1088)) - `lynx.getI18nResource()` can be used to get i18nResource in bts, it has two data sources: - the result of `_I18nResourceTranslation()` - lynx-view `updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions)`, it will be matched to the correct i8nResource as a result of `lynx.getI18nResource()` - `onI18nResourceReady` event can be used to listen `_I18nResourceTranslation` and lynx-view `updateI18nResources` execution. - refactor: make the opcode be a plain array ([#1051](#1051)) \#1042 - feat: The error event return value detail of lynx-view adds `sourceMap` value, the type is as follows: ([#1058](#1058)) CustomEvent<{ error: Error; sourceMap: { offset: { line: number; col: number; }; }; }>; This is because web-core adds wrapper at runtime, which causes the stack offset to be different. Now you can calculate the real offset based on it. - feat: add `updateI18nResources` method of lynx-view. ([#1085](#1085)) Now you can use `updateI18nResources` to update i18nResources, and then use \_I18nResourceTranslation() to get the updated result. - fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent. ([#1069](#1069)) - Updated dependencies \[[`42ed2e3`](42ed2e3), [`25a04c9`](25a04c9), [`0dbb8b1`](0dbb8b1), [`f99de1e`](f99de1e), [`873a285`](873a285), [`afacb2c`](afacb2c), [`1861cbe`](1861cbe)]: - @lynx-js/web-worker-runtime@0.14.0 - @lynx-js/web-mainthread-apis@0.14.0 - @lynx-js/web-constants@0.14.0 - @lynx-js/offscreen-document@0.1.2 - @lynx-js/web-worker-rpc@0.14.0 ## @lynx-js/css-extract-webpack-plugin@0.6.0 ### Minor Changes - Fix CSS HMR crash issues by using the same encode options with the main template. ([#1033](#1033)) ## @lynx-js/template-webpack-plugin@0.8.0 ### Minor Changes - Remove `EncodeCSSOptions` and `encodeCSS` to ensure consistent encoding options are used across CSS HMR updates and the main template. ([#1033](#1033)) ### Patch Changes - Avoid generating lazy bundles when there are no chunk name. ([#1090](#1090)) E.g.: using `import.meta.webpackContext`. ## create-rspeedy@0.9.10 ### Patch Changes - Enable TypeScript check in templates. ([#1093](#1093)) - Fix a bug in ReactLynx Testing Library that rendered snapshot of inline style was normalized incorrectly (eg. `flex:1` was normalized to `flex: 1 1 0%;` incorrectly). ([#1040](#1040)) ## @lynx-js/react-rsbuild-plugin@0.10.4 ### Patch Changes - Support `@lynx-js/react` v0.110.0. ([#770](#770)) - Updated dependencies \[[`f84a1cc`](f84a1cc), [`0d151db`](0d151db), [`0d151db`](0d151db), [`51676ed`](51676ed), [`0d151db`](0d151db), [`a43ae05`](a43ae05), [`0a0ef40`](0a0ef40), [`9b61210`](9b61210)]: - @lynx-js/react-alias-rsbuild-plugin@0.10.4 - @lynx-js/react-webpack-plugin@0.6.16 - @lynx-js/css-extract-webpack-plugin@0.6.0 - @lynx-js/template-webpack-plugin@0.8.0 - @lynx-js/react-refresh-webpack-plugin@0.3.3 - @lynx-js/use-sync-external-store@1.5.0 ## @lynx-js/react-alias-rsbuild-plugin@0.10.4 ### Patch Changes - Replace `enhanced-resolve` with `unrs-resolver` ([#936](#936)) ## @lynx-js/testing-environment@0.1.1 ### Patch Changes - Fix `getJSContext` or `getCoreContext` is not a function. ([#1122](#1122)) ## @lynx-js/tailwind-preset@0.0.4 ### Patch Changes - Avoid publishing test files. ([#1125](#1125)) ## @lynx-js/offscreen-document@0.1.2 ### Patch Changes - refactor: make the opcode be a plain array ([#1051](#1051)) \#1042 ## @lynx-js/web-constants@0.14.0 ### Patch Changes - feat: add `_SetSourceMapRelease(errInfo)` MTS API. ([#1118](#1118)) You can get `errInfo.release` through `e.detail.release` in the error event callback of lynx-view. The `_SetSourceMapRelease` function is not complete yet, because it is currently limited by the Web platform and some functions and some props such as `err.stack` do not need to be supported for the time being. - feat: add `_I18nResourceTranslation` api in mts && `init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view. ([#1065](#1065)) `init-i18n-resource` is the complete set of i18nResources that need to be maintained on the container side. Note: You need to pass this value when lynx-view is initialized. You can use `_I18nResourceTranslation` in MTS to get the corresponding i18nResource from `init-i18n-resources`. If it is undefined, the `i18nResourceMissed` event will be dispatched. ```js // ui thread lynxView.initI18nResources = [ { options: { locale: "en", channel: "1", fallback_url: "", }, resource: { hello: "hello", lynx: "lynx web platform1", }, }, ]; lynxView.addEventListener("i18nResourceMissed", (e) => { console.log(e); }); // mts _I18nResourceTranslation({ locale: "en", channel: "1", fallback_url: "", }); ``` - feat: supports `lynx.getI18nResource()` and `onI18nResourceReady` event in bts. ([#1088](#1088)) - `lynx.getI18nResource()` can be used to get i18nResource in bts, it has two data sources: - the result of `_I18nResourceTranslation()` - lynx-view `updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions)`, it will be matched to the correct i8nResource as a result of `lynx.getI18nResource()` - `onI18nResourceReady` event can be used to listen `_I18nResourceTranslation` and lynx-view `updateI18nResources` execution. - refactor: make the opcode be a plain array ([#1051](#1051)) \#1042 - feat: add `updateI18nResources` method of lynx-view. ([#1085](#1085)) Now you can use `updateI18nResources` to update i18nResources, and then use \_I18nResourceTranslation() to get the updated result. - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.14.0 ## @lynx-js/web-core-server@0.14.0 ### Patch Changes - feat: add `_SetSourceMapRelease(errInfo)` MTS API. ([#1118](#1118)) You can get `errInfo.release` through `e.detail.release` in the error event callback of lynx-view. The `_SetSourceMapRelease` function is not complete yet, because it is currently limited by the Web platform and some functions and some props such as `err.stack` do not need to be supported for the time being. - feat: add `_I18nResourceTranslation` api in mts && `init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view. ([#1065](#1065)) `init-i18n-resource` is the complete set of i18nResources that need to be maintained on the container side. Note: You need to pass this value when lynx-view is initialized. You can use `_I18nResourceTranslation` in MTS to get the corresponding i18nResource from `init-i18n-resources`. If it is undefined, the `i18nResourceMissed` event will be dispatched. ```js // ui thread lynxView.initI18nResources = [ { options: { locale: "en", channel: "1", fallback_url: "", }, resource: { hello: "hello", lynx: "lynx web platform1", }, }, ]; lynxView.addEventListener("i18nResourceMissed", (e) => { console.log(e); }); // mts _I18nResourceTranslation({ locale: "en", channel: "1", fallback_url: "", }); ``` ## @lynx-js/web-elements@0.7.6 ### Patch Changes - fix: incorrect syntax for x-canvas part ([#1067](#1067)) - feat: x-input && x-textarea add attribute input-filter, which can filter input value. ([#1037](#1037)) - fix: incorrect top style of x-foldview-slot-ng if the toolbar is wrapped in lynx-wrapper ([#1101](#1101)) - perf: add loading="lazy" for image element ([#1056](#1056)) <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading> - fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent. ([#1069](#1069)) - Updated dependencies \[[`62d1078`](62d1078)]: - @lynx-js/web-elements-template@0.7.6 ## @lynx-js/web-elements-template@0.7.6 ### Patch Changes - perf: add loading="lazy" for image element ([#1056](#1056)) <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading> ## @lynx-js/web-mainthread-apis@0.14.0 ### Patch Changes - feat: add `_SetSourceMapRelease(errInfo)` MTS API. ([#1118](#1118)) You can get `errInfo.release` through `e.detail.release` in the error event callback of lynx-view. The `_SetSourceMapRelease` function is not complete yet, because it is currently limited by the Web platform and some functions and some props such as `err.stack` do not need to be supported for the time being. - feat: add `_I18nResourceTranslation` api in mts && `init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view. ([#1065](#1065)) `init-i18n-resource` is the complete set of i18nResources that need to be maintained on the container side. Note: You need to pass this value when lynx-view is initialized. You can use `_I18nResourceTranslation` in MTS to get the corresponding i18nResource from `init-i18n-resources`. If it is undefined, the `i18nResourceMissed` event will be dispatched. ```js // ui thread lynxView.initI18nResources = [ { options: { locale: "en", channel: "1", fallback_url: "", }, resource: { hello: "hello", lynx: "lynx web platform1", }, }, ]; lynxView.addEventListener("i18nResourceMissed", (e) => { console.log(e); }); // mts _I18nResourceTranslation({ locale: "en", channel: "1", fallback_url: "", }); ``` - feat: supports `lynx.getI18nResource()` and `onI18nResourceReady` event in bts. ([#1088](#1088)) - `lynx.getI18nResource()` can be used to get i18nResource in bts, it has two data sources: - the result of `_I18nResourceTranslation()` - lynx-view `updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions)`, it will be matched to the correct i8nResource as a result of `lynx.getI18nResource()` - `onI18nResourceReady` event can be used to listen `_I18nResourceTranslation` and lynx-view `updateI18nResources` execution. - feat: add `updateI18nResources` method of lynx-view. ([#1085](#1085)) Now you can use `updateI18nResources` to update i18nResources, and then use \_I18nResourceTranslation() to get the updated result. - fix: `decodeCssInJs` will not throw error. ([#1120](#1120)) Before this pr, decoding css will be strictly executed according to cssInfo, and an error will be thrown if data that does not meet the requirements is encountered. Now it is changed to console.warn, which will not block rendering. - Updated dependencies \[[`25a04c9`](25a04c9), [`0dbb8b1`](0dbb8b1), [`f99de1e`](f99de1e), [`873a285`](873a285), [`afacb2c`](afacb2c), [`7e73450`](7e73450)]: - @lynx-js/web-constants@0.14.0 - @lynx-js/web-style-transformer@0.3.1 ## @lynx-js/web-platform-rsbuild-plugin@0.1.1 ### Patch Changes - Fix build on Windows ([#1048](#1048)) ## @lynx-js/web-style-transformer@0.3.1 ### Patch Changes - fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent. ([#1069](#1069)) ## @lynx-js/web-worker-runtime@0.14.0 ### Patch Changes - fix: The parameter config of loadCard needs to add updateData, otherwise some event binding will fail when enableJSDataProcessor is turned on. ([#1077](#1077)) - feat: add `_I18nResourceTranslation` api in mts && `init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view. ([#1065](#1065)) `init-i18n-resource` is the complete set of i18nResources that need to be maintained on the container side. Note: You need to pass this value when lynx-view is initialized. You can use `_I18nResourceTranslation` in MTS to get the corresponding i18nResource from `init-i18n-resources`. If it is undefined, the `i18nResourceMissed` event will be dispatched. ```js // ui thread lynxView.initI18nResources = [ { options: { locale: "en", channel: "1", fallback_url: "", }, resource: { hello: "hello", lynx: "lynx web platform1", }, }, ]; lynxView.addEventListener("i18nResourceMissed", (e) => { console.log(e); }); // mts _I18nResourceTranslation({ locale: "en", channel: "1", fallback_url: "", }); ``` - feat: supports `lynx.getI18nResource()` and `onI18nResourceReady` event in bts. ([#1088](#1088)) - `lynx.getI18nResource()` can be used to get i18nResource in bts, it has two data sources: - the result of `_I18nResourceTranslation()` - lynx-view `updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions)`, it will be matched to the correct i8nResource as a result of `lynx.getI18nResource()` - `onI18nResourceReady` event can be used to listen `_I18nResourceTranslation` and lynx-view `updateI18nResources` execution. - feat: add `updateI18nResources` method of lynx-view. ([#1085](#1085)) Now you can use `updateI18nResources` to update i18nResources, and then use \_I18nResourceTranslation() to get the updated result. - Updated dependencies \[[`25a04c9`](25a04c9), [`0dbb8b1`](0dbb8b1), [`f99de1e`](f99de1e), [`873a285`](873a285), [`afacb2c`](afacb2c), [`1861cbe`](1861cbe)]: - @lynx-js/web-mainthread-apis@0.14.0 - @lynx-js/web-constants@0.14.0 - @lynx-js/offscreen-document@0.1.2 - @lynx-js/web-worker-rpc@0.14.0 ## @lynx-js/react-webpack-plugin@0.6.16 ### Patch Changes - Supports `@lynx-js/template-webpack-plugin` 0.8.0. ([#1033](#1033)) - Support `@lynx-js/react` v0.110.0. ([#770](#770)) - Keep snapshot id unchanged on Windows. ([#1050](#1050)) - Fix lazy bundle name on Windows. ([#1060](#1060)) ## @lynx-js/rspeedy@0.9.10 ## upgrade-rspeedy@0.9.10 ## @lynx-js/web-worker-rpc@0.14.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Summary
Fix a problem causing
MainThreadRefs to not be updated correctly during hydration when they are set tomain-thread:refs.This is caused by a mixed order of MTS hydration and
main-thread:reftriggering. Therefore, we ensure that hydration completes first before triggering references.Fix #1046
Checklist