feat(plugin-react): use @lynx-js/type-config for lynx config

.changeset/dirty-paws-train.md

@@ -0,0 +1,22 @@
+---
+"@lynx-js/template-webpack-plugin": minor
+"@lynx-js/react-rsbuild-plugin": minor
+---
+
+Use `@upupming/type-config` for Lynx configuration types. Now you can configure Lynx configurations with type safety and autocompletion in `pluginReactLynx`.
+
+```js
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { defineConfig } from '@lynx-js/rspeedy';
+
+export default defineConfig({
+  plugins: [
+    pluginReactLynx({
+      debugInfoOutside: false,
+      enableICU: true,
+      pipelineSchedulerConfig: 65535,
+      /// ...any options supported by `@upupming/type-config`
+    }),
+  ],
+});
+```

packages/react/transform/index.d.ts

@@ -82,7 +82,7 @@ export interface AddComponentElementConfig {
   compilerOnly: boolean
 }
 /**
- * {@inheritdoc PluginReactLynxOptions.compat}
+ * {@inheritdoc ReactLynxOptions.compat}
  * @public
  */
 export interface CompatVisitorConfig {
@@ -363,7 +363,7 @@ export interface CssScopeVisitorConfig {
   filename: string
 }
 /**
- * {@inheritdoc PluginReactLynxOptions.defineDCE}
+ * {@inheritdoc ReactLynxOptions.defineDCE}
  * @public
  */
 export interface DefineDceVisitorConfig {
@@ -426,7 +426,7 @@ export interface DynamicImportVisitorConfig {
   layer: string
 }
 /**
- * {@inheritdoc PluginReactLynxOptions.extractStr}
+ * {@inheritdoc ReactLynxOptions.extractStr}
  * @public
  */
 export interface ExtractStrConfig {
@@ -465,7 +465,7 @@ export interface RefreshVisitorConfig {
   library?: Array<string>
 }
 /**
- * {@inheritdoc PluginReactLynxOptions.shake}
+ * {@inheritdoc ReactLynxOptions.shake}
  * @public
  */
 export interface ShakeVisitorConfig {

packages/rspeedy/plugin-react/etc/react-rsbuild-plugin.api.md

@@ -5,6 +5,8 @@
 ```ts
 
 import { LAYERS } from '@lynx-js/react-webpack-plugin';
+import type { CompilerOptions as LynxCompilerOptions } from '@upupming/type-config';
+import type { Config as LynxConfig } from '@upupming/type-config';
 import type { RsbuildPlugin } from '@rsbuild/core';
 
 // @public
@@ -46,36 +48,58 @@ export interface ExtractStrConfig {
 
 export { LAYERS }
 
+export { LynxCompilerOptions }
+
+export { LynxConfig }
+
 // @public
 export function pluginReactLynx(userOptions?: PluginReactLynxOptions): RsbuildPlugin[];
 
 // @public
-export interface PluginReactLynxOptions {
+export type PluginReactLynxOptions = Omit<LynxCompilerOptions, keyof ReactLynxDefaultCompilerOptions> & ReactLynxDefaultCompilerOptions & Omit<LynxConfig, keyof ReactLynxDefaultLynxConfig> & ReactLynxDefaultLynxConfig & ReactLynxOptions;
+
+// @public
+export interface ReactLynxDefaultCompilerOptions {
+    debugInfoOutside?: Required<LynxCompilerOptions>['debugInfoOutside'];
+    defaultDisplayLinear?: Required<LynxCompilerOptions>['defaultDisplayLinear'];
+    enableCSSInvalidation?: Required<LynxCompilerOptions>['enableCSSInvalidation'];
+    enableCSSSelector?: Required<LynxCompilerOptions>['enableCSSSelector'];
+    enableRemoveCSSScope?: Required<LynxCompilerOptions>['enableRemoveCSSScope'] | undefined;
+    // @deprecated
+    targetSdkVersion?: Required<LynxCompilerOptions>['targetSdkVersion'];
+}
+
+// @public
+export interface ReactLynxDefaultLynxConfig {
+    enableA11y?: Required<LynxConfig>['enableA11y'];
+    enableAccessibilityElement?: Required<LynxConfig>['enableAccessibilityElement'];
+    // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
+    enableCSSInheritance?: Required<LynxConfig>['enableCSSInheritance'];
+    enableNewGesture?: Required<LynxConfig>['enableNewGesture'];
+    removeDescendantSelectorScope?: Required<LynxConfig>['removeDescendantSelectorScope'];
+}
+
+// @public
+export interface ReactLynxOptions {
     compat?: Partial<CompatVisitorConfig> & {
         disableCreateSelectorQueryIncompatibleWarning?: boolean;
     } | undefined;
-    customCSSInheritanceList?: string[] | undefined;
-    debugInfoOutside?: boolean;
-    defaultDisplayLinear?: boolean;
     defineDCE?: Partial<DefineDceVisitorConfig> | undefined;
-    enableAccessibilityElement?: boolean;
-    enableCSSInheritance?: boolean;
-    enableCSSInvalidation?: boolean;
-    enableCSSSelector?: boolean;
-    enableNewGesture?: boolean;
-    enableRemoveCSSScope?: boolean | undefined;
     enableSSR?: boolean;
     engineVersion?: string;
     // @alpha
     experimental_isLazyBundle?: boolean;
     extractStr?: Partial<ExtractStrConfig> | boolean;
     firstScreenSyncTiming?: 'immediately' | 'jsReady';
-    removeDescendantSelectorScope?: boolean;
     shake?: Partial<ShakeVisitorConfig> | undefined;
-    // @deprecated
-    targetSdkVersion?: string;
 }
 
+// Warning: (ae-forgotten-export) The symbol "RequiredNotUndefined" needs to be exported by the entry point index.d.ts
+// Warning: (ae-missing-release-tag) "ResolvedPluginReactLynxOptions" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type ResolvedPluginReactLynxOptions = Omit<LynxCompilerOptions, keyof ReactLynxDefaultCompilerOptions> & RequiredNotUndefined<ReactLynxDefaultCompilerOptions> & Omit<LynxConfig, keyof ReactLynxDefaultLynxConfig> & RequiredNotUndefined<ReactLynxDefaultLynxConfig> & Required<ReactLynxOptions>;
+
 // @public
 export interface ShakeVisitorConfig {
     pkgName: Array<string>

packages/rspeedy/plugin-react/package.json

@@ -44,7 +44,9 @@
     "@lynx-js/runtime-wrapper-webpack-plugin": "workspace:*",
     "@lynx-js/template-webpack-plugin": "workspace:*",
     "@lynx-js/use-sync-external-store": "workspace:*",
-    "background-only": "workspace:^"
+    "@upupming/type-config": "0.0.1",
+    "background-only": "workspace:^",
+    "object.pick": "^1.3.0"
   },
   "devDependencies": {
     "@lynx-js/react": "workspace:*",
@@ -56,6 +58,7 @@
     "@rsbuild/core": "catalog:rsbuild",
     "@rsbuild/plugin-sass": "1.4.0",
     "@rsbuild/plugin-typed-css-modules": "1.1.1",
+    "@types/object.pick": "^1.3.4",
     "rsbuild-plugin-arethetypeswrong": "0.1.1",
     "rsbuild-plugin-publint": "0.3.3",
     "source-map": "^0.7.6",

packages/rspeedy/plugin-react/src/css.ts

@@ -13,11 +13,11 @@ import type {
 } from '@lynx-js/css-extract-webpack-plugin'
 import { LAYERS } from '@lynx-js/react-webpack-plugin'
 
-import type { PluginReactLynxOptions } from './pluginReactLynx.js'
+import type { ResolvedPluginReactLynxOptions } from './pluginReactLynx.js'
 
 export function applyCSS(
   api: RsbuildPluginAPI,
-  options: Required<PluginReactLynxOptions>,
+  options: ResolvedPluginReactLynxOptions,
 ): void {
   const {
     enableRemoveCSSScope,

packages/rspeedy/plugin-react/src/entry.ts

@@ -9,6 +9,8 @@ import type {
   RsbuildPluginAPI,
   Rspack,
 } from '@rsbuild/core'
+import { compilerOptionsKeys, configKeys } from '@upupming/type-config'
+import pick from 'object.pick'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 
 import { LAYERS, ReactWebpackPlugin } from '@lynx-js/react-webpack-plugin'
@@ -20,7 +22,7 @@ import {
   WebEncodePlugin,
 } from '@lynx-js/template-webpack-plugin'
 
-import type { PluginReactLynxOptions } from './pluginReactLynx.js'
+import type { ResolvedPluginReactLynxOptions } from './pluginReactLynx.js'
 
 const PLUGIN_NAME_REACT = 'lynx:react'
 const PLUGIN_NAME_TEMPLATE = 'lynx:template'
@@ -33,26 +35,16 @@ const EMPTY_HASH = ''
 
 export function applyEntry(
   api: RsbuildPluginAPI,
-  options: Required<PluginReactLynxOptions>,
+  options: ResolvedPluginReactLynxOptions,
 ): void {
   const {
     compat,
-    customCSSInheritanceList,
-    debugInfoOutside,
-    defaultDisplayLinear,
-    enableAccessibilityElement,
-    enableCSSInheritance,
-    enableCSSInvalidation,
-    enableCSSSelector,
-    enableNewGesture,
-    enableRemoveCSSScope,
     firstScreenSyncTiming,
     enableSSR,
-    removeDescendantSelectorScope,
-    targetSdkVersion,
     extractStr: originalExtractStr,
-
     experimental_isLazyBundle,
+
+    ...otherOptions
   } = options
 
   const { config, logger } = api.useExposed<ExposedAPI>(
@@ -169,21 +161,11 @@ export function applyEntry(
             DEFAULT_DIST_PATH_INTERMEDIATE,
             entryName,
           ),
-          customCSSInheritanceList,
-          debugInfoOutside,
-          defaultDisplayLinear,
-          enableA11y: true,
-          enableAccessibilityElement,
-          enableCSSInheritance,
-          enableCSSInvalidation,
-          enableCSSSelector,
-          enableNewGesture,
-          enableRemoveCSSScope: enableRemoveCSSScope ?? true,
-          removeDescendantSelectorScope,
-          targetSdkVersion,
-
           experimental_isLazyBundle,
           cssPlugins: [],
+
+          ...pick(otherOptions, compilerOptionsKeys),
+          ...pick(otherOptions, configKeys),
         }])
         .end()
     })
@@ -221,7 +203,7 @@ export function applyEntry(
               return name
             })
           },
-          targetSdkVersion,
+          targetSdkVersion: otherOptions.targetSdkVersion,
           // Inject runtime wrapper for all `.js` but not `main-thread.js` and `main-thread.[hash].js`.
           test: /^(?!.*main-thread(?:\.[A-Fa-f0-9]*)?\.js$).*\.js$/,
           experimental_isLazyBundle,

packages/rspeedy/plugin-react/src/generator.ts

@@ -5,11 +5,11 @@ import type { RsbuildPluginAPI } from '@rsbuild/core'
 
 import { LAYERS } from '@lynx-js/react-webpack-plugin'
 
-import type { PluginReactLynxOptions } from './pluginReactLynx.js'
+import type { ResolvedPluginReactLynxOptions } from './pluginReactLynx.js'
 
 export function applyGenerator(
   api: RsbuildPluginAPI,
-  options: Required<PluginReactLynxOptions>,
+  options: ResolvedPluginReactLynxOptions,
 ): void {
   api.modifyBundlerChain({
     order: 'pre',

packages/rspeedy/plugin-react/src/index.ts

@@ -9,7 +9,15 @@
  */
 
 export { pluginReactLynx } from './pluginReactLynx.js'
-export type { PluginReactLynxOptions } from './pluginReactLynx.js'
+export type {
+  PluginReactLynxOptions,
+  ResolvedPluginReactLynxOptions,
+  LynxCompilerOptions,
+  ReactLynxDefaultCompilerOptions,
+  LynxConfig,
+  ReactLynxDefaultLynxConfig,
+  ReactLynxOptions,
+} from './pluginReactLynx.js'
 
 export type {
   AddComponentElementConfig,

packages/rspeedy/plugin-react/src/loaders.ts

@@ -5,11 +5,11 @@ import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core'
 
 import { LAYERS, ReactWebpackPlugin } from '@lynx-js/react-webpack-plugin'
 
-import type { PluginReactLynxOptions } from './pluginReactLynx.js'
+import type { ResolvedPluginReactLynxOptions } from './pluginReactLynx.js'
 
 export function applyLoaders(
   api: RsbuildPluginAPI,
-  options: Required<PluginReactLynxOptions>,
+  options: ResolvedPluginReactLynxOptions,
 ): void {
   const {
     compat,