Merge branch 'master' into chromatic-more

Author: abernier

.github/workflows/release.yml

@@ -61,7 +61,7 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: '.nvmrc'
           cache: 'yarn'
       - run: yarn install
       - run: yarn build

.node-version

@@ -0,0 +1 @@
+24.12.0

.nvmrc

@@ -14,6 +14,7 @@ type Props = React.PropsWithChildren<
     cameraPosition?: Vector3
     controls?: boolean
     lights?: boolean
+    backend?: 'webgpu' | 'webgl'
   }
 >
 
@@ -23,21 +24,26 @@ export const Setup = ({
   cameraPosition = new Vector3(-5, 5, 5),
   controls = true,
   lights = true,
+  backend,
   ...restProps
-}: Props) => (
-  <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
-    {children}
-    {lights && (
-      <>
-        <ambientLight intensity={0.8 * Math.PI} />
-        <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
-      </>
-    )}
-    {controls && <OrbitControls makeDefault />}
+}: Props) => {
+  console.log('Current backend in Setup:', backend)
 
-    {isChromatic() && <SayCheese />}
-  </Canvas>
-)
+  return (
+    <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
+      {children}
+      {lights && (
+        <>
+          <ambientLight intensity={0.8 * Math.PI} />
+          <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
+        </>
+      )}
+      {controls && <OrbitControls makeDefault />}
+
+      {isChromatic() && <SayCheese />}
+    </Canvas>
+  )
+}
 
 /**
  * A helper component to wait and pause the frameloop

.storybook/Setup.tsx

@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite'
-import { svg } from './favicon'
+import { svg } from './favicon.ts'
 
 const config: StorybookConfig = {
   staticDirs: ['./public'],

.storybook/main.ts

@@ -7,6 +7,22 @@ import './index.css'
 seedrandom('deterministic-random-for-storybook', { global: true }) // deterministic Math.random()
 
 const preview: Preview = {
+  globalTypes: {
+    backend: {
+      description: 'Backend to use by the renderer',
+      toolbar: {
+        icon: 'cpu',
+        items: [
+          { value: 'webgl', title: 'WebGL' },
+          { value: 'webgpu', title: 'WebGPU' },
+        ],
+      },
+    },
+  },
+  initialGlobals: {
+    backend: 'webgl',
+  },
+
   parameters: {
     layout: 'fullscreen',
   },

.storybook/preview.tsx

@@ -10,8 +10,8 @@ export default {
   title: 'Misc/Example',
   component: Example,
   decorators: [
-    (Story) => (
-      <Setup cameraPosition={new Vector3(1, 2, 4)} cameraFov={60}>
+    (Story, context) => (
+      <Setup cameraPosition={new Vector3(1, 2, 4)} cameraFov={60} backend={context.globals.backend}>
         <Story />
       </Setup>
     ),

.storybook/stories/Example.stories.tsx

@@ -802,8 +802,23 @@ https://pmndrs.github.io/drei
 
 ### INSTALL
 
+Pre-requisites:
+
+- Install [nvm](https://github.com/nvm-sh/nvm), then:
+  ```sh
+  $ nvm install
+  $ nvm use
+  $ node -v # make sure your version satisfies package.json#engines.node
+  ```
+  nb: if you want this node version to be your default nvm's one: `nvm alias default node`
+- Install yarn, with:
+  ```sh
+  $ corepack enable
+  $ corepack prepare --activate # it reads "packageManager"
+  $ yarn -v # make sure your version satisfies package.json#engines.yarn
+  ```
+
 ```sh
-$ corepack enable
 $ yarn install
 ```
 

README.md

@@ -2,6 +2,7 @@ import { fixupConfigRules, fixupPluginRules } from '@eslint/compat'
 import typescriptEslint from '@typescript-eslint/eslint-plugin'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
+import storybook from 'eslint-plugin-storybook'
 import tsParser from '@typescript-eslint/parser'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -20,7 +21,8 @@ export default [
   {
     ignores: ['.storybook/public', '**/dist/', '**/node_modules/', '**/storybook-static/'],
   },
-  ...fixupConfigRules(compat.extends('plugin:react-hooks/recommended', 'plugin:storybook/recommended', 'prettier')),
+  ...fixupConfigRules(compat.extends('plugin:react-hooks/recommended', 'prettier')),
+  ...storybook.configs['flat/recommended'],
   {
     plugins: {
       '@typescript-eslint': typescriptEslint,

eslint.config.mjs

@@ -78,7 +78,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@chromatic-com/storybook": "^4.1.0",
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^1.2.3",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.15.0",
@@ -88,8 +88,8 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@types/seedrandom": "^3",
@@ -105,7 +105,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^9.1.2",
+    "eslint-plugin-storybook": "^10.1.11",
     "husky": "^9.1.7",
     "json": "^11.0.0",
     "prettier": "^3.3.3",
@@ -120,7 +120,7 @@
     "seedrandom": "^3.0.5",
     "semantic-release": "^24.2.0",
     "serve": "^14.2.4",
-    "storybook": "^9.1.2",
+    "storybook": "^10.1.11",
     "three": "^0.159.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",