Frontend npm packages ombouwen naar PNPM met strengere regels

[WybeBosch]

Vervolg op #87. Die had ik destijds tussendoor gedaan en weer teruggedraaid omdat het niet af was: de minimum-release-age zelf werkte, maar de uitzondering voor onze eigen @yardinternet/* packages deed niks. Senior zei toen: terugdraaien tot we het in één keer goed doen. Dat pakken we nu op tijdens de hackaton.

Idee: al onze eigen frontend packages op pnpm met strengere regels. Dit moet eerst af, anders kunnen we #139 (pnpm v11) niet fatsoenlijk uitrollen.

Stand van zaken (uitgezocht 16-06):

repo	pnpm?	regels?
toolkit (monorepo)	ja (collega deed dit ~8 juni)	nee, .npmrc staat nog in gitignore
vite-plugin-gutenberg-blocks	ja	nee, .npmrc staat nog in gitignore
gutenberg-packages (monorepo)	nee	nee
brave-frontend-kit	nee	nee
a11y-cookie-yes	nee	nee, stonden er al maar gerevert (commit 61f30cdc)

Dus 3 repos nog migreren, en 4 repos moeten de regels (terug) krijgen. De eslint/prettier/stylelint/vite-configs zitten allemaal in toolkit, dus die zijn met die ene migratie al gedekt. De afhankelijkheden tussen onze packages staan in de comment hieronder.

Aanpak en details staan in de comments hieronder.

[YvetteNikolov]

Belangrijk: niet via .nvmrc, maar via .pnpmworkspaces

[WybeBosch]

Hangt samen met #139 (pnpm v11 + de allowBuilds whitelist). Dit ticket moet eerst af, daarna kan v11 pas breed uitgerold worden.

[WybeBosch]

Aanpak per repo (gutenberg-packages, brave-frontend-kit, a11y-cookie-yes):

• package-lock.json eruit, pnpm-lock.yaml erin (pnpm import + pnpm install)
• packageManager op pnpm@10.x zetten. Voor nu v10, niet v11 (zie pnpm support v11, moeten whitelist toevoegen #139).
• bij de monorepo een pnpm-workspace.yaml toevoegen, kijk naar toolkit voor de publicHoistPattern
• strengere regels toevoegen, en deze keer checken dat de exclude voor @yardinternet/* ook echt werkt
• token-vrije .npmrc committen en uit gitignore halen (toolkit .gitignore:10, gutenberg-packages .gitignore:9)
• CI van npm naar pnpm. Let op de auth met GitHub Packages, toolkit had daar publishConfig voor nodig (commit 27bc7256)

[WybeBosch]

Over de .npmrc en secrets:

Vroeger zat er een token in de .npmrc en stond ie daarom in gitignore. Nu staat dat token alleen nog in de globale ~/.npmrc, dus de .npmrc in de repo heeft geen geheimen meer en kan gewoon mee. Daar zet je alleen de registry-mapping (@yardinternet:registry=...) en de regels in.

Waar de release-age regels precies horen (.npmrc of pnpm-workspace.yaml, en kebab vs camelCase) hangt samen met de v11-migratie. Die knoop hakken we door in #139, hier volgen we dat gewoon.

[WybeBosch]

Waarom v10 en niet meteen v11: in v11 draaien build-scripts niet meer standaard, en onze eigen tooling (vite, toolkit) heeft die nodig. Als we hier al naar v11 springen breekt dat. Dus deze repos eerst netjes op v10, en de v11-stap voor alles tegelijk doen we in #139.

[WybeBosch]

Even de afhankelijkheden tussen onze eigen packages uitgezocht, zodat we niks missen:

• brave-frontend-kit leunt op toolkit + prettier-config (zitten in toolkit, al op pnpm)
• gutenberg-components leunt op gutenberg-hooks (zelfde monorepo, gaat mee in één keer)
• vite-config leunt op vite-plugin-gutenberg-blocks. Dat is een aparte repo die ik eerst over het hoofd zag. Staat al op pnpm, maar mist nog de regels (.npmrc in gitignore).

Verder geen losse Yard-packages in de keten, de rest valt binnen repos die we al te pakken hebben.

Let op bij gutenberg-packages: dat is een monorepo met twee globs, packages/* én packages/deprecated/*. De pnpm-workspace.yaml moet die allebei pakken. Subpackages: block-extensions, block-restrictions, components, hooks, pre-publish-checklist, webpack-loaders, plus onder deprecated nog block-filters, cards, core, editor-components, front-render, gemeenten, google-maps en register-blocks.

[WybeBosch]

Scope hier blijft brave-only. Maar de rest van de yardinternet org staat ook nog op npm (los van toolkit en vite-plugin-gutenberg-blocks). Iets voor een apart ticket.

Nog op npm:

• gutenberg-packages, wp-events (monorepos)
• a11y-cookie-yes, brave-frontend-kit, a11y-toolbar, ai-search, footnotes-to-tooltips, gallery-to-photo-swipe, owc-participation, reactive-search, table-of-contents, webpack-include-packages, zaanstad-subsidiechecker

[WybeBosch]

Aandachtspunten bij het migreren zelf:

• Elke repo heeft z'n eigen pipeline, die moeten we per repo omzetten naar pnpm (npm ci -> pnpm install --frozen-lockfile, setup-pnpm stap, npm run -> pnpm).
• Mogelijk hebben we een publicHoistPattern nodig in de pnpm-workspace.yaml (zoals brave die nu heeft) omdat pnpm strenger is met node_modules. Maar dat hoeft niet per se, hangt per repo af van wat de build/lint tooling nodig heeft. Per repo even draaien en kijken wat er stuk gaat, en dan pas toevoegen.