Migrate to pnpm catalogs

.github/workflows/ci.yml

@@ -33,24 +33,30 @@ jobs:
       - uses: actions/checkout@v4
       - id: configurepages
         uses: actions/configure-pages@v5
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
-          cache: "npm"
-      - run: npm ci
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
       - uses: rharkor/caching-for-turbo@v1.5
 
+      #
+      # Lint
+      #
+      - run: pnpm lint:versions
+
       #
       # Test
       #
-      # - run: npm test
+      # - run: pnpm test
       #   env:
       #     BASE_PATH: ${{ steps.configurepages.outputs.base_path }}
 
       #
       # Build (only for pushes on main)
       #
-      - run: npm run build
+      - run: pnpm build
         if: github.event_name != 'pull_request'
         env:
           BASE_PATH: ${{ steps.configurepages.outputs.base_path }}

.syncpackrc.json

@@ -0,0 +1,59 @@
+{
+  "versionGroups": [
+    {
+      "label": "Demos must use identical versions of shared dependencies",
+      "packages": ["@demo/**"],
+      "dependencies": [
+        "react",
+        "react-dom",
+        "three",
+        "@react-three/fiber",
+        "@react-three/drei",
+        "@react-three/postprocessing",
+        "@react-three/rapier",
+        "@react-three/cannon",
+        "@react-three/csg",
+        "@pmndrs/branding",
+        "@pmndrs/assets",
+        "@react-spring/three",
+        "@react-spring/web",
+        "framer-motion",
+        "zustand",
+        "valtio",
+        "leva",
+        "maath",
+        "postprocessing",
+        "r3f-perf",
+        "lamina",
+        "three-stdlib",
+        "meshline",
+        "styled-components",
+        "react-colorful",
+        "react-icons",
+        "antd",
+        "@headlessui/react",
+        "@heroicons/react",
+        "wouter",
+        "@splinetool/loader",
+        "@splinetool/r3f-spline",
+        "nice-color-palettes",
+        "lodash-es",
+        "@babel/runtime",
+        "babel-plugin-glsl",
+        "@types/react",
+        "@types/react-dom",
+        "@types/three",
+        "@vitejs/plugin-react",
+        "typescript",
+        "vite"
+      ],
+      "policy": "sameRange"
+    },
+    {
+      "label": "Workspace deps use workspace protocol",
+      "dependencies": ["@demo/**"],
+      "dependencyTypes": ["prod"],
+      "policy": "sameRange"
+    }
+  ]
+}

README.md

@@ -23,32 +23,23 @@ Prerequisites:
   nb: if you want this node version to be your default nvm's one:
   `nvm alias default node`
 
-- Install [PNPM](https://pnpm.io/installation#using-corepack) - Package Manager,
-  with:
-
-  ```sh
-  $ corepack enable
-  $ corepack prepare --activate # it reads "packageManager"
-  $ npm -v # make sure your version satisfies package.json#engines.npm
-  ```
-
 ```
-$ npm ci
+$ pnpm install
 ```
 
 # dev
 
 ```sh
-$ npm run dev
+$ pnpm dev
 ```
 
 # build
 
 ```sh
-$ npm run build
+$ pnpm build
 ```
 
-NB: `npm run build -- --force` to ignore turbo cache
+NB: `pnpm build --force` to ignore turbo cache
 
 Then `npx serve out`.
 
@@ -73,7 +64,7 @@ This will:
 > debug purposes(to be 1:1 with GitHub pages) you can:
 >
 > ```sh
-> $ BASE_PATH=/examples BASE_URL=http://localhost:4000 npm run build
+> $ BASE_PATH=/examples BASE_URL=http://localhost:4000 pnpm build
 > $ npx serve out -p 4000
 > ```
 
@@ -82,17 +73,17 @@ This will:
 # test
 
 ```sh
-$ npm test
+$ pnpm test
 ```
 
-To update the snapshots: `npm test -- -- --update-snapshots`
+To update the snapshots: `pnpm test -- -- --update-snapshots`
 
 <details>
 
 You can also:
 
 ```sh
-$ BASE_PATH=/examples npm test
+$ BASE_PATH=/examples pnpm test
 ```
 
 </details>
@@ -110,16 +101,16 @@ $ docker run -it --rm  \
 #
 # echo "Hey, I am acting like the CI"
 #
-# npm ci
-# npm test
+# pnpm install
+# pnpm test
 ```
 
 or in one command to update snapshots:
 
 ```sh
 docker run --rm  \
   -w /app -v "$(pwd)":/app -v /app/node_modules \
-  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh -c "npm ci && npm test -- -- --update-snapshots"
+  mcr.microsoft.com/playwright:v1.45.3-jammy /bin/sh -c "pnpm install && pnpm test -- -- --update-snapshots"
 ```
 
 # Colophon

apps/website/app/demos/[demoname]/Dev.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 export function Dev({ demoname }: { demoname: string }) {
   const { refresh } = useRouter();
 
-  const cmd = `npm run -w demos/${demoname} dev3`;
+  const cmd = `pnpm --filter @demo/${demoname} dev3`;
 
   return (
     <div className="Dev">

apps/website/app/demos/[demoname]/Social.tsx

@@ -17,7 +17,7 @@ export function Social({
 
   const handleClick = async () => {
     await navigator.clipboard.writeText(
-      `cd $(mktemp -d ${demoname}.XXX) && npx -y degit pmndrs/examples/demos/${demoname} . && npm i && npm run dev`
+      `cd $(mktemp -d ${demoname}.XXX) && npx -y degit pmndrs/examples/demos/${demoname} . && npm i && npm run dev`,
     );
     setCopied(true);
   };

apps/website/components/Image.tsx

@@ -1,9 +1,9 @@
-import NextImage, { ImageProps } from 'next/image'
+import NextImage, { ImageProps } from "next/image";
 
-const basePath = process.env.BASE_PATH
+const basePath = process.env.BASE_PATH;
 
 const Image = ({ src, ...rest }: ImageProps) => (
-  <NextImage src={`${basePath || ''}${src}`} {...rest} />
-)
+  <NextImage src={`${basePath || ""}${src}`} {...rest} />
+);
 
-export default Image
+export default Image;

apps/website/components/Nav.tsx

@@ -21,7 +21,7 @@ export default function Nav({
 }: { demos: ReturnType<typeof getDemos> } & ComponentProps<"nav">) {
   const ulRef = useRef<ElementRef<"ul">>(null);
   const lisRef = useRef(
-    Array.from({ length: demos.length }).map(() => createRef<HTMLLIElement>())
+    Array.from({ length: demos.length }).map(() => createRef<HTMLLIElement>()),
   );
 
   const { demoname } = useParams();