@adobe/create-ccweb-add-on 2.4.2 → 3.0.0

package/src/test/commands/create.spec.ts

@@ -25,6 +25,7 @@
 import type { AnalyticsConsent, AnalyticsService } from "@adobe/ccweb-add-on-analytics";
 import { ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
 import { EntrypointType } from "@adobe/ccweb-add-on-manifest";
+import { PROGRAM_NAME } from "@adobe/ccweb-add-on-scaffolder";
 import { Config } from "@oclif/core";
 import chai, { assert, expect } from "chai";
 import chaiAsPromised from "chai-as-promised";
@@ -34,13 +35,13 @@ import type { StubbedInstance } from "ts-sinon";
 import { stubInterface } from "ts-sinon";
 import { AnalyticsErrorMarkers } from "../../AnalyticsMarkers.js";
 import type { AddOnFactory } from "../../app/index.js";
-import { CreateCCWebAddOn } from "../../commands/create.js";
+import { Create } from "../../commands/create.js";
 import { IContainer, ITypes } from "../../config/index.js";
 import { CLIOptions } from "../../models/index.js";
 
 chai.use(chaiAsPromised);
 
-describe("CreateCCWebAddOn", () => {
+describe("Create", () => {
     let sandbox: sinon.SinonSandbox;
 
     let container: sinon.SinonStub;
@@ -52,6 +53,7 @@ describe("CreateCCWebAddOn", () => {
 
     beforeEach(() => {
         sandbox = sinon.createSandbox();
+        sandbox.stub(console, "log");
 
         addOnFactory = stubInterface();
         addOnFactory.create.resolves();
@@ -74,12 +76,24 @@ describe("CreateCCWebAddOn", () => {
         it("should execute succesfully when correct parameters are passed without analytics.", async () => {
             analyticsConsent.get.resolves(true);
 
-            const createCCWebAddOn = new CreateCCWebAddOn(
-                ["hello-world", "--kind=panel", "--template=react-javascript", "--verbose"],
-                new Config({ root: "." })
+            const create = new Create(
+                ["hello-world", "--entrypoint=panel", "--template=react-javascript", "--verbose"],
+                new Config({ name: PROGRAM_NAME, version: "1.0.0", root: "." })
             );
-
-            await createCCWebAddOn.run();
+            sandbox
+                // @ts-ignore - Sidestep `this.parse()` error when calling `run()` directly.
+                .stub(create, "parse")
+                .resolves({
+                    args: { name: "hello-world" },
+                    flags: {
+                        entrypoint: EntrypointType.PANEL,
+                        template: "react-javascript",
+                        analytics: undefined,
+                        verbose: true
+                    }
+                });
+
+            await create.run();
 
             assert.equal(analyticsConsent.get.callCount, 1);
 
@@ -91,12 +105,24 @@ describe("CreateCCWebAddOn", () => {
             analyticsConsent.get.resolves(true);
             analyticsConsent.set.withArgs(false).resolves();
 
-            const createCCWebAddOn = new CreateCCWebAddOn(
-                ["hello-world", "--kind=panel", "--template=react-javascript", "--analytics=off", "--verbose"],
-                new Config({ root: "." })
+            const create = new Create(
+                ["hello-world", "--entrypoint=panel", "--template=react-javascript", "--analytics=off", "--verbose"],
+                new Config({ name: PROGRAM_NAME, version: "1.0.0", root: "." })
             );
-
-            await createCCWebAddOn.run();
+            sandbox
+                // @ts-ignore - Sidestep `this.parse()` error when calling `run()` directly.
+                .stub(create, "parse")
+                .resolves({
+                    args: { name: "hello-world" },
+                    flags: {
+                        entrypoint: EntrypointType.PANEL,
+                        template: "react-javascript",
+                        analytics: "off",
+                        verbose: true
+                    }
+                });
+
+            await create.run();
 
             assert.equal(analyticsConsent.set.calledOnceWith(false), true);
 
@@ -106,11 +132,11 @@ describe("CreateCCWebAddOn", () => {
     });
 
     describe("catch", () => {
-        it("should fail when incorrect parameters are passed.", async () => {
-            const createCCWebAddOn = new CreateCCWebAddOn(["--incorrect-flag"], new Config({ root: "." }));
+        it("should fail for any errors in command execution.", async () => {
+            const create = new Create([], new Config({ name: PROGRAM_NAME, version: "1.0.0", root: "." }));
 
-            const error = new Error("Nonexistent flag: --incorrect-flag\nSee more help with --help");
-            await expect(createCCWebAddOn.catch(error)).to.be.rejectedWith();
+            const error = new Error("Something went wrong.");
+            await expect(create.catch(error)).to.be.rejectedWith(error);
 
             assert.equal(
                 analyticsService.postEvent.calledOnceWith(

package/src/test/models/CLIOptions.spec.ts

@@ -30,14 +30,14 @@ import { CLIOptions } from "../../models/index.js";
 describe("CLIOptions", () => {
     describe("constructor", () => {
         it("should create a new instance of CLIOptions.", () => {
-            const addOnKind = EntrypointType.PANEL;
+            const entrypointType = EntrypointType.PANEL;
             const addOnName = "test-app";
             const templateName = "javascript";
             const verbose = false;
 
-            const cliOptions = new CLIOptions(addOnKind as EntrypointType, addOnName, templateName, verbose);
+            const cliOptions = new CLIOptions(entrypointType as EntrypointType, addOnName, templateName, verbose);
 
-            assert.equal(cliOptions.addOnKind, addOnKind);
+            assert.equal(cliOptions.entrypointType, entrypointType);
             assert.equal(cliOptions.addOnName, addOnName);
             assert.equal(cliOptions.templateName, templateName);
             assert.equal(cliOptions.verbose, verbose);

package/src/test/validators/AddOnDirectoryValidator.spec.ts

@@ -76,7 +76,7 @@ describe("AddOnDirectoryValidator", () => {
                 assert.equal(
                     logger.warning
                         .getCall(1)
-                        .calledWith(`${PROGRAM_NAME} <add-on-name> --kind <panel> --template <javascript>`, {
+                        .calledWith(`${PROGRAM_NAME} <add-on-name> --entrypoint <panel> --template <javascript>`, {
                             prefix: "  "
                         }),
                     true
@@ -92,10 +92,13 @@ describe("AddOnDirectoryValidator", () => {
 
                 assert.equal(logger.information.callCount, 1);
                 assert.equal(
-                    logger.information.calledWith(`${PROGRAM_NAME} my-add-on --kind panel --template javascript`, {
-                        prefix: "  ",
-                        postfix: "\n"
-                    }),
+                    logger.information.calledWith(
+                        `${PROGRAM_NAME} my-add-on --entrypoint panel --template javascript`,
+                        {
+                            prefix: "  ",
+                            postfix: "\n"
+                        }
+                    ),
                     true
                 );
                 assert.equal(analyticsService.postEvent.callCount, 1);
@@ -130,7 +133,7 @@ describe("AddOnDirectoryValidator", () => {
                 assert.equal(
                     logger.warning
                         .getCall(1)
-                        .calledWith(`${PROGRAM_NAME} <add-on-name> --kind <panel> --template <javascript>`, {
+                        .calledWith(`${PROGRAM_NAME} <add-on-name> --entrypoint <panel> --template <javascript>`, {
                             prefix: "  "
                         }),
                     true
@@ -146,10 +149,13 @@ describe("AddOnDirectoryValidator", () => {
 
                 assert.equal(logger.information.callCount, 1);
                 assert.equal(
-                    logger.information.calledWith(`${PROGRAM_NAME} my-add-on --kind panel --template javascript`, {
-                        prefix: "  ",
-                        postfix: "\n"
-                    }),
+                    logger.information.calledWith(
+                        `${PROGRAM_NAME} my-add-on --entrypoint panel --template javascript`,
+                        {
+                            prefix: "  ",
+                            postfix: "\n"
+                        }
+                    ),
                     true
                 );
                 assert.equal(analyticsService.postEvent.callCount, 1);
@@ -191,7 +197,7 @@ describe("AddOnDirectoryValidator", () => {
                 assert.equal(
                     logger.warning
                         .getCall(1)
-                        .calledWith(`${PROGRAM_NAME} <add-on-name> --kind <panel> --template <javascript>`, {
+                        .calledWith(`${PROGRAM_NAME} <add-on-name> --entrypoint <panel> --template <javascript>`, {
                             prefix: "  "
                         }),
                     true
@@ -207,10 +213,13 @@ describe("AddOnDirectoryValidator", () => {
 
                 assert.equal(logger.information.callCount, 1);
                 assert.equal(
-                    logger.information.calledWith(`${PROGRAM_NAME} my-add-on --kind panel --template javascript`, {
-                        prefix: "  ",
-                        postfix: "\n"
-                    }),
+                    logger.information.calledWith(
+                        `${PROGRAM_NAME} my-add-on --entrypoint panel --template javascript`,
+                        {
+                            prefix: "  ",
+                            postfix: "\n"
+                        }
+                    ),
                     true
                 );
                 assert.equal(analyticsService.postEvent.callCount, 1);

package/src/test/validators/NodeEnvironmentValidator.spec.ts

@@ -63,7 +63,7 @@ describe("NodeEnvironmentValidator", () => {
     });
 
     describe("validateNodeVersion", () => {
-        const runs = [{ version: "10.0.0" }, { version: "15.9.9" }];
+        const runs = [{ version: "10.0.0" }, { version: "17.9.9" }];
         runs.forEach(({ version }) => {
             it(`should exit for lower node version: ${version}.`, async () => {
                 const validator: EnvironmentValidator = new NodeEnvironmentValidator(
@@ -84,7 +84,7 @@ describe("NodeEnvironmentValidator", () => {
 
                 assert.equal(logger.information.callCount, 2);
                 assert.equal(
-                    logger.information.getCall(0).calledWith(`${PROGRAM_NAME} requires node 16.0.0 or higher.`),
+                    logger.information.getCall(0).calledWith(`${PROGRAM_NAME} requires node 18.0.0 or higher.`),
                     true
                 );
                 assert.equal(logger.information.getCall(1).calledWith("Please update your version of node."), true);
@@ -134,7 +134,7 @@ describe("NodeEnvironmentValidator", () => {
 
                 assert.equal(logger.information.callCount, 2);
                 assert.equal(
-                    logger.information.getCall(0).calledWith(`${PROGRAM_NAME} requires npm 8.0.0 or higher.`),
+                    logger.information.getCall(0).calledWith(`${PROGRAM_NAME} requires npm 10.0.0 or higher.`),
                     true
                 );
                 assert.equal(logger.information.getCall(1).calledWith("Please install npm."), true);
@@ -147,7 +147,7 @@ describe("NodeEnvironmentValidator", () => {
             });
         });
 
-        const runs = [{ version: "3.0.0" }, { version: "7.9.9" }];
+        const runs = [{ version: "3.0.0" }, { version: "9.9.9" }];
         runs.forEach(run => {
             it(`should exit for lower npm version: ${run.version}.`, async () => {
                 const validator: EnvironmentValidator = new NodeEnvironmentValidator(
@@ -168,7 +168,7 @@ describe("NodeEnvironmentValidator", () => {
 
                 assert.equal(logger.information.callCount, 2);
                 assert.equal(
-                    logger.information.getCall(0).calledWith(`${PROGRAM_NAME} requires npm 8.0.0 or higher.`),
+                    logger.information.getCall(0).calledWith(`${PROGRAM_NAME} requires npm 10.0.0 or higher.`),
                     true
                 );
                 assert.equal(logger.information.getCall(1).calledWith("Please update your version of npm."), true);

package/src/validators/AddOnDirectoryValidator.ts

@@ -191,8 +191,8 @@ const LOGS = {
     newLine: "\n",
     tab: "  ",
     specifyAddOnName: "Please specify an Add-on name",
-    executeProgram: "{PROGRAM_NAME} <add-on-name> --kind <panel> --template <javascript>",
-    executeProgramExample: "{PROGRAM_NAME} my-add-on --kind panel --template javascript",
+    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:

package/src/validators/NodeEnvironmentValidator.ts

@@ -66,7 +66,7 @@ export class NodeEnvironmentValidator implements EnvironmentValidator {
      * Validate the node version in the user's system.
      */
     async validateNodeVersion(): Promise<void> {
-        const minNode = "16.0.0";
+        const minNode = "18.0.0";
         try {
             const result = this._process.executeSync("node", ["--version"]);
             const nodeVersion = String(result?.data)?.trim();
@@ -96,7 +96,7 @@ export class NodeEnvironmentValidator implements EnvironmentValidator {
      * Validate the npm version in the user's system.
      */
     async validateNpmVersion(): Promise<void> {
-        const minNpm = "8.0.0";
+        const minNpm = "10.0.0";
         try {
             const result = this._process.executeSync("npm", ["--version"]);
             const npmVersion = result.data ? String(result.data)?.trim() : undefined;

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.0.3",
+        "@swc-react/theme": "1.0.3",
         "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.0.3",
+        "@swc-react/theme": "1.0.3",
         "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.0.3",
+        "@swc-react/theme": "1.0.3",
         "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.0.3",
+        "@swc-react/theme": "1.0.3",
         "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.1.2",
+        "@spectrum-web-components/theme": "1.1.2",
         "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"

package/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.1.2",
+        "@spectrum-web-components/theme": "1.1.2",
         "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-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/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/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/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"