npm - @adobe/create-ccweb-add-on - Versions diffs - 1.0.0 → 1.1.0 - Mend

@@ -6,9 +6,9 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/theme": "0.38.0",
-        "@swc-react/button": "0.38.0",
-        "@swc-react/theme": "0.38.0",
+        "@spectrum-web-components/theme": "0.40.0",
+        "@swc-react/button": "0.40.0",
+        "@swc-react/theme": "0.40.0",
         "react-dom": "18.2.0",
         "react": "18.2.0"
     },
@@ -19,9 +19,9 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "ts-loader": "9.4.4",
-        "typescript": "5.2.2",
+        "ts-loader": "9.5.1",
+        "typescript": "5.3.2",
         "webpack-cli": "5.1.4",
-        "webpack": "5.88.2"
+        "webpack": "5.89.0"
     }
 }

@@ -6,8 +6,8 @@
         "package": "ccweb-add-on-scripts package --use webpack"
     },
     "dependencies": {
-        "@spectrum-web-components/button": "0.38.0",
-        "@spectrum-web-components/theme": "0.38.0",
+        "@spectrum-web-components/button": "0.40.0",
+        "@spectrum-web-components/theme": "0.40.0",
         "lit": "2.8.0"
     },
     "devDependencies": {
@@ -15,9 +15,9 @@
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "style-loader": "3.3.3",
-        "ts-loader": "9.4.4",
-        "typescript": "5.2.2",
+        "ts-loader": "9.5.1",
+        "typescript": "5.3.2",
         "webpack-cli": "5.1.4",
-        "webpack": "5.88.2"
+        "webpack": "5.89.0"
     }
 }

@@ -1,6 +1,6 @@
 ## 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 Script 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 TypeScript with Document Sandbox Runtime.
 ## Tools

@@ -2,8 +2,11 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="description" content="Get started with Add-on development using TypeScript with Script Runtime" />
-        <meta name="keywords" content="Adobe, Express, Add-On, TypeScript, Script Runtime" />
+        <meta
+            name="description"
+            content="Get started with Add-on development using TypeScript with Document Sandbox Runtime"
+        />
+        <meta name="keywords" content="Adobe, Express, Add-On, TypeScript, Document Sandbox Runtime" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started</title>
     </head>

@@ -17,7 +17,7 @@
             "type": "panel",
             "id": "panel1",
             "main": "index.html",
-            "script": "code.js"
+            "documentSandbox": "code.js"
         }
     ]
 }

@@ -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;
+}

@@ -0,0 +1,11 @@
+// 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";
+}

@@ -1,24 +1,23 @@
-import addOnScriptSdk from "AddOnScriptSdk";
-import { editor, utils } from "express";
-import { ScriptApi } from "../models/ScriptApi";
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+import { editor, utils } from "express-document-sdk";
+import { DocumentSandboxApi } from "../models/DocumentSandboxApi";
-// Get the Script runtime.
-const { runtime } = addOnScriptSdk.instance;
+// Get the document sandbox runtime.
+const { runtime } = addOnSandboxSdk.instance;
 function start(): void {
     // APIs to be exposed to the UI runtime
-    // i.e., to the `index.html` file of this add-on.
-    const scriptApi: ScriptApi = {
+    // i.e., to the `App.ts` file of this add-on.
+    const sandboxApi: DocumentSandboxApi = {
         createRectangle: () => {
             const rectangle = editor.createRectangle();
             // Define rectangle dimensions.
-            rectangle.width = 480;
-            rectangle.height = 360;
+            rectangle.width = 240;
+            rectangle.height = 180;
             // Define rectangle position.
-            rectangle.translateX = 100;
-            rectangle.translateY = 100;
+            rectangle.translation = { x: 10, y: 10 };
             // Define rectangle color.
             const [red, green, blue, alpha] = [0.32, 0.34, 0.89, 1];
@@ -33,8 +32,8 @@ function start(): void {
         }
     };
-    // Expose `ScriptApi` to the UI runtime.
-    runtime.exposeApi(scriptApi);
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
 }
 start();

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

@@ -12,7 +12,7 @@ import "@spectrum-web-components/theme/sp-theme.js";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { ScriptApi } from "../../models/ScriptApi";
+import { DocumentSandboxApi } from "../../models/DocumentSandboxApi";
 import { style } from "./App.css";
 import { AddOnSDKAPI, RuntimeType } from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
@@ -23,7 +23,7 @@ export class App extends LitElement {
     addOnUISdk!: AddOnSDKAPI;
     @state()
-    private _scriptApi: ScriptApi;
+    private _sandboxProxy: DocumentSandboxApi;
     static get styles() {
         return style;
@@ -34,13 +34,13 @@ export class App extends LitElement {
         const { runtime } = this.addOnUISdk.instance;
         // Get the proxy object, which is required
-        // to call the APIs defined in the Script runtime
+        // to call the APIs defined in the Document Sandbox runtime
         // i.e., in the `code.ts` file of this add-on.
-        this._scriptApi = await runtime.apiProxy(RuntimeType.script);
+        this._sandboxProxy = await runtime.apiProxy(RuntimeType.documentSandbox);
     }
     private _handleClick() {
-        this._scriptApi.createRectangle();
+        this._sandboxProxy.createRectangle();
     }
     render() {

@@ -5,14 +5,14 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const isEnvProduction = process.env.NODE_ENV === "production";
 const uiPath = path.resolve(__dirname, "./src/ui");
-const scriptPath = path.resolve(__dirname, "./src/script");
+const sandboxPath = path.resolve(__dirname, "./src/sandbox");
 module.exports = {
     mode: isEnvProduction ? "production" : "development",
     devtool: "source-map",
     entry: {
         index: "./src/ui/index.ts",
-        code: "./src/script/code.ts"
+        code: "./src/sandbox/code.ts"
     },
     experiments: {
         outputModule: true
@@ -25,8 +25,8 @@ module.exports = {
     externalsType: "module",
     externalsPresets: { web: true },
     externals: {
-        AddOnScriptSdk: "AddOnScriptSdk",
-        express: "express"
+        "add-on-sdk-document-sandbox": "add-on-sdk-document-sandbox",
+        "express-document-sdk": "express-document-sdk"
     },
     plugins: [
         new HtmlWebpackPlugin({
@@ -59,11 +59,11 @@ module.exports = {
                     {
                         loader: "ts-loader",
                         options: {
-                            configFile: path.resolve(scriptPath, "tsconfig.json")
+                            configFile: path.resolve(sandboxPath, "tsconfig.json")
                         }
                     }
                 ],
-                include: scriptPath,
+                include: sandboxPath,
                 exclude: /node_modules/
             }
         ]

@adobe/create-ccweb-add-on 1.0.0 → 1.1.0