Web Components: Add bundlesize plugin for build output check (uswds#180)

* remove single file and banner-specific vite config

* add bundlesize config to vite

* add failing condition to test CI pipeline

* add passing condition

* turn off bundlesize for storybook build

* update lockfile

* fix duplicate key from merge

* use callback for entry map

* move build helpers to external file and test

* add test coverage for vite build helpers

* refactor build helper for clarity

Author: ethangardner

.gitignore

@@ -38,3 +38,6 @@ storybook-static
 # Docker
 /.npm/_update-notifier-last-checked
 /.bash_history
+
+# bundlesize plugin
+bundlemeta.json

.storybook/main.js

@@ -14,5 +14,17 @@ const config = {
     name: "@storybook/web-components-vite",
     options: {},
   },
+  viteFinal: async (config) => {
+    /**
+     * Unload the `vite-plugin-bundlesize` plugin.
+     * This plugin is only used in the CI pipeline for output size of the
+     * individual components.
+     */
+    config.plugins = config.plugins.filter(
+      (plugin) => plugin.name !== "vite-plugin-bundlesize",
+    );
+
+    return config;
+  },
 };
 export default config;

package-lock.json

@@ -86,6 +86,7 @@
     "stylelint-order": "^7.0.0",
     "typescript": "^5.8.3",
     "vite": "^7.1.5",
+    "vite-plugin-bundlesize": "^0.3.0",
     "vite-plugin-lit-css": "^2.2.1",
     "vitest": "^3.2.4",
     "wait-on": "^7.2.0"

package.json

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import {
+  mapEntryToLimit,
+  type Entry,
+  mapEntryToTuple,
+  mapEntriesToKeyValue,
+} from "./build-helpers";
+
+describe("mapEntryToLimit", () => {
+  it("should correctly transform an entry to a Limit object", () => {
+    const entry: Entry = {
+      name: "components/index",
+      path: "src/components/index",
+      sizeLimit: "0.2 kB",
+    };
+
+    const expected = {
+      name: "components/index.js",
+      limit: entry.sizeLimit,
+      mode: "brotli",
+    };
+
+    expect(mapEntryToLimit(entry)).toEqual(expected);
+  });
+});
+
+describe("mapEntriesToKeyValue", () => {
+  it("should correctly transform an entry to a Limit object", () => {
+    const entries: Array<Entry> = [
+      {
+        name: "components/index",
+        path: "src/components/index",
+        sizeLimit: "0.2 kB",
+      },
+      {
+        name: "components/usa-banner",
+        path: "src/components/usa-banner/index.ts",
+        sizeLimit: "10 kB",
+      },
+      {
+        name: "components/usa-link",
+        path: "src/components/usa-link/index.js",
+        sizeLimit: "0.8 kB",
+      },
+    ];
+
+    const expected = {
+      "components/index": "src/components/index",
+      "components/usa-banner": "src/components/usa-banner/index.ts",
+      "components/usa-link": "src/components/usa-link/index.js",
+    };
+
+    expect(mapEntriesToKeyValue(entries)).toEqual(expected);
+  });
+});

utils/build-helpers.test.ts

@@ -0,0 +1,31 @@
+import { type Limit } from "vite-plugin-bundlesize";
+
+export type Entry = { name: string; path: string; sizeLimit: string };
+
+/**
+ * Converts an `Entry` object into a `Limit` object, mapping and transforming
+ * the properties to adhere to the `Limit` type structure.
+ *
+ * @param {Entry} entry - The input object containing information about the entry.
+ * @returns {Limit} - A transformed object with details about the limit, including
+ *                    the updated name, size limit, and compression mode.
+ */
+export const mapEntryToLimit = (entry: Entry): Limit => {
+  return {
+    name: `${entry.name}.js`,
+    limit: entry.sizeLimit,
+    mode: "brotli",
+  };
+};
+
+/**
+ * Maps an array of Entry objects to a key-value pair object, where each entry's name
+ * is used as the key and its path is used as the value.
+ *
+ * @param {Entry[]} entries - The array of Entry objects to be mapped into key-value pairs.
+ * @return {Record<string, string>} An object representing the key-value pairs derived from the entries,
+ * where the key is the entry's name and the value is the entry's path.
+ */
+export function mapEntriesToKeyValue(entries: Entry[]): Record<string, string> {
+  return Object.fromEntries(entries.map((entry) => [entry.name, entry.path]));
+}

utils/build-helpers.ts

@@ -3,9 +3,41 @@ import { resolve } from "path";
 import browserslist from "browserslist";
 import { browserslistToTargets } from "lightningcss";
 import litCss from "vite-plugin-lit-css";
+import bundlesize from "vite-plugin-bundlesize";
+import {
+  type Entry,
+  mapEntriesToKeyValue,
+  mapEntryToLimit,
+} from "./utils/build-helpers";
+
+const entries: Array<Entry> = [
+  {
+    name: "components/index",
+    path: "src/components/index",
+    sizeLimit: "0.2 kB",
+  },
+  {
+    name: "components/usa-banner",
+    path: "src/components/usa-banner/index.ts",
+    sizeLimit: "10 kB",
+  },
+  {
+    name: "components/usa-link",
+    path: "src/components/usa-link/index.js",
+    sizeLimit: "0.8 kB",
+  },
+];
 
 export default defineConfig({
-  plugins: [litCss()],
+  plugins: [
+    litCss(),
+    bundlesize({
+      limits: [
+        ...entries.map(mapEntryToLimit),
+        { name: "**/*.cjs", limit: "Infinity" },
+      ],
+    }),
+  ],
   resolve: {
     alias: {
       "@uswds/uswds": resolve(__dirname, "node_modules/@uswds/uswds/dist"),
@@ -29,12 +61,9 @@ export default defineConfig({
     },
   },
   build: {
+    sourcemap: "hidden",
     lib: {
-      entry: {
-        "components/usa-banner": "src/components/usa-banner/index.ts",
-        "components/usa-link": "src/components/usa-link/index.js",
-        "components/index": "src/components/index",
-      },
+      entry: mapEntriesToKeyValue(entries),
     },
     rollupOptions: {
       external: ["lit"],

vite.config.ts

@@ -3,6 +3,11 @@ import { defineConfig } from "vitest/config";
 export default defineConfig({
   test: {
     environment: "jsdom",
-    include: ["src/**/*.spec.{js,ts}", "src/**/*.test.{js,ts}"],
+    include: [
+      "src/**/*.spec.{js,ts}",
+      "src/**/*.test.{js,ts}",
+      "utils/**/*.spec.{js,ts}",
+      "utils/**/*.test.{js,ts}",
+    ],
   },
 });