From bd590f5344676417ea857b6d37a6ebd7a617ec8e Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Tue, 1 Aug 2023 15:58:37 -0400
Subject: [PATCH] fix react tree shaking and main tree shaking

---
 package.json     |  4 ++--
 scripts/build.js | 22 ++++++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 7c423d10..a0a8c516 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
   "sideEffects": [
     "./dist/shoelace.js",
     "./dist/shoelace-autoloader.js",
-    "./dist/components/**/*.js",
-    "./dist/chunks/**/*.js",
+    "./dist/components/**/*.*",
+    "./dist/chunks/**/*.*",
     "./dist/translations/**/*.*",
     "./src/translations/**/*.*",
     "*.css",
diff --git a/scripts/build.js b/scripts/build.js
index 08b686e9..f5aa48e5 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -94,8 +94,6 @@ async function buildTheSource() {
       ...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
       // Theme stylesheets
       ...(await globby('./src/themes/**/!(*.test).ts')),
-      // React wrappers
-      ...(await globby('./src/react/**/*.ts'))
     ],
     outdir: cdndir,
     chunkNames: 'chunks/[name].[hash]',
@@ -127,14 +125,30 @@ async function buildTheSource() {
     outdir
   };
 
+  const reactConfig = {
+    ...npmConfig,
+    entryPoints: [
+      // React wrappers
+      ...(await globby('./src/react/**/*.ts'))
+    ],
+    outdir: 'dist/react',
+    chunkNames: 'react-chunks/[name].[hash]',
+  }
+
+  const configs = [
+    cdnConfig,
+    npmConfig,
+    reactConfig
+  ]
+
   if (serve) {
     // Use the context API to allow incremental dev builds
-    const contexts = await Promise.all([esbuild.context(cdnConfig), esbuild.context(npmConfig)]);
+    const contexts = await Promise.all(configs.map((config) => esbuild.context(config)));
     await Promise.all(contexts.map(context => context.rebuild()));
     return contexts;
   } else {
     // Use the standard API for production builds
-    return await Promise.all([esbuild.build(cdnConfig), esbuild.build(npmConfig)]);
+    return await Promise.all(configs.map((config) => esbuild.build(config)));
   }
 }