feat(react): support "jsx": "react-jsx"

.changeset/orange-days-chew.md

@@ -0,0 +1,17 @@
+---
+"@lynx-js/react": patch
+---
+
+Support using `"jsx": "react-jsx"` along with `"jsxImportSource": "@lynx-js/react"` in `tsconfig.json`.
+
+```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>`.

.changeset/stupid-hounds-reflect.md

@@ -0,0 +1,5 @@
+---
+"create-rspeedy": patch
+---
+
+Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`.

packages/react/runtime/__test__/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+    "noEmit": true,
+  },
+  "include": ["**/*.ts", "**/*.tsx", "../../types/react.d.ts"],
+}

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

@@ -0,0 +1,104 @@
+// Copyright 2024 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.
+import type { JSX } from '../../jsx-runtime/index.js';
+import type { MainThread, NodesRef, Target, TouchEvent } from '@lynx-js/types';
+import { assertType, describe, test } from 'vitest';
+import { useMainThreadRef } from '../../src/lynx-api.js';
+import { useRef } from '../../src/hooks/react.js';
+
+describe('JSX Runtime Types', () => {
+  test('should support basic JSX element', () => {
+    const viewEle = (
+      <view>
+        <text>child node</text>
+      </view>
+    );
+    assertType<JSX.Element>(viewEle);
+  });
+
+  test('should validate the required props for raw-text', () => {
+    // @ts-expect-error: Missing required prop 'text'
+    const shouldError = <raw-text></raw-text>;
+
+    const rawTextELe = <raw-text text={'text'}></raw-text>;
+    assertType<JSX.Element>(rawTextELe);
+  });
+
+  test('should support JSX.Elements', () => {
+    function App() {
+      function renderFoo(): JSX.Element {
+        return <text></text>;
+      }
+      return renderFoo();
+    }
+    assertType<JSX.Element>(App());
+  });
+
+  test('should error on unsupported tags', () => {
+    // @ts-expect-error: Unsupported tag
+    const divElement = <div></div>;
+  });
+
+  test('should support event handlers', () => {
+    const viewWithBind = (
+      <view
+        bindtap={(e) => {
+          assertType<number>(e.detail.x);
+          assertType<TouchEvent>(e);
+        }}
+      >
+      </view>
+    );
+    const viewWithCatch = (
+      <view
+        catchtap={(e) => {
+          assertType<Target>(e.currentTarget);
+          assertType<TouchEvent>(e);
+        }}
+      >
+      </view>
+    );
+    assertType<JSX.Element>(viewWithBind);
+    assertType<JSX.Element>(viewWithCatch);
+  });
+
+  test('should support main-thread event handlers', () => {
+    const viewWithMainThreadEvent = (
+      <view
+        main-thread:bindtap={(e) => {
+          assertType<number>(e.detail.x);
+          assertType<MainThread.Element>(e.currentTarget);
+        }}
+      >
+      </view>
+    );
+    assertType<JSX.Element>(viewWithMainThreadEvent);
+  });
+
+  test('should support ref prop with ref object', () => {
+    const ref = useRef<NodesRef>(null);
+    const viewWithRefObject = <view ref={ref}></view>;
+    assertType<JSX.Element>(viewWithRefObject);
+  });
+
+  test('should support ref prop with function', () => {
+    const ref = useRef<NodesRef>(null);
+    const viewWithRefCallback = (
+      <view
+        ref={(n) => {
+          assertType<NodesRef | null>(n);
+          ref.current = n;
+        }}
+      >
+      </view>
+    );
+    assertType<JSX.Element>(viewWithRefCallback);
+  });
+
+  test('should support main-thread ref', () => {
+    const mtRef = useMainThreadRef<MainThread.Element>(null);
+    const viewWithMainThreadRef = <view main-thread:ref={mtRef}></view>;
+    assertType<JSX.Element>(viewWithMainThreadRef);
+  });
+});

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

@@ -1,5 +1,17 @@
 // Copyright 2024 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.
+import { JSX as _JSX } from 'react';
+
+import { IntrinsicElements as _IntrinsicElements } from '@lynx-js/types';
+
 export { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 export { jsx, jsxs } from 'react/jsx-runtime';
+
+export namespace JSX {
+  interface IntrinsicElements extends _IntrinsicElements {}
+
+  interface IntrinsicAttributes {}
+
+  type Element = _JSX.Element;
+}

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

@@ -1,4 +1,16 @@
 // Copyright 2024 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.
+import { JSX as _JSX } from 'react';
+
+import { IntrinsicElements as _IntrinsicElements } from '@lynx-js/types';
+
 export { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+export namespace JSX {
+  interface IntrinsicElements extends _IntrinsicElements {}
+
+  interface IntrinsicAttributes {}
+
+  type Element = _JSX.Element;
+}

packages/react/runtime/package.json

@@ -15,7 +15,8 @@
     "src"
   ],
   "scripts": {
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "test:type": "vitest --typecheck.only"
   },
   "devDependencies": {
     "@lynx-js/react": "workspace:*",

packages/react/runtime/tsconfig.json

@@ -5,7 +5,8 @@
     "outDir": "./lib",
     "baseUrl": "./",
     "rootDir": "./src",
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "./",
   },
   "references": [{
     "path": "../worklet-runtime/tsconfig.json",

packages/react/runtime/vitest.config.ts

@@ -91,6 +91,7 @@ export default defineConfig({
 
         '__test__/page.test.jsx',
         '**/*.d.ts',
+        '**/*.test-d.*',
       ],
       thresholds: {
         lines: 100,

packages/react/types/react.d.ts

@@ -145,3 +145,5 @@ declare module '@lynx-js/types' {
     'reuse-identifier'?: Key;
   }
 }
+
+export type { JSX } from '../runtime/jsx-runtime/index.d.ts';

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

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
-
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
     "module": "node16",
     "moduleResolution": "node16",
 

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

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
 
-    "module": "node16",
+    "module": "node18",
     "moduleResolution": "node16",
 
     "strict": true,

vitest.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
     coverage: {
       exclude: [
         '**/*.d.ts',
+        '**/*.test-d.*',
         '**/vitest.config.ts',
         '**/rslib.config.ts',
         '**/*.bench.js',