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

examples/r3f-cra/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "react-app"
+  ]
+}

examples/r3f-cra/package.json

@@ -7,15 +7,12 @@
   },
   "dependencies": {
     "@react-three/drei": "^7.2.2",
-    "@react-three/fiber": "^7.0.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@theatre/core": "workspace:*",
     "@theatre/r3f": "workspace:*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "three": "^0.130.1",
     "web-vitals": "^1.0.1"
   },

examples/r3f-cra/src/App.js

@@ -4,11 +4,13 @@ import {useState, useEffect, useRef} from 'react'
 import {useFrame, Canvas} from '@react-three/fiber'
 import {Shadow, softShadows} from '@react-three/drei'
 import React from 'react'
-import {editable as e, SheetProvider, extension} from '@theatre/r3f'
 import studio from '@theatre/studio'
+import {editable as e, SheetProvider, extension} from '@theatre/r3f'
 
+if (process.env.NODE_ENV === 'development') {
   studio.extend(extension)
   studio.initialize()
+}
 
 // Soft shadows are expensive, comment and refresh when it's too slow
 softShadows()

package.json

@@ -21,7 +21,7 @@
     "lint:all": "eslint . --ext ts,tsx --ignore-path=.gitignore --rulesdir ./devEnv/eslint/rules"
   },
   "lint-staged": {
-    "**/*.(t|j)s?(x)": [
+    "theatre/**/*.(t|j)s?(x)": [
       "eslint --rulesdir ./devEnv/eslint/rules --fix",
       "prettier --write"
     ]

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

theatre/package.json

@@ -95,7 +95,7 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "fuzzysort": "^1.1.4"
+    "fuzzy": "^0.1.3"
   },
   "//": "Add packages here to have them bundled with studio, otherwise add them in the package.json of either studio or core, and they'll be treated as their externals."
 }

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx

@@ -2,7 +2,7 @@ import type {Pointer} from '@theatre/dataverse'
 import {val} from '@theatre/dataverse'
 import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
-import fuzzySort from 'fuzzysort'
+import fuzzy from 'fuzzy'
 import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
 import getStudio from '@theatre/studio/getStudio'
 import type {CommitOrDiscard} from '@theatre/studio/StudioStore/StudioStore'
@@ -132,10 +132,12 @@ const CurveEditorPopover: React.FC<
 
   const presetSearchResults = useMemo(
     () =>
-      fuzzySort.go(filter, presets, {
-        key: 'label',
-        allowTypo: false,
+      fuzzy.filter(filter, presets, {
+        extract: (el) => el.label,
+        pre: '<b>',
+        post: '</b>',
       }),
+
     [filter],
   )
 
@@ -145,7 +147,7 @@ const CurveEditorPopover: React.FC<
 
   const displayedPresets = useMemo(
     () =>
-      useQuery ? presetSearchResults.map((result) => result.obj) : presets,
+      useQuery ? presetSearchResults.map((result) => result.original) : presets,
     [presetSearchResults, useQuery],
   )
 
@@ -199,7 +201,7 @@ const CurveEditorPopover: React.FC<
         }
         const args =
           cssCubicBezierArgsToHandles(newCurve) ??
-          cssCubicBezierArgsToHandles(presetSearchResults[0].obj.value)
+          cssCubicBezierArgsToHandles(presetSearchResults[0].original.value)
 
         if (!args) {
           return
@@ -409,9 +411,7 @@ const CurveEditorPopover: React.FC<
                     {useQuery ? (
                       <span
                         dangerouslySetInnerHTML={{
-                          __html: fuzzySort.highlight(
-                            presetSearchResults[index] as any,
-                          )!,
+                          __html: presetSearchResults[index].string,
                         }}
                       />
                     ) : (