Configuration UI updates for custom builds

.gitignore

@@ -7,3 +7,4 @@ coverage
 .eslintcache
 .parcel-cache
 extension.json
+package-adobe-alloy-*.zip

package.json

@@ -18,7 +18,7 @@
     "build": "./scripts/build.mjs",
     "build:prod": "npm run clean && NODE_ENV=production npm run build",
     "build:json": "./scripts/buildExtensionManifest.mjs",
-    "package": "npm run build:prod && npx @adobe/reactor-packager",
+    "package": "./scripts/createExtensionPackage.mjs",
     "dev": "./scripts/dev.mjs",
     "lint": "eslint \"*.{js,jsx}\" \"{src,test,scripts}/**/*.{js,jsx}\" --cache --fix",
     "format": "prettier --write \"*.{js,jsx,html,mjs,cjs}\" \"{src,test,scripts}/**/*.{js,jsx,html,mjs,cjs}\"",
@@ -54,15 +54,16 @@
   },
   "dependencies": {
     "@adobe/alloy": "^2.22.0",
-    "@adobe/react-spectrum": "^3.35.1",
-    "@react-stately/data": "^3.11.4",
+    "@adobe/react-spectrum": "^3.36.3",
+    "@react-stately/data": "^3.11.6",
     "@spectrum-css/tokens": "^14.3.1",
     "@spectrum-css/typography": "^6.1.1",
-    "@spectrum-icons/illustrations": "^3.6.13",
-    "@spectrum-icons/workflow": "^4.2.12",
-    "antd": "^5.19.2",
+    "@spectrum-icons/illustrations": "^3.6.15",
+    "@spectrum-icons/workflow": "^4.2.14",
+    "antd": "^5.20.3",
     "classnames": "^2.5.1",
     "clipboard-copy": "^4.0.1",
+    "commander": "^12.1.0",
     "escape-string-regexp": "^5.0.0",
     "formik": "^2.4.6",
     "once": "^1.4.0",
@@ -75,21 +76,23 @@
   "devDependencies": {
     "@adobe/jwt-auth": "^2.0.0",
     "@adobe/reactor-sandbox": "^12.5.0",
-    "@adobe/reactor-turbine": "^27.5.0",
-    "@adobe/reactor-turbine-schemas": "^10.6.0",
+    "@adobe/reactor-turbine": "^28.0.0",
+    "@adobe/reactor-turbine-schemas": "^10.7.0",
     "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.24.9",
-    "@babel/eslint-parser": "^7.24.8",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@parcel/core": "^2.12.0",
     "@parcel/transformer-stylus": "^2.12.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "adm-zip": "^0.5.15",
     "ajv": "^8.17.1",
     "ajv-draft-04": "^1.0.0",
     "ajv-formats": "^3.0.1",
+    "archiver": "^7.0.1",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "babel-plugin-version": "^0.2.3",
     "chalk": "^5.3.0",
@@ -99,17 +102,17 @@
     "eslint-plugin-ban": "^1.6.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "eslint-plugin-unused-imports": "^3.2.0",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
-    "globals": "^15.8.0",
-    "husky": "^9.0.11",
-    "jasmine-core": "^5.1.2",
+    "globals": "^15.9.0",
+    "husky": "^9.1.5",
+    "jasmine-core": "^5.2.0",
     "json": "^11.0.0",
-    "karma": "^6.4.3",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "^5.1.0",
@@ -118,17 +121,17 @@
     "karma-rollup-preprocessor": "^7.0.8",
     "karma-sauce-launcher": "^4.3.6",
     "karma-spec-reporter": "0.0.36",
-    "lint-staged": "^15.2.7",
+    "lint-staged": "^15.2.9",
     "minimist": "^1.2.8",
     "mockvisitor": "file:test/functional/runtime/mockVisitor",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.12.0",
     "parcel-transformer-extension-name": "file:scripts/helpers/parcel-transformer-extension-name",
     "prettier": "^3.3.3",
     "process": "^0.11.10",
-    "puppeteer": "^22.13.0",
+    "puppeteer": "^23.2.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.18.1",
+    "rollup": "^4.21.1",
     "rollup-plugin-istanbul": "^5.0.0",
     "staged-git-files": "^1.3.0",
     "stylus": "^0.63.0",

rollup.config.mjs

@@ -19,7 +19,6 @@ export default [
     output: [
       {
         file: "temp/alloy.js",
-        format: "esm",
       },
     ],
     plugins: [
@@ -29,10 +28,6 @@ export default [
       }),
       commonjs(),
     ],
-    external: [
-      "@adobe/reactor-load-script",
-      "@adobe/reactor-object-assign",
-      "@adobe/reactor-query-string",
-    ],
+    external: ["@adobe/reactor-query-string"],
   },
 ];

scripts/alloyBuilder.js

@@ -0,0 +1,201 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+// This file will be used by Tags in order to generate a custom Alloy build based on user options.
+// Tags doesn't support ES6 modules, so we need to use CommonJS modules here.
+
+const path = require("path");
+const fs = require("fs");
+const { spawn } = require("child_process");
+const { Command, Option, InvalidOptionArgumentError } = require("commander");
+const babel = require("@babel/core");
+
+const execute = (command, options) => {
+  return new Promise((resolve, reject) => {
+    spawn(command, options, {
+      stdio: "inherit",
+    })
+      .on("exit", resolve)
+      .on("error", reject);
+  });
+};
+
+const entryPointGeneratorBabelPlugin = (t, includedModules) => ({
+  visitor: {
+    VariableDeclarator(babelPath) {
+      if (babelPath.node.id.name === "components") {
+        babelPath.replaceWith(
+          t.VariableDeclarator(
+            t.Identifier("components"),
+            t.ArrayExpression(
+              includedModules.map((module) =>
+                t.MemberExpression(
+                  t.Identifier("optionalComponents"),
+                  t.Identifier(module),
+                ),
+              ),
+            ),
+          ),
+        );
+
+        babelPath.stop();
+      }
+    },
+  },
+});
+
+const addAlloyModulesToEntryFile = ({
+  inputFile,
+  outputDir,
+  includedModules,
+}) => {
+  const output = babel.transformFileSync(inputFile, {
+    plugins: [entryPointGeneratorBabelPlugin(babel.types, includedModules)],
+  }).code;
+
+  const filename = path.basename(inputFile);
+  const outputPath = path.join(outputDir, filename);
+
+  fs.writeFileSync(outputPath, output);
+
+  return outputPath;
+};
+
+const getAlloyComponents = (() => {
+  const components = [];
+  const filePath = path.resolve(
+    `${__dirname}/../node_modules/@adobe/alloy/libEs6/core/componentCreators.js`,
+  );
+  const code = fs.readFileSync(filePath, "utf-8");
+
+  babel.traverse(babel.parse(code), {
+    Identifier(p) {
+      if (p.node.name !== "default") {
+        components.push(p.node.name);
+      }
+    },
+  });
+
+  return () => components;
+})();
+
+const program = new Command();
+
+program
+  .name("buildCustomAlloy")
+  .description("Tool for generating custom alloy build based on user input.");
+
+program.addOption(
+  new Option("-i, --inputFile <file>", "the entry pint file for the build")
+    .makeOptionMandatory()
+    .argParser((value) => {
+      if (!fs.existsSync(path.join(process.cwd(), value))) {
+        throw new InvalidOptionArgumentError(
+          `Input file "${value}" doen not exist.`,
+        );
+      }
+
+      return value;
+    }),
+);
+
+program.addOption(
+  new Option(
+    "-o, --outputDir <dir>",
+    "the output directory for the generated build",
+  )
+    .default(process.cwd())
+    .argParser((value) => {
+      if (!fs.existsSync(path.join(process.cwd(), value))) {
+        throw new InvalidOptionArgumentError(
+          `Output directory "${value}" is not a valid directory path.`,
+        );
+      }
+
+      return value;
+    }),
+);
+
+const alloyComponents = getAlloyComponents();
+
+alloyComponents.forEach((component) => {
+  program.addOption(
+    new Option(`--${component} <bool>`, `enable ${component} module`)
+      .env(`ALLOY_${component.toUpperCase()}`)
+      .default(true, "true")
+      .argParser((val) => {
+        if (val === "0" || val === "false") {
+          return false;
+        }
+
+        return true;
+      }),
+  );
+});
+
+program.action(async ({ inputFile, outputDir, ...modules }) => {
+  const includedModules = Object.entries(modules).reduce(
+    (acc, [key, value]) => {
+      if (value === true) {
+        acc.push(key);
+      }
+
+      return acc;
+    },
+    [],
+  );
+
+  let entryFile;
+  try {
+    entryFile = addAlloyModulesToEntryFile({
+      inputFile,
+      outputDir,
+      includedModules,
+    });
+
+    await execute("npx", [
+      "rollup",
+      "-c",
+      path.join(__dirname, "../rollup.config.mjs"),
+      "-i",
+      entryFile,
+      "-o",
+      entryFile,
+    ]);
+
+    const output = babel.transformFileSync(entryFile, {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            targets: {
+              browsers: [
+                "last 2 Chrome versions",
+                "last 2 Firefox versions",
+                "last 2 Safari versions",
+                "last 2 Edge versions",
+              ],
+            },
+          },
+        ],
+      ],
+    }).code;
+
+    fs.writeFileSync(entryFile, output);
+  } catch (e) {
+    fs.unlinkSync(entryFile);
+    console.error(e);
+    process.exit(1);
+  }
+});
+
+program.parse();