BREAKING: 4.x, react 19, fiber v9

.github/workflows/release.yml

@@ -14,12 +14,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Setup Node.js 16.x
-        uses: actions/setup-node@v2
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install Dependencies
         run: yarn

.storybook/common/Setup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Vector3 } from 'three'
-import { Canvas, Props as CanvasProps } from '@react-three/fiber'
+import { Canvas, CanvasProps } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 
 type Props = React.PropsWithChildren<
@@ -21,7 +21,7 @@ export const Setup = ({
   ...restProps
 }: Props) => (
   <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
-    {children}
+    {children}    
     {lights && (
       <>
         <ambientLight intensity={0.8} />

.storybook/index.css

@@ -1,54 +1,14 @@
 html,
 body,
-#root {
-  width: 100%;
+#storybook-root {
   height: 100%;
-  margin: 0;
-  padding: 0;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: hidden;
-  background-color: #121212;
-}
-
-#root {
-  overflow: auto;
-}
-
-.html-story-block {
-  color: white;
-  width: 120px;
-  position: relative;
-  margin-left: 100px;
-}
-
-.html-story-block.margin300 {
-  margin-left: 300px;
 }
 
-.html-story-block:before {
-  content: '';
-  display: block;
-  position: absolute;
-
-  top: 50%;
-  left: -60px;
-
-  width: 60px;
-  height: 1px;
-  background-color: white;
+body,
+.sbdocs canvas {
+  background-color: #121212;
 }
 
-.html-story-label {
-  background-color: white;
-  color: black;
-  width: 100px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+.sbdocs canvas {
+  min-height: 20rem;
+}

.storybook/main.ts

@@ -1,22 +1,16 @@
-module.exports = {
-  stories: ['./stories/**/*.stories.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        docs: false,
-      },
-    },
-    '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        loaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
-    },
-  ],
-  framework: '@storybook/react',
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  staticDirs: ['./public'],
+  stories: ['./stories/**/*.stories.{ts,tsx}'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-knobs'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
+  },
 }
+
+export default config

.storybook/manager.ts

@@ -2,6 +2,5 @@ import { addons } from '@storybook/addons'
 
 addons.setConfig({
   panelPosition: 'right',
-  selectedPanel: 'storybook/source-loader/panel',
   showPanel: true,
 })

.storybook/preview.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+
+import './index.css'
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <React.Suspense fallback={null}>
+        <Story />
+      </React.Suspense>
+    ),
+  ],
+}
+export default preview

.storybook/public/_.txt

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

.storybook/stories/advanced/MultipleMaterials.stories.tsx

@@ -8,7 +8,7 @@ export default {
 
 export const MultipleMaterials = () => {
   return (
-    <Setup>
+    <Setup>      
       <mesh>
         <Geometry useGroups>
           <Base>
@@ -23,7 +23,7 @@ export const MultipleMaterials = () => {
             <sphereGeometry args={[1, 64, 64]} />
             <meshNormalMaterial />
           </Addition>
-        </Geometry>
+        </Geometry>                
       </mesh>
     </Setup>
   )

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 4.0.0
+
+### Major Changes
+
+- 4.x, react19, fiber v9
+
 ## 3.3.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/csg",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Constructive solid geometry for React",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -11,8 +11,8 @@
     "postbuild": "tsc --emitDeclarationOnly",
     "prepublishOnly": "npm run build",
     "test": "echo no tests yet",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "changeset:add": "changeset add",
     "changeset:version": "yarn changeset version && yarn install --mode update-lockfile",
     "changeset:release": "yarn build && yarn build-storybook && yarn changeset publish"
@@ -49,29 +49,32 @@
     "@babel/plugin-transform-runtime": "7.16.0",
     "@babel/plugin-transform-template-literals": "7.16.0",
     "@babel/preset-env": "7.16.0",
-    "@babel/preset-react": "7.16.0",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.16.0",
     "@changesets/changelog-git": "^0.1.12",
     "@changesets/cli": "^2.24.3",
-    "@react-three/drei": "^9.86.3",
-    "@react-three/fiber": "^8.14.4",
+    "@react-three/drei": "10.0.0-rc.1",
+    "@react-three/fiber": "9.0.0-rc.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addon-storysource": "^6.5.10",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^8.5.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-knobs": "^8.0.1",
+    "@storybook/addon-links": "^8.5.1",
+    "@storybook/addon-storysource": "^8.5.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/addons": "7.6.17",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-vite": "^8.5.1",
+    "@storybook/react-webpack5": "^8.5.1",
+    "@storybook/test": "^8.5.1",
     "@types/jest": "^27.0.2",
     "@types/node": "^16.11.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/three": "^0.153.0",
+    "@types/three": "^0.172.0",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
     "babel-loader": "^8.2.5",
@@ -83,21 +86,24 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.11.2",
     "husky": "^7.0.4",
     "lint-staged": "^11.2.6",
     "prettier": "^2.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^2.59.0",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^7.0.2",
-    "three": "^0.154.0",
-    "typescript": "^4.4.4"
+    "storybook": "^8.5.1",
+    "three": "^0.172.0",
+    "typescript": "^4.4.4",
+    "vite": "^6.0.11"
   },
   "homepage": "https://github.com/pmndrs/react-three-csg#readme",
   "dependencies": {
     "three-bvh-csg": "^0.0.16",
     "three-mesh-bvh": "^0.6.8"
-  }
+  },
+  "packageManager": "[email protected]+sha256.5f228cb28f2edb97d8c3b667fb7b2fdcf06c46798e25ea889dad9e0b4bc2e2c1"
 }

src/index.tsx

@@ -38,6 +38,8 @@ export type CSGGeometryProps = {
   children?: React.ReactNode
   /** Use material groups, each operation can have its own material, default: false */
   useGroups?: boolean
+  /** If true then any group in the final geometry that shares a common material with another group will be merged into one to reduce the number of draw calls required by the resulting mesh. */
+  consolidateGroups?: boolean
   /** Show operation meshes, default: false */
   showOperations?: boolean
   /** Re-compute vertx normals, default: false */
@@ -81,10 +83,16 @@ function resolve(op: THREE.Object3D): Brush {
 const csgContext = React.createContext<CSGGeometryApi>(null!)
 
 export const Geometry = React.forwardRef<CSGGeometryRef, CSGGeometryProps>(
-  ({ children, computeVertexNormals = false, useGroups = false, showOperations = false }, fref) => {
+  (
+    { children, computeVertexNormals = false, useGroups = false, consolidateGroups = false, showOperations = false },
+    fref
+  ) => {
     const geo = React.useRef<THREE.BufferGeometry>(null!)
     const operations = React.useRef<THREE.Group>(null!)
-    const ev = React.useMemo(() => Object.assign(new Evaluator(), { useGroups }), [useGroups])
+    const ev = React.useMemo(
+      () => Object.assign(new Evaluator(), { useGroups, consolidateGroups }),
+      [useGroups, consolidateGroups]
+    )
 
     const update = React.useCallback(() => {
       try {
@@ -106,8 +114,8 @@ export const Geometry = React.forwardRef<CSGGeometryRef, CSGGeometryProps>(
             geo.current.attributes = root.geometry.attributes
             geo.current.groups = root.geometry.groups
             geo.current.drawRange = root.geometry.drawRange
-            if (ev.useGroups && (geo.current as any)?.__r3f?.parent?.material)
-              (geo.current as any).__r3f.parent.material = root.material
+            if (ev.useGroups && (geo.current as any)?.__r3f?.parent?.object?.material)
+              (geo.current as any).__r3f.parent.object.material = root.material
             if (computeVertexNormals) geo.current.computeVertexNormals()
           }
         }
@@ -117,8 +125,8 @@ export const Geometry = React.forwardRef<CSGGeometryRef, CSGGeometryProps>(
     }, [computeVertexNormals, ev])
 
     const api = React.useMemo(
-      () => ({ computeVertexNormals, showOperations, useGroups, update }),
-      [computeVertexNormals, showOperations, useGroups]
+      () => ({ computeVertexNormals, showOperations, useGroups, consolidateGroups, update }),
+      [computeVertexNormals, showOperations, useGroups, consolidateGroups]
     )
     React.useLayoutEffect(() => void update())
     React.useImperativeHandle(fref, () => ({ geometry: geo.current, operations: operations.current, ...api }), [api])