Minify the output

Disabled until rollup/plugins#1367 is merged.

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

server.ts

@@ -1,6 +1,7 @@
 /// <reference types="express">
 import commonjs from "@rollup/plugin-commonjs";
 import nodeResolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
 import express, { Request, Response } from "express";
 import {
   rollup,
@@ -25,28 +26,26 @@ const logInfo = (message: string, ...args: any[]) => {
   return [...args];
 };
 
-const rollupInputOptions: InputOptions = {
-  input: "./alloy/src/index.js",
-  plugins: [
-    nodeResolve({
-      preferBuiltins: false,
-      // Support the browser field in dependencies' package.json.
-      // Useful for the uuid package.
-      mainFields: ["module", "main", "browser"],
-    }),
-    commonjs(),
-  ],
-};
-const rollupOutputOptions: OutputOptions = {};
-
 async function makeCustomBuild(
   configuration: AlloyBuildConfig
 ): Promise<BundlerResult> {
   let bundle: RollupBuild | null = null;
   const start = performance.now();
+  const rollupInputOptions: InputOptions = {
+    input: "./alloy/src/index.js",
+    plugins: [
+      nodeResolve({
+        preferBuiltins: false,
+        // Support the browser field in dependencies' package.json.
+        // Useful for the uuid package.
+        mainFields: ["module", "main", "browser"],
+      }),
+      commonjs(),
+    ],
+  };
   try {
     bundle = await rollup(rollupInputOptions);
-    const chunks = await generateOutputs(bundle);
+    const chunks = await generateOutputs(configuration, bundle);
     return {
       success: true,
       elapsedTime: performance.now() - start,
@@ -65,30 +64,39 @@ async function makeCustomBuild(
   }
 }
 
-async function generateOutputs(bundle: RollupBuild): Promise<BundlerChunk[]> {
+async function generateOutputs(
+  configuration: AlloyBuildConfig,
+  bundle: RollupBuild
+): Promise<BundlerChunk[]> {
+  const rollupOutputOptions: OutputOptions = {
+    plugins: [],
+  };
+  if (configuration.minify) {
+    // Disabled until https://github.com/rollup/plugins/pull/1367 is in main
+    // rollupOutputOptions.plugins = [...(rollupOutputOptions.plugins ?? []), terser()]
+  }
+  const start = performance.now();
   const { output } = await bundle.generate(rollupOutputOptions);
-  const chunkCount = output.filter(
-    (c): c is OutputChunk => c.type === "chunk"
-  ).length;
-  logInfo(
-    `Generated outputs: ${output.length} results (${chunkCount} chunks, ${
-      output.length - chunkCount
-    } assets)`
-  );
-  return output
+  const chunks = output
     .filter((c): c is OutputChunk => c.type === "chunk")
     .map((c) => ({
       name: `${c.name}`,
       code: `${c.code}`,
     }));
+  logInfo(
+    `Generated outputs: ${output.length} results (${chunks.length} chunks, ${
+      output.length - chunks.length
+    } assets) in ${performance.now() - start}ms.`
+  );
+  return chunks;
 }
 
 app.get("/", (req: Request, res: Response) => {
   res.redirect("/index.html");
 });
 
 app.post("/build", async (req: Request, res: Response) => {
-  const configuration = req.body as AlloyBuildConfig;
+  const configuration = req.body;
   const result = await makeCustomBuild(configuration);
   res.send(result);
 });

sharedTypes/AlloyBuildConfig.ts

@@ -4,6 +4,7 @@ interface AlloyBuildConfig {
   orgId: string;
   edgeConfigId: string;
   includedComponents: AlloyComponents[];
+  minify: boolean;
 }
 
 export default AlloyBuildConfig;

src/App.tsx

@@ -12,12 +12,16 @@ function App() {
     orgId: "",
     edgeConfigId: "",
     includedComponents: [],
+    minify: false,
   };
   const [serverResponse, setServerResponse] = useState<BundlerResult | null>();
   const onSubmit = async (values: AlloyBuildConfig, { setSubmitting }: any) => {
     const response = await fetch("/build", {
       method: "POST",
-      body: values as any,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(values),
     });
 
     setSubmitting(false);
@@ -188,6 +192,10 @@ function App() {
                     </label>
                   </li>
                 </ul>
+                <div>
+                  <label htmlFor="minify">Minify?</label>
+                  <Field type="checkbox" name="minify" id="minify"></Field>
+                </div>
                 <div>
                   <button type="submit" disabled={isSubmitting}>
                     Build