Skip to content

fix(react/runtime): do some global var initialize in hydrate #461

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

Merged
merged 1 commit into from
Apr 3, 2025

Conversation

hzy
Copy link
Collaborator

@hzy hzy commented Apr 3, 2025

Summary

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

Copy link

changeset-bot bot commented Apr 3, 2025

🦋 Changeset detected

Latest commit: 59640d0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@lynx-js/react Patch

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

Copy link

codecov bot commented Apr 3, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@hzy hzy requested review from Yradex and Copilot and removed request for Yradex April 3, 2025 09:06
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR addresses a runtime issue by resetting global variables during the hydration process to prevent errors such as "cannot read property '-21' of undefined".

  • Added a clearPage() function to reset global state in snapshot.ts.
  • Introduced a call to resetJSReady() and setupPage() in the native call sequence.
  • Updated tests and changeset documentation to reflect these changes.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
packages/react/runtime/src/snapshot.ts Added clearPage() to reset __page and __pageId.
packages/react/runtime/src/lynx/calledByNative.ts Inserted resetJSReady() and setupPage() into hydration.
packages/react/runtime/test/ssr.test.jsx Updated tests to verify proper global variable handling.
.changeset/icy-parrots-stare.md Updated changeset notes describing the global var fix.
Comments suppressed due to low confidence (2)

packages/react/runtime/src/snapshot.ts:42

  • Using chained type assertions to reset __page might mask potential type issues. Consider using a more type-safe approach, such as assigning null if FiberElement supports it.
  __page = undefined as unknown as FiberElement;

.changeset/icy-parrots-stare.md:5

  • [nitpick] Consider revising the changeset message to 'Initialize global variables during hydration' for improved clarity and grammatical correctness.
Do some global var initialize in hydrate, which fixes error like `cannot read property '-21' of undefined` and some style issue.

Copy link

codspeed-hq bot commented Apr 3, 2025

CodSpeed Performance Report

Merging #461 will not alter performance

Comparing hzy:p/hzy/ssr-setupPage (59640d0) with main (e2ec941)

Summary

✅ 1 untouched benchmarks

@hzy hzy added this pull request to the merge queue Apr 3, 2025
Merged via the queue into lynx-family:main with commit eb54810 Apr 3, 2025
20 of 22 checks passed
@hzy hzy deleted the p/hzy/ssr-setupPage branch April 3, 2025 10:01
colinaaa pushed a commit that referenced this pull request Apr 5, 2025
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/rspeedy@0.9.0

### Minor Changes

- Bundle Rspeedy with Rslib for faster start-up times.
([#395](#395))

This would be a **BREAKING CHANGE** for using [global version of
Rspeedy](https://lynxjs.org/rspeedy/cli#using-the-global-rspeedy-version).

Please ensure that you update your globally installed version of
Rspeedy:

    ```bash
    npm install --global @lynx-js/rspeedy@latest
    ```

- Bump Rsbuild v1.3.2 with Rspack v1.3.1
([#446](#446))

- **BREAKING CHANGE**: Added explicit TypeScript peer dependency
requirement of 5.1.6 - 5.8.x.
([#480](#480))

This formalizes the existing TypeScript version requirement in
`peerDependencies` (marked as optional since it is only needed for
TypeScript configurations). The actual required TypeScript version has
not changed.

Note: This may cause installation to fail if you have strict peer
dependency checks enabled.

Node.js v22.7+ users can bypass TypeScript installation using
`--experimental-transform-types` or `--experimental-strip-types` flags.
Node.js v23.6+ users don't need any flags. See [Node.js -
TypeScript](https://nodejs.org/api/typescript.html) for details.

### Patch Changes

- Support cli flag `--base` to specify the base path of the server.
([#387](#387))

- Support cli option `--environment` to specify the name of environment
to build ([#462](#462))

- Select the most appropriate network interface.
([#457](#457))

This is a port of
[webpack/webpack-dev-server#5411](webpack/webpack-dev-server#5411).

- Support Node.js v23.6+ native TypeScript.
([#481](#481))

See [Node.js - TypeScript](https://nodejs.org/api/typescript.html) for
more details.

- Support cli option `--env-mode` to specify the env mode to load the
`.env.[mode]` file.
([#453](#453))

- Support `dev.hmr` and `dev.liveReload`.
([#458](#458))

- Updated dependencies
\[[`df63722`](df63722),
[`df63722`](df63722)]:
    -   @lynx-js/chunk-loading-webpack-plugin@0.2.0

## @lynx-js/chunk-loading-webpack-plugin@0.2.0

### Minor Changes

- **BREAKING CHANGE**: Requires `@rspack/core` v1.3.0.
([#400](#400))

- **BREAKING CHANGE**: Remove the deprecated `ChunkLoadingRspackPlugin`,
use `ChunkLoadingWebpackPlugin` with `output.chunkLoading: 'lynx'`
instead. ([#400](#400))

    ```js
import { ChunkLoadingWebpackPlugin } from
"@lynx-js/chunk-loading-webpack-plugin";

    export default {
      output: {
        chunkLoading: "lynx",
      },
      plugins: [new ChunkLoadingWebpackPlugin()],
    };
    ```

## @lynx-js/react@0.106.3

### Patch Changes

- Do some global var initialize in hydrate, which fixes error like
`cannot read property '-21' of undefined` and some style issue.
([#461](#461))

- fix: ensure ref lifecycle events run after firstScreen in the
background thread
([#434](#434))

This patch fixes an issue where ref lifecycle events were running before
firstScreen events in the background thread async render mode, which
could cause refs to be undefined when components try to access them.

## @lynx-js/qrcode-rsbuild-plugin@0.3.5

### Patch Changes

- Build with Rslib
([#396](#396))

## @lynx-js/react-rsbuild-plugin@0.9.5

### Patch Changes

- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix
pseudo-class (such as `:active`) not working in HMR.
([#435](#435))

- Disable `module.generator.json.JSONParse` option as it increases the
bundle size of `main-thread.js`. For more detail, please see this
[issue](webpack/webpack#19319).
([#402](#402))

- Updated dependencies
\[[`3e7988f`](3e7988f),
[`7243242`](7243242)]:
    -   @lynx-js/css-extract-webpack-plugin@0.5.3
    -   @lynx-js/template-webpack-plugin@0.6.8
    -   @lynx-js/react-alias-rsbuild-plugin@0.9.5
    -   @lynx-js/react-refresh-webpack-plugin@0.3.2
    -   @lynx-js/react-webpack-plugin@0.6.10
    -   @lynx-js/web-webpack-plugin@0.6.3

## @lynx-js/web-constants@0.10.1

### Patch Changes

- feat: onNapiModulesCall function add new param: `dispatchNapiModules`,
napiModulesMap val add new param: `handleDispatch`.
([#414](#414))

Now you can use them to actively communicate to napiModules (background
thread) in onNapiModulesCall (ui thread).

-   Updated dependencies \[]:
    -   @lynx-js/web-worker-rpc@0.10.1

## @lynx-js/web-core@0.10.1

### Patch Changes

- docs: fix documents about lynx-view's properties
([#412](#412))

    Attributes should be hyphen-name: 'init-data', 'global-props'.

    now all properties has corresponding attributes.

- feat: onNapiModulesCall function add new param: `dispatchNapiModules`,
napiModulesMap val add new param: `handleDispatch`.
([#414](#414))

Now you can use them to actively communicate to napiModules (background
thread) in onNapiModulesCall (ui thread).

- Updated dependencies
\[[`1af3b60`](1af3b60)]:
    -   @lynx-js/web-constants@0.10.1
    -   @lynx-js/web-worker-runtime@0.10.1
    -   @lynx-js/web-worker-rpc@0.10.1

## @lynx-js/web-elements@0.5.3

### Patch Changes

- feat: add `layoutchange` event support for x-view and x-text
([#408](#408))

## @lynx-js/web-mainthread-apis@0.10.1

### Patch Changes

- Updated dependencies
\[[`1af3b60`](1af3b60)]:
    -   @lynx-js/web-constants@0.10.1

## @lynx-js/web-worker-runtime@0.10.1

### Patch Changes

- feat: onNapiModulesCall function add new param: `dispatchNapiModules`,
napiModulesMap val add new param: `handleDispatch`.
([#414](#414))

Now you can use them to actively communicate to napiModules (background
thread) in onNapiModulesCall (ui thread).

- Updated dependencies
\[[`1af3b60`](1af3b60)]:
    -   @lynx-js/web-constants@0.10.1
    -   @lynx-js/web-mainthread-apis@0.10.1
    -   @lynx-js/web-worker-rpc@0.10.1

## @lynx-js/css-extract-webpack-plugin@0.5.3

### Patch Changes

- Fix CSS HMR not working with nested entry name.
([#456](#456))

- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix
pseudo-class (such as `:active`) not working in HMR.
([#435](#435))

## @lynx-js/template-webpack-plugin@0.6.8

### Patch Changes

- fix: add enableCSSInvalidation for encodeCSS of css HMR, this will fix
pseudo-class (such as `:active`) not working in HMR.
([#435](#435))

## create-rspeedy@0.9.0



## @lynx-js/react-alias-rsbuild-plugin@0.9.5



## upgrade-rspeedy@0.9.0



## @lynx-js/web-worker-rpc@0.10.1

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants