Better props validation and standardize component template

[compulim]

Changelog Entry

Changed

• Bumped dependencies to the latest versions, by @compulim in PR #5385, #5400, #5426, and #5476
  • Production dependencies
    • valibot@1.1.0
• Fixed #5476. Modernizing components through memoization and use valibot for props validation, by @compulim

Description

Modernize components by dropping FC<...>, VFC<...>, defaultProps and propTypes, and memoizing components.

Design

• Use valibot to validate props on development build
  • Validation is skipped on production build
• Remove FC<...>, VFC<...>, defaultProps and propTypes
• Export memoized component, prop schema and its input type
• Bump valibot@1.1.0

Template

const myComponentPropsSchema = pipe(
  object({
    someValue: string()
  }),
  readonly()
);

type MyComponentProps = InferInput<typeof myComponentPropsSchema>;

function MyComponent(props: MyComponentProps) {
  const { someValue } = validateProps(myComponentPropsSchema, props);

  // ...
}

export default memo(MyComponent);
export { myComponentPropsSchema, type MyComponentProps };

Validating props

Props are validated only in development mode (until we have a design for production mode.)

There are 2 types of validation:

• Strict isolation: props are validated, and the validated result is a clone to provide extra isolation and support transformation
  • This works best when props need to be transformed
• Validating only: props are validated but not cloned/transformed
  • This works best when props contains array or object which are prone to change on clone

Specific Changes

(See design section)

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[OEvgeny]

I hope it won't affect our perf 🤣

[compulim]

I looked at rendering.profiling.html and the graph didn't looks changed for me. 🙂