include zustand on framer build using 'commonjsPlugin'

packages/shadergradient-v2/package.json

@@ -32,6 +32,7 @@
     "react": "*"
   },
   "devDependencies": {
+    "@chialab/esbuild-plugin-commonjs": "^0.18.0",
     "@react-spring/three": "^9.7.3",
     "@react-three/fiber": "^8.17.10",
     "@types/socket.io": "^3.0.2",
@@ -47,6 +48,7 @@
     "three": "^0.169.0",
     "three-stdlib": "^2.30.1",
     "tsup": "^8.2.4",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "zustand": "5.0.1"
   }
 }

packages/shadergradient-v2/src/ShaderGradientStateless/ShaderGradientStatelessCanvas.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { canvasProps } from '@/consts'
+import * as THREE from 'three'
+
+export function ShaderGradientStatelessCanvas({
+  children,
+  style = {},
+  pixelDensity = 1,
+  fov = 45,
+  pointerEvents,
+}: {
+  children: React.ReactNode
+  style?: React.CSSProperties
+  pixelDensity?: number
+  fov?: number
+  pointerEvents?: 'none' | 'auto'
+}): JSX.Element {
+  useShaderChunkFix()
+
+  return (
+    <Canvas
+      style={{ ...style, pointerEvents }}
+      resize={{ offsetSize: true }}
+      {...canvasProps(pixelDensity, fov)}
+    >
+      {children}
+    </Canvas>
+  )
+}
+
+function useShaderChunkFix() {
+  useEffect(() => {
+    // Fix Error: Can not resolve #include <uv2_pars_vertex>, <... (it is needed from three.js version 0.151.3)
+    THREE.ShaderChunk['uv2_pars_vertex'] = ``
+    THREE.ShaderChunk['uv2_vertex'] = ``
+    THREE.ShaderChunk['uv2_pars_fragment'] = ``
+    THREE.ShaderChunk['encodings_fragment'] = ``
+  }, [])
+}

packages/shadergradient-v2/src/ShaderGradientStateless/index.ts

@@ -1,2 +1,3 @@
 export * from './store/useQueryState'
 export * from './ShaderGradientStateless'
+export * from './ShaderGradientStatelessCanvas'

packages/shadergradient-v2/tsup.framer.config.ts

@@ -4,6 +4,7 @@ import fs from 'fs'
 import path from 'path'
 import { Server as SocketIO } from 'socket.io'
 import { globby } from 'globby'
+import commonjsPlugin from '@chialab/esbuild-plugin-commonjs'
 
 // Add this GLSL loader plugin
 const glslLoader = {
@@ -52,7 +53,7 @@ export default defineConfig(async (options) => {
     // ['@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")
-    esbuildPlugins: [glslLoader],
+    esbuildPlugins: [glslLoader, commonjsPlugin()],
     async onSuccess() {
       if (!isDev) return
 

packages/shadergradient/package.json

@@ -81,6 +81,6 @@
     "react-slider": "^2.0.4",
     "scroll-into-view-if-needed": "^3.0.10",
     "stripe": "^11.13.0",
-    "zustand": "^4.1.5"
+    "zustand": "5.0.1"
   }
 }