fix react tree shaking and main tree shaking

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

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)));
   }
 }