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/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"}],