React 18 + Autogenererte typer + Lerna

[khtufteland]

Hei,

skulle gjerne brukt ffe med React 18. Er det noen plan om å støtte React 18 i nær framtid? React 17 bør ikke skape mye problemer, men er litt forskjeller i React 18, blant annet at FC komponenten har endres seg som skaper iallefall problemer i Typescript.

Ser at man vedlikeholder deklarasjonsfiler manuelt. Hva synes tenker dere om å autogenerere de ved hjelp av Typescript? https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html Ser iallefall med dette. Mulig man må legge inn litt jsdoc kode for å hjelpe Typescript, og det vil øke byggtiden.

For å ta ned byggtiden er det et par ting vi kan gjøre:

1. Endre Lerna hoisting til npm sin innebyggede (evt. yarn eller pnpm). Lerna bruker ikke egen Hoisting funksjon (https://github.com/lerna/lerna/blob/main/lerna.json#L20)
2. Legge inn caching ved hjelp av Turborepo (https://turborepo.org/).

Noen tanker?

[kwltrs]

Takk for dine innspill, Kjetil. Kan du beskrive problemene man får ifm react 18 slik at vi får løst de? Jeg antok våre react-komponenter fungerte med React 18.

Jeg skal se nærmer på dette med å få typdef fra jsdoc. Det hadde hjulpet med den overhead å holde .js og d.ts i synk.

Byggetid har ikke vært et problem for oss. Så å erstatte lerna-opplegget er ikke en prioritet for oss.

[khtufteland]

Har godt gjennom feilmeldingene litt mer nøye, og har dessverre misforstått noe. Problemet er ikke direkte hos dere, men i to av deres avhengigheter. Det er de lager mange feilmeldinger når vi bruker React 17 eller 18.

...
  └─┬ @sb1/ffe-searchable-dropdown-react 14.0.31
    ├─┬ react-custom-scrollbars 4.2.1
    │ ├── ✕ unmet peer react@"^0.14.0 || ^15.0.0 || ^16.0.0": found 18.2.0
    │ └── ✕ unmet peer react-dom@"^0.14.0 || ^15.0.0 || ^16.0.0": found 18.2.0
    └─┬ react-virtualized 9.22.3
      ├── ✕ unmet peer react@"^15.3.0 || ^16.0.0-alpha": found 18.2.0
      └── ✕ unmet peer react-dom@"^15.3.0 || ^16.0.0-alpha": found 18.2.0
...

Eneste forskjellen jeg vet om som kan påvirke deres kode i React 18 er typen FC som har endret seg, beskrevet her: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc. I denne typen er feltet children tatt vekk. Er brukt noen steder i kodebasen: https://github.com/SpareBank1/designsystem/search?q=FC

Gi gjerne en lyd hvis du vil at jeg skal lage et forslag på typegenerering. Forhåpentligvis vil det ikke gjøre kjøretiden veldig mye verre, men man kan forvente at Typescript bruker lengre tid enn babel.

[pethel]

Vi bruke nå react-custom-scrollbars-2 som støtter react 18 https://github.com/RobPethick/react-custom-scrollbars-2/blob/master/package.json og react-virtualized er fjernet fra prosjeket.

Punt 1 på byggetid er også løst da vi nå bruker npm workspaces istellt for lerna hoisting.