/** * @packageDocumentation * * A rsbuild plugin that integrates with ReactLynx. */ import { LAYERS } from '@lynx-js/react-webpack-plugin'; import type { LynxTemplatePlugin as LynxTemplatePlugin_2 } from '@lynx-js/template-webpack-plugin'; import type { RsbuildPlugin } from '@rsbuild/core'; import type { TemplateHooks } from '@lynx-js/template-webpack-plugin'; /** * {@inheritdoc CompatVisitorConfig.addComponentElement} * @public */ export declare interface AddComponentElementConfig { /** * @public * Whether to only add component element during compilation * * @example * * Note that this only take effects on `Component` imported from {@link CompatVisitorConfig.oldRuntimePkg}. * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * addComponentElement: { compilerOnly: true } * }, * }) * ], * }) * ``` */ compilerOnly: boolean } /** * {@inheritdoc PluginReactLynxOptions.compat} * @public */ export declare interface CompatVisitorConfig { /** @internal */ target: 'LEPUS' | 'JS' | 'MIXED' /** * @public * Specifies the list of component package names that need compatibility processing * * @defaultValue `['@lynx-js/react-components']` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * componentsPkg: ['@my-org/components', '@legacy/ui-kit'] * }, * }) * ], * }) * ``` */ componentsPkg: Array /** * @public * Specifies the list of old runtime package names that need compatibility processing * * @defaultValue `['@lynx-js/react-runtime']` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * oldRuntimePkg: ['@my-org/runtime', '@legacy/runtime'] * }, * }) * ], * }) * ``` */ oldRuntimePkg: Array /** * @public * Specifies the new runtime package name * * @defaultValue `'@lynx-js/react'` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * newRuntimePkg: '@my-org/react' * }, * }) * ], * }) * ``` */ newRuntimePkg: string /** * @public * Specifies additional component attributes list, these attributes will be passed to the wrapped `` instead of the component. * * @defaultValue `[]` * * @remarks * This only takes effect when {@link CompatVisitorConfig.addComponentElement} is enabled. * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * additionalComponentAttributes: ['custom-attr', 'data-special'] * }, * }) * ], * }) * ``` */ additionalComponentAttributes: Array /** * @public * Controls whether to add wrapper elements for components * * @defaultValue `false` * * @example * * Add a `` wrapper element for all components during runtime. * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * addComponentElement: true * }, * }) * ], * }) * ``` * * @example * * Only add component element during compilation. * Note that this only take effects on `Component` imported from {@link CompatVisitorConfig.oldRuntimePkg}. * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * addComponentElement: { compilerOnly: true } * }, * }) * ], * }) * ``` */ addComponentElement: boolean | AddComponentElementConfig /** * @public * Whether to simplify constructor calls like ReactLynx 2 * * @deprecated * Using `simplifyCtorLikeReactLynx2` is not recommended as it introduces implicit behaviors that can: * * - Make code harder to understand and maintain * * - Create hidden dependencies between components * * - Complicate debugging and testing processes * * Instead, use `background-only` on class methods for explicit and maintainable behavior * * @defaultValue `false` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * simplifyCtorLikeReactLynx2: true * }, * }) * ], * }) * ``` */ simplifyCtorLikeReactLynx2: boolean /** * @public * Whether to transform legacy event attribute names on Lynx elements. * * When enabled, legacy event attributes such as `onClick` and * `onClickCatch` are transformed to `bindtap` and `catchtap`. * Disable this when another transform owns event attribute-name conversion. * * @defaultValue `true` */ transformLegacyEventAttributeNames?: boolean /** * @public * Regular expression used to remove component attributes * * @deprecated It's recommended to use `background-only`. * * If your code depends on this switch, when distributing it to other projects through npm packages or other means, you'll also need to enable this switch. This will lead to the proliferation of switches, which is not conducive to code reuse between different projects. * * @defaultValue `undefined` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * removeComponentAttrRegex: '^data-test-' * }, * }) * ], * }) * ``` */ removeComponentAttrRegex?: string /** * @public * Whether to disable deprecated warnings * * @defaultValue `false` * * @example * * Disable all the `DEPRECATED:` warnings. * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * disableDeprecatedWarning: true * }, * }) * ], * }) * ``` */ disableDeprecatedWarning: boolean /** * @public * @deprecated * Dark mode configuration * * @defaultValue `undefined` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * darkMode: true * }, * }) * ], * }) * ``` */ darkMode?: boolean | DarkModeConfig /** * Compile dynamic children as children + wrapper (the pre-SlotV2 slot * codegen: `Slot`/`Children` dynamic parts rendered through wrapper * elements) instead of the default SlotV2 codegen (`$N` slot props). * * @remarks * * Enable this when the compiled output needs to run on legacy * `@lynx-js/react` runtimes without `SlotV2` support (`< 0.120.0`), * e.g. a standalone lazy bundle consumed by a host App that ships an * older runtime. It only changes the compile output; the runtime * supports both forms. * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * compat: { * legacySlot: true, * }, * }) * ], * }) * ``` * * @defaultValue `false` */ legacySlot?: boolean } declare interface DarkModeConfig { /** * @public * Theme expression to be used for dark mode */ themeExpr: string } /** * {@inheritdoc PluginReactLynxOptions.defineDCE} * @public */ export declare interface DefineDceVisitorConfig { /** * @public * Replaces variables in your code with other values or expressions at compile time. * * @remarks * Caveat: differences between `source.define` * * `defineDCE` happens before transforming `background-only` directives. * So it's useful for eliminating code that is only used in the background from main-thread. * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * defineDCE: { * define: { * __FOO__: 'false', * 'process.env.PLATFORM': '"lynx"', * }, * }, * }) * ], * }) * ``` * * Then, `__FOO__` and `process.env.PLATFORM` could be used in source code. * * ``` * if (process.env.PLATFORM === 'lynx') { * console.log('lynx') * } * * function FooOrBar() { * if (__FOO__) { * return foo * } else { * return bar * } * } * ``` */ define: Record } /** * {@inheritdoc PluginReactLynxOptions.extractStr} * @public */ export declare interface ExtractStrConfig { /** * @public * The minimum length of string literals to be extracted. * * @defaultValue `20` * * @example * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * extractStr: { * strLength: 10, * }, * }) * ], * }) * ``` */ strLength: number /** @internal */ extractedStrArr?: Array } export { LAYERS } export declare interface LynxTemplatePlugin { getLynxTemplatePluginHooks: typeof LynxTemplatePlugin_2.getLynxTemplatePluginHooks; } /** * Create a rsbuild plugin for ReactLynx. * * @example * ```ts * // rsbuild.config.ts * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * export default { * plugins: [pluginReactLynx()] * } * ``` * * @public */ export declare function pluginReactLynx(userOptions?: PluginReactLynxOptions): RsbuildPlugin[]; /** * Options of {@link pluginReactLynx} * * @public */ export declare interface PluginReactLynxOptions { /** * Enable UI source map generation and debug-metadata asset emission. * * @defaultValue `false` */ enableUiSourceMap?: boolean; /** * The `compat` option controls compatibilities with legacy ReactLynx. * * @remarks * * These options should only be used for migrating from ReactLynx2.0 or * targeting legacy ReactLynx3 runtimes. * * @defaultValue `undefined` */ compat?: Partial & { /** * Whether disable runtime warnings about using ReactLynx2.0-incompatible `SelectorQuery` APIs. * * @example * Using the following APIs will have a runtime warning by default: * * ```ts * this.createSelectorQuery() * this.getElementById() * this.getNodeRef() * this.getNodeRefFromRoot() * ``` * * @defaultValue `false` */ disableCreateSelectorQueryIncompatibleWarning?: boolean; } | undefined; /** * When {@link PluginReactLynxOptions.enableCSSInheritance} is enabled, `customCSSInheritanceList` can control which properties are inheritable, not just the default ones. * * @example * * By setting `customCSSInheritanceList: ['direction', 'overflow']`, only the `direction` and `overflow` properties are inheritable. * * ```js * import { defineConfig } from '@lynx-js/rspeedy' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * enableCSSInheritance: true, * customCSSInheritanceList: ['direction', 'overflow'] * }), * ], * } * ``` * * @defaultValue `undefined` */ customCSSInheritanceList?: string[] | undefined; /** * debugInfoOutside controls whether the debug info is placed outside the template. * * @remarks * This is recommended to be set to true to reduce template size. * * @defaultValue `true` * * @public */ debugInfoOutside?: boolean; /** * defaultDisplayLinear controls whether the default value of `display` in CSS is `linear`. * * If `defaultDisplayLinear === false`, the default `display` would be `flex` instead of `linear`. * * @defaultValue `true` */ defaultDisplayLinear?: boolean; /** * enableAccessibilityElement set the default value of `accessibility-element` for all `` elements. * * @defaultValue `false` */ enableAccessibilityElement?: boolean; /** * Transform attribute names on Lynx builtin elements. * * @remarks * * `false` disables the conversion. `true` applies the default rule: * `onClick` becomes `bindtap`, `onCatchTap` becomes `catchtap`, other * `onXXX` names become `bindxxx`, and remaining camelCase names become * dash-case. An object provides serializable custom rules. Exact entries in * `rename` take precedence over `preserve`, followed by the fallback behavior * selected by `mode`. * * Explicit JSX attributes are transformed at compile time. Attributes * supplied through JSX spreads are transformed at runtime with the same * rules. * * @defaultValue `false` * * @experimental */ experimental_transformBuiltinAttributeNames?: boolean | TransformBuiltinAttributeNamesOptions; /** * enableCSSInheritance enables the default inheritance properties. * * @remarks * * The following properties are inherited by default: * * - `direction` * * - `color` * * - `font-family` * * - `font-size` * * - `font-style` * * - `font-weight` * * - `letter-spacing` * * - `line-height` * * - `line-spacing` * * - `text-align` * * - `text-decoration` * * - `text-shadow` * * It is recommended to use with {@link PluginReactLynxOptions.customCSSInheritanceList} to avoid performance issues. * * @defaultValue `false` */ enableCSSInheritance?: boolean; /** * CSS Invalidation refers to the process of determining which elements need to have their styles recalculated when the DOM is updated. * * @example * * If a descendant selector `.a .b` is defined in a CSS file, then when an element's class changes to `.a`, all nodes in its subtree with the className `.b` need to have their styles recalculated. * * @remarks * * When using combinator to determine the styles of various elements (including descendants, adjacent siblings, etc.), it is recommended to enable this feature. Otherwise, only the initial class setting can match the corresponding combinator, and subsequent updates will not recalculate the related styles. * * We find that collecting invalidation nodes and updating them is a relatively time-consuming process. * If there is no such usage and better style matching performance is needed, this feature can be selectively disabled. * * @defaultValue `true` */ enableCSSInvalidation?: boolean; /** * enableCSSSelector controls whether enabling the new CSS implementation. * * @defaultValue `true` * * @public */ enableCSSSelector?: boolean; /** * enableNewGesture enables the new gesture system. * * @defaultValue `false` */ enableNewGesture?: boolean; /** * enableRemoveCSSScope controls whether CSS is restrict to use in the component scope. * * `true`: All CSS files are treated as global CSS. * * `false`: All CSS files are treated as scoped CSS, and only take effect in the component that explicitly imports it. * * `undefined`: Only use scoped CSS for CSS Modules, and treat other CSS files as global CSS. Scoped CSS is faster than global CSS, thus you can use CSS Modules to speedy up your CSS if there are performance issues. * * @defaultValue `true` * * @public */ enableRemoveCSSScope?: boolean | undefined; /** * This flag controls when MainThread (Lepus) transfers control to Background after the first screen * * This flag has three options: * * `"immediately"`: Transfer immediately * * `"jsReady"`: Transfer when background (JS Runtime) is ready * * `"manual"`: Transfer when the business calls the `markFirstScreenSyncReady()` API exported * by `@lynx-js/react`, so the handover timing is fully controlled by the user * * After handing over control, MainThread (Lepus) runtime can no longer respond to data updates, * and data updates will be forwarded to background (JS Runtime) and processed __asynchronously__ * * @defaultValue "immediately" */ firstScreenSyncTiming?: 'immediately' | 'jsReady' | 'manual'; /** * `enableSSR` enable Lynx SSR feature for this build. * * @defaultValue `false` * * @public */ enableSSR?: boolean; /** * removeDescendantSelectorScope is used to remove the scope of descendant selectors. * * @defaultValue `true` */ removeDescendantSelectorScope?: boolean; /** * How main-thread code will be shaken. * * @defaultValue `undefined` */ shake?: Partial | undefined; /** * Like `define` in various bundlers, but this one happens at transform time, and a DCE pass will be performed. * * @defaultValue `undefined` */ defineDCE?: Partial | undefined; /** * `engineVersion` specifies the minimum Lynx Engine version required for an App bundle to function properly. * * @defaultValue `'3.2'` * * @public */ engineVersion?: string; /** * targetSdkVersion is used to specify the minimal Lynx Engine version that a App bundle can run on. * * @defaultValue `'3.2'` * * @public * @deprecated `targetSdkVersion` is now an alias of {@link PluginReactLynxOptions.engineVersion}. Use {@link PluginReactLynxOptions.engineVersion} instead. */ targetSdkVersion?: string; /** * Configure the update mode of `lynx.__globalProps`. * * This flag has two options: * * `'reactive'`: `UpdateGlobalProps` will trigger update automatically. * * `'event'`: `UpdateGlobalProps` will trigger global event and users need to trigger update in the event handler. * * @defaultValue `'reactive'` * @public */ globalPropsMode?: 'reactive' | 'event'; /** * Merge same string literals in JS and Lepus to reduce output bundle size. * Set to `false` to disable. * * @defaultValue false */ extractStr?: Partial | boolean; /** * Generate standalone lazy bundle. * * @defaultValue `false` * * @alpha */ experimental_isLazyBundle?: boolean; /** * Enable Element Template compile and runtime entries. * * @defaultValue `false` * @experimental */ experimental_useElementTemplate?: boolean; /** * Optimize bundle size by removing unused code by Minify.mainThreadOptions and Minify.backgroundOptions. * * When optimizeBundleSize or optimizeBundleSize.mainThread is true, main-thread code will be optimized. * When optimizeBundleSize or optimizeBundleSize.background is true, background code will be optimized. * * @defaultValue `false` * @public */ optimizeBundleSize?: boolean | { mainThread?: boolean; background?: boolean; }; } /** * {@inheritdoc PluginReactLynxOptions.shake} * @public */ export declare interface ShakeVisitorConfig { /** * Package names to identify runtime imports that need to be processed * * @example * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * shake: { * pkgName: ['@lynx-js/react-runtime'] * } * }) * ] * }) * ``` * * @defaultValue `['@lynx-js/react-runtime']` * * @remarks * The provided values will be merged with the default values instead of replacing them. * * @public */ pkgName: Array /** * Properties that should be retained in the component class * * @example * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * shake: { * retainProp: ['myCustomMethod'] * } * }) * ] * }) * ``` * * @defaultValue `['constructor', 'render', 'getDerivedStateFromProps', 'state', 'defaultDataProcessor', 'dataProcessors', 'contextType', 'defaultProps']` * * @remarks * The provided values will be merged with the default values instead of replacing them. * * @public */ retainProp: Array /** * Function names whose calls should be replaced with `undefined` during transformation * * @example * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * shake: { * removeCall: ['useMyCustomEffect'] * } * }) * ] * }) * ``` * * @defaultValue `['useEffect', 'useLayoutEffect', '__runInJS', 'useLynxGlobalEventListener', 'useImperativeHandle']` * * @remarks * The provided values will be merged with the default values instead of replacing them. * * @public */ removeCall: Array /** * Function names whose parameters should be removed during transformation * * @example * ```js * import { defineConfig } from '@lynx-js/rspeedy' * import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin' * * export default defineConfig({ * plugins: [ * pluginReactLynx({ * shake: { * removeCallParams: ['useMyCustomEffect'] * } * }) * ] * }) * ``` * * @defaultValue `[]` * * @remarks * The provided values will be merged with the default values instead of replacing them. * * @public */ removeCallParams: Array } export { TemplateHooks } /** * Serializable rules for transforming builtin element attribute names. * * Exact entries in `rename` take precedence over `preserve`, followed by the * fallback behavior selected by `mode`. * * @public */ export declare interface TransformBuiltinAttributeNamesOptions { /** * The fallback behavior for attribute names not listed in `rename` or * `preserve`. * * `'dash-case'` also applies the default React-style event mappings. * `'mapping-only'` leaves all remaining names unchanged. * * @defaultValue `'dash-case'` */ mode?: 'dash-case' | 'mapping-only' /** * Attribute names that should remain unchanged unless an exact `rename` * entry is also present. */ preserve?: ReadonlyArray /** * Exact mappings from source attribute names to transformed attribute names. */ rename?: Readonly> } export { }