npm - @adobe/create-ccweb-add-on - Versions diffs - 1.3.0 → 2.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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/templates/swc-javascript-with-document-sandbox/template/gitignore ADDED Viewed

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

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

@@ -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/templates/swc-javascript-with-document-sandbox/template/src/manifest.json ADDED Viewed

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

package/templates/swc-javascript-with-document-sandbox/template/src/models/DocumentSandboxApi.ts ADDED Viewed

@@ -0,0 +1,4 @@
+// This interface declares all the APIs that the document sandbox runtime ( i.e. code.ts ) exposes to the UI/iframe runtime
+export interface DocumentSandboxApi {
+    createRectangle(): void;
+}

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

@@ -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/swc-javascript-with-document-sandbox/template/src/sandbox/tsconfig.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["ES2020"],
+        "module": "ES2020",
+        "target": "ES2020",
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
+    },
+    "include": ["./**/*"]
+}

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

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

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

@@ -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/templates/swc-javascript-with-document-sandbox/template/src/ui/index.js ADDED Viewed

@@ -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/templates/swc-javascript-with-document-sandbox/template/src/ui/tsconfig.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["dom"]
+    },
+    "include": ["./**/*"]
+}

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

@@ -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-with-document-sandbox/template/webpack.config.js ADDED Viewed

@@ -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/templates/swc-javascript-with-document-sandbox/template.json ADDED Viewed

@@ -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/typescript → templates/swc-typescript}/template/README.md RENAMED Viewed

@@ -1,12 +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 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 TypeScript.
 ## Tools
 -   HTML
 -   CSS
--   React
+-   Spectrum Web Components
 -   TypeScript
 ## Setup

package/templates/swc-typescript/template/gitignore ADDED Viewed

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

package/templates/swc-typescript/template/src/components/App.css.ts ADDED Viewed

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

package/templates/{typescript → swc-typescript}/template/src/index.html RENAMED Viewed

@@ -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 TypeScript"
+        />
+        <meta name="keywords" content="Adobe, Express, Add-On, Spectrum Web Components, TypeScript" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started</title>
     </head>

package/templates/swc-typescript/template/src/manifest.json ADDED Viewed

@@ -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-typescript-with-document-sandbox/template/README.md ADDED Viewed

@@ -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 TypeScript with Document Sandbox Runtime.
+## Tools
+-   HTML
+-   CSS
+-   Spectrum Web Components
+-   TypeScript
+## 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/templates/swc-typescript-with-document-sandbox/template/src/index.html ADDED Viewed

@@ -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 TypeScript with Document Sandbox Runtime"
+        />
+        <meta
+            name="keywords"
+            content="Adobe, Express, Add-On, Spectrum Web Components, TypeScript, 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/templates/swc-typescript-with-document-sandbox/template/src/manifest.json ADDED Viewed

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

package/templates/swc-typescript-with-document-sandbox/template/src/models/DocumentSandboxApi.ts ADDED Viewed

@@ -0,0 +1,4 @@
+// This interface declares all the APIs that the document sandbox runtime ( i.e. code.ts ) exposes to the UI/iframe runtime
+export interface DocumentSandboxApi {
+    createRectangle(): void;
+}

package/templates/swc-typescript-with-document-sandbox/template/src/sandbox/tsconfig.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["ES2020"],
+        "module": "ES2020",
+        "target": "ES2020",
+        "types": ["@types/adobe__ccweb-add-on-sdk"]
+    },
+    "include": ["./**/*"]
+}

package/templates/swc-typescript-with-document-sandbox/template/src/ui/components/App.css.ts ADDED Viewed

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

package/templates/swc-typescript-with-document-sandbox/template/src/ui/tsconfig.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["dom"]
+    },
+    "include": ["./**/*"]
+}

package/dist/templates/javascript/template/src/add-on-ui-sdk.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-// DO NOT modify this file.
-declare module "https://new.express.adobe.com/static/add-on-sdk/sdk.js" {
-    import { AddOnUISdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnUISdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/ui/ui-sdk";
-}

package/dist/templates/javascript-with-document-sandbox/template/src/sandbox/add-on-sandbox-sdk.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-// DO NOT modify this file.
-declare module "add-on-sdk-document-sandbox" {
-    import { AddOnDocumentSandboxSdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnDocumentSandboxSdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/add-on-sdk-document-sandbox";
-}
-declare module "express-document-sdk" {
-    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/express-document-sdk";
-}

package/dist/templates/javascript-with-document-sandbox/template/src/ui/add-on-ui-sdk.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-// DO NOT modify this file.
-declare module "https://new.express.adobe.com/static/add-on-sdk/sdk.js" {
-    import { AddOnUISdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnUISdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/ui/ui-sdk";
-}

package/dist/templates/react-javascript/template/src/add-on-ui-sdk.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-// DO NOT modify this file.
-declare module "https://new.express.adobe.com/static/add-on-sdk/sdk.js" {
-    import { AddOnUISdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnUISdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/ui/ui-sdk";
-}

package/dist/templates/react-javascript-with-document-sandbox/template/src/sandbox/add-on-sandbox-sdk.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-// DO NOT modify this file.
-declare module "add-on-sdk-document-sandbox" {
-    import { AddOnDocumentSandboxSdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnDocumentSandboxSdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/add-on-sdk-document-sandbox";
-}
-declare module "express-document-sdk" {
-    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/express-document-sdk";
-}

package/dist/templates/react-javascript-with-document-sandbox/template/src/ui/add-on-ui-sdk.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-// DO NOT modify this file.
-declare module "https://new.express.adobe.com/static/add-on-sdk/sdk.js" {
-    import { AddOnUISdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnUISdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/ui/ui-sdk";
-}

package/dist/templates/react-typescript/template/src/add-on-ui-sdk.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-// DO NOT modify this file.
-declare module "https://new.express.adobe.com/static/add-on-sdk/sdk.js" {
-    import { AddOnUISdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnUISdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/ui/ui-sdk";
-}

package/dist/templates/react-typescript-with-document-sandbox/template/src/sandbox/add-on-sandbox-sdk.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-// DO NOT modify this file.
-declare module "add-on-sdk-document-sandbox" {
-    import { AddOnDocumentSandboxSdkTypes } from "@adobe/ccweb-add-on-sdk-types";
-    export default AddOnDocumentSandboxSdkTypes.default;
-    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/add-on-sdk-document-sandbox";
-}
-declare module "express-document-sdk" {
-    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/express-document-sdk";
-}