chore(deps): update dev dependencies (#2743)

pmndrs · Sep 15, 2024 · d779749 · d779749
1 parent c08adc2
commit d779749
Show file tree

Hide file tree

Showing 10 changed files with 542 additions and 432 deletions.
diff --git a/.github/workflows/test-multiple-versions.yml b/.github/workflows/test-multiple-versions.yml
@@ -32,8 +32,8 @@ jobs:
           - 18.2.0
           - 18.3.1
           - 19.0.0-rc.0
-          - 19.0.0-rc-b57d2823-20240822
-          - 0.0.0-experimental-b57d2823-20240822
+          - 19.0.0-rc-206df66e-20240912
+          - 0.0.0-experimental-206df66e-20240912
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4

diff --git a/examples/demo/.prettierrc b/examples/demo/.prettierrc
diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -9,6 +9,10 @@
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
   "packageManager": "pnpm@8.15.0",
   "dependencies": {
     "@react-three/drei": "^9.78.2",

diff --git a/examples/demo/src/components/CodePreview.jsx b/examples/demo/src/components/CodePreview.jsx
@@ -8,7 +8,8 @@ import typescriptCode from '../resources/typescript-code'
 const useStore = create((set, get) => ({
   lang: 'javascript',
   setLang: (lang) => set(() => ({ lang })),
-  getCode: () => (get().lang === 'javascript' ? javascriptCode : typescriptCode),
+  getCode: () =>
+    get().lang === 'javascript' ? javascriptCode : typescriptCode,
 }))
 
 export default function CodePreview() {

diff --git a/examples/demo/src/components/Details.jsx b/examples/demo/src/components/Details.jsx
@@ -6,10 +6,16 @@ export default function Details() {
         <a href="https://github.com/pmndrs/zustand">Github</a>
       </nav>
       <div className="bottom">
-        <a href="https://github.com/pmndrs/zustand/tree/main/examples/demo" className="bottom-right">
+        <a
+          href="https://github.com/pmndrs/zustand/tree/main/examples/demo"
+          className="bottom-right"
+        >
           {'<Source />'}
         </a>
-        <a href="https://www.instagram.com/tina.henschel/" className="bottom-left">
+        <a
+          href="https://www.instagram.com/tina.henschel/"
+          className="bottom-left"
+        >
           Illustrations @ Tina Henschel
         </a>
       </div>

diff --git a/examples/demo/src/components/Fireflies.jsx b/examples/demo/src/components/Fireflies.jsx
@@ -9,11 +9,21 @@ const r = () => Math.max(0.2, Math.random())
 
 function Fatline({ curve, color }) {
   const material = useRef()
-  useFrame((state, delta) => (material.current.uniforms.dashOffset.value -= delta / 100))
+  useFrame(
+    (state, delta) =>
+      (material.current.uniforms.dashOffset.value -= delta / 100),
+  )
   return (
     <mesh>
       <meshLineGeometry points={curve} />
-      <meshLineMaterial ref={material} transparent lineWidth={0.01} color={color} dashArray={0.1} dashRatio={0.99} />
+      <meshLineMaterial
+        ref={material}
+        transparent
+        lineWidth={0.01}
+        color={color}
+        dashArray={0.1}
+        dashRatio={0.99}
+      />
     </mesh>
   )
 }
@@ -22,10 +32,22 @@ export default function Fireflies({ count, colors, radius = 10 }) {
   const lines = useMemo(
     () =>
       new Array(count).fill().map(() => {
-        const pos = new Vector3(Math.sin(0) * radius * r(), Math.cos(0) * radius * r(), 0)
+        const pos = new Vector3(
+          Math.sin(0) * radius * r(),
+          Math.cos(0) * radius * r(),
+          0,
+        )
         const points = new Array(30).fill().map((_, index) => {
           const angle = (index / 20) * Math.PI * 2
-          return pos.add(new Vector3(Math.sin(angle) * radius * r(), Math.cos(angle) * radius * r(), 0)).clone()
+          return pos
+            .add(
+              new Vector3(
+                Math.sin(angle) * radius * r(),
+                Math.cos(angle) * radius * r(),
+                0,
+              ),
+            )
+            .clone()
         })
         const curve = new CatmullRomCurve3(points).getPoints(100)
         return {

diff --git a/examples/demo/src/components/Scene.jsx b/examples/demo/src/components/Scene.jsx
@@ -2,7 +2,11 @@ import { Mesh, PlaneGeometry, Group, Vector3, MathUtils } from 'three'
 import { memo, useRef, useState, useLayoutEffect } from 'react'
 import { createRoot, events, extend, useFrame } from '@react-three/fiber'
 import { Plane, useAspect, useTexture } from '@react-three/drei'
-import { EffectComposer, DepthOfField, Vignette } from '@react-three/postprocessing'
+import {
+  EffectComposer,
+  DepthOfField,
+  Vignette,
+} from '@react-three/postprocessing'
 import { MaskFunction } from 'postprocessing'
 import Fireflies from './Fireflies'
 import bgUrl from '../resources/bg.jpg'
@@ -16,7 +20,14 @@ import '../materials/layerMaterial'
 function Experience() {
   const scaleN = useAspect(1600, 1000, 1.05)
   const scaleW = useAspect(2200, 1000, 1.05)
-  const textures = useTexture([bgUrl, starsUrl, groundUrl, bearUrl, leaves1Url, leaves2Url])
+  const textures = useTexture([
+    bgUrl,
+    starsUrl,
+    groundUrl,
+    bearUrl,
+    leaves1Url,
+    leaves2Url,
+  ])
   const group = useRef()
   const layersRef = useRef([])
   const [movement] = useState(() => new Vector3())
@@ -25,34 +36,93 @@ function Experience() {
     { texture: textures[0], x: 0, y: 0, z: 0, factor: 0.005, scale: scaleW },
     { texture: textures[1], x: 0, y: 0, z: 10, factor: 0.005, scale: scaleW },
     { texture: textures[2], x: 0, y: 0, z: 20, scale: scaleW },
-    { texture: textures[3], x: 0, y: 0, z: 30, scaleFactor: 0.83, scale: scaleN },
-    { texture: textures[4], x: 0, y: 0, z: 40, factor: 0.03, scaleFactor: 1, wiggle: 0.6, scale: scaleW },
-    { texture: textures[5], x: -20, y: -20, z: 49, factor: 0.04, scaleFactor: 1.3, wiggle: 1, scale: scaleW },
+    {
+      texture: textures[3],
+      x: 0,
+      y: 0,
+      z: 30,
+      scaleFactor: 0.83,
+      scale: scaleN,
+    },
+    {
+      texture: textures[4],
+      x: 0,
+      y: 0,
+      z: 40,
+      factor: 0.03,
+      scaleFactor: 1,
+      wiggle: 0.6,
+      scale: scaleW,
+    },
+    {
+      texture: textures[5],
+      x: -20,
+      y: -20,
+      z: 49,
+      factor: 0.04,
+      scaleFactor: 1.3,
+      wiggle: 1,
+      scale: scaleW,
+    },
   ]
 
   useFrame((state, delta) => {
     movement.lerp(temp.set(state.pointer.x, state.pointer.y * 0.2, 0), 0.2)
-    group.current.position.x = MathUtils.lerp(group.current.position.x, state.pointer.x * 20, 0.05)
-    group.current.rotation.x = MathUtils.lerp(group.current.rotation.x, state.pointer.y / 20, 0.05)
-    group.current.rotation.y = MathUtils.lerp(group.current.rotation.y, -state.pointer.x / 2, 0.05)
-    layersRef.current[4].uniforms.time.value = layersRef.current[5].uniforms.time.value += delta
+    group.current.position.x = MathUtils.lerp(
+      group.current.position.x,
+      state.pointer.x * 20,
+      0.05,
+    )
+    group.current.rotation.x = MathUtils.lerp(
+      group.current.rotation.x,
+      state.pointer.y / 20,
+      0.05,
+    )
+    group.current.rotation.y = MathUtils.lerp(
+      group.current.rotation.y,
+      -state.pointer.x / 2,
+      0.05,
+    )
+    layersRef.current[4].uniforms.time.value =
+      layersRef.current[5].uniforms.time.value += delta
   }, 1)
 
   return (
     <group ref={group}>
       <Fireflies count={20} radius={80} colors={['orange']} />
-      {layers.map(({ scale, texture, ref, factor = 0, scaleFactor = 1, wiggle = 0, x, y, z }, i) => (
-        <Plane scale={scale} args={[1, 1, wiggle ? 10 : 1, wiggle ? 10 : 1]} position={[x, y, z]} key={i} ref={ref}>
-          <layerMaterial
-            movement={movement}
-            textr={texture}
-            factor={factor}
-            ref={(el) => (layersRef.current[i] = el)}
-            wiggle={wiggle}
-            scale={scaleFactor}
-          />
-        </Plane>
-      ))}
+      {layers.map(
+        (
+          {
+            scale,
+            texture,
+            ref,
+            factor = 0,
+            scaleFactor = 1,
+            wiggle = 0,
+            x,
+            y,
+            z,
+          },
+          i,
+        ) => (
+          <Plane
+            scale={scale}
+            args={[1, 1, wiggle ? 10 : 1, wiggle ? 10 : 1]}
+            position={[x, y, z]}
+            key={i}
+            ref={ref}
+          >
+            <layerMaterial
+              movement={movement}
+              textr={texture}
+              factor={factor}
+              ref={(el) => (layersRef.current[i] = el)}
+              wiggle={wiggle}
+              scale={scaleFactor}
+            />
+          </Plane>
+        ),
+      )}
     </group>
   )
 }
@@ -65,7 +135,13 @@ function Effects() {
   })
   return (
     <EffectComposer disableNormalPass multisampling={0}>
-      <DepthOfField ref={ref} target={[0, 0, 30]} bokehScale={8} focalLength={0.1} width={1024} />
+      <DepthOfField
+        ref={ref}
+        target={[0, 0, 30]}
+        bokehScale={8}
+        focalLength={0.1}
+        width={1024}
+      />
       <Vignette />
     </EffectComposer>
   )
@@ -95,18 +171,36 @@ function Canvas({ children }) {
           state.events.connect(document.getElementById('root'))
           state.setEvents({
             compute: (event, state) => {
-              state.pointer.set((event.clientX / state.size.width) * 2 - 1, -(event.clientY / state.size.height) * 2 + 1)
+              state.pointer.set(
+                (event.clientX / state.size.width) * 2 - 1,
+                -(event.clientY / state.size.height) * 2 + 1,
+              )
               state.raycaster.setFromCamera(state.pointer, state.camera)
             },
           })
         },
       })
     }
-    const resize = () => root.current.configure({ width: window.innerWidth, height: window.innerHeight })
+    const resize = () =>
+      root.current.configure({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
     window.addEventListener('resize', resize)
     root.current.render(children)
     return () => window.removeEventListener('resize', resize)
   }, [children])
 
-  return <canvas ref={canvas} style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', display: 'block' }} />
+  return (
+    <canvas
+      ref={canvas}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        display: 'block',
+      }}
+    />
+  )
 }
diff --git a/examples/demo/src/components/SnippetLang.jsx b/examples/demo/src/components/SnippetLang.jsx
@@ -1,6 +1,10 @@
 export default function SnippetLang({ lang, setLang }) {
   return (
-    <select className="snippet-lang" value={lang} onChange={(e) => setLang(e.currentTarget.value)}>
+    <select
+      className="snippet-lang"
+      value={lang}
+      onChange={(e) => setLang(e.currentTarget.value)}
+    >
       <option value="javascript">JavaScript</option>
       <option value="typescript">TypeScript</option>
     </select>

diff --git a/package.json b/package.json
@@ -115,23 +115,23 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/react": "^16.0.0",
-    "@types/node": "^22.5.0",
-    "@types/react": "^18.3.4",
+    "@testing-library/react": "^16.0.1",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.6",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "esbuild": "^0.23.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-3f2f4f0-20240826",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-75b9fd4-20240912",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-vitest": "^0.5.4",
     "immer": "^10.1.1",
@@ -141,13 +141,13 @@
     "react": "19.0.0-rc.0",
     "react-dom": "19.0.0-rc.0",
     "redux": "^5.0.1",
-    "rollup": "^4.21.1",
+    "rollup": "^4.21.3",
     "rollup-plugin-esbuild": "^6.1.1",
     "shelljs": "^0.8.5",
     "shx": "^0.3.4",
     "typescript": "^5.6.2",
     "use-sync-external-store": "^1.2.2",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",