RC #244

src/configs/custom-elements-manifest.config.mjs

@@ -1,5 +1,51 @@
 import { cemSorterPlugin } from "@wc-toolkit/cem-sorter";
 import { jsxTypesPlugin } from "@wc-toolkit/jsx-types";
+import fs from "fs/promises";
+
+function addDtsExportsPlugin() {
+  return {
+    // Make sure to always give your plugin a name! This helps when debugging
+    name: 'add-dts-exports-plugin',
+    packageLinkPhase({customElementsManifest}){
+
+      // find modules where path matches 'src/index.js'
+      const exportedModules = customElementsManifest.modules.filter(
+        (mod) => mod.path.endsWith("src/index.js")
+      );
+
+      const exportNames = [];
+
+      // collect all export names
+      exportedModules[0].exports.forEach((exp) => {
+        exportNames.push(exp.name);
+      });
+
+      if (exportNames.length === 0) {
+        console.warn(
+          "No exports found for 'src/index.js'. Skipping export statement addition."
+        );
+        return;
+      }
+
+      // construct export statement
+      const exportStatement = `declare global {
+  namespace svelteHTML {
+    interface IntrinsicElements extends CustomElements {}
+  } 
+}\n
+
+export { ${exportNames.join(', ')} } from "./index.js";\n`;
+
+      // append export statement to dist/index.d.ts
+      fs.appendFile('dist/index.d.ts', exportStatement).then(() => {
+        console.info('Appended export statements to index.d.ts');
+      }).catch((err) => {
+        console.error(`Error appending to index.d.ts: ${err.message}`);
+      });
+
+    },
+  }
+}
 
 export default {
   globs: ["src/**/*.*js", "scripts/wca/**/*.*js"],
@@ -14,8 +60,8 @@ export default {
     jsxTypesPlugin({
       fileName: "index.d.ts",
       outdir: "dist",
-      defaultExport: true,
-      excludeCssCustomProperties: true,
-    })
+      excludeCssCustomProperties: true
+    }),
+    addDtsExportsPlugin(),
   ],
 };

src/scripts/build/configUtils.js

@@ -21,6 +21,7 @@ export function getPluginsConfig(modulePaths = [], options = {}) {
   const {
     watchPatterns = DEFAULTS.watchPatterns,
     dedupe = ["lit", "lit-element", "lit-html"],
+    dev = false,
   } = options;
 
   // Combine default paths with any user-provided paths
@@ -33,7 +34,8 @@ export function getPluginsConfig(modulePaths = [], options = {}) {
       moduleDirectories: DEFAULTS.moduleDirectories,
     }),
     litScss({
-      minify: { fast: true },
+      // Disable CSS minification in dev for readability and faster rebuilds
+      minify: dev ? false : { fast: true },
       options: {
         loadPaths: [...allModulePaths, join(process.cwd(), "src", "styles"), join(process.cwd(), "src")],
       },
@@ -54,6 +56,8 @@ export function getMainBundleConfig(options = {}) {
     input = ["./src/index.js", "./src/registered.js"],
     outputDir = "./dist",
     format = "esm",
+    // When dev is true, avoid randomized filenames for easier debugging
+    dev = false,
   } = options;
 
   return {
@@ -63,10 +67,18 @@ export function getMainBundleConfig(options = {}) {
       output: {
         format,
         dir: outputDir,
-        entryFileNames: "[name].js",
+        // Stable names in dev; in production keep stable names for index/registered
+        entryFileNames: (chunk) =>
+          dev
+            ? "[name].js"
+            : ["index", "registered"].includes(chunk.name)
+              ? "[name].js"
+              : "[name]-[hash].js",
+        chunkFileNames: dev ? "[name].js" : "[name]-[hash].js",
+        assetFileNames: dev ? "[name][extname]" : "[name]-[hash][extname]",
       },
       external: getExternalConfig(),
-      plugins: getPluginsConfig(modulePaths),
+      plugins: getPluginsConfig(modulePaths, { dev }),
       watch: getWatcherConfig(watch),
     },
   };
@@ -84,6 +96,7 @@ export function getDemoConfig(options = {}) {
     globPattern = "./demo/*.js",
     ignorePattern = ["./demo/*.min.js"],
     outputDir = "./demo",
+    dev = false,
   } = options;
 
   return {
@@ -100,8 +113,9 @@ export function getDemoConfig(options = {}) {
         dir: outputDir,
         entryFileNames: "[name].min.js",
         chunkFileNames: "[name].min.js",
+        assetFileNames: dev ? "[name][extname]" : "[name]-[hash][extname]",
       },
-      plugins: getPluginsConfig(modulePaths),
+      plugins: getPluginsConfig(modulePaths, { dev }),
       watch: getWatcherConfig(watch),
     },
   };

src/scripts/build/index.js

@@ -25,7 +25,9 @@ async function runProductionBuild(options) {
   const demoConfig = getDemoConfig(options);
 
   // Add terser for minification in production
-  mainBundleConfig.config.plugins.push(terser());
+  if (!options.dev) {
+    mainBundleConfig.config.plugins.push(terser());
+  }
 
   // Generate docs if enabled
   await generateDocs(options);