update: example/demo (#2585)

* 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"

* update: remove --fix

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'],
   },
 }

examples/demo/.prettierrc

@@ -1,8 +1,8 @@
 {
-    "semi": false,
-    "trailingComma": "all",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "printWidth": 140,
-    "jsxBracketSameLine": true
-  }
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 140,
+  "jsxBracketSameLine": true
+}

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>
           ))}

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>
     </>

examples/demo/src/components/Fireflies.jsx

@@ -1,13 +1,13 @@
 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'
 
 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

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' }} />
 }

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>
     }`,
 )