fix(types): allow recursive array of styles

[williamsjokvist]

This eases the style param typing for all components, allowing [Style[], undefined, Style] etc. to be passed. Which is a common pattern in e.g. React Native.

Desired behavior:

function PaddedView({ style, ...rest }: ViewProps) {
  return (
    <View
      style={[
        {
          padding: 12,
        },
        style
      ]}
      {...rest}
    />
  )
}

Before this would give an error, despite the JS working fine.

Type 'Style | Style[] | undefined' is not assignable to type 'Style'.
Type 'undefined' is not assignable to type 'Style'.

To circumvent this, I've seen people do these cumbersome runtime checks, which is not necessary with vanilla JS:

function Root({ style, ...rest }: ViewProps) {
  return (
    <View
      style={[
        {
          padding: 12,
        },
        ...(Array.isArray(style) ? style : [style ?? {}])
      ]}
      {...rest}
    />
  )
}

In my own projects I've added this piece of module augmentation, which is the typing included in this PR:

declare module '@react-pdf/renderer' {
  interface RecursiveArray<T>
    extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}

  type StyleProp<T> = T | RecursiveArray<T | undefined>;

  interface ViewProps {
    style?: StyleProp<Style | Style[]>;
  }
  ...
}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 79f1572

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[tifye]

Looks good to me

[diegomura]

I find cumbersome to have StyleProp<Style | Style[]> repeated everywhere. Maybe we can just export StyleProp to be that instead of using generics?

[williamsjokvist]

For sure @diegomura, I think I thought different components had different style interfaces, like TextStyles, ViewStyles where this generic would make sense, but I see that's not the case. Will fix and update the PR 👍

[williamsjokvist]

Hi, I have updated the PR, please have another look @diegomura

Looks like there's already test coverage for this, it's only unsupported by the typing

react-pdf/packages/layout/tests/steps/resolveStyles.test.ts

Line 56 in 16cf5bd

test('Should resolve page styles array', () => {