@adobe/create-ccweb-add-on 1.3.0 → 2.0.0

package/dist/app/WxpAddOnFactory.js

@@ -94,7 +94,7 @@ let WxpAddOnFactory = class WxpAddOnFactory {
                 "install",
                 "--save-dev",
                 "@adobe/ccweb-add-on-scripts",
-                "@adobe/ccweb-add-on-sdk-types"
+                "@types/adobe__ccweb-add-on-sdk"
             ];
             if (options.verbose) {
                 devDependencyArgs.push("--verbose");

package/dist/commands/create.d.ts

@@ -28,7 +28,6 @@ import "reflect-metadata";
  * Implementation class of the create-ccweb-add-on command.
  */
 export declare class CreateCCWebAddOn extends Command {
-    private readonly _accountService;
     private readonly _analyticsConsent;
     private readonly _analyticsService;
     private readonly _addOnFactory;
@@ -37,7 +36,6 @@ export declare class CreateCCWebAddOn extends Command {
     static flags: {
         kind: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
         template: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
-        login: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
         analytics: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
         verbose: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
     };
@@ -49,7 +47,6 @@ export declare class CreateCCWebAddOn extends Command {
     catch(error: {
         message: string;
     }): Promise<void>;
-    private _seekTermsOfUseConsent;
     private _seekAnalyticsConsent;
 }
 //# sourceMappingURL=create.d.ts.map

package/dist/commands/create.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAQlF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAQ,OAAO,EAAS,MAAM,aAAa,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAO1B;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,OAAO;IACzC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAiB;IAEjD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAmB;IACrD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAmB;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAE7C,MAAM,CAAC,WAAW,SAAgD;IAElE,MAAM,CAAC,QAAQ,WAAiE;IAEhF,MAAM,CAAC,KAAK;;;;;;MAgCV;IAEF,MAAM,CAAC,IAAI;;MAMT;gBAEU,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM;IAcpC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAuBpB,KAAK,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE;YAKxB,sBAAsB;YAQtB,qBAAqB;CAOtC"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/commands/create.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;kFAsBkF;AAMlF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAQ,OAAO,EAAS,MAAM,aAAa,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAO1B;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,OAAO;IACzC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAmB;IACrD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAmB;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAE7C,MAAM,CAAC,WAAW,SAAgD;IAElE,MAAM,CAAC,QAAQ,WAAiE;IAEhF,MAAM,CAAC,KAAK;;;;;MA0BV;IAEF,MAAM,CAAC,IAAI;;MAMT;gBAEU,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM;IAYpC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAsBpB,KAAK,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE;YAKxB,qBAAqB;CAOtC"}

package/dist/commands/create.js

@@ -23,7 +23,6 @@
  ********************************************************************************/
 import { CLIProgram, ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
 import { UncaughtExceptionHandler } from "@adobe/ccweb-add-on-core";
-import { ITypes as IDeveloperTermsTypes } from "@adobe/ccweb-add-on-developer-terms";
 import { EntrypointType } from "@adobe/ccweb-add-on-manifest";
 import { Args, Command, Flags } from "@oclif/core";
 import "reflect-metadata";
@@ -35,7 +34,6 @@ import { CLIOptions } from "../models/CLIOptions.js";
  * Implementation class of the create-ccweb-add-on command.
  */
 export class CreateCCWebAddOn extends Command {
-    _accountService;
     _analyticsConsent;
     _analyticsService;
     _addOnFactory;
@@ -55,12 +53,6 @@ export class CreateCCWebAddOn extends Command {
             default: "",
             required: false
         }),
-        login: Flags.boolean({
-            char: "l",
-            description: "To force login",
-            required: false,
-            default: false
-        }),
         analytics: Flags.string({
             char: "a",
             description: "Turn on/off sending analytics to Adobe.",
@@ -83,7 +75,6 @@ export class CreateCCWebAddOn extends Command {
     };
     constructor(argv, config) {
         super(argv, config);
-        this._accountService = IContainer.get(IDeveloperTermsTypes.AccountService);
         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);
@@ -92,8 +83,7 @@ export class CreateCCWebAddOn extends Command {
     }
     async run() {
         UncaughtExceptionHandler.registerExceptionHandler(PROGRAM_NAME);
-        const { args: { addOnName }, flags: { kind, template, login, analytics, verbose } } = await this.parse(CreateCCWebAddOn);
-        await this._seekTermsOfUseConsent(login, verbose);
+        const { args: { addOnName }, flags: { kind, template, analytics, verbose } } = await this.parse(CreateCCWebAddOn);
         await this._seekAnalyticsConsent(analytics);
         console.log();
         const options = new CLIOptions(kind.toLowerCase(), addOnName, template.toLowerCase(), verbose);
@@ -103,12 +93,6 @@ export class CreateCCWebAddOn extends Command {
         await this._analyticsService.postEvent(AnalyticsErrorMarkers.ERROR_INVALID_ARGS, error.message, false);
         throw error;
     }
-    async _seekTermsOfUseConsent(login, verbose) {
-        if (login) {
-            await this._accountService.invalidateToken(verbose);
-        }
-        await this._accountService.seekTermsOfUseConsent();
-    }
     async _seekAnalyticsConsent(analytics) {
         if (analytics === undefined) {
             await this._analyticsConsent.get();

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,qBAK3B,CAAC;AAEH,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAE9C,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAE7D,eAAO,MAAM,0BAA0B,UAStC,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,qBAM3B,CAAC;AAEH,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAE9C,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAE7D,eAAO,MAAM,0BAA0B,UAWtC,CAAC"}

package/dist/constants.js

@@ -24,7 +24,8 @@
 export const PROGRAM_NAME = "create-ccweb-add-on";
 export const ADD_ON_TEMPLATES = new Map([
     ["javascript", "Get started with Add-on development using JavaScript"],
-    ["typescript", "Get started with Add-on development using TypeScript"],
+    ["swc-javascript", "Get started with Add-on development using using Spectrum Web Components and JavaScript"],
+    ["swc-typescript", "Get started with Add-on development using using Spectrum Web Components and TypeScript"],
     ["react-javascript", "Get started with Add-on development using React and JavaScript"],
     ["react-typescript", "Get started with Add-on development using React and TypeScript"]
 ]);
@@ -32,11 +33,13 @@ export const TEMP_TEMPLATE_PATH = ".template";
 export const WITH_DOCUMENT_SANDBOX = "with-document-sandbox";
 export const AVAILABLE_ADD_ON_TEMPLATES = [
     "javascript",
-    "typescript",
+    "swc-javascript",
+    "swc-typescript",
     "react-javascript",
     "react-typescript",
     `javascript-${WITH_DOCUMENT_SANDBOX}`,
-    `typescript-${WITH_DOCUMENT_SANDBOX}`,
+    `swc-javascript-${WITH_DOCUMENT_SANDBOX}`,
+    `swc-typescript-${WITH_DOCUMENT_SANDBOX}`,
     `react-javascript-${WITH_DOCUMENT_SANDBOX}`,
     `react-typescript-${WITH_DOCUMENT_SANDBOX}`
 ];

package/dist/templates/javascript-with-document-sandbox/template/src/sandbox/tsconfig.json

@@ -4,7 +4,7 @@
         "lib": ["ES2020"],
         "module": "ES2020",
         "target": "ES2020",
-        "typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
     },
     "include": ["./**/*"]
 }

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

@@ -4,7 +4,7 @@
         "lib": ["ES2020"],
         "module": "ES2020",
         "target": "ES2020",
-        "typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
     },
     "include": ["./**/*"]
 }

package/dist/templates/react-typescript/template/src/index.html

@@ -2,8 +2,8 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="description" content="Get started with Add-on development using React and JavaScript" />
-        <meta name="keywords" content="Adobe, Express, Add-On, React, JavaScript" />
+        <meta name="description" content="Get started with Add-on development using React and TypeScript" />
+        <meta name="keywords" content="Adobe, Express, Add-On, React, TypeScript" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Hello World</title>
     </head>

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

@@ -4,7 +4,7 @@
         "lib": ["ES2020"],
         "module": "ES2020",
         "target": "ES2020",
-        "typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
     },
     "include": ["./**/*"]
 }

package/dist/templates/swc-javascript/template/.babelrc

@@ -0,0 +1,6 @@
+{
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
+        ["@babel/plugin-transform-class-properties"]
+    ]
+}

package/dist/templates/{typescript-with-document-sandbox → swc-javascript}/template/README.md

@@ -1,12 +1,13 @@
 ## About
 
-This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using TypeScript with Document Sandbox Runtime.
+This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using Spectrum Web Components and JavaScript.
 
 ## Tools
 
 -   HTML
 -   CSS
--   TypeScript
+-   Spectrum Web Components
+-   JavaScript
 
 ## Setup
 

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

@@ -0,0 +1,42 @@
+// To support: theme="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";
+import "@spectrum-web-components/theme/scale-medium.js";
+import "@spectrum-web-components/theme/theme-light.js";
+
+// To learn more about using "spectrum web components" visit:
+// https://opensource.adobe.com/spectrum-web-components/
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { style } from "./App.css";
+
+@customElement("add-on-app")
+export class App extends LitElement {
+    @property({ type: Object })
+    addOnUISdk;
+
+    @state()
+    _buttonLabel = "Click me";
+
+    static get styles() {
+        return style;
+    }
+
+    _handleClick() {
+        this._buttonLabel = "Clicked";
+    }
+
+    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">
+            <div class="container">
+                <sp-button size="m" @click=${this._handleClick}>${this._buttonLabel}</sp-button>
+            </div>
+        </sp-theme>`;
+    }
+}

package/dist/templates/{typescript-with-document-sandbox → swc-javascript}/template/src/index.html

@@ -4,9 +4,9 @@
         <meta charset="UTF-8" />
         <meta
             name="description"
-            content="Get started with Add-on development using TypeScript with Document Sandbox Runtime"
+            content="Get started with Add-on development using Spectrum Web Components and JavaScript"
         />
-        <meta name="keywords" content="Adobe, Express, Add-On, TypeScript, Document Sandbox Runtime" />
+        <meta name="keywords" content="Adobe, Express, Add-On, Spectrum Web Components, JavaScript" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started</title>
     </head>

package/dist/templates/swc-javascript/template/src/index.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+import "./components/App";
+
+import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
+
+@customElement("add-on-root")
+export class Root extends LitElement {
+    @state()
+    _isAddOnUISdkReady = addOnUISdk.ready;
+
+    render() {
+        return html`
+            ${until(
+                this._isAddOnUISdkReady.then(() => {
+                    console.log("addOnUISdk is ready for use.");
+                    return html`<add-on-app .addOnUISdk=${addOnUISdk}></add-on-app>`;
+                })
+            )}
+        `;
+    }
+}

package/dist/templates/swc-javascript/template/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "experimentalDecorators": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "outDir": "dist",
+        "target": "ESNext",
+        "useDefineForClassFields": false
+    },
+    "exclude": ["node_modules"],
+    "include": ["src/**/*"]
+}

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

@@ -0,0 +1,46 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+const isEnvProduction = process.env.NODE_ENV === "production";
+
+module.exports = {
+    mode: isEnvProduction ? "production" : "development",
+    devtool: isEnvProduction ? "source-map" : "eval-source-map",
+    entry: "./src/index.js",
+    experiments: {
+        outputModule: true
+    },
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        module: true,
+        filename: "index.js"
+    },
+    externalsType: "module",
+    externalsPresets: { web: true },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "src/index.html",
+            scriptLoading: "module"
+        }),
+        new CopyWebpackPlugin({
+            patterns: [{ from: "src/*.json", to: "[name][ext]" }]
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(js)$/,
+                exclude: /node_modules/,
+                use: ["babel-loader"]
+            },
+            {
+                test: /(\.css)$/,
+                use: ["style-loader", "css-loader"]
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".js", ".css"]
+    }
+};

package/dist/templates/swc-javascript/template.json

@@ -0,0 +1,24 @@
+{
+    "scripts": {
+        "clean": "ccweb-add-on-scripts clean",
+        "build": "ccweb-add-on-scripts build --use webpack",
+        "start": "ccweb-add-on-scripts start --use webpack",
+        "package": "ccweb-add-on-scripts package --use webpack"
+    },
+    "dependencies": {
+        "@spectrum-web-components/button": "0.39.4",
+        "@spectrum-web-components/theme": "0.39.4",
+        "lit": "2.8.0"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-decorators": "7.24.1",
+        "@babel/plugin-transform-class-properties": "7.24.1",
+        "babel-loader": "9.1.3",
+        "copy-webpack-plugin": "11.0.0",
+        "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"
+    }
+}

package/dist/templates/swc-javascript-with-document-sandbox/template/.babelrc

@@ -0,0 +1,6 @@
+{
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
+        ["@babel/plugin-transform-class-properties"]
+    ]
+}

package/dist/templates/swc-javascript-with-document-sandbox/template/README.md

@@ -0,0 +1,16 @@
+## About
+
+This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using Spectrum Web Components and JavaScript with Document Sandbox Runtime.
+
+## Tools
+
+-   HTML
+-   CSS
+-   Spectrum Web Components
+-   JavaScript
+
+## Setup
+
+1. To install the dependencies, run `npm install`.
+2. To build the application, run `npm run build`.
+3. To start the application, run `npm run start`.

package/dist/templates/swc-javascript-with-document-sandbox/template/src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="description"
+            content="Get started with Add-on development using Spectrum Web Components and JavaScript with Document Sandbox Runtime"
+        />
+        <meta
+            name="keywords"
+            content="Adobe, Express, Add-On, Spectrum Web Components, JavaScript, Document Sandbox Runtime"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Get Started</title>
+    </head>
+    <body>
+        <add-on-root></add-on-root>
+    </body>
+</html>

package/dist/templates/swc-javascript-with-document-sandbox/template/src/sandbox/code.js

@@ -0,0 +1,38 @@
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+import { editor } from "express-document-sdk";
+
+// Get the document sandbox runtime.
+const { runtime } = addOnSandboxSdk.instance;
+
+function start() {
+    // APIs to be exposed to the UI runtime
+    // i.e., to the `App.js` file of this add-on.
+    const sandboxApi = {
+        createRectangle: () => {
+            const rectangle = editor.createRectangle();
+
+            // Define rectangle dimensions.
+            rectangle.width = 240;
+            rectangle.height = 180;
+
+            // Define rectangle position.
+            rectangle.translation = { x: 10, y: 10 };
+
+            // Define rectangle color.
+            const color = { red: 0.32, green: 0.34, blue: 0.89, alpha: 1 };
+
+            // Fill the rectangle with the color.
+            const rectangleFill = editor.makeColorFill(color);
+            rectangle.fill = rectangleFill;
+
+            // Add the rectangle to the document.
+            const insertionParent = editor.context.insertionParent;
+            insertionParent.children.append(rectangle);
+        }
+    };
+
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
+}
+
+start();

package/{templates/typescript-with-document-sandbox → dist/templates/swc-javascript-with-document-sandbox}/template/src/sandbox/tsconfig.json

@@ -4,7 +4,7 @@
         "lib": ["ES2020"],
         "module": "ES2020",
         "target": "ES2020",
-        "typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
     },
     "include": ["./**/*"]
 }

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

@@ -0,0 +1,54 @@
+// To support: theme="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";
+import "@spectrum-web-components/theme/scale-medium.js";
+import "@spectrum-web-components/theme/theme-light.js";
+
+// To learn more about using "spectrum web components" visit:
+// https://opensource.adobe.com/spectrum-web-components/
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { style } from "./App.css";
+
+import { RuntimeType } from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
+
+@customElement("add-on-app")
+export class App extends LitElement {
+    @property({ type: Object })
+    addOnUISdk;
+
+    @state()
+    _sandboxProxy;
+
+    static get styles() {
+        return style;
+    }
+
+    async firstUpdated() {
+        // Get the UI runtime.
+        const { runtime } = this.addOnUISdk.instance;
+
+        // Get the proxy object, which is required
+        // to call the APIs defined in the Document Sandbox runtime
+        // i.e., in the `code.ts` file of this add-on.
+        this._sandboxProxy = await runtime.apiProxy(RuntimeType.documentSandbox);
+    }
+
+    _handleClick() {
+        this._sandboxProxy.createRectangle();
+    }
+
+    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">
+            <div class="container">
+                <sp-button size="m" @click=${this._handleClick}>Create Rectangle</sp-button>
+            </div>
+        </sp-theme>`;
+    }
+}

package/dist/templates/swc-javascript-with-document-sandbox/template/src/ui/index.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+import "./components/App";
+
+import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
+
+@customElement("add-on-root")
+export class Root extends LitElement {
+    @state()
+    _isAddOnUISdkReady = addOnUISdk.ready;
+
+    render() {
+        return html`
+            ${until(
+                this._isAddOnUISdkReady.then(async () => {
+                    console.log("addOnUISdk is ready for use.");
+                    return html`<add-on-app .addOnUISdk=${addOnUISdk}></add-on-app>`;
+                })
+            )}
+        `;
+    }
+}

package/dist/templates/swc-javascript-with-document-sandbox/template/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "experimentalDecorators": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "outDir": "dist",
+        "target": "ESNext",
+        "useDefineForClassFields": false
+    },
+    "exclude": ["node_modules"],
+    "include": ["src/**/*"]
+}

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

@@ -0,0 +1,54 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+const isEnvProduction = process.env.NODE_ENV === "production";
+
+module.exports = {
+    mode: isEnvProduction ? "production" : "development",
+    devtool: "source-map",
+    entry: {
+        index: "./src/ui/index.js",
+        code: "./src/sandbox/code.js"
+    },
+    experiments: {
+        outputModule: true
+    },
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        module: true,
+        filename: "[name].js"
+    },
+    externalsType: "module",
+    externalsPresets: { web: true },
+    externals: {
+        "add-on-sdk-document-sandbox": "add-on-sdk-document-sandbox",
+        "express-document-sdk": "express-document-sdk"
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "src/index.html",
+            scriptLoading: "module",
+            excludeChunks: ["code"]
+        }),
+        new CopyWebpackPlugin({
+            patterns: [{ from: "src/*.json", to: "[name][ext]" }]
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(js)$/,
+                use: ["babel-loader"],
+                exclude: /node_modules/
+            },
+            {
+                test: /(\.css)$/,
+                use: ["style-loader", "css-loader"]
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".js", ".css"]
+    }
+};

package/dist/templates/swc-javascript-with-document-sandbox/template.json

@@ -0,0 +1,24 @@
+{
+    "scripts": {
+        "clean": "ccweb-add-on-scripts clean",
+        "build": "ccweb-add-on-scripts build --use webpack",
+        "start": "ccweb-add-on-scripts start --use webpack",
+        "package": "ccweb-add-on-scripts package --use webpack"
+    },
+    "dependencies": {
+        "@spectrum-web-components/button": "0.39.4",
+        "@spectrum-web-components/theme": "0.39.4",
+        "lit": "2.8.0"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-decorators": "7.24.1",
+        "@babel/plugin-transform-class-properties": "7.24.1",
+        "babel-loader": "9.1.3",
+        "copy-webpack-plugin": "11.0.0",
+        "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"
+    }
+}

package/{templates/typescript-with-document-sandbox → dist/templates/swc-typescript}/template/README.md

@@ -1,11 +1,12 @@
 ## About
 
-This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using TypeScript with Document Sandbox Runtime.
+This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using Spectrum Web Components and TypeScript.
 
 ## Tools
 
 -   HTML
 -   CSS
+-   Spectrum Web Components
 -   TypeScript
 
 ## Setup