Skip to content

Latest commit

 

History

History
39 lines (23 loc) · 2.41 KB

3.x upgrade guide.md

File metadata and controls

39 lines (23 loc) · 2.41 KB

3.x Upgrade Guide

BREAKING

Bring your own polyfills

core-js@2 has been removed from @rjsf/core. See more about the rationale here.

If you're using a framework like Create React App, Gatsby, Next.js, or transpiling code through something like @babel/preset-env, polyfills are already included there and you won't have to do anything.

If you were directly depending on @rjsf/core's @babel/runtime pulling in core-js@2, just npm install core-js and using a side effectful import at the top of your entry point (import 'core-js') might be enough.

For a slightly more elaborate setup, @babel/preset-env is probably a good second choice.

From @babel/preset-env's docs

We leverage [browserslist, compat-table, and electron-to-chromium] to maintain mappings of which version of our supported target environments gained support of a JavaScript syntax or browser feature, as well as a mapping of those syntaxes and features to Babel transform plugins and core-js polyfills.

Typescript usage of withTheme

The typings for withTheme have been updated to more accurately reflect its nature as a factory function that returns a Form component and to properly type the ref forwarded to this component. See more about the changes here

If you're currently using withTheme, the typing for the formData was always any, as the generated Form component was not able to accept a generic argument.

In v3.x these typings will properly infer formData if no type is given, or validate it if one is, similar to how the exported Form from core would work.

You can maintain the old behavior of withTheme, if necessary, by changing usage of your ThemedForm to override the generic for formData with any.

const schema = { ... }
const ThemedForm = withTheme({ ... })
const formData = { ... }

// change this
<ThemedForm schema={schema} formData={formData} />

// to this to override the formData type with any and maintain the v2 behavior
<ThemedForm<any> schema={schema} formData={formData} />