diff --git a/src/configs/custom-elements-manifest.config.mjs b/src/configs/custom-elements-manifest.config.mjs index 933dcd3..3fdf6ff 100644 --- a/src/configs/custom-elements-manifest.config.mjs +++ b/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(), ], }; \ No newline at end of file diff --git a/src/scripts/build/configUtils.js b/src/scripts/build/configUtils.js index e27761e..e3ac4ca 100644 --- a/src/scripts/build/configUtils.js +++ b/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), }, }; diff --git a/src/scripts/build/index.js b/src/scripts/build/index.js index 7b75a2b..472dbef 100644 --- a/src/scripts/build/index.js +++ b/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);