@adobe/create-ccweb-add-on 2.5.0 → 3.1.0

package/src/validators/DirectoryValidator.ts

@@ -22,23 +22,184 @@
  * SOFTWARE.
  ********************************************************************************/
 
+import type { AnalyticsService } from "@adobe/ccweb-add-on-analytics";
+import { ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
+import type { Logger } from "@adobe/ccweb-add-on-core";
+import { ITypes as ICoreTypes, isNullOrWhiteSpace } from "@adobe/ccweb-add-on-core";
+import fs from "fs-extra";
+import { inject, injectable } from "inversify";
+import path from "path";
+import process from "process";
+import "reflect-metadata";
+import format from "string-template";
+import validate from "validate-npm-package-name";
+import { AnalyticsErrorMarkers } from "../AnalyticsMarkers.js";
+import { PROGRAM_NAME } from "../constants.js";
+
 /**
- * Directory validator interface to validate
+ * Directory validator implementation class to validate
  * whether the directory can be used to create the add-on project.
  */
-export interface DirectoryValidator {
+@injectable()
+export class DirectoryValidator {
+    private readonly _logger: Logger;
+    private readonly _analyticsService: AnalyticsService;
+
     /**
-     * Validate the app name.
-     *
-     * @param appName - Name of the app.
+     * Instantiate {@link DirectoryValidator}.
+     * @param logger - {@link Logger} reference.
+     * @param analyticsService - {@link AnalyticsService} reference.
+     * @returns Reference to a new {@link DirectoryValidator} instance.
      */
-    validateAddOnName(appName: string): Promise<void>;
+    constructor(
+        @inject(ICoreTypes.Logger) logger: Logger,
+        @inject(IAnalyticsTypes.AnalyticsService) analyticsService: AnalyticsService
+    ) {
+        this._logger = logger;
+        this._analyticsService = analyticsService;
+    }
 
     /**
-     * Validate the app directory.
-     *
-     * @param appDirectory - Root directory of the app.
-     * @param appName - Name of the app.
+     * Validate the Add-on name.
+     * @param addOnName - Name of the Add-on.
      */
-    validateAddOnDirectory(appDirectory: string, appName: string): Promise<void>;
+    async validateAddOnName(addOnName: string): Promise<void> {
+        if (isNullOrWhiteSpace(addOnName)) {
+            this._logger.warning(LOGS.specifyAddOnName);
+            this._chooseDifferentAddOnName();
+            await this._analyticsService.postEvent(
+                AnalyticsErrorMarkers.ERROR_NO_ADD_ON_NAME,
+                LOGS.analyticsNoAddOnName,
+                false
+            );
+            return process.exit(0);
+        }
+
+        const isValid = validate(addOnName).validForNewPackages;
+        if (!isValid) {
+            this._logger.warning(format(LOGS.npmNamingRestriction, { addOnName }));
+            this._chooseDifferentAddOnName();
+            await this._analyticsService.postEvent(
+                AnalyticsErrorMarkers.ERROR_INVALID_NAME_NPM,
+                LOGS.analyticsInvalidAddOnNameNPM,
+                false
+            );
+            return process.exit(0);
+        }
+
+        const dependencies = new Set([
+            "@adobe/create-ccweb-add-on",
+            "create-ccweb-add-on",
+            "@adobe/ccweb-add-on-scripts",
+            "ccweb-add-on-scripts",
+            "@adobe/ccweb-add-on-scaffolder",
+            "ccweb-add-on-scaffolder"
+        ]);
+        if (dependencies.has(addOnName)) {
+            this._logger.warning(format(LOGS.dependencyNamingRestriction, { addOnName }));
+            this._chooseDifferentAddOnName();
+            await this._analyticsService.postEvent(
+                AnalyticsErrorMarkers.ERROR_INVALID_NAME_DEP,
+                LOGS.analyticsInvalidAddOnNameDependency,
+                false
+            );
+            return process.exit(0);
+        }
+    }
+
+    /**
+     * Validate the addOn directory.
+     * @param addOnDirectory - Root directory of the addOn.
+     * @param addOnName - Name of the addOn.
+     */
+    async validateAddOnDirectory(addOnDirectory: string, addOnName: string): Promise<void> {
+        fs.ensureDirSync(addOnName);
+
+        const validFiles = [
+            ".DS_Store",
+            ".git",
+            ".gitattributes",
+            ".gitignore",
+            ".gitlab-ci.yml",
+            ".hg",
+            ".hgcheck",
+            ".hgignore",
+            ".idea",
+            ".npmignore",
+            ".travis.yml",
+            "docs",
+            "LICENSE",
+            "README.md",
+            "mkdocs.yml",
+            "Thumbs.db"
+        ];
+
+        const errorLogFilePatterns = ["npm-debug.log"];
+
+        const isErrorLog = (file: string) => {
+            return errorLogFilePatterns.some(pattern => file.startsWith(pattern));
+        };
+
+        const existingFiles = fs.readdirSync(addOnDirectory, { withFileTypes: true });
+        const conflictingFiles = existingFiles
+            .filter(file => !validFiles.includes(file.name))
+            .filter(file => !/\.iml$/.test(file.name))
+            .filter(file => !isErrorLog(file.name));
+
+        if (conflictingFiles.length === 0) {
+            return;
+        }
+
+        this._logger.warning(format(LOGS.directoryContainsFiles, { addOnName }), {
+            postfix: LOGS.newLine
+        });
+
+        for (const file of conflictingFiles) {
+            try {
+                if (fs.lstatSync(path.join(addOnDirectory, file.name)).isDirectory()) {
+                    this._logger.warning(`${file.name}/`, { prefix: LOGS.tab });
+                } else {
+                    this._logger.warning(`${file.name}`, { prefix: LOGS.tab });
+                }
+            } catch {
+                this._logger.warning(`${file.name}`, { prefix: LOGS.tab });
+            }
+        }
+
+        this._logger.information(LOGS.newAddOnOrRemoveFiles, { prefix: LOGS.newLine });
+        await this._analyticsService.postEvent(
+            AnalyticsErrorMarkers.ERROR_INVALID_NAME_DIR,
+            LOGS.analyticsInvalidAddOnDir,
+            false
+        );
+        return process.exit(0);
+    }
+
+    private _chooseDifferentAddOnName() {
+        this._logger.warning(format(LOGS.executeProgram, { PROGRAM_NAME }), { prefix: LOGS.tab });
+        this._logger.message(LOGS.forExample, { prefix: LOGS.newLine });
+        this._logger.information(format(LOGS.executeProgramExample, { PROGRAM_NAME }), {
+            prefix: LOGS.tab,
+            postfix: LOGS.newLine
+        });
+    }
 }
+
+const LOGS = {
+    newLine: "\n",
+    tab: "  ",
+    specifyAddOnName: "Please specify an Add-on name",
+    executeProgram: "{PROGRAM_NAME} <add-on-name> --entrypoint <panel> --template <javascript>",
+    executeProgramExample: "{PROGRAM_NAME} my-add-on --entrypoint panel --template javascript",
+    forExample: "For example:",
+    npmNamingRestriction: "Cannot create a project named {addOnName} because of NPM naming restrictions.",
+    dependencyNamingRestriction:
+        "Cannot create a project named {addOnName} because a dependency with the same name exists.",
+    chooseDifferentAddOnName: "Please choose a different Add-on name:",
+    directoryContainsFiles: "The directory {addOnName} contains files that could conflict:",
+    newAddOnOrRemoveFiles: "Either try using a new Add-on name, or remove the files listed above.",
+    analyticsNoAddOnName: "Add-on name was not specified",
+    analyticsInvalidAddOnNameNPM: "Invalid Add-on name. Npm name check failed",
+    analyticsInvalidAddOnNameDependency: "Invalid Add-on name. Dependency with same name exists",
+    analyticsInvalidAddOnDir: "Invalid Add-on name. Conflicting directory with same name exists"
+};

package/src/validators/EnvironmentValidator.ts

@@ -22,23 +22,175 @@
  * SOFTWARE.
  ********************************************************************************/
 
+import type { AnalyticsService } from "@adobe/ccweb-add-on-analytics";
+import { ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
+import type { Logger, Process } from "@adobe/ccweb-add-on-core";
+import { ITypes as ICoreTypes } from "@adobe/ccweb-add-on-core";
+import { inject, injectable } from "inversify";
+import process from "process";
+import "reflect-metadata";
+import semver from "semver";
+import format from "string-template";
+import { AnalyticsErrorMarkers } from "../AnalyticsMarkers.js";
+import { PROGRAM_NAME } from "../constants.js";
+
 /**
- * Environment validator interface to validate
+ * Environment validator implementation class to validate
  * the system requirements required for running the app.
  */
-export interface EnvironmentValidator {
+@injectable()
+export class EnvironmentValidator {
+    private readonly _process: Process;
+    private readonly _logger: Logger;
+    private readonly _analyticsService: AnalyticsService;
+    /**
+     * Instantiate {@link EnvironmentValidator}.
+     *
+     * @param processHandler - {@link Process} reference.
+     * @param logger - {@link Logger} reference.
+     * @param analyticsService - {@link AnalyticsService} reference.
+     * @returns Reference to a new {@link EnvironmentValidator} instance.
+     */
+    constructor(
+        @inject(ICoreTypes.Process) processHandler: Process,
+        @inject(ICoreTypes.Logger) logger: Logger,
+        @inject(IAnalyticsTypes.AnalyticsService) analyticsService: AnalyticsService
+    ) {
+        this._process = processHandler;
+        this._logger = logger;
+        this._analyticsService = analyticsService;
+    }
+
     /**
      * Validate the node version in the user's system.
      */
-    validateNodeVersion(): Promise<void>;
+    async validateNodeVersion(): Promise<void> {
+        const minNode = "18.0.0";
+        try {
+            const result = this._process.executeSync("node", ["--version"]);
+            const nodeVersion = String(result?.data)?.trim();
+            const hasMinNode = semver.gte(nodeVersion, minNode);
+            if (!hasMinNode) {
+                this._logger.warning(format(LOGS.usingNodeVersion, { nodeVersion }));
+                this._logger.information(
+                    format(LOGS.requiresHigherNode, {
+                        PROGRAM_NAME,
+                        minNode
+                    })
+                );
+                this._logger.information(LOGS.updateNodeVersion);
+                await this._analyticsService.postEvent(
+                    AnalyticsErrorMarkers.ERROR_INVALID_NODE,
+                    format(LOGS.analyticsInvalidNode, { nodeVersion }),
+                    false
+                );
+                return process.exit(0);
+            }
+        } catch (error) {
+            this._process.handleError(error);
+        }
+    }
 
     /**
      * Validate the npm version in the user's system.
      */
-    validateNpmVersion(): Promise<void>;
+    async validateNpmVersion(): Promise<void> {
+        const minNpm = "10.0.0";
+        try {
+            const result = this._process.executeSync("npm", ["--version"]);
+            const npmVersion = result.data ? String(result.data)?.trim() : undefined;
+            if (!npmVersion) {
+                this._logger.warning(LOGS.notUsingNpm);
+                this._logger.information(
+                    format(LOGS.requiresHigherNpm, {
+                        PROGRAM_NAME,
+                        minNpm
+                    })
+                );
+                this._logger.information(LOGS.installNpm);
+                await this._analyticsService.postEvent(AnalyticsErrorMarkers.ERROR_NO_NPM, LOGS.analyticsNoNpm, false);
+                return process.exit(0);
+            }
+
+            const hasMinNpm = semver.gte(npmVersion, minNpm);
+            if (!hasMinNpm) {
+                this._logger.warning(format(LOGS.usingNpmVersion, { npmVersion }));
+                this._logger.information(
+                    format(LOGS.requiresHigherNpm, {
+                        PROGRAM_NAME,
+                        minNpm
+                    })
+                );
+                this._logger.information(LOGS.updateNpm);
+                await this._analyticsService.postEvent(
+                    AnalyticsErrorMarkers.ERROR_INVALID_NPM,
+                    format(LOGS.analyticsInvalidNpm, { npmVersion }),
+                    false
+                );
+                return process.exit(0);
+            }
+        } catch (error) {
+            this._process.handleError(error);
+        }
+    }
 
     /**
      * Validate the npm configuration in the user's system.
      */
-    validateNpmConfiguration(): Promise<void>;
+    async validateNpmConfiguration(): Promise<void> {
+        try {
+            const cwd = process.cwd();
+            const configList = this._process.executeSync("npm", ["config", "list"])?.data;
+            if (!configList) {
+                return;
+            }
+
+            const prefix = "; cwd = ";
+            const configLines = configList.split("\n");
+            const cwdLine = configLines.find(line => line.startsWith(prefix));
+            if (!cwdLine) {
+                return;
+            }
+
+            const npmCWD = cwdLine.substring(prefix.length);
+            if (npmCWD === cwd) {
+                return;
+            }
+
+            this._logger.warning(LOGS.couldNotStartNpmProcess);
+            this._logger.information(format(LOGS.currentDirectory, { cwd }));
+            this._logger.information(format(LOGS.newNpmProcessRunsIn, { npmCWD }));
+            this._logger.information(LOGS.misconfiguredTerminalShell);
+
+            await this._analyticsService.postEvent(
+                AnalyticsErrorMarkers.ERROR_NPM_NOT_STARTED,
+                LOGS.analyticsNotStartNpm,
+                false
+            );
+            return process.exit(0);
+        } catch (error) {
+            return;
+        }
+    }
 }
+
+const LOGS = {
+    newLine: "\n",
+    tab: "  ",
+    usingNodeVersion: "You are using node {nodeVersion}.",
+    requiresHigherNode: "{PROGRAM_NAME} requires node {minNode} or higher.",
+    updateNodeVersion: "Please update your version of node.",
+    notUsingNpm: "You are not using npm.",
+    requiresHigherNpm: "{PROGRAM_NAME} requires npm {minNpm} or higher.",
+    installNpm: "Please install npm.",
+    usingNpmVersion: "You are using npm {npmVersion}.",
+    updateNpm: "Please update your version of npm.",
+    couldNotStartNpmProcess: "Could not start an npm process in the right directory.",
+    currentDirectory: "The current directory is: {cwd}",
+    newNpmProcessRunsIn: "However, a newly started npm process runs in: {npmCWD}",
+    misconfiguredTerminalShell: "This is probably caused by a misconfigured system terminal shell.",
+    analyticsInvalidNode: "Invalid node version: {nodeVersion}",
+    analyticsNoNpm: "npm is not present",
+    analyticsInvalidNpm: "Invalid npm version: {npmVersion}",
+    analyticsNotStartNpm: "npm process could not be started"
+};

package/src/validators/index.ts

@@ -22,7 +22,5 @@
  * SOFTWARE.
  ********************************************************************************/
 
-export * from "./AddOnDirectoryValidator.js";
 export * from "./DirectoryValidator.js";
 export * from "./EnvironmentValidator.js";
-export * from "./NodeEnvironmentValidator.js";

package/templates/react-javascript/template/src/components/App.jsx

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -20,7 +20,7 @@ const App = ({ addOnUISdk }) => {
     return (
         // Please note that the below "<Theme>" component does not react to theme changes in Express.
         // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        <Theme theme="express" scale="medium" color="light">
+        <Theme system="express" scale="medium" color="light">
             <div className="container">
                 <Button size="m" onClick={handleClick}>
                     {buttonLabel}

package/templates/react-javascript/template/webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "index.js"

package/templates/react-javascript/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@swc-react/button": "0.39.4",
-        "@swc-react/theme": "0.39.4",
+        "@swc-react/button": "1.7.0",
+        "@swc-react/theme": "1.7.0",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -20,7 +20,7 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/templates/react-javascript-with-document-sandbox/template/src/ui/components/App.jsx

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -18,7 +18,7 @@ const App = ({ addOnUISdk, sandboxProxy }) => {
     return (
         // Please note that the below "<Theme>" component does not react to theme changes in Express.
         // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        <Theme theme="express" scale="medium" color="light">
+        <Theme system="express" scale="medium" color="light">
             <div className="container">
                 <Button size="m" onClick={handleClick}>
                     Create Rectangle

package/templates/react-javascript-with-document-sandbox/template/webpack.config.js

@@ -15,6 +15,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "[name].js"

package/templates/react-javascript-with-document-sandbox/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@swc-react/button": "0.39.4",
-        "@swc-react/theme": "0.39.4",
+        "@swc-react/button": "1.7.0",
+        "@swc-react/theme": "1.7.0",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -20,7 +20,7 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/templates/react-typescript/template/src/components/App.tsx

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -22,7 +22,7 @@ const App = ({ addOnUISdk }: { addOnUISdk: AddOnSDKAPI }) => {
     return (
         // Please note that the below "<Theme>" component does not react to theme changes in Express.
         // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        <Theme theme="express" scale="medium" color="light">
+        <Theme system="express" scale="medium" color="light">
             <div className="container">
                 <Button size="m" onClick={handleClick}>
                     {buttonLabel}

package/templates/react-typescript/template/webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "index.js"

package/templates/react-typescript/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@swc-react/button": "0.39.4",
-        "@swc-react/theme": "0.39.4",
+        "@swc-react/button": "1.7.0",
+        "@swc-react/theme": "1.7.0",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -20,7 +20,7 @@
         "style-loader": "3.3.3",
         "ts-loader": "9.5.1",
         "typescript": "5.3.2",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/templates/react-typescript-with-document-sandbox/template/src/ui/components/App.tsx

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -21,7 +21,7 @@ const App = ({ addOnUISdk, sandboxProxy }: { addOnUISdk: AddOnSDKAPI; sandboxPro
     return (
         // Please note that the below "<Theme>" component does not react to theme changes in Express.
         // You may use "addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        <Theme theme="express" scale="medium" color="light">
+        <Theme system="express" scale="medium" color="light">
             <div className="container">
                 <Button size="m" onClick={handleClick}>
                     Create Rectangle

package/templates/react-typescript-with-document-sandbox/template/webpack.config.js

@@ -18,6 +18,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "[name].js"

package/templates/react-typescript-with-document-sandbox/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@swc-react/button": "0.39.4",
-        "@swc-react/theme": "0.39.4",
+        "@swc-react/button": "1.7.0",
+        "@swc-react/theme": "1.7.0",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -20,7 +20,7 @@
         "style-loader": "3.3.3",
         "ts-loader": "9.5.1",
         "typescript": "5.3.2",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/templates/swc-javascript/template/src/components/App.js

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -33,7 +33,7 @@ export class App extends LitElement {
     render() {
         // Please note that the below "<sp-theme>" component does not react to theme changes in Express.
         // You may use "this.addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        return html` <sp-theme theme="express" color="light" scale="medium">
+        return html` <sp-theme system="express" color="light" scale="medium">
             <div class="container">
                 <sp-button size="m" @click=${this._handleClick}>${this._buttonLabel}</sp-button>
             </div>

package/templates/swc-javascript/template/webpack.config.js

@@ -12,6 +12,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "index.js"

package/templates/swc-javascript/template.json

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "0.39.4",
-        "@spectrum-web-components/theme": "0.39.4",
+        "@spectrum-web-components/button": "1.7.0",
+        "@spectrum-web-components/theme": "1.7.0",
         "lit": "2.8.0"
     },
     "devDependencies": {
@@ -18,7 +18,7 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "webpack-cli": "5.1.4",
-        "webpack": "5.89.0"
+        "webpack-cli": "6.0.1",
+        "webpack": "5.98.0"
     }
 }

package/templates/swc-javascript-with-document-sandbox/template/src/ui/components/App.js

@@ -1,4 +1,4 @@
-// To support: theme="express" scale="medium" color="light"
+// To support: system="express" scale="medium" color="light"
 // import these spectrum web components modules:
 import "@spectrum-web-components/theme/express/scale-medium.js";
 import "@spectrum-web-components/theme/express/theme-light.js";
@@ -45,7 +45,7 @@ export class App extends LitElement {
     render() {
         // Please note that the below "<sp-theme>" component does not react to theme changes in Express.
         // You may use "this.addOnUISdk.app.ui.theme" to get the current theme and react accordingly.
-        return html` <sp-theme theme="express" color="light" scale="medium">
+        return html` <sp-theme system="express" color="light" scale="medium">
             <div class="container">
                 <sp-button size="m" @click=${this._handleClick}>Create Rectangle</sp-button>
             </div>

package/templates/swc-javascript-with-document-sandbox/template/webpack.config.js

@@ -15,6 +15,7 @@ module.exports = {
         outputModule: true
     },
     output: {
+        pathinfo: !isEnvProduction,
         path: path.resolve(__dirname, "dist"),
         module: true,
         filename: "[name].js"