archive-gh-me/zustand
1
0
Fork 0
mirror of https://github.com/pmndrs/zustand.git synced 2025-12-08 19:45:52 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daishi Kato 2024-09-15 12:02:18 +09:00 committed by GitHub
parent c08adc2a47
commit d77974992a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 542 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/test-multiple-versions.yml vendored
View File

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

8
examples/demo/.prettierrc
View File

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

4
examples/demo/package.json
View File

@ -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",

3
examples/demo/src/components/CodePreview.jsx
View File

@ -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() {

10
examples/demo/src/components/Details.jsx
View File

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

30
examples/demo/src/components/Fireflies.jsx
View File

@ -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 {

144
examples/demo/src/components/Scene.jsx
View File

@ -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',
}}
/>
)
}

6
examples/demo/src/components/SnippetLang.jsx
View File

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

24
package.json
View File

@ -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",

741
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff