WIP: Getting r3f to work with create-react-app

* Temporarily disabled ESM bundles because the current setup confuses webpack4 (but not parceljs). Since create-react-app uses webpack4, not doing this would make theatre incompatible with CRA.

packages/dataverse-react/package.json

@@ -14,15 +14,6 @@
   },
   "main": "dist/index.cjs",
   "types": "dist/index.d.ts",
-  "module": "dist/index.mjs",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.cjs",
-      "node": "./dist/index.cjs"
-    }
-  },
   "files": [
     "dist/**/*"
   ],

packages/dataverse/package.json

@@ -14,15 +14,6 @@
   },
   "main": "dist/index.cjs",
   "types": "dist/index.d.ts",
-  "module": "dist/index.mjs",
-  "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.cjs",
-      "node": "./dist/index.cjs"
-    }
-  },
   "files": [
     "dist/**/*"
   ],

packages/playground/src/r3f/App.tsx

@@ -1,5 +1,4 @@
 import {editable as e, Wrapper} from '@theatre/plugin-r3f'
-import {PerspectiveCamera} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import * as THREE from 'three'
 import React, {useState, useEffect, useRef} from 'react'
@@ -7,9 +6,6 @@ import type {Color} from '@react-three/fiber'
 import {Canvas, useFrame} from '@react-three/fiber'
 import {softShadows, Shadow} from '@react-three/drei'
 import type {DirectionalLight} from 'three'
-import type {$FixMe} from '../../../plugin-r3f/src/types'
-
-const ECamera = e(PerspectiveCamera, 'perspectiveCamera')
 
 // Soft shadows are expensive, comment and refresh when it's too slow
 softShadows()
@@ -29,11 +25,7 @@ function Button() {
   useFrame((state) => {
     const step = 0.1
     const camera = state.camera as THREE.PerspectiveCamera
-    camera.fov = (THREE as $FixMe).MathUtils.lerp(
-      camera.fov,
-      zoom ? 10 : 42,
-      step,
-    )
+    camera.fov = (THREE as any).MathUtils.lerp(camera.fov, zoom ? 10 : 42, step)
     camera.position.lerp(
       vec.set(zoom ? 25 : 10, zoom ? 1 : 5, zoom ? 0 : 10),
       step,
@@ -99,9 +91,10 @@ function App() {
         shadowMap
       >
         <Wrapper
-          getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
+          getSheet={() => getProject('Playground - R3F').sheet('R3F-Canvas')}
         >
-          <ECamera makeDefault uniqueName="Camera" />
+          {/* @ts-ignore */}
+          <e.perspectiveCamera makeDefault uniqueName="Camera" />
           <ambientLight intensity={0.4} />
           <e.pointLight
             position={[-10, -10, 5]}

packages/playground/src/space-exploration/App.tsx

@@ -49,7 +49,7 @@ function App() {
   const bg = '#272730'
   return (
     <div>
-      <Canvas dpr={[1.5, 2]} linear shadows>
+      <Canvas dpr={[1.5, 2]} linear shadows frameloop="demand">
         <Wrapper
           getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
         >

packages/plugin-r3f/devEnv/build.ts

@@ -0,0 +1,75 @@
+import path from 'path'
+import {build} from 'esbuild'
+import type {Plugin} from 'esbuild'
+import {writeFileSync} from 'fs'
+
+const externalPlugin = (patterns: RegExp[]): Plugin => {
+  return {
+    name: `external`,
+
+    setup(build) {
+      build.onResolve({filter: /.*/}, (args) => {
+        const external = patterns.some((p) => {
+          return p.test(args.path)
+        })
+
+        if (external) {
+          return {path: args.path, external}
+        }
+      })
+    },
+  }
+}
+
+const definedGlobals = {
+  global: 'window',
+}
+
+function createBundles(watch: boolean) {
+  const pathToPackage = path.join(__dirname, '../')
+  const esbuildConfig: Parameters<typeof build>[0] = {
+    entryPoints: [path.join(pathToPackage, 'src/index.tsx')],
+    bundle: true,
+    sourcemap: true,
+    define: definedGlobals,
+    watch,
+    platform: 'neutral',
+    mainFields: ['browser', 'module', 'main'],
+    target: ['firefox57', 'chrome58'],
+    conditions: ['browser', 'node'],
+    // every dependency is considered external
+    plugins: [externalPlugin([/^[\@a-zA-Z]+/])],
+  }
+
+  build({
+    ...esbuildConfig,
+    define: {...definedGlobals, 'process.env.NODE_ENV': '"production"'},
+    outfile: path.join(pathToPackage, 'dist/index.production.cjs'),
+    format: 'cjs',
+    treeShaking: true,
+  })
+
+  build({
+    ...esbuildConfig,
+    define: {...definedGlobals, 'process.env.NODE_ENV': '"development"'},
+    outfile: path.join(pathToPackage, 'dist/index.development.cjs'),
+    format: 'cjs',
+  })
+
+  writeFileSync(
+    path.join(pathToPackage, 'dist/index.cjs'),
+    `module.exports =
+  process.env.NODE_ENV === "production"
+    ? require("./index.production.cjs")
+    : require("./index.development.cjs")`,
+    {encoding: 'utf-8'},
+  )
+
+  build({
+    ...esbuildConfig,
+    outfile: path.join(pathToPackage, 'dist/index.mjs'),
+    format: 'esm',
+  })
+}
+
+createBundles(false)

packages/plugin-r3f/devEnv/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  
+}

packages/plugin-r3f/package.json

@@ -19,15 +19,18 @@
     "url": "https://github.com/AriaMinaei/theatre",
     "directory": "packages/plugin-r3f"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "files": [
     "dist/**/*"
   ],
   "scripts": {
     "prepack": "yarn run build",
     "typecheck": "yarn run build",
-    "build": "tsc --build ./tsconfig.json",
+    "build": "run-s build:ts build:js",
+    "build:ts": "tsc --build ./tsconfig.json",
+    "build:js": "node -r esbuild-register ./devEnv/build.ts",
     "prepublish": "node ../../devEnv/ensurePublishing.js"
   },
   "devDependencies": {
@@ -36,6 +39,7 @@
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
     "@types/styled-components": "^5.1.9",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.3.2"
   },
   "dependencies": {

packages/plugin-r3f/src/index.tsx

@@ -1,8 +1,4 @@
-import SnapshotEditor from './components/SnapshotEditor'
-import studio from '@theatre/studio'
-import Toolbar from './components/Toolbar/Toolbar'
-import {types} from '@theatre/core'
-
+import setupPlugin from './setupPlugin'
 export {default as EditorHelper} from './components/EditorHelper'
 export type {EditorHelperProps} from './components/EditorHelper'
 export {default as editable} from './components/editable'
@@ -10,19 +6,5 @@ export type {EditableState, BindFunction} from './store'
 export {default as Wrapper} from './Wrapper'
 
 if (process.env.NODE_ENV === 'development') {
-  studio.extend({
-    id: '@theatre/plugin-r3f',
-    globalToolbar: {
-      component: Toolbar,
-    },
-    panes: [
-      {
-        class: 'snapshotEditor',
-        dataType: types.compound({
-          grosse: types.number(20),
-        }),
-        component: SnapshotEditor,
-      },
-    ],
-  })
+  setupPlugin()
 }

packages/plugin-r3f/src/setupPlugin.ts

@@ -0,0 +1,22 @@
+import SnapshotEditor from './components/SnapshotEditor'
+import studio from '@theatre/studio'
+import Toolbar from './components/Toolbar/Toolbar'
+import {types} from '@theatre/core'
+
+export default function setupPlugin() {
+  studio.extend({
+    id: '@theatre/plugin-r3f',
+    globalToolbar: {
+      component: Toolbar,
+    },
+    panes: [
+      {
+        class: 'snapshotEditor',
+        dataType: types.compound({
+          grosse: types.number(20),
+        }),
+        component: SnapshotEditor,
+      },
+    ],
+  })
+}

packages/plugin-r3f/tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["ESNext", "DOM"],
     "rootDir": "src",
     "types": ["jest", "node"],
-    "emitDeclarationOnly": false,
+    "emitDeclarationOnly": true,
     "composite": true
   },
   "references": [{"path": "../../theatre"}],