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

package/package.json

@@ -1,80 +1,79 @@
 {
-	"name": "@adobe/create-ccweb-add-on",
-	"version": "1.4.0",
-	"author": "Adobe",
-	"license": "MIT",
-	"description": "Create an Adobe Creative Cloud Web Add-on.",
-	"keywords": [
-		"adobe",
-		"creative cloud web",
-		"express",
-		"create",
-		"add-on",
-		"templates"
-	],
-	"type": "module",
-	"bin": {
-		"create-ccweb-add-on": "./bin/run.js"
-	},
-	"repository": {
-		"url": "https://github.com/adobe/create-ccweb-add-on"
-	},
-	"oclif": {
-		"bin": "create-ccweb-add-on",
-		"default": "create",
-		"commands": "./dist/commands",
-		"plugins": [],
-		"topicSeparator": " "
-	},
-	"dependencies": {
-		"@adobe/ccweb-add-on-analytics": "1.4.0",
-		"@adobe/ccweb-add-on-core": "1.4.0",
-		"@adobe/ccweb-add-on-developer-terms": "1.4.0",
-		"@adobe/ccweb-add-on-manifest": "1.4.0",
-		"@adobe/ccweb-add-on-scaffolder": "1.4.0",
-		"@oclif/core": "2.8.0",
-		"axios": "1.6.0",
-		"chalk": "4.1.1",
-		"fs-extra": "10.0.1",
-		"inversify": "6.0.1",
-		"os-name": "4.0.1",
-		"prompts": "2.4.2",
-		"reflect-metadata": "0.1.13",
-		"semver": "7.3.4",
-		"string-template": "1.0.0",
-		"tslib": "2.4.0",
-		"validate-npm-package-name": "3.0.0"
-	},
-	"devDependencies": {
-		"@types/chai-as-promised": "7.1.3",
-		"@types/chai": "4.2.14",
-		"@types/fs-extra": "9.0.13",
-		"@types/mocha": "9.1.1",
-		"@types/node": "16.11.62",
-		"@types/prompts": "2.0.14",
-		"@types/semver": "7.3.4",
-		"@types/sinon": "9.0.8",
-		"@types/string-template": "1.0.2",
-		"@types/validate-npm-package-name": "3.0.3",
-		"c8": "7.7.2",
-		"chai-as-promised": "7.1.1",
-		"chai": "4.3.4",
-		"mocha": "10.0.0",
-		"oclif": "3.2.28",
-		"prettier": "2.8.0",
-		"regenerator-runtime": "0.13.9",
-		"rimraf": "3.0.2",
-		"sinon": "9.2.1",
-		"ts-node": "10.9.1",
-		"ts-sinon": "2.0.1",
-		"typescript": "4.8.4"
-	},
-	"scripts": {
-		"clean": "rimraf dist coverage",
-		"_postbuild": "cp -R templates/ dist/templates",
-		"ibuild": "tsc",
-		"build": "rushx clean && rushx ibuild && rushx _postbuild",
-		"build:release": "rushx build",
-		"test": "c8 mocha && c8 check-coverage --lines 100 --functions 100 --branches 100"
-	}
-}
+  "name": "@adobe/create-ccweb-add-on",
+  "version": "2.0.0",
+  "author": "Adobe",
+  "license": "MIT",
+  "description": "Create an Adobe Creative Cloud Web Add-on.",
+  "keywords": [
+    "adobe",
+    "creative cloud web",
+    "express",
+    "create",
+    "add-on",
+    "templates"
+  ],
+  "type": "module",
+  "bin": {
+    "create-ccweb-add-on": "./bin/run.js"
+  },
+  "repository": {
+    "url": "https://github.com/adobe/create-ccweb-add-on"
+  },
+  "oclif": {
+    "bin": "create-ccweb-add-on",
+    "default": "create",
+    "commands": "./dist/commands",
+    "plugins": [],
+    "topicSeparator": " "
+  },
+  "dependencies": {
+    "@oclif/core": "2.8.0",
+    "axios": "1.6.0",
+    "chalk": "4.1.1",
+    "fs-extra": "10.0.1",
+    "inversify": "6.0.1",
+    "os-name": "4.0.1",
+    "prompts": "2.4.2",
+    "reflect-metadata": "0.1.13",
+    "semver": "7.3.4",
+    "string-template": "1.0.0",
+    "tslib": "2.4.0",
+    "validate-npm-package-name": "3.0.0",
+    "@adobe/ccweb-add-on-analytics": "2.0.0",
+    "@adobe/ccweb-add-on-core": "2.0.0",
+    "@adobe/ccweb-add-on-scaffolder": "2.0.0",
+    "@adobe/ccweb-add-on-manifest": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/chai-as-promised": "7.1.3",
+    "@types/chai": "4.2.14",
+    "@types/fs-extra": "9.0.13",
+    "@types/mocha": "9.1.1",
+    "@types/node": "16.11.62",
+    "@types/prompts": "2.0.14",
+    "@types/semver": "7.3.4",
+    "@types/sinon": "9.0.8",
+    "@types/string-template": "1.0.2",
+    "@types/validate-npm-package-name": "3.0.3",
+    "c8": "7.7.2",
+    "chai-as-promised": "7.1.1",
+    "chai": "4.3.4",
+    "mocha": "10.0.0",
+    "oclif": "3.2.28",
+    "prettier": "2.8.0",
+    "regenerator-runtime": "0.13.9",
+    "rimraf": "3.0.2",
+    "sinon": "9.2.1",
+    "ts-node": "10.9.1",
+    "ts-sinon": "2.0.1",
+    "typescript": "4.8.4"
+  },
+  "scripts": {
+    "clean": "rimraf dist coverage",
+    "_postbuild": "cp -R templates/ dist/templates",
+    "ibuild": "tsc",
+    "build": "rushx clean && rushx ibuild && rushx _postbuild",
+    "build:release": "rushx build",
+    "test": "c8 mocha && c8 check-coverage --lines 100 --functions 100 --branches 100"
+  }
+}

package/src/commands/create.ts

@@ -25,8 +25,6 @@
 import type { AnalyticsConsent, AnalyticsService } from "@adobe/ccweb-add-on-analytics";
 import { CLIProgram, ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
 import { UncaughtExceptionHandler } from "@adobe/ccweb-add-on-core";
-import type { AccountService } from "@adobe/ccweb-add-on-developer-terms";
-import { ITypes as IDeveloperTermsTypes } from "@adobe/ccweb-add-on-developer-terms";
 import { EntrypointType } from "@adobe/ccweb-add-on-manifest";
 import type { Config } from "@oclif/core";
 import { Args, Command, Flags } from "@oclif/core";
@@ -41,8 +39,6 @@ import { CLIOptions } from "../models/CLIOptions.js";
  * Implementation class of the create-ccweb-add-on command.
  */
 export class CreateCCWebAddOn extends Command {
-    private readonly _accountService: AccountService;
-
     private readonly _analyticsConsent: AnalyticsConsent;
     private readonly _analyticsService: AnalyticsService;
 
@@ -66,12 +62,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.",
@@ -97,8 +87,6 @@ export class CreateCCWebAddOn extends Command {
     constructor(argv: string[], config: Config) {
         super(argv, config);
 
-        this._accountService = IContainer.get<AccountService>(IDeveloperTermsTypes.AccountService);
-
         this._analyticsConsent = IContainer.get<AnalyticsConsent>(IAnalyticsTypes.AnalyticsConsent);
 
         this._analyticsService = IContainer.get<AnalyticsService>(IAnalyticsTypes.AnalyticsService);
@@ -113,11 +101,9 @@ export class CreateCCWebAddOn extends Command {
 
         const {
             args: { addOnName },
-            flags: { kind, template, login, analytics, verbose }
+            flags: { kind, template, analytics, verbose }
         } = await this.parse(CreateCCWebAddOn);
 
-        await this._seekTermsOfUseConsent(login, verbose);
-
         await this._seekAnalyticsConsent(analytics);
 
         console.log();
@@ -128,6 +114,7 @@ export class CreateCCWebAddOn extends Command {
             template.toLowerCase(),
             verbose
         );
+
         await this._addOnFactory.create(options);
     }
 
@@ -136,14 +123,6 @@ export class CreateCCWebAddOn extends Command {
         throw error;
     }
 
-    private async _seekTermsOfUseConsent(login: boolean, verbose: boolean): Promise<void> {
-        if (login) {
-            await this._accountService.invalidateToken(verbose);
-        }
-
-        await this._accountService.seekTermsOfUseConsent();
-    }
-
     private async _seekAnalyticsConsent(analytics: string | undefined): Promise<void> {
         if (analytics === undefined) {
             await this._analyticsConsent.get();

package/src/constants.ts

@@ -26,7 +26,8 @@ export const PROGRAM_NAME = "create-ccweb-add-on";
 
 export const ADD_ON_TEMPLATES = new Map<string, string>([
     ["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"]
 ]);
@@ -37,11 +38,13 @@ 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/src/test/commands/create.spec.ts

@@ -24,8 +24,6 @@
 
 import type { AnalyticsConsent, AnalyticsService } from "@adobe/ccweb-add-on-analytics";
 import { ITypes as IAnalyticsTypes } from "@adobe/ccweb-add-on-analytics";
-import type { AccountService } from "@adobe/ccweb-add-on-developer-terms";
-import { ITypes as IDeveloperTermsTypes } from "@adobe/ccweb-add-on-developer-terms";
 import { EntrypointType } from "@adobe/ccweb-add-on-manifest";
 import { Config } from "@oclif/core";
 import chai, { assert, expect } from "chai";
@@ -49,8 +47,6 @@ describe("CreateCCWebAddOn", () => {
 
     let addOnFactory: StubbedInstance<AddOnFactory>;
 
-    let accountService: StubbedInstance<AccountService>;
-
     let analyticsConsent: StubbedInstance<AnalyticsConsent>;
     let analyticsService: StubbedInstance<AnalyticsService>;
 
@@ -60,18 +56,12 @@ describe("CreateCCWebAddOn", () => {
         addOnFactory = stubInterface();
         addOnFactory.create.resolves();
 
-        accountService = stubInterface();
-        accountService.invalidateToken.resolves();
-        accountService.seekTermsOfUseConsent.resolves();
-
         analyticsConsent = stubInterface();
         analyticsService = stubInterface();
 
         container = sandbox.stub(IContainer, "get");
         container.withArgs(ITypes.AddOnFactory).returns(addOnFactory);
 
-        container.withArgs(IDeveloperTermsTypes.AccountService).returns(accountService);
-
         container.withArgs(IAnalyticsTypes.AnalyticsConsent).returns(analyticsConsent);
         container.withArgs(IAnalyticsTypes.AnalyticsService).returns(analyticsService);
     });
@@ -85,15 +75,12 @@ describe("CreateCCWebAddOn", () => {
             analyticsConsent.get.resolves(true);
 
             const createCCWebAddOn = new CreateCCWebAddOn(
-                ["hello-world", "--kind=panel", "--template=react-javascript", "--login", "--verbose"],
+                ["hello-world", "--kind=panel", "--template=react-javascript", "--verbose"],
                 new Config({ root: "." })
             );
 
             await createCCWebAddOn.run();
 
-            assert.equal(accountService.invalidateToken.callCount, 1);
-            assert.equal(accountService.seekTermsOfUseConsent.callCount, 1);
-
             assert.equal(analyticsConsent.get.callCount, 1);
 
             const options = new CLIOptions(EntrypointType.PANEL, "hello-world", "react-javascript", true);
@@ -105,22 +92,12 @@ describe("CreateCCWebAddOn", () => {
             analyticsConsent.set.withArgs(false).resolves();
 
             const createCCWebAddOn = new CreateCCWebAddOn(
-                [
-                    "hello-world",
-                    "--kind=panel",
-                    "--template=react-javascript",
-                    "--login",
-                    "--analytics=off",
-                    "--verbose"
-                ],
+                ["hello-world", "--kind=panel", "--template=react-javascript", "--analytics=off", "--verbose"],
                 new Config({ root: "." })
             );
 
             await createCCWebAddOn.run();
 
-            assert.equal(accountService.invalidateToken.callCount, 1);
-            assert.equal(accountService.seekTermsOfUseConsent.callCount, 1);
-
             assert.equal(analyticsConsent.set.calledOnceWith(false), true);
 
             const options = new CLIOptions(EntrypointType.PANEL, "hello-world", "react-javascript", true);
@@ -133,7 +110,6 @@ describe("CreateCCWebAddOn", () => {
             const createCCWebAddOn = new CreateCCWebAddOn(["--incorrect-flag"], new Config({ root: "." }));
 
             const error = new Error("Nonexistent flag: --incorrect-flag\nSee more help with --help");
-
             await expect(createCCWebAddOn.catch(error)).to.be.rejectedWith();
 
             assert.equal(

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

@@ -93,7 +93,8 @@ describe("AddOnDirectoryValidator", () => {
                 assert.equal(logger.information.callCount, 1);
                 assert.equal(
                     logger.information.calledWith(`${PROGRAM_NAME} my-add-on --kind panel --template javascript`, {
-                        prefix: "  "
+                        prefix: "  ",
+                        postfix: "\n"
                     }),
                     true
                 );
@@ -146,7 +147,8 @@ describe("AddOnDirectoryValidator", () => {
                 assert.equal(logger.information.callCount, 1);
                 assert.equal(
                     logger.information.calledWith(`${PROGRAM_NAME} my-add-on --kind panel --template javascript`, {
-                        prefix: "  "
+                        prefix: "  ",
+                        postfix: "\n"
                     }),
                     true
                 );
@@ -206,7 +208,8 @@ describe("AddOnDirectoryValidator", () => {
                 assert.equal(logger.information.callCount, 1);
                 assert.equal(
                     logger.information.calledWith(`${PROGRAM_NAME} my-add-on --kind panel --template javascript`, {
-                        prefix: "  "
+                        prefix: "  ",
+                        postfix: "\n"
                     }),
                     true
                 );

package/src/validators/AddOnDirectoryValidator.ts

@@ -181,7 +181,8 @@ export class AddOnDirectoryValidator implements DirectoryValidator {
         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
+            prefix: LOGS.tab,
+            postfix: LOGS.newLine
         });
     }
 }

package/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/templates/swc-javascript/template/.babelrc

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

package/templates/{typescript → swc-javascript}/template/README.md

@@ -1,13 +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 React and TypeScript.
+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
--   React
--   TypeScript
+-   Spectrum Web Components
+-   JavaScript
 
 ## Setup
 

package/templates/swc-javascript/template/gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+dist/
+node_modules/

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

@@ -0,0 +1,9 @@
+import { css } from "lit";
+
+export const style = css`
+    .container {
+        margin: 24px;
+        display: flex;
+        flex-direction: column;
+    }
+`;

package/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 → templates/swc-javascript}/template/src/index.html

@@ -2,8 +2,11 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="description" content="Get started with Add-on development using TypeScript" />
-        <meta name="keywords" content="Adobe, Express, Add-On, TypeScript" />
+        <meta
+            name="description"
+            content="Get started with Add-on development using Spectrum Web Components and JavaScript"
+        />
+        <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/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/templates/swc-javascript/template/src/manifest.json

@@ -0,0 +1,21 @@
+{
+    "testId": "",
+    "name": "",
+    "version": "1.0.0",
+    "manifestVersion": 2,
+    "requirements": {
+        "apps": [
+            {
+                "name": "Express",
+                "apiVersion": 1
+            }
+        ]
+    },
+    "entryPoints": [
+        {
+            "type": "panel",
+            "id": "panel1",
+            "main": "index.html"
+        }
+    ]
+}

package/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/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/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/templates/swc-javascript-with-document-sandbox/template/.babelrc

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