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

package/dist/commands/create.js

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  ********************************************************************************/
-import { CLIProgram, ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
+import { BaseCommand, CLIProgram } from "@adobe/ccweb-add-on-analytics";
 import { UncaughtExceptionHandler } from "@adobe/ccweb-add-on-core";
 import { EntrypointType } from "@adobe/ccweb-add-on-manifest";
-import { Args, Command, Flags } from "@oclif/core";
+import { Args, Flags } from "@oclif/core";
 import "reflect-metadata";
 import { AnalyticsErrorMarkers } from "../AnalyticsMarkers.js";
 import { IContainer, ITypes } from "../config/index.js";
@@ -33,16 +33,14 @@ import { CLIOptions } from "../models/CLIOptions.js";
 /**
  * Implementation class of the create-ccweb-add-on command.
  */
-export class CreateCCWebAddOn extends Command {
-    _analyticsConsent;
-    _analyticsService;
+export class Create extends BaseCommand {
     _addOnFactory;
     static description = "Create an Adobe Creative Cloud Web Add-on.";
     static examples = ["create-ccweb-add-on <add-on-name> --template <javascript>"];
     static flags = {
-        kind: Flags.string({
-            char: "k",
-            description: "Kind of Add-on (panel).",
+        entrypoint: Flags.string({
+            char: "e",
+            description: "Entrypoint type of Add-on (By default it is set as 'panel').",
             default: EntrypointType.PANEL,
             required: false,
             hidden: true
@@ -52,54 +50,30 @@ export class CreateCCWebAddOn extends Command {
             description: "Template to use for creating the Add-on project.",
             default: "",
             required: false
-        }),
-        analytics: Flags.string({
-            char: "a",
-            description: "Turn on/off sending analytics to Adobe.",
-            options: ["on", "off"],
-            required: false
-        }),
-        verbose: Flags.boolean({
-            char: "v",
-            description: "Enable verbose logging.",
-            default: false,
-            required: false
         })
     };
     static args = {
-        addOnName: Args.string({
-            name: "addOnName",
+        name: Args.string({
+            name: "name",
             description: "Name of the Add-on project.",
             required: true
         })
     };
     constructor(argv, config) {
-        super(argv, config);
-        this._analyticsConsent = IContainer.get(IAnalyticsTypes.AnalyticsConsent);
-        this._analyticsService = IContainer.get(IAnalyticsTypes.AnalyticsService);
-        this._analyticsService.program = new CLIProgram(PROGRAM_NAME, this.config.name + "@" + this.config.version);
-        this._analyticsService.startTime = Date.now();
+        super(argv, config, new CLIProgram(PROGRAM_NAME, config.name + "@" + config.version));
         this._addOnFactory = IContainer.get(ITypes.AddOnFactory);
     }
     async run() {
         UncaughtExceptionHandler.registerExceptionHandler(PROGRAM_NAME);
-        const { args: { addOnName }, flags: { kind, template, analytics, verbose } } = await this.parse(CreateCCWebAddOn);
+        const { args: { name }, flags: { entrypoint, template, analytics, verbose } } = await this.parse(Create);
         await this._seekAnalyticsConsent(analytics);
         console.log();
-        const options = new CLIOptions(kind.toLowerCase(), addOnName, template.toLowerCase(), verbose);
+        const options = new CLIOptions(entrypoint.toLowerCase(), name, template.toLowerCase(), verbose);
         await this._addOnFactory.create(options);
     }
     async catch(error) {
         await this._analyticsService.postEvent(AnalyticsErrorMarkers.ERROR_INVALID_ARGS, error.message, false);
         throw error;
     }
-    async _seekAnalyticsConsent(analytics) {
-        if (analytics === undefined) {
-            await this._analyticsConsent.get();
-        }
-        else {
-            await this._analyticsConsent.set(analytics === "on");
-        }
-    }
 }
 //# sourceMappingURL=create.js.map

package/dist/config/inversify.config.d.ts

@@ -21,7 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  ********************************************************************************/
+import type { Container } from "inversify";
 import "reflect-metadata";
-declare const container: import("inversify").Container;
+declare const container: Container;
 export { container as IContainer };
 //# sourceMappingURL=inversify.config.d.ts.map

package/dist/config/inversify.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inversify.config.d.ts","sourceRoot":"","sources":["../../src/config/inversify.config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAGlF,OAAO,kBAAkB,CAAC;AAO1B,QAAA,MAAM,SAAS,+BAAiB,CAAC;AAUjC,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"inversify.config.d.ts","sourceRoot":"","sources":["../../src/config/inversify.config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAGlF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAQ1B,QAAA,MAAM,SAAS,EAAE,SAA0B,CAAC;AAU5C,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,CAAC"}

package/dist/config/inversify.config.js

@@ -23,13 +23,15 @@
  ********************************************************************************/
 import { IContainer as ICoreContainer } from "@adobe/ccweb-add-on-core";
 import "reflect-metadata";
-import { AddOnTemplateSelector, WxpAddOnFactory } from "../app/index.js";
-import { AddOnDirectoryValidator, NodeEnvironmentValidator } from "../validators/index.js";
+import { AddOnFactory } from "../app/AddOnFactory.js";
+import { TemplateSelector } from "../app/TemplateSelector.js";
+import { DirectoryValidator } from "../validators/DirectoryValidator.js";
+import { EnvironmentValidator } from "../validators/EnvironmentValidator.js";
 import { ITypes } from "./inversify.types.js";
 const container = ICoreContainer;
-container.bind(ITypes.AddOnFactory).to(WxpAddOnFactory).inSingletonScope();
-container.bind(ITypes.DirectoryValidator).to(AddOnDirectoryValidator).inSingletonScope();
-container.bind(ITypes.EnvironmentValidator).to(NodeEnvironmentValidator).inSingletonScope();
-container.bind(ITypes.TemplateSelector).to(AddOnTemplateSelector).inSingletonScope();
+container.bind(ITypes.AddOnFactory).to(AddOnFactory).inSingletonScope();
+container.bind(ITypes.DirectoryValidator).to(DirectoryValidator).inSingletonScope();
+container.bind(ITypes.EnvironmentValidator).to(EnvironmentValidator).inSingletonScope();
+container.bind(ITypes.TemplateSelector).to(TemplateSelector).inSingletonScope();
 export { container as IContainer };
 //# sourceMappingURL=inversify.config.js.map

package/dist/config/inversify.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inversify.types.d.ts","sourceRoot":"","sources":["../../src/config/inversify.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}
+{"version":3,"file":"inversify.types.d.ts","sourceRoot":"","sources":["../../src/config/inversify.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,eAAO,MAAM,MAAM,EAAE;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;CAO5B,CAAC"}

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAElD,eAAO,MAAM,gBAAgB,qBAM3B,CAAC;AAEH,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAE9C,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAE7D,eAAO,MAAM,0BAA0B,UAWtC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAElD,eAAO,MAAM,gBAAgB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAC;AAEH,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAE9C,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAE7D,eAAO,MAAM,0BAA0B,EAAE,MAAM,EAW9C,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * MIT License
+
+ * © Copyright 2025 Adobe. All rights reserved.
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ ********************************************************************************/
+export { run } from "@oclif/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * MIT License
+
+ * © Copyright 2025 Adobe. All rights reserved.
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ ********************************************************************************/
+export { run } from "@oclif/core";
+//# sourceMappingURL=index.js.map

package/dist/models/CLIOptions.d.ts

@@ -27,9 +27,9 @@ import type { EntrypointType } from "@adobe/ccweb-add-on-manifest";
  */
 export declare class CLIOptions {
     /**
-     * Kind of the Add-on. For example: panel.
+     * Entrypoint type of the Add-on. Example: 'panel'.
      */
-    readonly addOnKind: EntrypointType;
+    readonly entrypointType: EntrypointType;
     /**
      * Name of the Add-on.
      */
@@ -44,12 +44,12 @@ export declare class CLIOptions {
     readonly verbose: boolean;
     /**
      * Instantiate {@link CLIOptions}.
-     * @param addOnKind - Kind of the Add-on. For example: panel.
+     * @param entrypointType - Kind of the Add-on. For example: panel.
      * @param addOnName - Name of the Add-on.
      * @param templateName - Template name.
      * @param verbose - Verbose flag.
      * @returns Reference to a new {@link CLIOptions} instance.
      */
-    constructor(addOnKind: EntrypointType, addOnName: string, templateName: string, verbose: boolean);
+    constructor(entrypointType: EntrypointType, addOnName: string, templateName: string, verbose: boolean);
 }
 //# sourceMappingURL=CLIOptions.d.ts.map

package/dist/models/CLIOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CLIOptions.d.ts","sourceRoot":"","sources":["../../src/models/CLIOptions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;GAEG;AACH,qBAAa,UAAU;IACnB;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;gBACS,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;CAMnG"}
+{"version":3,"file":"CLIOptions.d.ts","sourceRoot":"","sources":["../../src/models/CLIOptions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;GAEG;AACH,qBAAa,UAAU;IACnB;;OAEG;IACH,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IAExC;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;gBACS,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;CAMxG"}

package/dist/models/CLIOptions.js

@@ -26,9 +26,9 @@
  */
 export class CLIOptions {
     /**
-     * Kind of the Add-on. For example: panel.
+     * Entrypoint type of the Add-on. Example: 'panel'.
      */
-    addOnKind;
+    entrypointType;
     /**
      * Name of the Add-on.
      */
@@ -43,14 +43,14 @@ export class CLIOptions {
     verbose;
     /**
      * Instantiate {@link CLIOptions}.
-     * @param addOnKind - Kind of the Add-on. For example: panel.
+     * @param entrypointType - Kind of the Add-on. For example: panel.
      * @param addOnName - Name of the Add-on.
      * @param templateName - Template name.
      * @param verbose - Verbose flag.
      * @returns Reference to a new {@link CLIOptions} instance.
      */
-    constructor(addOnKind, addOnName, templateName, verbose) {
-        this.addOnKind = addOnKind;
+    constructor(entrypointType, addOnName, templateName, verbose) {
+        this.entrypointType = entrypointType;
         this.addOnName = addOnName;
         this.templateName = templateName;
         this.verbose = verbose;

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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"

package/dist/templates/swc-javascript-with-document-sandbox/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/dist/templates/swc-typescript/template/src/components/App.css.ts

@@ -1,6 +1,6 @@
-import { css } from "lit";
+import { type CSSResult, css } from "lit";
 
-export const style = css`
+export const style: CSSResult = css`
     .container {
         margin: 24px;
         display: flex;

package/dist/templates/swc-typescript/template/src/components/App.ts

@@ -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";
@@ -10,7 +10,7 @@ import "@spectrum-web-components/theme/theme-light.js";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/theme/sp-theme.js";
 
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { style } from "./App.css";
 
@@ -32,10 +32,10 @@ export class App extends LitElement {
         this._buttonLabel = "Clicked";
     }
 
-    render() {
+    render(): TemplateResult {
         // 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/dist/templates/swc-typescript/template/src/index.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 import "./components/App";
@@ -10,7 +10,7 @@ export class Root extends LitElement {
     @state()
     private _isAddOnUISdkReady = addOnUISdk.ready;
 
-    render() {
+    render(): TemplateResult {
         return html`
             ${until(
                 this._isAddOnUISdkReady.then(() => {

package/dist/templates/swc-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/dist/templates/swc-typescript/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": {
@@ -17,7 +17,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"
     }
 }