@elenajs/bundler 1.0.0-rc.7 → 1.0.0

package/README.md

@@ -1,13 +1,14 @@
+<br/>
 <div align="center">
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="558" height="220">
+  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/elena-v2-dark.png" alt="Elena" width="127" height="156">
   </source>
-  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
+  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/elena-v2.png" alt="Elena" width="127" height="156">
   </source>
-  <img src="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
+  <img src="https://elenajs.com/elena-v2.png" alt="Elena" width="127" height="156">
 </picture>
 
-### Bundler for Progressive Web Component libraries built with Elena.
+### Bundler for Progressive Web Component libraries built with Elena
 
 <br/>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elenajs/bundler",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0",
   "description": "Bundler for Progressive Web Component libraries built with Elena.",
   "author": "Elena <hi@elenajs.com>",
   "homepage": "https://elenajs.com/",
@@ -36,27 +36,26 @@
   },
   "dependencies": {
     "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.0",
+    "@babel/preset-env": "7.29.2",
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@elenajs/plugin-cem-define": "^1.0.0-rc.3",
-    "@elenajs/plugin-cem-prop": "^1.0.0-rc.3",
-    "@elenajs/plugin-cem-tag": "^1.0.0-rc.3",
-    "@elenajs/plugin-cem-typescript": "^1.0.0-rc.4",
-    "@elenajs/plugin-rollup-css": "^1.0.0-rc.3",
+    "@elenajs/plugin-cem-define": "^1.0.0",
+    "@elenajs/plugin-cem-prop": "^1.0.0",
+    "@elenajs/plugin-cem-tag": "^1.0.0",
+    "@elenajs/plugin-cem-typescript": "^1.0.0",
+    "@elenajs/plugin-rollup-css": "^1.0.0",
     "@rollup/plugin-babel": "7.0.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "12.3.0",
     "custom-element-jsx-integration": "1.6.0",
-    "globby": "16.1.1",
-    "rollup": "4.59.0",
-    "rollup-plugin-minify-html-literals-v3": "1.3.4",
+    "globby": "16.2.0",
+    "rollup": "4.60.1",
     "rollup-plugin-summary": "3.0.1",
     "tslib": "2.8.1",
-    "typescript": "5.9.3"
+    "typescript": "6.0.2"
   },
   "devDependencies": {
-    "vitest": "4.1.0"
+    "vitest": "4.1.2"
   },
-  "gitHead": "13a0e3064f943d6ffceb465a59103e034950c28e"
+  "gitHead": "ef466853f84deb6559ea66b54cd85b7e043e9f36"
 }

package/src/common/load-config.js

@@ -9,6 +9,8 @@ import { validateConfig } from "./validate-config.js";
  * @property {string} [dir]        Output directory for individual modules, CSS, and CEM artifacts.
  * @property {string} [format]     Rollup output format (default: `"esm"`).
  * @property {boolean} [sourcemap] Whether to emit sourcemaps (default: `true`).
+ * @property {string} [filename]   Output filename for the bundle (default: `"bundle.js"`).
+ *   The CSS bundle filename is derived by replacing the `.js` extension with `.css`.
  */
 
 /**
@@ -32,6 +34,10 @@ import { validateConfig } from "./validate-config.js";
  *   `{ ecma: 2020, module: true }`.
  * @property {string|false} [banner] Banner comment prepended to every output file. Use a
  *   `@license` JSDoc tag so minifiers preserve it. Set to `false` (default) to omit.
+ * @property {"auto"|"scoped"} [registration] Controls how components are registered.
+ *   `"auto"` (default) preserves `.define()` calls in the output.
+ *   `"scoped"` strips `.define()` calls and generates a `register.js` helper
+ *   with a `defineAll(registry?)` function for scoped registry usage.
  */
 
 /** @type {Required<ElenaConfig>} */
@@ -44,6 +50,7 @@ const DEFAULTS = {
   target: false,
   terser: { ecma: 2020, module: true },
   banner: false,
+  registration: "auto",
 };
 
 /**

package/src/common/validate-config.js

@@ -9,6 +9,7 @@ const KNOWN_KEYS = new Set([
   "target",
   "terser",
   "banner",
+  "registration",
 ]);
 
 /**
@@ -43,6 +44,9 @@ export function validateConfig(config) {
     if (config.output.sourcemap !== undefined && typeof config.output.sourcemap !== "boolean") {
       throw new Error(`░█ [ELENA]: Invalid config: "output.sourcemap" must be a boolean.`);
     }
+    if (config.output.filename !== undefined && typeof config.output.filename !== "string") {
+      throw new Error(`░█ [ELENA]: Invalid config: "output.filename" must be a string.`);
+    }
   }
 
   if (config.bundle !== undefined && typeof config.bundle !== "string" && config.bundle !== false) {
@@ -80,4 +84,12 @@ export function validateConfig(config) {
   if (config.banner !== undefined && typeof config.banner !== "string" && config.banner !== false) {
     throw new Error(`░█ [ELENA]: Invalid config: "banner" must be a string or false.`);
   }
+
+  if (
+    config.registration !== undefined &&
+    config.registration !== "auto" &&
+    config.registration !== "scoped"
+  ) {
+    throw new Error(`░█ [ELENA]: Invalid config: "registration" must be "auto" or "scoped".`);
+  }
 }

package/src/rollup-build.js

@@ -17,7 +17,6 @@ import { rollup, watch } from "rollup";
 import resolve from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
-import minifyHtmlLiterals from "rollup-plugin-minify-html-literals-v3";
 import summary from "rollup-plugin-summary";
 import {
   cssPlugin,
@@ -29,10 +28,118 @@ import { color } from "./common/color.js";
 import babel from "@rollup/plugin-babel";
 
 const TREESHAKE = {
-  moduleSideEffects: false,
   propertyReadSideEffects: false,
 };
 
+const DEFINE_CALL = /^\s*\w+\.define\(\);\s*$/gm;
+const SIDE_EFFECT_IMPORT = /^\s*import\s+["']([^"']+)["']\s*;\s*$/gm;
+
+/**
+ * Rollup plugin that strips `.define()` calls and side-effect-only
+ * imports that resolve to Elena component modules (files containing
+ * `.define()` calls). Non-component side-effect imports (polyfills,
+ * CSS, setup scripts) are preserved.
+ *
+ * Used with `registration: "scoped"`.
+ *
+ * @returns {import("rollup").Plugin}
+ */
+function stripRegistrationPlugin() {
+  return {
+    name: "elena-strip-registration",
+    async transform(code, id) {
+      if (!id.endsWith(".js") && !id.endsWith(".ts")) {
+        return null;
+      }
+
+      let stripped = code.replace(DEFINE_CALL, "");
+
+      // Check each side-effect import: only strip if the resolved
+      // module contains a .define() call (i.e. it is a component).
+      const importMatches = [...stripped.matchAll(SIDE_EFFECT_IMPORT)];
+      for (const match of importMatches) {
+        const specifier = match[1];
+        const resolved = await this.resolve(specifier, id);
+        if (!resolved) {
+          continue;
+        }
+        const module = await this.load({ id: resolved.id });
+        if (module.code && /^\s*\w+\.define\(\);\s*$/m.test(module.code)) {
+          stripped = stripped.replace(match[0], "");
+        }
+      }
+
+      if (stripped === code) {
+        return null;
+      }
+      return { code: stripped, map: null };
+    },
+  };
+}
+
+/**
+ * Rollup plugin that emits a `register.js` module exporting a
+ * `defineAll(registry?)` helper and re-exporting all component classes.
+ * Used with `registration: "scoped"`.
+ *
+ * @param {string} src - Source directory (e.g. `"src"`).
+ * @returns {import("rollup").Plugin}
+ */
+function emitRegisterPlugin(src) {
+  return {
+    name: "elena-emit-register",
+    generateBundle(_, bundle) {
+      // Collect component modules from the emitted chunks.
+      const components = [];
+      for (const [fileName, chunk] of Object.entries(bundle)) {
+        if (chunk.type !== "chunk") {
+          continue;
+        }
+        // Check the original module source for static tagName.
+        for (const moduleId of Object.keys(chunk.modules)) {
+          const info = this.getModuleInfo(moduleId);
+          if (!info || !info.code) {
+            continue;
+          }
+          if (/static\s+tagName\s*=/.test(info.code)) {
+            const match = info.code.match(/(?:export\s+default\s+)?class\s+(\w+)/);
+            if (match) {
+              components.push({ className: match[1], importPath: `./${fileName}` });
+            }
+          }
+        }
+      }
+
+      if (components.length === 0) {
+        return;
+      }
+
+      const imports = components
+        .map(c => `import { default as ${c.className} } from "${c.importPath}";`)
+        .join("\n");
+      const definealls = components.map(c => `  ${c.className}.define(registry);`).join("\n");
+      const exports = components.map(c => c.className).join(", ");
+
+      const source = [
+        imports,
+        "",
+        `export function defineAll(registry) {`,
+        definealls,
+        `}`,
+        "",
+        `export { ${exports} };`,
+        "",
+      ].join("\n");
+
+      this.emitFile({
+        type: "asset",
+        fileName: "register.js",
+        source,
+      });
+    },
+  };
+}
+
 /**
  * Suppress noisy Rollup warnings.
  *
@@ -49,7 +156,7 @@ function onwarn(warning, warn) {
 /**
  * Build the plugin list for a single Rollup build target.
  *
- * @param {{ src: string; outdir: string; hasSummary: boolean; includeCssBundle: boolean; extraPlugins?: import("rollup").Plugin[]; hasTs?: boolean; target?: string | string[] | false }} opts
+ * @param {{ src: string; outdir: string; hasSummary: boolean; includeCssBundle: boolean; cssBundleFilename?: string; extraPlugins?: import("rollup").Plugin[]; hasTs?: boolean; target?: string | string[] | false }} opts
  * @returns {import("rollup").Plugin[]}
  */
 function buildPlugins({
@@ -57,6 +164,7 @@ function buildPlugins({
   outdir,
   hasSummary,
   includeCssBundle,
+  cssBundleFilename = "bundle.css",
   extraPlugins = [],
   hasTs = false,
   target = false,
@@ -87,25 +195,10 @@ function buildPlugins({
     );
   }
 
-  plugins.push(
-    cssStaticStylesPlugin(),
-    minifyHtmlLiterals({
-      options: {
-        shouldMinify: template => {
-          const tag = template.tag && template.tag.toLowerCase();
-          return (
-            (tag && (tag.includes("html") || tag.includes("svg"))) ||
-            template.parts.some(({ text }) => /<[a-z]/i.test(text))
-          );
-        },
-      },
-    }),
-    terser(terserOpts),
-    cssPlugin(src)
-  );
+  plugins.push(cssStaticStylesPlugin(), terser(terserOpts), cssPlugin(src));
 
   if (includeCssBundle) {
-    plugins.push(cssBundlePlugin(src, "bundle.css"));
+    plugins.push(cssBundlePlugin(src, cssBundleFilename));
   }
 
   plugins.push(...extraPlugins);
@@ -129,10 +222,13 @@ export function createRollupConfig(options = {}) {
   const format = options.output?.format ?? "esm";
   const sourcemap = options.output?.sourcemap ?? true;
   let bundle = options.bundle !== undefined ? options.bundle : "src/index.js";
+  const bundleFilename = options.output?.filename ?? "bundle.js";
+  const cssBundleFilename = bundleFilename.replace(/\.js$/, ".css");
   const extraPlugins = options.plugins ?? [];
   const target = options.target ?? false;
   const terserOpts = options.terser ?? { ecma: 2020, module: true };
   const banner = options.banner || undefined;
+  const scoped = options.registration === "scoped";
 
   if (!existsSync(src)) {
     throw new Error(
@@ -161,19 +257,25 @@ export function createRollupConfig(options = {}) {
     );
   }
 
+  const scopedPlugins = scoped ? [stripRegistrationPlugin(), emitRegisterPlugin(src)] : [];
+
   const configs = [
     {
       input: entries,
-      plugins: buildPlugins({
-        src,
-        outdir,
-        hasSummary: false,
-        includeCssBundle: true,
-        extraPlugins,
-        hasTs,
-        target,
-        terserOpts,
-      }),
+      plugins: [
+        ...scopedPlugins,
+        ...buildPlugins({
+          src,
+          outdir,
+          hasSummary: false,
+          includeCssBundle: true,
+          cssBundleFilename,
+          extraPlugins,
+          hasTs,
+          target,
+          terserOpts,
+        }),
+      ],
       output: {
         ...(banner && {
           banner: chunk => (chunk.fileName === "index.js" ? banner : ""),
@@ -190,19 +292,23 @@ export function createRollupConfig(options = {}) {
   ];
 
   if (bundle) {
+    const bundleScoped = scoped ? [stripRegistrationPlugin()] : [];
     configs.push({
       input: bundle,
-      plugins: buildPlugins({
-        src,
-        outdir,
-        hasSummary: true,
-        includeCssBundle: false,
-        extraPlugins,
-        hasTs,
-        target,
-        terserOpts,
-      }),
-      output: { banner, format, sourcemap, file: `${outdir}/bundle.js` },
+      plugins: [
+        ...bundleScoped,
+        ...buildPlugins({
+          src,
+          outdir,
+          hasSummary: true,
+          includeCssBundle: false,
+          extraPlugins,
+          hasTs,
+          target,
+          terserOpts,
+        }),
+      ],
+      output: { banner, format, sourcemap, file: `${outdir}/${bundleFilename}` },
       preserveEntrySignatures: "strict",
       treeshake: TREESHAKE,
       onwarn,