fix imports to support esModuleInterop:false (pmndrs#198)

* fix imports to support esModuleInterop:false

* fix

Co-authored-by: Gianmarco <[email protected]>

.storybook/Setup.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 import { Canvas } from 'react-three-fiber'
 

.storybook/stories/Billboard.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
 import { Setup } from '../Setup'
 

.storybook/stories/Cloud.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { withKnobs } from '@storybook/addon-knobs'
 import { Setup } from '../Setup'
 

.storybook/stories/ContactShadows.stories.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import * as React from 'react'
 import { useFrame } from 'react-three-fiber'
 
 import { Setup } from '../Setup'
@@ -13,7 +13,7 @@ export default {
 }
 
 function ContactShadowScene() {
-  const mesh = useRef()
+  const mesh = React.useRef()
   useFrame(({ clock }) => {
     mesh.current.position.y = Math.sin(clock.getElapsedTime()) + 2.5
   })

.storybook/stories/Detailed.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 

.storybook/stories/DeviceOrientationControls.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Setup } from '../Setup'
 import { DeviceOrientationControls } from '../../src/DeviceOrientationControls'
 import { Box } from '../../src/shapes'

.storybook/stories/FlyControls.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { withKnobs, number, boolean } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'

.storybook/stories/HTML.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 

.storybook/stories/Line.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { GeometryUtils } from 'three/examples/jsm/utils/GeometryUtils'
 import { Vector3 } from 'three'
 

.storybook/stories/MapControls.stories.js

@@ -1,4 +1,4 @@
-import React, { Suspense, useState, useRef, useEffect, useMemo } from 'react'
+import * as React from 'react'
 import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'
 import { Box3, Sphere } from 'three'
 import { useLoader, Canvas } from 'react-three-fiber'
@@ -22,20 +22,20 @@ function Cell(props) {
 }
 
 function Svg() {
-  const [center, setCenter] = useState([0, 0, 0])
-  const ref = useRef()
+  const [center, setCenter] = React.useState([0, 0, 0])
+  const ref = React.useRef()
 
   const { paths } = useLoader(SVGLoader, 'map.svg')
 
-  const shapes = useMemo(
+  const shapes = React.useMemo(
     () =>
       paths.flatMap((p) =>
         p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData.style.fillOpacity }))
       ),
     [paths]
   )
 
-  useEffect(() => {
+  React.useEffect(() => {
     const box = new Box3().setFromObject(ref.current)
     const sphere = new Sphere()
     box.getBoundingSphere(sphere)
@@ -55,9 +55,9 @@ function MapControlsScene() {
   return (
     <Canvas orthographic camera={{ position: [0, 0, 50], zoom: 10, up: [0, 0, 1], far: 10000 }}>
       <color attach="background" args={[0xf3f3f3]} />
-      <Suspense fallback={null}>
+      <React.Suspense fallback={null}>
         <Svg />
-      </Suspense>
+      </React.Suspense>
       <MapControls />
     </Canvas>
   )

.storybook/stories/MeshDistortMaterial.stories.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import * as React from 'react'
 
 import { withKnobs, number } from '@storybook/addon-knobs'
 
@@ -32,7 +32,7 @@ MeshDistortMaterialSt.storyName = 'Default'
 
 function MeshDistortMaterialRefScene() {
 
-  const material = useRef()
+  const material = React.useRef()
 
   useFrame(({ clock }) => {
     material.current.distort = Math.sin(clock.getElapsedTime())

.storybook/stories/MeshWobbleMaterial.stories.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import * as React from 'react'
 
 import { withKnobs, number } from '@storybook/addon-knobs'
 
@@ -31,7 +31,7 @@ MeshWobbleMaterialSt.storyName = 'Default'
 
 function MeshWobbleMaterialRefScene() {
 
-  const material = useRef()
+  const material = React.useRef()
 
   useFrame(({ clock }) => {
     material.current.factor = Math.abs(Math.sin(clock.getElapsedTime())) * 2

.storybook/stories/OrbitControls.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'

.storybook/stories/OrthographicCamera.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 
 import { Icosahedron } from '../../src/shapes'
 import { OrthographicCamera } from '../../src/OrthographicCamera'
@@ -13,7 +13,7 @@ export default {
 const NUM = 3
 
 function OrthographicCameraScene() {
-  const positions = useMemo(() => {
+  const positions = React.useMemo(() => {
     const pos = []
     const half = (NUM - 1) / 2
 

.storybook/stories/PerspectiveCamera.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 import { Canvas } from 'react-three-fiber'
 
 import { Icosahedron } from '../../src/shapes'
@@ -13,7 +13,7 @@ export default {
 const NUM = 3
 
 function PerspectiveCameraScene() {
-  const positions = useMemo(() => {
+  const positions = React.useMemo(() => {
     const pos = []
     const half = (NUM - 1) / 2
 

.storybook/stories/PointerLockControls.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 
 import { PointerLockControls } from '../../src/PointerLockControls'
 import { Setup } from '../Setup'
@@ -13,7 +13,7 @@ export default {
 const NUM = 2
 
 function PointerLockControlsScene() {
-  const positions = useMemo(() => {
+  const positions = React.useMemo(() => {
     const pos = []
     const half = (NUM - 1) / 2
 

.storybook/stories/PositionalAudio.stories.js

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 import { OrbitControls } from '../../src/OrbitControls'
@@ -32,7 +32,7 @@ function PositionalAudioScene() {
 
   return (
     <>
-      <Suspense fallback={null}>
+      <React.Suspense fallback={null}>
         <group position={[0, 0, 5]}>
           {args.map(({ position, url }, index) => (
             <mesh key={`0${index}`} position={position}>
@@ -42,7 +42,7 @@ function PositionalAudioScene() {
             </mesh>
           ))}
         </group>
-      </Suspense>
+      </React.Suspense>
       <OrbitControls />
     </>
   )

.storybook/stories/Reflector.stories.js

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import * as React from 'react'
 import { useFrame } from 'react-three-fiber'
 
 import { Setup } from '../Setup'
@@ -12,7 +12,7 @@ export default {
 }
 
 function ReflectorScene() {
-  const $box = useRef()
+  const $box = React.useRef()
   useFrame(({ clock }) => {
     $box.current.position.y += Math.sin(clock.getElapsedTime()) / 100. 
     $box.current.rotation.y = clock.getElapsedTime() / 2.

.storybook/stories/Shadow.stories.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import * as React from 'react'
 import { useFrame } from 'react-three-fiber'
 
 import { Setup } from '../Setup'
@@ -13,8 +13,8 @@ export default {
 }
 
 function ShadowScene() {
-  const shadow = useRef()
-  const mesh = useRef()
+  const shadow = React.useRef()
+  const mesh = React.useRef()
 
   useFrame(({ clock }) => {
     shadow.current.scale.x = Math.sin(clock.getElapsedTime()) + 3

.storybook/stories/Shapes.Extrude.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 
 import { Setup } from '../Setup'
@@ -13,7 +13,7 @@ export default {
 }
 
 function ExtrudeScene() {
-  const shape = useMemo(() => {
+  const shape = React.useMemo(() => {
     const _shape = new THREE.Shape()
 
     const width = 8,
@@ -28,7 +28,7 @@ function ExtrudeScene() {
     return _shape
   }, [])
 
-  const extrudeSettings = useMemo(
+  const extrudeSettings = React.useMemo(
     () => ({
       steps: 2,
       depth: 16,

.storybook/stories/Shapes.Lathe.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 
 import { Setup } from '../Setup'
@@ -13,7 +13,7 @@ export default {
 }
 
 function LatheScene() {
-  const points = useMemo(() => {
+  const points = React.useMemo(() => {
     const _points = []
     for (let i = 0; i < 10; i++) {
       _points.push(new THREE.Vector2(Math.sin(i * 0.2) * 10 + 5, (i - 5) * 2))

.storybook/stories/Shapes.Parametric.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ParametricGeometries } from 'three/examples/jsm/geometries/ParametricGeometries.js'
 
 import { Setup } from '../Setup'

.storybook/stories/Shapes.RoundedBox.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 import { useTurntable } from '../useTurntable'

.storybook/stories/Shapes.Tube.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 
 import { Setup } from '../Setup'
@@ -14,7 +14,7 @@ export default {
 
 function TubeScene() {
   // curve example from https://threejs.org/docs/#api/en/geometries/TubeGeometry
-  const path = useMemo(() => {
+  const path = React.useMemo(() => {
     function CustomSinCurve(scale) {
       THREE.Curve.call(this)
 

.storybook/stories/Shapes.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useFrame } from 'react-three-fiber'
 
 import { Setup } from '../Setup'

.storybook/stories/Sky.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { withKnobs, number } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'

.storybook/stories/Stars.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 

.storybook/stories/Stats.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 

.storybook/stories/Text.stories.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 

.storybook/stories/TrackballControls.stories.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import * as React from 'react'
 
 import { TrackballControls } from '../../src/TrackballControls'
 import { Setup } from '../Setup'
@@ -13,7 +13,7 @@ export default {
 const NUM = 2
 
 function TrackballControlsScene() {
-  const positions = useMemo(() => {
+  const positions = React.useMemo(() => {
     const pos = []
     const half = (NUM - 1) / 2
 

.storybook/stories/TransformControls.stories.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import * as React from 'react'
 
 import { withKnobs, optionsKnob, boolean } from '@storybook/addon-knobs'
 
@@ -28,10 +28,10 @@ export default {
 }
 
 function TransformControlsLockScene({ mode, showX, showY, showZ }) {
-  const orbitControls = useRef()
-  const transformControls = useRef()
+  const orbitControls = React.useRef()
+  const transformControls = React.useRef()
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (transformControls.current) {
       const controls = transformControls.current
       const callback = (event) => (orbitControls.current.enabled = !event.value)

.storybook/stories/meshBounds.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import * as React from 'react'
 
 import { Setup } from '../Setup'
 import { meshBounds } from '../../src/meshBounds'
@@ -12,7 +12,7 @@ export default {
 function MeshBounds(props) {
   const mesh = useTurntable()
 
-  const [hovered, setHover] = useState(false)
+  const [hovered, setHover] = React.useState(false)
 
   return (
     <mesh