Added support for react 19

.github/workflows/deploy.yml

@@ -55,5 +55,9 @@ jobs:
           git config --global user.name 'deploy'
           git config --global user.email 'deploy@users.noreply.github.com'
           git add .
+          if git diff --cached --quiet; then
+            echo "No changes to commit"
+            exit 0
+          fi
           git commit -m "Updated"
           git push --force

.gitignore

@@ -35,4 +35,7 @@ yarn-error.log*
 
 dist
 
-.env
+.env
+
+# temporary files
+tmp/

apps/email-previews/package.json

@@ -15,7 +15,7 @@
     "react-email": "5.0.6"
   },
   "devDependencies": {
-    "@types/node": "^20.0.0",
+    "@types/node": "^20.19.27",
     "@types/react": "18.2.73",
     "@types/react-dom": "18.2.23",
     "typescript": "5.7.3"

apps/example-nextjs-dev/package.json

@@ -9,22 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.13",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/drei": "^10.0.3",
+    "@react-three/fiber": "^9.4.2",
     "@shadergradient/react": "workspace:*",
-    "three": "^0.169.0",
-    "@react-three/drei": "9.56.5",
-    "@react-three/fiber": "8.12.0"
+    "next": "^15.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "three": "^0.169.0"
   },
   "devDependencies": {
-    "typescript": "5.7.3",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.13"
+    "@types/node": "^20.19.27",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^15.0.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "5.7.3"
   }
 }

apps/example-nextjs-dev/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/examples/example-nextjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/examples/example-vite-react/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-spring/three": "^10.0.1",
-    "@react-three/fiber": "^9.3.0",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.4.2",
     "@shadergradient/react": "^2.4.5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

apps/examples/example-vite-react/vite.config.ts

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom', '@react-three/fiber'],
+  },
 })

apps/figma-plugin/package.json

@@ -13,18 +13,18 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@figma/plugin-typings": "^1.121.0",
+    "@types/node": "^16.18.126",
     "@types/react": "18.2.73",
     "@types/react-dom": "18.2.23",
-    "@figma/plugin-typings": "*",
-    "@types/node": "^16.7.1",
-    "css-loader": "^6.2.0",
+    "css-loader": "^6.11.0",
     "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "^5.3.2",
-    "style-loader": "^3.2.1",
-    "ts-loader": "^9.2.5",
+    "html-webpack-plugin": "^5.6.5",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.4",
     "typescript": "5.7.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.51.1",
-    "webpack-cli": "^4.8.0"
+    "webpack": "^5.104.0",
+    "webpack-cli": "^4.10.0"
   }
 }

apps/framer-plugin/package.json

@@ -11,25 +11,24 @@
     "pack": "npx framer-plugin-tools@latest pack"
   },
   "dependencies": {
-    "framer-plugin": "^1",
-    "react": "^18",
-    "react-dom": "^18",
-    "vite-plugin-mkcert": "^1"
+    "framer-plugin": "^1.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite-plugin-mkcert": "^1.17.9"
   },
   "devDependencies": {
-
-    "@eslint/js": "^9",
-    "@types/react-dom": "^18",
-    "@types/react": "^18",
-    "@vitejs/plugin-react-swc": "^3",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "typescript-eslint": "^8.0.1",
-    "vite-plugin-framer": "^1",
-    "eslint": "^9.9.0",
-    "globals": "^15.9.0",
+    "@eslint/js": "^9.39.2",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "globals": "^15.15.0",
     "typescript": "5.7.3",
-    "vite": "^5"
+    "typescript-eslint": "^8.50.0",
+    "vite": "^5.4.21",
+    "vite-plugin-framer": "^1.0.7"
   }
 }

package.json

@@ -16,12 +16,12 @@
     "release": "turbo run build --filter=@shadergradient/react && changeset publish"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.1",
+    "@changesets/cli": "^2.29.8",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.11",
-    "turbo": "^2.1.2",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "turbo": "^2.6.3",
     "typescript": "5.7.3"
   },
   "packageManager": "pnpm@10.12.4",

packages/eslint-config-custom/package.json

@@ -4,10 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint-config-next": "^12.0.8",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-config-turbo": "latest"
+    "eslint-config-next": "^12.3.7",
+    "eslint-config-prettier": "^8.10.2",
+    "eslint-config-turbo": "latest",
+    "eslint-plugin-react": "7.28.0"
   },
   "publishConfig": {
     "access": "public"

packages/shadergradient/package.json

@@ -26,28 +26,31 @@
     "ngrok": "ngrok http --domain=esm.ngrok.dev 8000"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "@react-spring/three": "^10.0.0",
+    "@react-three/fiber": "^9.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": ">=0.169.0"
   },
   "devDependencies": {
     "@chialab/esbuild-plugin-commonjs": "^0.18.0",
-    "@react-spring/three": "^9.7.3",
-    "@react-three/fiber": "^8.17.10",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.4.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/socket.io": "^3.0.2",
-    "@types/react": "18.2.73",
-    "@types/react-dom": "18.2.23",
     "camera-controls": "2.9.0",
-    "concurrently": "^9.0.0",
-    "framer": "^2.4.1",
-    "globby": "^14.0.2",
-    "query-string": "^7.1.1",
-    "react": "^18.3.1",
-    "socket.io": "^4.7.5",
-    "socket.io-client": "^4.7.5",
-    "tailwindcss": "^3.4.10",
+    "concurrently": "^9.2.1",
+    "globby": "^14.1.0",
+    "query-string": "^7.1.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
+    "tailwindcss": "^3.4.19",
     "three": "^0.169.0",
-    "three-stdlib": "^2.30.1",
-    "tsup": "^8.2.4",
+    "three-stdlib": "^2.36.1",
+    "tsup": "^8.5.1",
     "typescript": "5.7.3",
     "zustand": "5.0.1"
   }

packages/shadergradient/src/ShaderGradient/Axis/Line.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Vector2, Vector3, Color, ColorRepresentation } from 'three'
-import { ReactThreeFiber, useThree } from '@react-three/fiber'
+import { ThreeElement, useThree } from '@react-three/fiber'
 import {
   LineGeometry,
   LineMaterial,
@@ -15,11 +15,8 @@ export type LineProps = {
   vertexColors?: Array<Color | [number, number, number]>
   lineWidth?: number
 } & Omit<LineMaterialParameters, 'vertexColors' | 'color'> &
-  Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> &
-  Omit<
-    ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>,
-    'color' | 'vertexColors' | 'args'
-  > & {
+  Omit<ThreeElement<typeof Line2>, 'args'> &
+  Omit<ThreeElement<typeof LineMaterial>, 'color' | 'vertexColors' | 'args'> & {
     color?: ColorRepresentation
   }
 

packages/shadergradient/src/ShaderGradientCanvas.tsx

@@ -26,6 +26,7 @@ type ShaderGradientCanvasProps = {
 const Context = createContext<ShaderGradientCanvasContext>(
   {} as ShaderGradientCanvasContext
 )
+const CanvasCompat = Canvas as unknown as React.ComponentType<any>
 
 export const useShaderGradientCanvasContext = () => {
   return useContext<ShaderGradientCanvasContext>(Context)
@@ -53,12 +54,11 @@ export function ShaderGradientCanvas({
   )
 
   useShaderChunkFix()
-
   return (
     <div ref={containerRef} style={{ width: '100%', height: '100%', ...style }}>
       {(!lazyLoad || isInView) && (
         <Context.Provider value={contextValue}>
-          <Canvas
+          <CanvasCompat
             id='gradientCanvas' // need id to get an image to Figma export
             key={pixelDensity + fov} // need to refresh the canvas when pixelDensity or fov changes
             style={{ pointerEvents }}
@@ -69,8 +69,8 @@ export function ShaderGradientCanvas({
               powerPreference,
             })}
           >
-            {children}
-          </Canvas>
+            {children as any}
+          </CanvasCompat>
         </Context.Provider>
       )}
     </div>

packages/shadergradient/src/module.d.ts

@@ -2,3 +2,12 @@ declare module '*.glsl' {
   const value: string
   export default value
 }
+
+declare module 'framer' {
+  export const ControlType: Record<string, unknown>
+  export const RenderTarget: {
+    canvas: string
+    preview: string
+    current: () => string
+  }
+}

packages/shadergradient/tsup.config.ts

@@ -50,6 +50,8 @@ export default defineConfig(async (options) => {
     clean: true,
     external: [
       'react',
+      'react-dom',
+      'react/jsx-runtime',
       'framer',
       '@react-spring/three',
       '@react-three/fiber',

packages/shadergradient/tsup.framer.config.ts

@@ -52,7 +52,7 @@ export default defineConfig(async (options) => {
     // internal bundles
     // ['@react-spring/three', '@react-three/fiber', '@react-three/drei', 'three']
 
-    external: ['react', 'framer', 'react-reconciler'], // react-reconciler need to be external, cause esbuild can't resolve it (Error "Dynamic require of "react" is not supported")
+    external: ['react', 'react-dom', 'react/jsx-runtime', 'framer', 'react-reconciler'], // react-reconciler need to be external, cause esbuild can't resolve it (Error "Dynamic require of "react" is not supported")
     esbuildPlugins: [
       glslLoader,
       commonjsPlugin(), // this is for zustand

packages/tailwind-config/package.json

@@ -4,6 +4,6 @@
   "private": true,
   "main": "index.js",
   "devDependencies": {
-    "tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.4.19"
   }
 }