#Interface: CompatVisitorConfig

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.

#Properties

#addComponentElement

addComponentElement: boolean | AddComponentElementConfig

Controls whether to add wrapper elements for components

#Default Value

false

#Examples

Add a <view> wrapper element for all components during runtime.

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        addComponentElement: true
      },
    })
  ],
})

Only add component element during compilation. Note that this only take effects on Component imported from CompatVisitorConfig.oldRuntimePkg.

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        addComponentElement: { compilerOnly: true }
      },
    })
  ],
})

#additionalComponentAttributes

additionalComponentAttributes: string[]

Specifies additional component attributes list, these attributes will be passed to the wrapped <view> instead of the component.

#Default Value

[]

#Remarks

This only takes effect when CompatVisitorConfig.addComponentElement is enabled.

#Example

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']
      },
    })
  ],
})

#componentsPkg

componentsPkg: string[]

Specifies the list of component package names that need compatibility processing

#Default Value

['@lynx-js/react-components']

#Example

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']
      },
    })
  ],
})

#darkMode?

optional darkMode?: boolean | DarkModeConfig

Dark mode configuration

#Deprecated

#Default Value

undefined

#Example

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        darkMode: true
      },
    })
  ],
})

#disableDeprecatedWarning

disableDeprecatedWarning: boolean

Whether to disable deprecated warnings

#Default Value

false

#Example

Disable all the DEPRECATED: warnings.

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        disableDeprecatedWarning: true
      },
    })
  ],
})

#legacySlot?

optional legacySlot?: boolean

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

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        legacySlot: true,
      },
    })
  ],
})

#Default Value

false

#newRuntimePkg

newRuntimePkg: string

Specifies the new runtime package name

#Default Value

'@lynx-js/react'

#Example

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        newRuntimePkg: '@my-org/react'
      },
    })
  ],
})

#oldRuntimePkg

oldRuntimePkg: string[]

Specifies the list of old runtime package names that need compatibility processing

#Default Value

['@lynx-js/react-runtime']

#Example

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']
      },
    })
  ],
})

#removeComponentAttrRegex?

optional removeComponentAttrRegex?: string

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.

#Default Value

undefined

#Example

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        removeComponentAttrRegex: '^data-test-'
      },
    })
  ],
})

#simplifyCtorLikeReactLynx2

simplifyCtorLikeReactLynx2: boolean

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

#Default Value

false

#Example

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      compat: {
        simplifyCtorLikeReactLynx2: true
      },
    })
  ],
})

#transformLegacyEventAttributeNames?

optional transformLegacyEventAttributeNames?: boolean

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.

#Default Value

true