prettier

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

@@ -93,9 +93,7 @@ async function buildTheSource() {
       // Public utilities
       ...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
       // Theme stylesheets
-      ...(await globby('./src/themes/**/!(*.test).ts')),
-      // React wrappers
-      ...(await globby('./src/react/**/*.ts'))
+      ...(await globby('./src/themes/**/!(*.test).ts'))
     ],
     outdir: cdndir,
     chunkNames: 'chunks/[name].[hash]',
@@ -127,14 +125,26 @@ 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)));
   }
 }
 

scripts/make-react.js

@@ -24,7 +24,7 @@ components.map(component => {
   const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
-  const importPath = component.path;
+  const importPath = component.path.split(/\.js$/)[0] + '.component.js';
   const eventImports = (component.events || [])
     .map(event => `import { ${event.eventName} } from '../../../src/events/events';`)
     .join('\n');