chore: adopt warden, oxfmt, oxlint; drop eslint and prettier

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  all:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: bun install --frozen-lockfile
+      - run: bun run all

.oxfmtrc.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "sortTailwindcss": true,
+  "ignorePatterns": ["node_modules", "dist", "out", ".next"]
+}

.oxlintrc.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "import"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "pedantic": "off",
+    "style": "off",
+    "restriction": "off",
+    "nursery": "off"
+  },
+  "rules": {
+    "no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true,
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true
+      }
+    ],
+    "typescript/no-non-null-assertion": "warn",
+    "unicorn/no-useless-spread": "warn",
+    "unicorn/consistent-function-scoping": "warn"
+  },
+  "ignorePatterns": ["node_modules", "dist", "out", ".next"]
+}

next.config.ts

@@ -1,10 +1,10 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  /* config options here */
   reactStrictMode: true,
+  reactCompiler: true,
   output: 'export',
-  webpack: (config) => {
+  webpack: config => {
     config.module.rules.push({ test: /\.(glb)$/, type: 'asset/resource' })
     return config
   },

package.json

@@ -2,69 +2,75 @@
   "name": "tslfx",
   "version": "0.6.0",
   "license": "MIT",
+  "files": [
+    "dist"
+  ],
   "type": "module",
-  "scripts": {
-    "dev": "next dev --webpack",
-    "build": "next build --webpack",
-    "start": "serve out",
-    "lint": "eslint .",
-    "tsup": "tsup --tsconfig tsup.tsconfig.json",
-    "pub": "bun run tsup && npm publish",
-    "format": "prettier --write .",
-    "prepare": "husky"
-  },
-  "tsup": {
-    "entry": [
-      "src/shaders/index.ts"
-    ],
-    "clean": true,
-    "format": [
-      "cjs",
-      "esm"
-    ],
-    "dts": true
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "three": ">=0.182.0"
+  "scripts": {
+    "dev": "portless tslfx next dev --webpack",
+    "build": "next build --webpack",
+    "start": "serve out",
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check .",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
+    "typecheck": "tsc --noEmit",
+    "warden": "warden",
+    "all": "bun run format:check && bun run lint && bun run typecheck && bun run warden",
+    "tsup": "tsup --tsconfig tsup.tsconfig.json",
+    "pub": "bun run tsup && npm publish",
+    "prepare": "husky"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.3.3",
     "@react-three/drei": "10.7.7",
     "@react-three/fiber": "9.4.2",
     "@types/node": "25.0.0",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@types/three": "0.182.0",
-    "eslint": "9.39.1",
-    "eslint-config-next": "16.0.8",
+    "@verekia/warden": "0.0.3",
+    "babel-plugin-react-compiler": "1.0.0",
     "husky": "9.1.7",
     "leva": "0.10.1",
     "next": "16.0.8",
+    "oxfmt": "0.48.0",
+    "oxlint": "1.63.0",
+    "portless": "0.13.0",
     "postcss": "8.5.6",
-    "prettier": "3.7.4",
     "react": "19.2.1",
     "react-dom": "19.2.1",
     "serve": "14.2.5",
-    "three": "0.182.0",
     "tailwindcss": "3.4.17",
+    "three": "0.182.0",
     "tsup": "8.5.1",
     "typescript": "5.9.3",
     "zustand": "5.0.9"
   },
+  "peerDependencies": {
+    "three": ">=0.182.0"
+  },
   "overrides": {
     "three": "0.182.0"
   },
   "patchedDependencies": {
     "three@0.182.0": "patches/three@0.182.0.patch"
+  },
+  "tsup": {
+    "entry": [
+      "src/shaders/index.ts"
+    ],
+    "clean": true,
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "dts": true
   }
 }

src/components/Canvas.tsx

@@ -6,7 +6,7 @@ const MyCanvas = ({ children }: { children: React.ReactNode }) => {
   return (
     <Canvas
       style={{ height: '100vh' }}
-      gl={async (glProps) => {
+      gl={async glProps => {
         // @ts-expect-error
         const renderer = new WebGPURenderer(glProps)
         await renderer.init()

src/components/Page.tsx

@@ -9,13 +9,13 @@ import { setStore, useStoreValue } from '@/lib/store'
 import PlaneScene from './PlaneScene'
 
 const Item = ({ href, children }: { href: string; children: ReactNode }) => (
-  <div className="relative group">
+  <div className="group relative">
     <Link href={href} className="text-sm">
       <li className="pl-2">{children}</li>
     </Link>
     <Link
       href={`https://github.com/verekia/tslfx/blob/main/src/pages${href}.tsx`}
-      className="absolute top-0 right-0 text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      className="absolute right-0 top-0 text-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100"
       target="_blank"
     >
       <div className="flex items-center gap-1">
@@ -58,7 +58,7 @@ const Page = ({
         <title>{title ? `${title} | TSLFX` : 'TSLFX | TSL VFX Library'}</title>
       </Head>
       <div className={`h-screen ${dark ? 'bg-[#333]' : 'bg-[#f0f0f0]'}`}>
-        <div className="fixed top-3 left-3 z-50 flex flex-col gap-2 p-2 px-3 py-2 text-white rounded-md bg-black/50">
+        <div className="fixed left-3 top-3 z-50 flex flex-col gap-2 rounded-md bg-black/50 p-2 px-3 py-2 text-white">
           <header className="flex items-center gap-1">
             <Link href="/">
               <h1 className="text-2xl font-bold">✨ TSLFX ✨</h1>
@@ -122,7 +122,7 @@ const Page = ({
             <Leva titleBar={{ title, filter: false }} {...levaProps} />
           </>
         )}
-        <div className="fixed bottom-0 left-0 z-50 flex gap-3 p-2 [&>*]:bg-black [&>*]:rounded-md [&>*]:px-2 [&>*]:py-1 text-white">
+        <div className="fixed bottom-0 left-0 z-50 flex gap-3 p-2 text-white [&>*]:rounded-md [&>*]:bg-black [&>*]:px-2 [&>*]:py-1">
           <button onClick={() => setStore('dark', !dark)}>{dark ? 'Dark' : 'Light'} mode</button>
           {is2D && (
             <button onClick={() => setStore('boundsPlane', !boundsPlane)}>

src/lib/store.ts

@@ -10,7 +10,7 @@ type State = typeof defaultState
 type Key = keyof State
 
 const useStore = create<State>(() => structuredClone(defaultState))
-export const useStoreValue = <K extends Key>(key: K) => useStore((state) => state[key])
+export const useStoreValue = <K extends Key>(key: K) => useStore(state => state[key])
 export const getStore = useStore.getState
 export const setStoreMulti = useStore.setState
 export const setStore = <K extends Key>(key: K, value: State[K]) => setStoreMulti({ [key]: value })

src/pages/composition/impact.tsx

@@ -80,7 +80,7 @@ const ImpactMaterial = () => {
     setControls,
   ] = useControls(() => {
     const presets: Record<string, ButtonInput> = Object.fromEntries(
-      impactPresets.map((preset) => [
+      impactPresets.map(preset => [
         preset.name,
         button(() => {
           const { seed, aspect, ...rest } = preset.uniforms
@@ -102,7 +102,7 @@ const ImpactMaterial = () => {
             time: 0,
           })
         }),
-      ])
+      ]),
     )
 
     return {

src/pages/composition/new-impact.tsx

@@ -55,7 +55,7 @@ const NewImpactMaterial = () => {
 
   const [controls, setControls] = useControls(() => {
     const presets: Record<string, ButtonInput> = Object.fromEntries(
-      newImpactPresets.map((preset) => [
+      newImpactPresets.map(preset => [
         preset.name,
         button(() => {
           const { seed, aspect, ...rest } = preset.uniforms
@@ -71,7 +71,7 @@ const NewImpactMaterial = () => {
             time: 0,
           })
         }),
-      ])
+      ]),
     )
 
     return {
@@ -107,7 +107,7 @@ const NewImpactMaterial = () => {
 
   const combinedColorNode = useMemo(
     () => pipe(blendAlpha, shapeShader.nodes.colorNode, scatterShader.nodes.colorNode),
-    [shapeShader, scatterShader]
+    [shapeShader, scatterShader],
   )
 
   useFrame((_, delta) => {

src/pages/composition/particles.tsx

@@ -17,21 +17,21 @@ const ParticlesMaterial = () => {
         vesicaColor: new Vector4(0, 0.7, 1, 1),
         vesicaCount: 2,
       },
-      { instanceIndex, instanceCount }
+      { instanceIndex, instanceCount },
     )
 
     const basePosition = vec3(
       cos(instanceIndex.toFloat()).mul(2),
       range(-0.3, 0.3),
-      sin(instanceIndex.toFloat()).mul(2)
+      sin(instanceIndex.toFloat()).mul(2),
     )
     const rotationSpeed = basePosition.y.mul(1.1)
     const rotationAngle = time.mul(rotationSpeed)
 
     const rotatedPosition = vec3(
       basePosition.x.mul(cos(rotationAngle)).sub(basePosition.z.mul(sin(rotationAngle))),
       basePosition.y,
-      basePosition.x.mul(sin(rotationAngle)).add(basePosition.z.mul(cos(rotationAngle)))
+      basePosition.x.mul(sin(rotationAngle)).add(basePosition.z.mul(cos(rotationAngle))),
     )
 
     const positionNode = rotatedPosition.add(vec3(range(-0.1, 0.1), range(-0.1, 0.1), range(-0.1, 0.1)))
@@ -44,7 +44,7 @@ const ParticlesMaterial = () => {
   })
 
   return (
-    <instancedMesh args={[, , instanceCount]}>
+    <instancedMesh args={[undefined, undefined, instanceCount]}>
       <planeGeometry />
       <spriteNodeMaterial {...nodes} transparent blending={AdditiveBlending} depthWrite={false} />
     </instancedMesh>

src/pages/composition/timing.tsx

@@ -22,14 +22,14 @@ const timings = {
 }
 
 const updateShape = (
-  shape: {
+  target: {
     uniforms: { time: UniformNode<number>; visible: UniformNode<number> }
   },
   timing: { startAt: number; duration: number },
-  totalTime: number
+  totalTime: number,
 ) => {
-  shape.uniforms.time.value = clamp((totalTime - timing.startAt) / timing.duration, 0, 1)
-  shape.uniforms.visible.value = Number(shape.uniforms.time.value !== 0 && shape.uniforms.time.value !== 1) as 0 | 1
+  target.uniforms.time.value = clamp((totalTime - timing.startAt) / timing.duration, 0, 1)
+  target.uniforms.visible.value = Number(target.uniforms.time.value !== 0 && target.uniforms.time.value !== 1) as 0 | 1
 }
 
 const TripleExplosionMaterial = () => {
@@ -162,7 +162,7 @@ const TripleExplosionMaterial = () => {
         endOffset: new Vector2(0, -0.4),
       }),
     ],
-    []
+    [],
   )
 
   const combined = useMemo(
@@ -177,9 +177,9 @@ const TripleExplosionMaterial = () => {
         explosion1.nodes.colorNode,
         drop1.nodes.colorNode,
         drop2.nodes.colorNode,
-        drop3.nodes.colorNode
+        drop3.nodes.colorNode,
       ),
-    [drop1, drop2, drop3, explosion1, blow1, explosion2, blow2, explosion3, blow3]
+    [drop1, drop2, drop3, explosion1, blow1, explosion2, blow2, explosion3, blow3],
   )
 
   useFrame((_, delta) => {

src/pages/grass.tsx

@@ -30,7 +30,7 @@ const Content = () => {
         // baseDarkness: 0.3,
         // clusterRadius: 0.4,
       }),
-    [grassGrid.geometry]
+    [grassGrid.geometry],
   )
 
   return (