chore: update deps (#97)

* chore: update turborepo * chore: update turborepo settings * chore: npm update vite * chore: update @changeset/cli * chore: npm audit * chore: ncu * chore: npm update * chore: npm update * chore: npm update * chore: use react 18 in docs? * chore: npm update * fix: disable culling for bg particles * chore: regenerate package-lock.json * chore: update three in vfx-js/core
fand · Jan 6, 2025 · 8180ba5 · 8180ba5
1 parent ec42baa
commit 8180ba5
Show file tree

Hide file tree

Showing 23 changed files with 4,110 additions and 4,377 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "vfx-js-monorepo",
   "private": true,
-  "packageManager": "npm@9.8.1",
+  "packageManager": "npm@11.0.0",
   "workspaces": [
     "packages/*"
   ],
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --ui tui",
     "clean": "turbo run clean",
     "lint": "turbo run lint",
     "prepare": "husky install",
@@ -16,11 +16,11 @@
     "release": "changeset publish"
   },
   "dependencies": {
-    "@changesets/cli": "^2.27.5"
+    "@changesets/cli": "^2.27.11"
   },
   "devDependencies": {
-    "husky": "^9.0.11",
-    "turbo": "^2.0.3"
+    "husky": "^9.1.7",
+    "turbo": "^2.3.3"
   },
   "author": "AMAGI <mail@amagi.dev> (https://amagi.dev/)",
   "homepage": "https://github.com/fand/vfx-js#readme",

diff --git a/packages/docs-react-vfx/package.json b/packages/docs-react-vfx/package.json
@@ -9,35 +9,34 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-spring/web": "^9.7.3",
-    "@react-three/fiber": "^8.16.8",
-    "@react-three/postprocessing": "^2.16.2",
+    "@react-spring/web": "^9.7.5",
+    "@react-three/fiber": "^8.17.10",
+    "@react-three/postprocessing": "^2.16.5",
     "dedent": "^1.5.3",
-    "is-mobile": "^4.0.0",
+    "is-mobile": "^5.0.0",
     "lodash.debounce": "^4.0.8",
     "postprocessing": "^6.35.5",
-    "prism-react-renderer": "^2.3.1",
+    "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "18.3.1",
     "react-lazyload": "^3.2.1",
     "react-vfx": "*",
-    "three": "^0.165.0",
+    "three": "^0.172.0",
     "vh-check": "^2.0.5"
   },
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/dedent": "^0.7.2",
-    "@types/is-mobile": "^2.1.4",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/react-lazyload": "^3.2.3",
-    "@types/three": "^0.165.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "rimraf": "^5.0.7",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "@types/three": "^0.171.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
   }
 }
diff --git a/packages/docs-react-vfx/src/Bg.tsx b/packages/docs-react-vfx/src/Bg.tsx
@@ -1,14 +1,10 @@
-import React, {
-    useEffect,
-    useCallback,
-    createRef,
-    MutableRefObject,
-} from "react";
+import React, { useEffect, useCallback, createRef, useRef } from "react";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { isMobile } from "is-mobile";
 import Triangle from "./gl/Triangle";
 import Fragments from "./gl/Fragments";
 import Effects from "./gl/Effects";
+import { useSpringValue } from "@react-spring/web";
 
 const canvasStyle = {
     position: "fixed",
@@ -21,10 +17,10 @@ const canvasStyle = {
     background: "#222222",
 };
 
-const Bg: React.VFC = () => {
-    const { scene, camera } = useThree();
+const Bg: React.FC = () => {
+    const { camera } = useThree();
 
-    const top = createRef() as MutableRefObject<number>;
+    const top = useSpringValue(0);
 
     const onScroll = useCallback(() => {
         const scroll = window.scrollY;
@@ -36,8 +32,7 @@ const Bg: React.VFC = () => {
             return 0;
         }
 
-        top.current =
-            scroll / (document.body.scrollHeight - window.innerHeight);
+        top.start(scroll / (document.body.scrollHeight - window.innerHeight));
     }, [top]);
 
     useEffect(() => {
@@ -49,7 +44,7 @@ const Bg: React.VFC = () => {
     }, [onScroll]);
 
     useFrame(() => {
-        const s = top.current ?? 0;
+        const s = top.get() ?? 0;
         camera.rotation.set(-Math.PI * 0.1 - s * Math.PI * 0.4, 0, 0);
     });
 
@@ -61,7 +56,7 @@ const Bg: React.VFC = () => {
     );
 };
 
-const BG: React.VFC = () => (
+const BG: React.FC = () => (
     <Canvas style={canvasStyle as any}>
         <Effects />
         <Bg />

diff --git a/packages/docs-react-vfx/src/dom/ExamplesSection.tsx b/packages/docs-react-vfx/src/dom/ExamplesSection.tsx
@@ -89,7 +89,7 @@ const ExamplesSection: React.FC = () => {
                     plain text!!!!!
                 </VFX.VFXSpan>
             </section>
-            <section>
+            {/* <section>
                 <h3>... and make Transition Effects!</h3>
                 <VFX.VFXImg
                     shader="warpTransition"
@@ -101,7 +101,7 @@ const ExamplesSection: React.FC = () => {
                 <br />
                 <VFX.VFXImg shader="pixelateTransition" src={pub("logo.png")} />
                 <br />
-            </section>
+            </section> */}
         </section>
     );
 };

diff --git a/packages/docs-react-vfx/src/dom/UsageSection.tsx b/packages/docs-react-vfx/src/dom/UsageSection.tsx
@@ -57,7 +57,7 @@ void main() {
 }
 `;
 
-const UsageSection: React.VFC = () => (
+const UsageSection: React.FC = () => (
     <>
         <section>
             <h2 id="install">Install</h2>

diff --git a/packages/docs-react-vfx/src/gl/Effects.tsx b/packages/docs-react-vfx/src/gl/Effects.tsx
@@ -8,9 +8,12 @@ const FXAA = forwardRef(({}, ref) => {
 });
 
 export default function Effects() {
-    return (
-        <EffectComposer multisampling={0}>
-            <FXAA />
-        </EffectComposer>
-    );
+    // Effect doesn't work...
+    return null;
+
+    // return (
+    //     <EffectComposer multisampling={0}>
+    //         <FXAA />
+    //     </EffectComposer>
+    // );
 }
diff --git a/packages/docs-react-vfx/src/gl/Fragments.tsx b/packages/docs-react-vfx/src/gl/Fragments.tsx
@@ -2,6 +2,7 @@ import { useRef, useEffect, useState, RefObject } from "react";
 import { useFrame } from "@react-three/fiber";
 import { isMobile } from "is-mobile";
 import { Object3D, Group, InstancedMesh } from "three";
+import { SpringValue } from "@react-spring/web";
 
 function randomRange(min: number, max: number): number {
     const diff = max - min;
@@ -51,7 +52,11 @@ function Particles({ count }: { count: number }) {
     }, []);
 
     return (
-        <instancedMesh ref={ref} args={[undefined, undefined, count]}>
+        <instancedMesh
+            ref={ref}
+            args={[undefined, undefined, count]}
+            frustumCulled={false}
+        >
             <boxGeometry args={[0.00001, 1, 1]} />
             <meshDepthMaterial />
         </instancedMesh>
@@ -60,7 +65,7 @@ function Particles({ count }: { count: number }) {
 
 type FragmentsProps = {
     count: number;
-    scroll: RefObject<number>;
+    scroll: SpringValue<number>;
 };
 
 function Fragments({ count, scroll }: FragmentsProps) {
@@ -74,7 +79,7 @@ function Fragments({ count, scroll }: FragmentsProps) {
             return;
         }
 
-        const s = scroll.current ?? 0;
+        const s = scroll.get();
         groupRef.current.position.set(0, s * 100 - 50, 0);
         groupRef.current.rotation.set(0, Date.now() / 8000 + s * 5, 0);
     });

diff --git a/packages/docs-react-vfx/src/gl/Triangle.tsx b/packages/docs-react-vfx/src/gl/Triangle.tsx
@@ -2,9 +2,10 @@ import { RefObject, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import { Mesh } from "three";
 import { isMobile } from "is-mobile";
+import { SpringValue } from "@react-spring/web";
 
 type TriangleProps = {
-    scroll: RefObject<number>;
+    scroll: SpringValue<number>;
 };
 
 function Triangle({ scroll }: TriangleProps) {
@@ -20,7 +21,7 @@ function Triangle({ scroll }: TriangleProps) {
         r.rotation.y += 0.004;
         r.rotation.z += 0.01;
 
-        const s = scroll.current ?? 0;
+        const s = scroll.get();
         r.position.set(0, s * 300 - 7, -15);
     });
 

diff --git a/packages/docs-react-vfx/src/types.d.ts b/packages/docs-react-vfx/src/types.d.ts
@@ -1,8 +1,9 @@
-// declare module JSX {
-//     interface IntrinsicElements {
-//         instancedMesh: any;
-//         effectComposer: any;
-//         renderPass: any;
-//         shaderPass: any;
-//     }
-// }
+import { ThreeElements } from "@react-three/fiber";
+
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements extends ThreeElements {}
+        }
+    }
+}
diff --git a/packages/docs-react-vfx/tsconfig.json b/packages/docs-react-vfx/tsconfig.json
@@ -1,21 +1,16 @@
 {
     "compilerOptions": {
         "target": "ESNext",
-        "useDefineForClassFields": true,
         "lib": ["DOM", "DOM.Iterable", "ESNext"],
-        "allowJs": false,
         "skipLibCheck": true,
-        "esModuleInterop": false,
+        "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "module": "ESNext",
-        "moduleResolution": "Node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
+        "moduleResolution": "node",
         "noEmit": true,
-        "jsx": "react-jsx"
+        "jsx": "react"
     },
-    "include": ["src"],
-    "references": [{ "path": "./tsconfig.node.json" }]
+    "include": ["src"]
 }
diff --git a/packages/docs-react-vfx/tsconfig.node.json b/packages/docs-react-vfx/tsconfig.node.json
diff --git a/packages/docs-react-vfx/vite.config.ts b/packages/docs-react-vfx/vite.config.ts
@@ -1,12 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
 
-// https://vitejs.dev/config/
-export default defineConfig(() => ({
+export default defineConfig({
     server: {
         port: 3000,
     },
     base: "",
-    plugins: [react(), viteCommonjs()],
-}));
+    plugins: [react()],
+});
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@vfx-js/core": "0.5.2",
     "dedent": "^1.5.3",
-    "is-mobile": "^4.0.0",
+    "is-mobile": "^5.0.0",
     "lodash.debounce": "^4.0.8",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
@@ -20,11 +20,10 @@
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/dedent": "^0.7.2",
-    "@types/is-mobile": "^2.1.4",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^20.14.2",
-    "rimraf": "^5.0.7",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "@types/node": "^22.10.5",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
   }
 }
diff --git a/packages/react-vfx/package.json b/packages/react-vfx/package.json
@@ -33,29 +33,29 @@
     "lint-staged": "lint-staged"
   },
   "peerDependencies": {
-    "react": ">= 16.12.0",
-    "react-dom": ">= 16.12.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@vfx-js/core": "0.5.2"
   },
   "devDependencies": {
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
-    "eslint": "^8.57.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.19.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.1",
-    "rimraf": "^5.0.7",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
     "tsconfig-to-dual-package": "^1.2.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.7.2"
   },
   "lint-staged": {
     "src/*.{ts,tsx}": [