Set printWidth to 110 (#227)

pmndrs · Jun 28, 2021 · 87bcc56 · 87bcc56
1 parent 2752dff
commit 87bcc56
Show file tree

Hide file tree

Showing 26 changed files with 449 additions and 92 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "printWidth": 160,
+  "printWidth": 110,
   "tabWidth": 2,
   "useTabs": false,
   "semi": false,

diff --git a/examples/src/App.js b/examples/src/App.js
@@ -63,7 +63,12 @@ function Demos() {
         <Link key={name} to={`/demo/${name}`}>
           <Spot
             style={{
-              background: (!match && name === defaultComponent) || (match && match.params.name === name) ? 'salmon' : bright ? '#2c2d31' : 'white',
+              background:
+                (!match && name === defaultComponent) || (match && match.params.name === name)
+                  ? 'salmon'
+                  : bright
+                  ? '#2c2d31'
+                  : 'white',
             }}
           />
         </Link>

diff --git a/examples/src/demos/Chain.js b/examples/src/demos/Chain.js
@@ -1,6 +1,12 @@
 import React, { createContext, useContext } from 'react'
 import { Canvas, useFrame } from '@react-three/fiber'
-import { Physics, useSphere, useBox, useConeTwistConstraint, useDistanceConstraint } from '@react-three/cannon'
+import {
+  Physics,
+  useSphere,
+  useBox,
+  useConeTwistConstraint,
+  useDistanceConstraint,
+} from '@react-three/cannon'
 
 const parent = createContext()
 

diff --git a/examples/src/demos/CompoundBody.js b/examples/src/demos/CompoundBody.js
@@ -54,7 +54,15 @@ export default function () {
     <Canvas shadows gl={{ alpha: false }} camera={{ position: [-2, 1, 7], fov: 50 }}>
       <color attach="background" args={['#f6d186']} />
       <hemisphereLight intensity={0.35} />
-      <spotLight position={[5, 5, 5]} angle={0.3} penumbra={1} intensity={2} castShadow shadow-mapSize-width={1028} shadow-mapSize-height={1028} />
+      <spotLight
+        position={[5, 5, 5]}
+        angle={0.3}
+        penumbra={1}
+        intensity={2}
+        castShadow
+        shadow-mapSize-width={1028}
+        shadow-mapSize-height={1028}
+      />
       <Physics iterations={6}>
         <Debug scale={1.1} color="black">
           <Plane rotation={[-Math.PI / 2, 0, 0]} />

diff --git a/examples/src/demos/ConvexPolyhedron.js b/examples/src/demos/ConvexPolyhedron.js
@@ -73,7 +73,15 @@ function ConvexPolyhedron() {
     <>
       <Canvas shadows camera={{ position: [-1, 1, 5], fov: 50 }}>
         <color attach="background" args={['lightpink']} />
-        <spotLight position={[15, 15, 15]} angle={0.3} penumbra={1} intensity={2} castShadow shadow-mapSize-width={2048} shadow-mapSize-height={2048} />
+        <spotLight
+          position={[15, 15, 15]}
+          angle={0.3}
+          penumbra={1}
+          intensity={2}
+          castShadow
+          shadow-mapSize-width={2048}
+          shadow-mapSize-height={2048}
+        />
         <Suspense fallback={null}>
           <Physics gravity={[0, invertGravity ? 5 : -10, 0]}>
             <group

diff --git a/examples/src/demos/CubeHeap.js b/examples/src/demos/CubeHeap.js
@@ -52,7 +52,15 @@ export default () => (
     camera={{ position: [-1, 1, 2.5], fov: 50 }}
     onCreated={({ scene }) => (scene.background = new THREE.Color('lightblue'))}>
     <hemisphereLight intensity={0.35} />
-    <spotLight position={[5, 5, 5]} angle={0.3} penumbra={1} intensity={2} castShadow shadow-mapSize-width={256} shadow-mapSize-height={256} />
+    <spotLight
+      position={[5, 5, 5]}
+      angle={0.3}
+      penumbra={1}
+      intensity={2}
+      castShadow
+      shadow-mapSize-width={256}
+      shadow-mapSize-height={256}
+    />
     <Physics broadphase="SAP">
       <Plane rotation={[-Math.PI / 2, 0, 0]} />
       <Cubes number={200} />

diff --git a/examples/src/demos/Heightfield.js b/examples/src/demos/Heightfield.js
@@ -102,7 +102,11 @@ function Spheres({ rows, columns, spread }) {
   const number = rows * columns
   const [ref] = useSphere((index) => ({
     mass: 1,
-    position: [((index % columns) - (columns - 1) / 2) * spread, 2.0, (Math.floor(index / columns) - (rows - 1) / 2) * spread],
+    position: [
+      ((index % columns) - (columns - 1) / 2) * spread,
+      2.0,
+      (Math.floor(index / columns) - (rows - 1) / 2) * spread,
+    ],
     args: 0.2,
   }))
   const colors = useMemo(() => {

diff --git a/examples/src/demos/HingeMotor.js b/examples/src/demos/HingeMotor.js
@@ -29,7 +29,20 @@ function Plane({ args, ...props }) {
 const context = createContext()
 
 const ConstraintPart = React.forwardRef(
-  ({ config = {}, enableMotor, motorSpeed, color, children, name, pivot = [0, 0, 0], parentPivot = [0, 0, 0], ...props }, ref) => {
+  (
+    {
+      config = {},
+      enableMotor,
+      motorSpeed,
+      color,
+      children,
+      name,
+      pivot = [0, 0, 0],
+      parentPivot = [0, 0, 0],
+      ...props
+    },
+    ref,
+  ) => {
     const parent = useContext(context)
 
     const normParentPivot = parent ? normalizeSize(parent[1].args) : () => undefined
@@ -76,16 +89,18 @@ const ConstraintPart = React.forwardRef(
   },
 )
 
-const BoxShape = React.forwardRef(({ children, transparent = false, opacity = 1, color = 'white', args = [1, 1, 1], ...props }, ref) => {
-  return (
-    <mesh receiveShadow castShadow ref={ref} {...props}>
-      <boxBufferGeometry args={args} />
-      <meshStandardMaterial color={color} transparent={transparent} opacity={opacity} />
+const BoxShape = React.forwardRef(
+  ({ children, transparent = false, opacity = 1, color = 'white', args = [1, 1, 1], ...props }, ref) => {
+    return (
+      <mesh receiveShadow castShadow ref={ref} {...props}>
+        <boxBufferGeometry args={args} />
+        <meshStandardMaterial color={color} transparent={transparent} opacity={opacity} />
 
-      {children}
-    </mesh>
-  )
-})
+        {children}
+      </mesh>
+    )
+  },
+)
 
 const Robot = React.forwardRef(({ ...props }, ref) => {
   const [motorSpeed, setMotorSpeed] = useState(7)

diff --git a/examples/src/demos/KinematicCube.js b/examples/src/demos/KinematicCube.js
@@ -60,7 +60,15 @@ function InstancedSpheres({ number = 100 }) {
 export default () => (
   <Canvas concurrent shadows gl={{ alpha: false }} camera={{ position: [0, -12, 16] }}>
     <hemisphereLight intensity={0.35} />
-    <spotLight position={[30, 0, 30]} angle={0.3} penumbra={1} intensity={2} castShadow shadow-mapSize-width={256} shadow-mapSize-height={256} />
+    <spotLight
+      position={[30, 0, 30]}
+      angle={0.3}
+      penumbra={1}
+      intensity={2}
+      castShadow
+      shadow-mapSize-width={256}
+      shadow-mapSize-height={256}
+    />
     <pointLight position={[-30, 0, -30]} intensity={0.5} />
     <Physics gravity={[0, 0, -30]}>
       <Plane color={niceColors[17][4]} />

diff --git a/examples/src/demos/MondayMorning/createConfig.js b/examples/src/demos/MondayMorning/createConfig.js
@@ -85,13 +85,21 @@ export function createRagdoll(scale, angleA = 0, angleB = 0, twistAngle = 0) {
     color: 'lightpink',
     args: [lowerArmLength * 0.5, lowerArmSize * 0.5, lowerArmSize * 0.5],
     mass: scale,
-    position: [upperLeftArm.position[0] - lowerArmLength / 2 - upperArmLength / 2, upperLeftArm.position[1], 0],
+    position: [
+      upperLeftArm.position[0] - lowerArmLength / 2 - upperArmLength / 2,
+      upperLeftArm.position[1],
+      0,
+    ],
   }
   const lowerRightArm = {
     color: 'lightpink',
     args: [lowerArmLength * 0.5, lowerArmSize * 0.5, lowerArmSize * 0.5],
     mass: scale,
-    position: [upperRightArm.position[0] + lowerArmLength / 2 + upperArmLength / 2, upperRightArm.position[1], 0],
+    position: [
+      upperRightArm.position[0] + lowerArmLength / 2 + upperArmLength / 2,
+      upperRightArm.position[1],
+      0,
+    ],
   }
 
   // joints

diff --git a/examples/src/demos/MondayMorning/index.js b/examples/src/demos/MondayMorning/index.js
@@ -1,7 +1,25 @@
-import React, { Suspense, createRef, createContext, useContext, useCallback, useEffect, useMemo, useRef } from 'react'
+import React, {
+  Suspense,
+  createRef,
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
 import { Canvas, useFrame, useLoader } from '@react-three/fiber'
 import { GLTFLoader } from 'three-stdlib/loaders/GLTFLoader'
-import { Physics, useBox, useCompoundBody, useCylinder, useSphere, usePlane, useConeTwistConstraint, usePointToPointConstraint } from '@react-three/cannon'
+import {
+  Physics,
+  useBox,
+  useCompoundBody,
+  useCylinder,
+  useSphere,
+  usePlane,
+  useConeTwistConstraint,
+  usePointToPointConstraint,
+} from '@react-three/cannon'
 import { createRagdoll } from './createConfig'
 
 const { shapes, joints } = createRagdoll(4.8, Math.PI / 16, Math.PI / 16, 0)
@@ -61,10 +79,29 @@ function Ragdoll(props) {
         render={
           <>
             <group ref={eyes}>
-              <Box position={[-0.3, 0.1, 0.5]} args={[0.3, 0.01, 0.1]} color="black" transparent opacity={0.8} />
-              <Box position={[0.3, 0.1, 0.5]} args={[0.3, 0.01, 0.1]} color="black" transparent opacity={0.8} />
+              <Box
+                position={[-0.3, 0.1, 0.5]}
+                args={[0.3, 0.01, 0.1]}
+                color="black"
+                transparent
+                opacity={0.8}
+              />
+              <Box
+                position={[0.3, 0.1, 0.5]}
+                args={[0.3, 0.01, 0.1]}
+                color="black"
+                transparent
+                opacity={0.8}
+              />
             </group>
-            <Box ref={mouth} position={[0, -0.2, 0.5]} args={[0.3, 0.05, 0.1]} color="#270000" transparent opacity={0.8} />
+            <Box
+              ref={mouth}
+              position={[0, -0.2, 0.5]}
+              args={[0.3, 0.05, 0.1]}
+              color="#270000"
+              transparent
+              opacity={0.8}
+            />
           </>
         }
       />
@@ -96,15 +133,17 @@ function Plane(props) {
   )
 }
 
-const Box = React.forwardRef(({ children, transparent = false, opacity = 1, color = 'white', args = [1, 1, 1], ...props }, ref) => {
-  return (
-    <mesh receiveShadow castShadow ref={ref} {...props}>
-      <boxBufferGeometry args={args} />
-      <meshStandardMaterial color={color} transparent={transparent} opacity={opacity} />
-      {children}
-    </mesh>
-  )
-})
+const Box = React.forwardRef(
+  ({ children, transparent = false, opacity = 1, color = 'white', args = [1, 1, 1], ...props }, ref) => {
+    return (
+      <mesh receiveShadow castShadow ref={ref} {...props}>
+        <boxBufferGeometry args={args} />
+        <meshStandardMaterial color={color} transparent={transparent} opacity={opacity} />
+        {children}
+      </mesh>
+    )
+  },
+)
 
 function Chair() {
   const [ref] = useCompoundBody(() => ({
@@ -146,8 +185,18 @@ function Mug() {
   return (
     <group ref={cup} {...bind} dispose={null}>
       <group scale={[0.01, 0.01, 0.01]}>
-        <mesh receiveShadow castShadow material={materials.default} geometry={nodes['buffer-0-mesh-0'].geometry} />
-        <mesh receiveShadow castShadow material={materials.Liquid} geometry={nodes['buffer-0-mesh-0_1'].geometry} />
+        <mesh
+          receiveShadow
+          castShadow
+          material={materials.default}
+          geometry={nodes['buffer-0-mesh-0'].geometry}
+        />
+        <mesh
+          receiveShadow
+          castShadow
+          material={materials.Liquid}
+          geometry={nodes['buffer-0-mesh-0_1'].geometry}
+        />
       </group>
     </group>
   )
@@ -198,7 +247,11 @@ const Lamp = () => {
 }
 
 export default () => (
-  <Canvas style={{ cursor: 'none' }} shadows orthographic camera={{ position: [-25, 20, 25], zoom: 25, near: 1, far: 100 }}>
+  <Canvas
+    style={{ cursor: 'none' }}
+    shadows
+    orthographic
+    camera={{ position: [-25, 20, 25], zoom: 25, near: 1, far: 100 }}>
     <color attach="background" args={['#171720']} />
     <fog attach="fog" args={['#171720', 20, 70]} />
     <ambientLight intensity={0.2} />

diff --git a/examples/src/demos/Pingpong/Text.js b/examples/src/demos/Pingpong/Text.js
@@ -3,14 +3,19 @@ import React, { forwardRef, useMemo } from 'react'
 import fontJson from './resources/firasans_regular.json'
 
 const font = new THREE.FontLoader().parse(fontJson)
-const geom = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].map((number) => new THREE.TextGeometry(number, { font, size: 5, height: 0.1 }))
+const geom = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].map(
+  (number) => new THREE.TextGeometry(number, { font, size: 5, height: 0.1 }),
+)
 
 const Text = forwardRef(({ children, color = 'white', ...props }, ref) => {
   const array = useMemo(() => [...children], [children])
   return (
     <group ref={ref} {...props} dispose={null}>
       {array.map((char, index) => (
-        <mesh position={[-(array.length / 2) * 3.5 + index * 3.5, 0, 0]} key={index} geometry={geom[parseInt(char)]}>
+        <mesh
+          position={[-(array.length / 2) * 3.5 + index * 3.5, 0, 0]}
+          key={index}
+          geometry={geom[parseInt(char)]}>
           <meshBasicMaterial color={color} transparent opacity={0.5} />
         </mesh>
       ))}

diff --git a/examples/src/demos/Pingpong/index.js b/examples/src/demos/Pingpong/index.js
@@ -61,7 +61,14 @@ function Paddle() {
           <primitive object={nodes.Bone003} />
           <primitive object={nodes.Bone006} />
           <primitive object={nodes.Bone010} />
-          <skinnedMesh castShadow receiveShadow material={materials.glove} material-roughness={1} geometry={nodes.arm.geometry} skeleton={nodes.arm.skeleton} />
+          <skinnedMesh
+            castShadow
+            receiveShadow
+            material={materials.glove}
+            material-roughness={1}
+            geometry={nodes.arm.geometry}
+            skeleton={nodes.arm.skeleton}
+          />
         </group>
         <group rotation={[0, -0.04, 0]} scale={[141.94, 141.94, 141.94]}>
           <mesh castShadow receiveShadow material={materials.wood} geometry={nodes.mesh.geometry} />
@@ -103,7 +110,10 @@ export default function () {
 
   return (
     <>
-      <Canvas shadows camera={{ position: [0, 5, 12], fov: 50 }} onPointerMissed={() => welcome && reset(false)}>
+      <Canvas
+        shadows
+        camera={{ position: [0, 5, 12], fov: 50 }}
+        onPointerMissed={() => welcome && reset(false)}>
         <color attach="background" args={['#171720']} />
         <ambientLight intensity={0.5} />
         <pointLight position={[-10, -10, -10]} />

diff --git a/examples/src/demos/Raycast/index.js b/examples/src/demos/Raycast/index.js
@@ -129,7 +129,15 @@ export default () => (
     <Camera />
     <color attach="background" args={['#fcb89d']} />
     <hemisphereLight intensity={0.35} />
-    <spotLight position={[0, 10, 0]} angle={1} penumbra={0.5} intensity={2} castShadow shadow-mapSize-width={1028} shadow-mapSize-height={1028} />
+    <spotLight
+      position={[0, 10, 0]}
+      angle={1}
+      penumbra={0.5}
+      intensity={2}
+      castShadow
+      shadow-mapSize-width={1028}
+      shadow-mapSize-height={1028}
+    />
     <Suspense fallback={null}>
       <Physics iterations={6}>
         <Plane rotation={[-Math.PI / 2, 0, 0]} />

diff --git a/examples/src/demos/Raycast/prettyPrint.js b/examples/src/demos/Raycast/prettyPrint.js
@@ -1,6 +1,8 @@
 const vec3ArrayRegex = (indentCount) =>
   new RegExp(
-    `\\: \\[\\n {${indentCount}}([+-]?\\d+\\.?\\d*),\\n {${indentCount}}([+-]?\\d+\\.?\\d*),\\n {${indentCount}}([+-]?\\d+\\.?\\d*)\\n {${indentCount - 2}}\\]`,
+    `\\: \\[\\n {${indentCount}}([+-]?\\d+\\.?\\d*),\\n {${indentCount}}([+-]?\\d+\\.?\\d*),\\n {${indentCount}}([+-]?\\d+\\.?\\d*)\\n {${
+      indentCount - 2
+    }}\\]`,
     'gm',
   )
 const vec3ArrayReplacement = (_, v1, v2, v3) => `: [ ${v1}, ${v2}, ${v3} ]`