Added support for react 19

.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",
-    "@shadergradient/react": "workspace:*",
-    "three": "^0.169.0",
+    "@react-spring/three": "^10.0.3",
     "@react-three/drei": "9.56.5",
-    "@react-three/fiber": "8.12.0"
+    "@react-three/fiber": "^9.4.2",
+    "@shadergradient/react": "workspace:*",
+    "next": "14.2.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "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": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "14.2.13",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "5.7.3"
   }
 }

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,32 @@
     "ngrok": "ngrok http --domain=esm.ngrok.dev 8000"
   },
   "peerDependencies": {
+    "@react-spring/three": "^10.0.0",
+    "@react-three/fiber": "^9.0.0",
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^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",
+    "concurrently": "^9.2.1",
     "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",
+    "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/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"
   }
 }

packages/ui/package.json

@@ -22,30 +22,30 @@
   "devDependencies": {
     "@chialab/esbuild-plugin-commonjs": "^0.18.0",
     "@shadergradient/react": "workspace:*",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.19.27",
     "@types/react": "18.2.73",
     "@types/react-dom": "18.2.23",
     "@types/socket.io": "^3.0.2",
-    "@uiw/color-convert": "^1.1.1",
-    "@uiw/react-color-shade-slider": "^1.1.1",
-    "@uiw/react-color-wheel": "^1.1.1",
-    "concurrently": "^7.2.2",
+    "@uiw/color-convert": "^1.4.3",
+    "@uiw/react-color-shade-slider": "^1.4.3",
+    "@uiw/react-color-wheel": "^1.4.3",
+    "concurrently": "^7.6.0",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "framer": "^2.4.1",
-    "globby": "^14.0.2",
-    "query-string": "^7.1.1",
-    "react": "^18.2.0",
-    "react-slider": "^2.0.4",
-    "socket.io": "^4.7.5",
+    "globby": "^14.1.0",
+    "query-string": "^7.1.3",
+    "react": "^18.3.1",
+    "react-slider": "^2.0.6",
+    "socket.io": "^4.8.1",
     "tailwind-config": "workspace:*",
-    "tailwindcss": "^3.1.5",
+    "tailwindcss": "^3.4.19",
     "tsconfig": "workspace:*",
-    "tsup": "^8.2.4",
+    "tsup": "^8.5.1",
     "typescript": "5.7.3",
     "zustand": "5.0.1"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.86.0"
+    "@supabase/supabase-js": "^2.88.0"
   }
 }