From b3b3cda346c0c46b26ac17d341e27d4075c2cc79 Mon Sep 17 00:00:00 2001
From: sunil <iamsunilsharma999@gmail.com>
Date: Wed, 5 Jun 2024 16:10:18 +0530
Subject: [PATCH 1/2] update: example/demo

- fix eslint config and lint issues
- fix react key issue
- remove children passed as props
- remove unused variables and imports
- "encodings_fragment" is deprecated, replaced it with "colorspace_fragment"
---
 examples/demo/.eslintrc.cjs                  | 16 ++++++----------
 examples/demo/.prettierrc                    | 14 +++++++-------
 examples/demo/package.json                   |  2 +-
 examples/demo/src/components/CodePreview.jsx |  4 ++--
 examples/demo/src/components/Details.jsx     | 12 ++++++++----
 examples/demo/src/components/Fireflies.jsx   |  6 +++---
 examples/demo/src/components/Scene.jsx       |  4 ++--
 examples/demo/src/materials/layerMaterial.js |  4 ++--
 8 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/examples/demo/.eslintrc.cjs b/examples/demo/.eslintrc.cjs
index ee71034ece..34ee0a44c4 100644
--- a/examples/demo/.eslintrc.cjs
+++ b/examples/demo/.eslintrc.cjs
@@ -1,20 +1,16 @@
 /* eslint-env node */
 
 module.exports = {
+  root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/prop-types': 0,
+    'import/extensions': ['off'],
+    'react/no-unknown-property': ['off'],
   },
 }
diff --git a/examples/demo/.prettierrc b/examples/demo/.prettierrc
index 6fbf6a87e9..ee6764c57d 100644
--- a/examples/demo/.prettierrc
+++ b/examples/demo/.prettierrc
@@ -1,8 +1,8 @@
 {
-    "semi": false,
-    "trailingComma": "all",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "printWidth": 140,
-    "jsxBracketSameLine": true
-  }
\ No newline at end of file
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 140,
+  "jsxBracketSameLine": true
+}
diff --git a/examples/demo/package.json b/examples/demo/package.json
index 8de2168759..5b7d512d9f 100644
--- a/examples/demo/package.json
+++ b/examples/demo/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix",
     "preview": "vite preview"
   },
   "packageManager": "pnpm@8.15.0",
diff --git a/examples/demo/src/components/CodePreview.jsx b/examples/demo/src/components/CodePreview.jsx
index b0e9e638b3..72a78a8628 100644
--- a/examples/demo/src/components/CodePreview.jsx
+++ b/examples/demo/src/components/CodePreview.jsx
@@ -22,9 +22,9 @@ export default function CodePreview() {
         // position is set to relative so the copy button can align to bottom right
         <pre className={className} style={{ ...style, position: 'relative' }}>
           {tokens.map((line, i) => (
-            <div {...getLineProps({ line, key: i })}>
+            <div {...getLineProps({ line })} key={i}>
               {line.map((token, key) => (
-                <span {...getTokenProps({ token, key })} />
+                <span {...getTokenProps({ token })} key={key} />
               ))}
             </div>
           ))}
diff --git a/examples/demo/src/components/Details.jsx b/examples/demo/src/components/Details.jsx
index 9db1904f95..cfd8eb0fa1 100644
--- a/examples/demo/src/components/Details.jsx
+++ b/examples/demo/src/components/Details.jsx
@@ -2,12 +2,16 @@ export default function Details() {
   return (
     <>
       <nav className="nav">
-        <a href="https://docs.pmnd.rs/zustand" children="Documentation" />
-        <a href="https://github.com/pmndrs/zustand" children="Github" />
+        <a href="https://docs.pmnd.rs/zustand">Documentation</a>
+        <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" children="<Source />" />
-        <a href="https://www.instagram.com/tina.henschel/" className="bottom-left" children="Illustrations @ Tina Henschel" />
+        <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">
+          Illustrations @ Tina Henschel
+        </a>
       </div>
       <span className="header-left">Zustand</span>
     </>
diff --git a/examples/demo/src/components/Fireflies.jsx b/examples/demo/src/components/Fireflies.jsx
index 5407e87be9..101cc5f63c 100644
--- a/examples/demo/src/components/Fireflies.jsx
+++ b/examples/demo/src/components/Fireflies.jsx
@@ -1,5 +1,5 @@
 import { Vector3, CatmullRomCurve3 } from 'three'
-import React, { useRef, useMemo } from 'react'
+import { useRef, useMemo } from 'react'
 import { extend, useFrame } from '@react-three/fiber'
 import * as meshline from 'meshline'
 
@@ -7,7 +7,7 @@ extend(meshline)
 
 const r = () => Math.max(0.2, Math.random())
 
-function Fatline({ curve, width, color }) {
+function Fatline({ curve, color }) {
   const material = useRef()
   useFrame((state, delta) => (material.current.uniforms.dashOffset.value -= delta / 100))
   return (
@@ -21,7 +21,7 @@ function Fatline({ curve, width, color }) {
 export default function Fireflies({ count, colors, radius = 10 }) {
   const lines = useMemo(
     () =>
-      new Array(count).fill().map((_, index) => {
+      new Array(count).fill().map(() => {
         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
diff --git a/examples/demo/src/components/Scene.jsx b/examples/demo/src/components/Scene.jsx
index f2eb69ace5..0b5cb9a304 100644
--- a/examples/demo/src/components/Scene.jsx
+++ b/examples/demo/src/components/Scene.jsx
@@ -1,5 +1,5 @@
 import { Mesh, PlaneGeometry, Group, Vector3, MathUtils } from 'three'
-import React, { useRef, useState, useLayoutEffect } from 'react'
+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'
@@ -106,7 +106,7 @@ function Canvas({ children }) {
     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' }} />
 }
diff --git a/examples/demo/src/materials/layerMaterial.js b/examples/demo/src/materials/layerMaterial.js
index ee2dde4a28..8a11114ce9 100644
--- a/examples/demo/src/materials/layerMaterial.js
+++ b/examples/demo/src/materials/layerMaterial.js
@@ -22,7 +22,7 @@ const LayerMaterial = shaderMaterial(
         mat3 m = mat3(c, 0, s, 0, 1, 0, -s, 0, c);
         transformed = transformed * m;
         vNormal = vNormal * m;
-      }      
+      }
       gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.);
     }`,
   ` uniform float time;
@@ -38,7 +38,7 @@ const LayerMaterial = shaderMaterial(
       if (color.a < 0.1) discard;
       gl_FragColor = vec4(color.rgb, .1);
       #include <tonemapping_fragment>
-      #include <encodings_fragment>
+      #include <colorspace_fragment>
     }`,
 )
 

From c3a934eac101f0e52971becb86fa63ec69d7ccab Mon Sep 17 00:00:00 2001
From: Sunil <84917190+sunil-sharma-999@users.noreply.github.com>
Date: Wed, 5 Jun 2024 17:50:14 +0530
Subject: [PATCH 2/2] update: remove --fix

---
 examples/demo/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/demo/package.json b/examples/demo/package.json
index 5b7d512d9f..8de2168759 100644
--- a/examples/demo/package.json
+++ b/examples/demo/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "packageManager": "pnpm@8.15.0",