Fix/0.5-compatability-tests (#293)

* Working changes

* Fix window undefined bug by updating lib

* Fix TransformControlsImpl import

* Fix compatibility tests>simple debuggable examples

packages/r3f/devEnv/bundle.ts

@@ -41,7 +41,14 @@ async function createBundles() {
       metafile: true,
     }
 
-    const result = await build(esbuildConfig)
+    const result = await Promise.all([
+      build(esbuildConfig),
+      build({
+        ...esbuildConfig,
+        outfile: path.join(__dirname, '../dist/index.esm.js'),
+        format: 'esm',
+      }),
+    ])
   }
 
   /**
@@ -91,6 +98,13 @@ async function createBundles() {
       metafile: true,
     }
 
-    const result = await build(esbuildConfig)
+    const result = await Promise.all([
+      build(esbuildConfig),
+      build({
+        ...esbuildConfig,
+        outfile: path.join(__dirname, '../dist/extension/index.esm.js'),
+        format: 'esm',
+      }),
+    ])
   }
 }

packages/r3f/package.json

@@ -20,14 +20,20 @@
     "directory": "packages/r3f"
   },
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/index.esm.js",
   "sideEffects": false,
   "files": [
     "dist/**/*"
   ],
   "exports": {
-    ".": "./dist/index.js",
-    "./dist/extension": "./dist/extension/index.js"
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/extension": {
+      "import": "./dist/extension/index.esm.js",
+      "require": "./dist/extension/index.js"
+    }
   },
   "scripts": {
     "prepack": "yarn run build",
@@ -56,7 +62,7 @@
     "react-shadow": "^19.0.3",
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.4.2",
     "zustand": "^3.5.1"
   },

packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx

@@ -99,7 +99,8 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({
 
   const [width, height] = useMemo(() => {
     if (!gl) return [0, 0]
-    const aspectRatio = origWidth / origHeight
+    const aspectRatio =
+      origWidth / (origHeight || Number.EPSILON) || Number.EPSILON
 
     const width = Math.min(aspectRatio * maxHeight, maxWidth)
 

packages/r3f/src/extension/components/TransformControls.tsx

@@ -2,7 +2,7 @@ import type {Object3D, Event} from 'three'
 import React, {forwardRef, useLayoutEffect, useEffect, useMemo} from 'react'
 import type {ReactThreeFiber, Overwrite} from '@react-three/fiber'
 import {useThree} from '@react-three/fiber'
-import {TransformControls as TransformControlsImpl} from 'three/examples/jsm/controls/TransformControls'
+import {TransformControls as TransformControlsImpl} from 'three-stdlib'
 import type {OrbitControls} from 'three-stdlib'
 
 type R3fTransformControls = Overwrite<
@@ -18,6 +18,10 @@ export interface TransformControlsProps extends R3fTransformControls {
   orbitControlsRef?: React.MutableRefObject<OrbitControls | null>
   onObjectChange?: (event: Event) => void
   onDraggingChange?: (event: Event) => void
+
+  // not a complete list of props that transform controls can take
+  mode: TransformControlsImpl['mode']
+  space: TransformControlsImpl['space']
 }
 
 const TransformControls = forwardRef(