Change ESM builds for R3F extension so the components are treeshakeable 🌲

packages/r3f/devEnv/build.ts

@@ -2,6 +2,7 @@ import * as path from 'path'
 import {build} from 'esbuild'
 import type {Plugin} from 'esbuild'
 import {existsSync, mkdirSync, writeFileSync} from 'fs'
+import {globPlugin} from 'esbuild-plugin-glob'
 
 const externalPlugin = (patterns: RegExp[]): Plugin => {
   return {
@@ -67,10 +68,16 @@ function createBundles(watch: boolean) {
     {encoding: 'utf-8'},
   )
 
+  if (!existsSync(path.join(pathToPackage, 'dist/esm')))
+    mkdirSync(path.join(pathToPackage, 'dist/esm'))
+
   build({
     ...esbuildConfig,
-    outfile: path.join(pathToPackage, 'dist/index.mjs'),
+    entryPoints: ['src/**/**/*.ts', 'src/**/**/*.tsx'],
+    outdir: path.join(pathToPackage, 'dist/esm'),
     format: 'esm',
+    bundle: false,
+    plugins: [globPlugin()],
   })
 }
 

packages/r3f/package.json

@@ -20,8 +20,8 @@
     "directory": "packages/r3f"
   },
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist/**/*"
@@ -40,6 +40,7 @@
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
     "@types/styled-components": "^5.1.9",
+    "esbuild-plugin-glob": "^1.1.1",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.4.2"
   },

packages/r3f/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "dist/esm",
     "lib": ["ESNext", "DOM"],
     "rootDir": "src",
     "types": ["jest", "node"],

yarn.lock

@@ -5222,6 +5222,7 @@ __metadata:
     "@types/node": ^15.6.2
     "@types/react": ^17.0.9
     "@types/styled-components": ^5.1.9
+    esbuild-plugin-glob: ^1.1.1
     lodash-es: ^4.17.21
     npm-run-all: ^4.1.5
     polished: ^4.1.3
@@ -8335,6 +8336,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "chokidar@npm:3.5.3"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: b49fcde40176ba007ff361b198a2d35df60d9bb2a5aab228279eb810feae9294a6b4649ab15981304447afe1e6ffbf4788ad5db77235dc770ab777c6e771980c
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -10555,6 +10575,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-glob@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "esbuild-plugin-glob@npm:1.1.1"
+  dependencies:
+    chokidar: ^3.5.3
+    minimatch: ^3.1.0
+    tiny-glob: ^0.2.9
+    tiny-invariant: ^1.2.0
+  peerDependencies:
+    esbuild: ^0.x.x
+  checksum: 4025e7ff7c543308086d7831fc286aeb50ab59617b5c47f0da3e0490f17554e1a1a8e909986f795d455c64eeceab2739c5d457d02e592c82479dd7648f83a22d
+  languageName: node
+  linkType: hard
+
 "esbuild-register@npm:^2.5.0":
   version: 2.5.0
   resolution: "esbuild-register@npm:2.5.0"
@@ -12277,6 +12311,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"globalyzer@npm:0.1.0":
+  version: 0.1.0
+  resolution: "globalyzer@npm:0.1.0"
+  checksum: 419a0f95ba542534fac0842964d31b3dc2936a479b2b1a8a62bad7e8b61054faa9b0a06ad9f2e12593396b9b2621cac93358d9b3071d33723fb1778608d358a1
+  languageName: node
+  linkType: hard
+
 "globby@npm:11.0.1":
   version: 11.0.1
   resolution: "globby@npm:11.0.1"
@@ -12332,6 +12373,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: adca162494a176ce9ecf4dd232f7b802956bb1966b37f60c15e49d2e7d961b66c60826366dc2649093cad5a0d69970cfa8875bd1695b5a1a2f33dcd2aa88da3c
+  languageName: node
+  linkType: hard
+
 "glsl-noise@npm:^0.0.0":
   version: 0.0.0
   resolution: "glsl-noise@npm:0.0.0"
@@ -16194,6 +16242,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "minimatch@npm:3.1.2"
+  dependencies:
+    brace-expansion: ^1.1.7
+  checksum: c154e566406683e7bcb746e000b84d74465b3a832c45d59912b9b55cd50dee66e5c4b1e5566dba26154040e51672f9aa450a9aef0c97cfc7336b78b7afb9540a
+  languageName: node
+  linkType: hard
+
 "minimist@npm:^1.1.1, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.5":
   version: 1.2.5
   resolution: "minimist@npm:1.2.5"
@@ -22308,13 +22365,30 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"tiny-glob@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "tiny-glob@npm:0.2.9"
+  dependencies:
+    globalyzer: 0.1.0
+    globrex: ^0.1.2
+  checksum: aea5801eb6663ddf77ebb74900b8f8bd9dfcfc9b6a1cc8018cb7421590c00bf446109ff45e4b64a98e6c95ddb1255a337a5d488fb6311930e2a95334151ec9c6
+  languageName: node
+  linkType: hard
+
 "tiny-inflate@npm:^1.0.0, tiny-inflate@npm:^1.0.3":
   version: 1.0.3
   resolution: "tiny-inflate@npm:1.0.3"
   checksum: 4086a1f8938dafa4a20c63b099aeb47bf8fef5aca991bf4ea4b35dd2684fa52363b2c19b3e76660311e7613cb7c4f063bc48751b9bdf9555e498d997c30bc2d6
   languageName: node
   linkType: hard
 
+"tiny-invariant@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "tiny-invariant@npm:1.2.0"
+  checksum: e09a718a7c4a499ba592cdac61f015d87427a0867ca07f50c11fd9b623f90cdba18937b515d4a5e4f43dac92370498d7bdaee0d0e7a377a61095e02c4a92eade
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.x":
   version: 1.0.4
   resolution: "tmpl@npm:1.0.4"