feat(react): support `"jsx": "react-jsx"` by Mori-Yang · Pull Request #545 · lynx-family/lynx-stack

Mori-Yang · 2025-04-15T06:51:27Z

Summary

fix #544

Checklist

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

changeset-bot · 2025-04-15T06:51:31Z

🦋 Changeset detected

Latest commit: aa26f1c

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

This PR includes changesets to release 4 packages

Name	Type
@lynx-js/react	Patch
create-rspeedy	Patch
upgrade-rspeedy	Patch
@lynx-js/rspeedy	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

colinaaa

Thank you for your contribution!

We are already having a issue (#359) for using a standalone JSX namespace to prevent conflicts with @types/react.

Would you like to work on this? You may add a namespace JSX in packages/react/runtime/jsx-runtime/index.d.ts just like https://github.com/lynx-family/lynx-examples/blob/df7bb3db9fbd9254ab3c87025fe0eaca0dc2c86c/examples/with-solidjs/packages/solid/jsx-runtime/index.d.ts does.

packages/rspeedy/create-rspeedy/template-react-ts/tsconfig.json

Mori-Yang · 2025-04-15T14:10:30Z

Would you like to work on this?

@colinaaa My pleasure, I'd like to try #359.

My understanding is that there needs to be a @lynx-js/types entry point for @lynx-js/types/jsx-runtime.

I'll make changes under this PR, and if it works, I'll make further changes to the example.

BTW, I noticed that the web side doesn't provide a type for Web Component . I think this needs to be fixed as well, and this can be discussed further.

colinaaa · 2025-04-15T14:23:57Z

BTW, I noticed that the web side doesn't provide a type for Web Component . I think this needs to be fixed as well, and this can be discussed further.

Yeah, we already received feature requests on this. See #394.

We may want to provide an interface IntrinsicElements just like Web and Lynx does.

export interface IntrinsicElements {
  'lynx-view': LynxViewProps
}

Mori-Yang · 2025-04-15T14:34:41Z

I have a few other questions, I'll get in touch with you on discord tomorrow if that's ok ;)

Mori-Yang · 2025-04-16T06:38:16Z

Hi @colinaaa, check out the changes ;)

Let me know if there are any problems.

colinaaa

Basically LGTM.

Would you please also add some tests for the change? You may use the vitest for type testing. See https://vitest.dev/guide/testing-types.html for details.

We will run pnpm -r run test:type on CI.

packages/react/runtime/jsx-dev-runtime/index.d.ts

packages/react/runtime/jsx-runtime/index.d.ts

colinaaa

I think maybe we should also export the JSX namespace from @lynx-js/react. Just like @types/react does.

This is helpful when annotating a function that returns JSX.

import type { JSX } from '@lynx-js/react'

export function App() {
  function renderFoo(): JSX.Element {
    return <text>Foo</text>
  }
  return renderFoo()
}

packages/react/runtime/jsx-dev-runtime/index.d.ts

packages/react/runtime/jsx-runtime/index.d.ts

packages/react/runtime/tsconfig.json

packages/react/runtime/__test__/typecheck/jsx-runtime.test-d.tsx

Mori-Yang · 2025-04-17T04:19:45Z

There are still a few things that I'm not sure about, and I commented in CR

packages/react/runtime/tsconfig.json

packages/react/runtime/__test__/typecheck/jsx-runtime.test-d.tsx

packages/react/runtime/vitest.config.ts

colinaaa

LGTM 👍

Mori-Yang · 2025-04-17T14:47:02Z

BTW, I have two more confusions:

issue : `bind` and `capture-bind` on an element, capture-bind is not working #574
in my monorepo test, every time I need to stop the terminal, repackage Lynx, and run it again. Is there a better solution? And what is the cause of this?

codecov · 2025-04-24T04:01:31Z

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!

colinaaa

Thank you!

## Summary   fix #544 ## Checklist  - [x] Tests updated (or not required). - [ ] Documentation updated (or not required). --------- Signed-off-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com> Co-authored-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>

## Summary   fix lynx-family#544 ## Checklist  - [x] Tests updated (or not required). - [ ] Documentation updated (or not required). --------- Signed-off-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com> Co-authored-by: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>

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.107.0 ### Minor Changes - Some of the timing keys are renamed to match the naming convention of the Lynx Engine. ([#438](#438)) - `update_set_state_trigger` -> `updateSetStateTrigger` - `update_diff_vdom_start` -> `updateDiffVdomStart` - `update_diff_vdom_end` -> `updateDiffVdomEnd` - `diff_vdom_start` -> `diffVdomStart` - `diff_vdom_end` -> `diffVdomEnd` - `pack_changes_start` -> `packChangesStart` - `pack_changes_end` -> `packChangesEnd` - `parse_changes_start` -> `parseChangesStart` - `parse_changes_end` -> `parseChangesEnd` - `patch_changes_start` -> `patchChangesStart` - `patch_changes_end` -> `patchChangesEnd` - `hydrate_parse_snapshot_start` -> `hydrateParseSnapshotStart` - `hydrate_parse_snapshot_end` -> `hydrateParseSnapshotEnd` - `mts_render_start` -> `mtsRenderStart` - `mts_render_end` -> `mtsRenderEnd` ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Refactor: Improved naming for list operation related types. Renamed `UpdateAction` interface to `ListOperations`. ([#592](#592)) - Support using `"jsx": "react-jsx"` along with `"jsxImportSource": "@lynx-js/react"` in `tsconfig.json`. ([#545](#545)) ```json { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@lynx-js/react" } } ``` This configuration enhances TypeScript definitions for standard JSX elements, providing type errors for unsupported elements like `<div>` or `<button>`. - fix: JSX elements with dynamic `key={expr}` now wrapped in `wrapper` element to prevent merging. ([#547](#547)) ## @lynx-js/web-elements@0.7.0 ### Minor Changes - fix: ([#629](#629)) - typo of `initial-scroll-offset` in scroll-view. - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`. ### Patch Changes - fix: x-image border-radius setting has no effect. ([#638](#638)) - perf: late evaluate document.font.ready ([#604](#604)) - perf: improve raw-text performance ([#601](#601)) - fix: the scroll-x field of scroll-view needs to be handled correctly. ([#635](#635)) Before this, scroll-x of '' would result in no scrolling along x-axis. - feat: x-list supports `need-visible-item-info`, now you can get visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event. ([#595](#595)) ## @lynx-js/web-mainthread-apis@0.13.0 ### Minor Changes - fix: mts lynx will no longer provide requireModule, requireModuleAsync methods, which is aligned with Native. ([#537](#537)) ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab)]: - @lynx-js/web-constants@0.13.0 ## @lynx-js/rspeedy@0.9.3 ### Patch Changes - Bump Rsbuild v1.3.11 with Rspack v1.3.6. ([#594](#594)) ## create-rspeedy@0.9.3 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`. ([#545](#545)) ## @lynx-js/qrcode-rsbuild-plugin@0.3.6 ### Patch Changes - Fix the issue where QR code fails to print after initial compilation errors are fixed. ([#610](#610)) ## @lynx-js/react-rsbuild-plugin@0.9.8 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`6a5fc80`](6a5fc80), [`06bb78a`](06bb78a), [`f3afaf6`](f3afaf6), [`bf9c685`](bf9c685), [`5269cab`](5269cab)]: - @lynx-js/react-webpack-plugin@0.6.12 - @lynx-js/web-webpack-plugin@0.6.6 - @lynx-js/template-webpack-plugin@0.6.10 - @lynx-js/react-alias-rsbuild-plugin@0.9.8 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/css-extract-webpack-plugin@0.5.3 ## @lynx-js/react-alias-rsbuild-plugin@0.9.8 ### Patch Changes - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package ## @lynx-js/test-environment@0.0.1 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) ## @lynx-js/offscreen-document@0.0.1 ### Patch Changes - feat: support parentNode ([#625](#625)) ## @lynx-js/web-constants@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-core@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-worker-runtime@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-explorer@0.0.6 ### Patch Changes - fix: allow lynxjs.org to access native modules ([#599](#599)) ## @lynx-js/web-worker-runtime@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/react-webpack-plugin@0.6.12 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) ## @lynx-js/template-webpack-plugin@0.6.10 ### Patch Changes - Fix CSS import order when `enableCSSSelector` is false. ([#609](#609)) When the `enableCSSSelector` option is set to false, style rule priority is inversely related to `@import` order(Lynx CSS engine has the incorrect behavior). Reversing the import order to maintain correct priority is required. For example: ```css @import "0.css"; @import "1.css"; ``` will convert to: ```css @import "1.css"; @import "0.css"; ``` ## @lynx-js/web-webpack-plugin@0.6.6 ### Patch Changes - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue ## upgrade-rspeedy@0.9.3 ## @lynx-js/web-worker-rpc@0.13.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix(create-rspeedy): monorepo type error

5f222c7

Mori-Yang requested a review from colinaaa as a code owner April 15, 2025 06:51

Merge branch 'main' into main

d57d5ff

colinaaa reviewed Apr 15, 2025

View reviewed changes

packages/rspeedy/create-rspeedy/template-react-ts/tsconfig.json Show resolved Hide resolved

Mori-Yang added 3 commits April 16, 2025 14:13

feat(react):standalone namespace JSX

73945ff

chore: import types

95c595a

Merge branch 'main' into main

d266103

Merge branch 'lynx-family:main' into main

f2f7e42

colinaaa reviewed Apr 16, 2025

View reviewed changes

packages/react/runtime/jsx-dev-runtime/index.d.ts Outdated Show resolved Hide resolved

packages/react/runtime/jsx-runtime/index.d.ts Outdated Show resolved Hide resolved

Mori-Yang added 3 commits April 16, 2025 19:33

chore: remove ref types , WIP

8e182eb

Merge branch 'main' of https://github.com/Mori-Yang/lynx-stack

f9d273c

chore: add typecheck

381b5ca

colinaaa reviewed Apr 16, 2025

View reviewed changes

Mori-Yang commented Apr 16, 2025

View reviewed changes

packages/react/runtime/tsconfig.json Show resolved Hide resolved

packages/react/runtime/__test__/typecheck/jsx-runtime.test-d.tsx Show resolved Hide resolved

Mori-Yang added 8 commits April 16, 2025 22:38

Merge branch 'main' into main

9d52ebd

style: remove redundant imports

044353b

chore: export JSX

6ddd58f

Merge branch 'main' into main

751ebfd

chore: some text...

afcb436

Merge branch 'main' of https://github.com/Mori-Yang/lynx-stack

357b7fd

fix: export JSX

306b051

Merge branch 'main' into main

d7826dd

Mori-Yang requested a review from colinaaa April 17, 2025 05:18

colinaaa reviewed Apr 17, 2025

View reviewed changes

packages/react/runtime/vitest.config.ts Outdated Show resolved Hide resolved

fix: .*

dae5e11

colinaaa changed the title ~~fix(react): support "jsx": "react-jsx"~~ feat(react): support "jsx": "react-jsx" Apr 17, 2025

colinaaa previously approved these changes Apr 17, 2025

View reviewed changes

colinaaa added 2 commits April 24, 2025 10:21

fix: eslint import order

65927c5

Merge remote-tracking branch 'upstream/main' into Mori-Yang/main

cd76e63

colinaaa dismissed their stale review via cd76e63 April 24, 2025 02:43

colinaaa added 4 commits April 24, 2025 10:45

fix: change template of testing library

d21f113

ci: run tsc on test-publish

9fbd518

ci: remove tsc check

c08de88

Merge remote-tracking branch 'upstream/main' into Mori-Yang/main

aa26f1c

hzy approved these changes Apr 24, 2025

View reviewed changes

colinaaa enabled auto-merge April 24, 2025 05:06

colinaaa approved these changes Apr 24, 2025

View reviewed changes

colinaaa added this pull request to the merge queue Apr 24, 2025

Merged via the queue into lynx-family:main with commit 8643f34 Apr 24, 2025
28 checks passed

github-actions bot mentioned this pull request Apr 24, 2025

chore: Release 2025-04-27 12:05:46 #597

Merged

colinaaa linked an issue Apr 24, 2025 that may be closed by this pull request

Add more types check for ReactLynx and JSX #360

Closed

colinaaa mentioned this pull request Apr 24, 2025

Add more types check for ReactLynx and JSX #360

Closed

colinaaa linked an issue Apr 24, 2025 that may be closed by this pull request

[Feature]: Use standalone namespace JSX #359

Closed

colinaaa mentioned this pull request Apr 24, 2025

[Feature]: Use standalone namespace JSX #359

Closed

colinaaa mentioned this pull request May 20, 2025

[Refactor] migrate Explorer home to FC and enforce type safety lynx-family/lynx#1157

Merged

2 tasks

This was referenced May 20, 2025

Referencing Rspeedy sections in critical path. lynx-family/lynx-website#176

Open

Guide on how to better use TypeScript with Lynx lynx-family/lynx-website#183

Open

Conversation

Mori-Yang commented Apr 15, 2025 • edited by colinaaa Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

changeset-bot bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

colinaaa left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Mori-Yang commented Apr 15, 2025

Uh oh!

colinaaa commented Apr 15, 2025

Uh oh!

Mori-Yang commented Apr 15, 2025

Uh oh!

Mori-Yang commented Apr 16, 2025

Uh oh!

colinaaa left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

colinaaa left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Mori-Yang commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

colinaaa left a comment

Choose a reason for hiding this comment

Uh oh!

Mori-Yang commented Apr 17, 2025

Uh oh!

codecov bot commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

colinaaa left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Mori-Yang commented Apr 15, 2025 •

edited by colinaaa

Loading

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

Mori-Yang commented Apr 17, 2025 •

edited

Loading

codecov bot commented Apr 24, 2025 •

edited

Loading