Fix various issues with the build system (#129)

* Fix react-icons breaking in CRA 5 for some reason

* Replace fuzzysort with fuzzy so we don't break Webpack

Webpack messes up esbuild’s internal modules if the inlined module is an AMD module. Check any new dep you add if it is an AMD module.

* Inline dataverse deps.

Mainly because the CJS build consuming the ESM lodash-es broke some bundlers.

* react-icons fix nr 2

* Stop eslint breaking in CRA 5

* Update r3f-cra example to CRA 5 and fix double-bundling react & co

* Fix r3f tree-shaking and switch to ESM only output

* Make r3f example shake studio and its extension in prod

* Examples have separate and wildly differing build setups so remove them from the pre-commit hook linting

* Update out-of-date yarn.lock

packages/dataverse/devEnv/build.ts

@@ -1,24 +1,6 @@
 import * as path from 'path'
 import {build} from 'esbuild'
-import type {Plugin} from 'esbuild'
 
-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',
 }
@@ -35,7 +17,6 @@ function createBundles(watch: boolean) {
     mainFields: ['browser', 'module', 'main'],
     target: ['firefox57', 'chrome58'],
     conditions: ['browser', 'node'],
-    plugins: [externalPlugin([/^[\@a-zA-Z]+/])],
   }
 
   build({

packages/r3f/devEnv/build.ts

@@ -1,77 +0,0 @@
-import * as path from 'path'
-import {build} from 'esbuild'
-import type {Plugin} from 'esbuild'
-import {existsSync, mkdirSync, 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.js'),
-    format: 'cjs',
-  })
-
-  build({
-    ...esbuildConfig,
-    define: {...definedGlobals, 'process.env.NODE_ENV': '"development"'},
-    outfile: path.join(pathToPackage, 'dist/index.development.js'),
-    format: 'cjs',
-  })
-
-  if (!existsSync(path.join(pathToPackage, 'dist')))
-    mkdirSync(path.join(pathToPackage, 'dist'))
-
-  writeFileSync(
-    path.join(pathToPackage, 'dist/index.js'),
-    `module.exports =
-  process.env.NODE_ENV === "production"
-    ? require("./index.production.js")
-    : require("./index.development.js")`,
-    {encoding: 'utf-8'},
-  )
-
-  build({
-    ...esbuildConfig,
-    outfile: path.join(pathToPackage, 'dist/index.mjs'),
-    format: 'esm',
-  })
-}
-
-createBundles(false)

packages/r3f/devEnv/tsconfig.json

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

packages/r3f/package.json

@@ -19,9 +19,9 @@
     "url": "https://github.com/AriaMinaei/theatre",
     "directory": "packages/r3f"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist/**/*"
@@ -29,9 +29,7 @@
   "scripts": {
     "prepack": "yarn run build",
     "typecheck": "yarn run build",
-    "build": "run-s build:ts build:js",
-    "build:ts": "tsc --build ./tsconfig.json",
-    "build:js": "node -r esbuild-register ./devEnv/build.ts",
+    "build": "tsc --build ./tsconfig.json",
     "prepublish": "yarn run build"
   },
   "devDependencies": {

packages/r3f/src/components/EditableProxy.tsx

@@ -12,14 +12,9 @@ import {useHelper, Sphere, Html} from '@react-three/drei'
 import type {EditableType} from '../store'
 import {useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
-import {
-  BiSun,
-  BsCameraVideoFill,
-  BsFillCollectionFill,
-  GiCube,
-  GiLightBulb,
-  GiLightProjector,
-} from 'react-icons/all'
+import {GiCube, GiLightBulb, GiLightProjector} from 'react-icons/gi'
+import {BsCameraVideoFill, BsFillCollectionFill} from 'react-icons/bs'
+import {BiSun} from 'react-icons/bi'
 import type {IconType} from 'react-icons'
 import studio from '@theatre/studio'
 import {useSelected} from './useSelected'

packages/r3f/src/components/SnapshotEditor.tsx

@@ -9,7 +9,7 @@ import ProxyManager from './ProxyManager'
 import studio, {ToolbarIconButton} from '@theatre/studio'
 import {useVal} from '@theatre/react'
 import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
-import {IoCameraReverseOutline} from 'react-icons/all'
+import {IoCameraReverseOutline} from 'react-icons/io5'
 import type {ISheet} from '@theatre/core'
 import useSnapshotEditorCamera from './useSnapshotEditorCamera'
 import {getEditorSheet, getEditorSheetObject} from './editorStuff'

packages/r3f/src/components/Toolbar/Toolbar.tsx

@@ -1,6 +1,6 @@
 import type {VFC} from 'react'
 import React from 'react'
-import {IoCameraOutline} from 'react-icons/all'
+import {IoCameraOutline} from 'react-icons/io5'
 import studio, {ToolbarIconButton} from '@theatre/studio'
 import {useVal} from '@theatre/react'
 import TransformControlsModeSelect from './TransformControlsModeSelect'

packages/r3f/src/components/Toolbar/TransformControlsModeSelect.tsx

@@ -1,7 +1,7 @@
 import {ToolbarSwitchSelect} from '@theatre/studio'
 import type {VFC} from 'react'
 import React from 'react'
-import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all'
+import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/gi'
 import type {TransformControlsMode} from '../../store'
 
 export interface TransformControlsModeSelectProps {

packages/r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx

@@ -1,7 +1,7 @@
 import type {VFC} from 'react'
 import React from 'react'
 import type {TransformControlsSpace} from '../../store'
-import {BiCube, BiGlobe} from 'react-icons/all'
+import {BiCube, BiGlobe} from 'react-icons/bi'
 import {ToolbarSwitchSelect} from '@theatre/studio'
 
 export interface TransformControlsSpaceSelectProps {

packages/r3f/src/components/Toolbar/ViewportShadingSelect.tsx

@@ -1,7 +1,9 @@
 import type {VFC} from 'react'
 import React from 'react'
 import type {ViewportShading} from '../../store'
-import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
+import {FaCube} from 'react-icons/fa'
+import {GiCube, GiIceCube} from 'react-icons/gi'
+import {BiCube} from 'react-icons/bi'
 import {ToolbarSwitchSelect} from '@theatre/studio'
 
 export interface ViewportShadingSelectProps {

packages/r3f/tsconfig.json

@@ -1,11 +1,10 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "dist/esm",
     "lib": ["ESNext", "DOM"],
     "rootDir": "src",
     "types": ["jest", "node"],
-    "emitDeclarationOnly": true,
     "composite": true
   },
   "references": [{"path": "../../theatre"}],