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

package/dist/app/AddOnTemplateSelector.js

@@ -31,7 +31,7 @@ import prompts from "prompts";
 import "reflect-metadata";
 import format from "string-template";
 import { AnalyticsErrorMarkers } from "../AnalyticsMarkers.js";
-import { ADD_ON_TEMPLATES, AVAILABLE_ADD_ON_TEMPLATES, PROGRAM_NAME, WITH_SCRIPT_RUNTIME } from "../constants.js";
+import { ADD_ON_TEMPLATES, AVAILABLE_ADD_ON_TEMPLATES, PROGRAM_NAME, WITH_DOCUMENT_SANDBOX } from "../constants.js";
 let AddOnTemplateSelector = class AddOnTemplateSelector {
     _logger;
     _analyticsService;
@@ -83,10 +83,10 @@ let AddOnTemplateSelector = class AddOnTemplateSelector {
         }
         /* c8 ignore next 4 */
         /* All templates are currently available. */
-        if (!AVAILABLE_ADD_ON_TEMPLATES.includes(`${templateResponse.selectedTemplate}-${WITH_SCRIPT_RUNTIME}`)) {
+        if (!AVAILABLE_ADD_ON_TEMPLATES.includes(`${templateResponse.selectedTemplate}-${WITH_DOCUMENT_SANDBOX}`)) {
             return templateResponse.selectedTemplate;
         }
-        const scriptRuntimeChoices = [
+        const documentSandboxChoices = [
             {
                 title: this._promptMessageOption(LOGS.no),
                 value: false
@@ -96,20 +96,20 @@ let AddOnTemplateSelector = class AddOnTemplateSelector {
                 value: true
             }
         ];
-        const scriptRuntimeResponse = await prompts.prompt({
+        const documentSandboxResponse = await prompts.prompt({
             type: "select",
-            name: "includeScriptRuntime",
-            message: this._promptMessage(LOGS.includeScriptRuntime),
-            choices: scriptRuntimeChoices,
+            name: "includeDocumentSandbox",
+            message: this._promptMessage(LOGS.includeDocumentSandbox),
+            choices: documentSandboxChoices,
             initial: 0
         });
-        if (!scriptRuntimeResponse || scriptRuntimeResponse.includeScriptRuntime === undefined) {
+        if (!documentSandboxResponse || documentSandboxResponse.includeDocumentSandbox === undefined) {
             console.log();
             return process.exit(0);
         }
-        // Append `with-script-runtime` to the template name if user wants to include script runtime
-        return scriptRuntimeResponse.includeScriptRuntime
-            ? `${templateResponse.selectedTemplate}-${WITH_SCRIPT_RUNTIME}`
+        // Append `with-document-sandbox` to the template name if user wants to include document sandbox
+        return documentSandboxResponse.includeDocumentSandbox
+            ? `${templateResponse.selectedTemplate}-${WITH_DOCUMENT_SANDBOX}`
             : templateResponse.selectedTemplate;
     }
     _promptMessage(message) {
@@ -158,10 +158,10 @@ const LOGS = {
     chooseValidKind: "Please choose a valid Add-on kind (valid kind: panel)",
     executeProgramWithValidKind: "{PROGRAM_NAME} <add-on-name> --kind <panel>",
     executeProgramWithValidKindExample: "{PROGRAM_NAME} my-add-on --kind panel",
-    chooseValidTemplate: "You have chosen an invalid template",
+    chooseValidTemplate: "You have chosen an invalid template.",
     forExample: "For example:",
     analyticsInvalidKind: "Invalid Add-on kind specified",
-    includeScriptRuntime: "Do you want to include script runtime?",
+    includeDocumentSandbox: "Do you want to include document sandbox runtime?",
     yes: "Yes",
     no: "No"
 };

package/dist/constants.d.ts

@@ -24,6 +24,6 @@
 export declare const PROGRAM_NAME = "create-ccweb-add-on";
 export declare const ADD_ON_TEMPLATES: Map<string, string>;
 export declare const TEMP_TEMPLATE_PATH = ".template";
-export declare const WITH_SCRIPT_RUNTIME = "with-script-runtime";
+export declare const WITH_DOCUMENT_SANDBOX = "with-document-sandbox";
 export declare const AVAILABLE_ADD_ON_TEMPLATES: string[];
 //# sourceMappingURL=constants.d.ts.map

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

package/dist/constants.js

@@ -29,15 +29,15 @@ export const ADD_ON_TEMPLATES = new Map([
     ["react-typescript", "Get started with Add-on development using React and TypeScript"]
 ]);
 export const TEMP_TEMPLATE_PATH = ".template";
-export const WITH_SCRIPT_RUNTIME = "with-script-runtime";
+export const WITH_DOCUMENT_SANDBOX = "with-document-sandbox";
 export const AVAILABLE_ADD_ON_TEMPLATES = [
     "javascript",
     "typescript",
     "react-javascript",
     "react-typescript",
-    `javascript-${WITH_SCRIPT_RUNTIME}`,
-    `typescript-${WITH_SCRIPT_RUNTIME}`,
-    `react-javascript-${WITH_SCRIPT_RUNTIME}`,
-    `react-typescript-${WITH_SCRIPT_RUNTIME}`
+    `javascript-${WITH_DOCUMENT_SANDBOX}`,
+    `typescript-${WITH_DOCUMENT_SANDBOX}`,
+    `react-javascript-${WITH_DOCUMENT_SANDBOX}`,
+    `react-typescript-${WITH_DOCUMENT_SANDBOX}`
 ];
 //# sourceMappingURL=constants.js.map

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

@@ -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 JavaScript 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 JavaScript with Document Sandbox Runtime.
 
 ## Tools
 

package/{templates/javascript-with-script-runtime → dist/templates/javascript-with-document-sandbox}/template/src/code.js

@@ -1,23 +1,22 @@
-import addOnScriptSdk from "AddOnScriptSdk";
-import { editor, utils } from "express";
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+import { editor, utils } from "express-document-sdk";
 
-// Get the Script runtime.
-const { runtime } = addOnScriptSdk.instance;
+// Get the document sandbox runtime.
+const { runtime } = addOnSandboxSdk.instance;
 
 function start() {
     // APIs to be exposed to the UI runtime
     // i.e., to the `index.html` file of this add-on.
-    const scriptApi = {
+    const sandboxApi = {
         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];
@@ -32,8 +31,8 @@ function start() {
         }
     };
 
-    // Expose the APIs to the UI runtime.
-    runtime.exposeApi(scriptApi);
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
 }
 
 start();

package/dist/templates/{javascript-with-script-runtime → javascript-with-document-sandbox}/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 JavaScript with Script Runtime" />
-        <meta name="keywords" content="Adobe, Express, Add-On, JavaScript, Script Runtime" />
+        <meta
+            name="description"
+            content="Get started with Add-on development using JavaScript with Document Sandbox Runtime"
+        />
+        <meta name="keywords" content="Adobe, Express, Add-On, JavaScript, Document Sandbox Runtime" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started</title>
         <style>
@@ -53,18 +56,18 @@
                 const { runtime } = 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.js` file of this add-on.
-                const scriptApi = await runtime.apiProxy("script");
+                const sandboxProxy = await runtime.apiProxy("documentSandbox");
 
                 const createRectangleButton = document.getElementById("createRectangle");
                 createRectangleButton.addEventListener("click", async event => {
-                    await scriptApi.createRectangle();
+                    await sandboxProxy.createRectangle();
                 });
 
                 // Enable the button only when:
                 // 1. `addOnUISdk` is ready,
-                // 2. `scriptApi` is available, and
+                // 2. `sandboxProxy` is available, and
                 // 3. `click` event listener is registered.
                 createRectangleButton.disabled = false;
             });

package/dist/templates/{javascript-with-script-runtime → javascript-with-document-sandbox}/template/src/manifest.json

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

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

@@ -6,22 +6,22 @@
         "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"
     },
     "devDependencies": {
-        "@babel/core": "7.22.19",
-        "@babel/preset-env": "7.22.15",
-        "@babel/preset-react": "7.22.15",
+        "@babel/core": "7.23.3",
+        "@babel/preset-env": "7.23.3",
+        "@babel/preset-react": "7.23.3",
         "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.88.2"
+        "webpack": "5.89.0"
     }
 }

package/dist/templates/{react-javascript-with-script-runtime → react-javascript-with-document-sandbox}/template/README.md

@@ -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 React and JavaScript 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 React and JavaScript with Document Sandbox Runtime.
 
 ## Tools
 

package/{templates/react-javascript-with-script-runtime → dist/templates/react-javascript-with-document-sandbox}/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 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 JavaScript with Document Sandbox Runtime"
+        />
+        <meta name="keywords" content="Adobe, Express, Add-On, React, JavaScript, Document Sandbox Runtime" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started</title>
     </head>

package/dist/templates/{react-typescript-with-script-runtime → react-javascript-with-document-sandbox}/template/src/manifest.json

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

package/dist/templates/{react-javascript-with-script-runtime/template/src/script → react-javascript-with-document-sandbox/template/src/sandbox}/code.js

@@ -1,23 +1,22 @@
-import addOnScriptSdk from "AddOnScriptSdk";
-import { editor, utils } from "express";
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+import { editor, utils } from "express-document-sdk";
 
-// Get the Script runtime.
-const { runtime } = addOnScriptSdk.instance;
+// Get the document sandbox runtime.
+const { runtime } = addOnSandboxSdk.instance;
 
 function start() {
     // APIs to be exposed to the UI runtime
     // i.e., to the `index.html` file of this add-on.
-    const scriptApi = {
+    const sandboxApi = {
         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];
@@ -32,8 +31,8 @@ function start() {
         }
     };
 
-    // Expose `ScriptApi` to the UI runtime.
-    runtime.exposeApi(scriptApi);
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
 }
 
 start();

package/dist/templates/{react-javascript-with-script-runtime → react-javascript-with-document-sandbox}/template/src/ui/components/App.jsx

@@ -12,9 +12,9 @@ import { Theme } from "@swc-react/theme";
 import React from "react";
 import "./App.css";
 
-const App = ({ addOnUISdk, scriptApi }) => {
+const App = ({ addOnUISdk, sandboxProxy }) => {
     function handleClick() {
-        scriptApi.createRectangle();
+        sandboxProxy.createRectangle();
     }
 
     return (

package/{templates/react-javascript-with-script-runtime → dist/templates/react-javascript-with-document-sandbox}/template/src/ui/index.jsx

@@ -11,10 +11,10 @@ addOnUISdk.ready.then(async () => {
     const { runtime } = 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.js` file of this add-on.
-    const scriptApi = await runtime.apiProxy("script");
+    const sandboxProxy = await runtime.apiProxy("documentSandbox");
 
     const root = createRoot(document.getElementById("root"));
-    root.render(<App addOnUISdk={addOnUISdk} scriptApi={scriptApi} />);
+    root.render(<App addOnUISdk={addOnUISdk} sandboxProxy={sandboxProxy} />);
 });

package/{templates/react-javascript-with-script-runtime → dist/templates/react-javascript-with-document-sandbox}/template/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
     devtool: "source-map",
     entry: {
         index: "./src/ui/index.jsx",
-        code: "./src/script/code.js"
+        code: "./src/sandbox/code.js"
     },
     experiments: {
         outputModule: true
@@ -22,8 +22,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({

package/dist/templates/{react-javascript-with-script-runtime → react-javascript-with-document-sandbox}/template.json

@@ -6,22 +6,22 @@
         "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"
     },
     "devDependencies": {
-        "@babel/core": "7.22.19",
-        "@babel/preset-env": "7.22.15",
-        "@babel/preset-react": "7.22.15",
+        "@babel/core": "7.23.3",
+        "@babel/preset-env": "7.23.3",
+        "@babel/preset-react": "7.23.3",
         "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.88.2"
+        "webpack": "5.89.0"
     }
 }

package/dist/templates/react-typescript/template/webpack.config.js

@@ -41,6 +41,6 @@ module.exports = {
         ]
     },
     resolve: {
-        extensions: [".tsx", ".ts", ".js", "css"]
+        extensions: [".tsx", ".ts", ".js", ".css"]
     }
 };

package/dist/templates/react-typescript/template.json

@@ -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"
     }
 }

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

@@ -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 React and 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 React and TypeScript with Document Sandbox Runtime.
 
 ## Tools
 

package/dist/templates/{react-javascript-with-script-runtime → react-typescript-with-document-sandbox}/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 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 with Document Sandbox Runtime"
+        />
+        <meta name="keywords" content="Adobe, Express, Add-On, React, TypeScript, Document Sandbox Runtime" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started</title>
     </head>

package/dist/templates/{react-javascript-with-script-runtime → react-typescript-with-document-sandbox}/template/src/manifest.json

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

package/dist/templates/react-typescript-with-document-sandbox/template/src/models/DocumentSandboxApi.ts

@@ -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/dist/templates/react-typescript-with-document-sandbox/template/src/sandbox/add-on-sandbox-sdk.d.ts

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

package/dist/templates/{typescript-with-script-runtime/template/src/script → react-typescript-with-document-sandbox/template/src/sandbox}/code.ts

@@ -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.tsx` 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();

package/dist/templates/{react-typescript-with-script-runtime/template/src/script → 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-script-sdk"]
+        "typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
     },
     "include": ["./**/*"]
 }

package/{templates/react-typescript-with-script-runtime → dist/templates/react-typescript-with-document-sandbox}/template/src/ui/components/App.tsx

@@ -10,14 +10,14 @@ import "@spectrum-web-components/theme/theme-light.js";
 import { Button } from "@swc-react/button";
 import { Theme } from "@swc-react/theme";
 import React from "react";
-import { ScriptApi } from "../../models/ScriptApi";
+import { DocumentSandboxApi } from "../../models/DocumentSandboxApi";
 import "./App.css";
 
 import { AddOnSDKAPI } from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
 
-const App = ({ addOnUISdk, scriptApi }: { addOnUISdk: AddOnSDKAPI; scriptApi: ScriptApi }) => {
+const App = ({ addOnUISdk, sandboxProxy }: { addOnUISdk: AddOnSDKAPI; sandboxProxy: DocumentSandboxApi }) => {
     function handleClick() {
-        scriptApi.createRectangle();
+        sandboxProxy.createRectangle();
     }
 
     return (

package/{templates/react-typescript-with-script-runtime → dist/templates/react-typescript-with-document-sandbox}/template/src/ui/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { ScriptApi } from "../models/ScriptApi";
+import { DocumentSandboxApi } from "../models/DocumentSandboxApi";
 import App from "./components/App";
 
 import addOnUISdk, { RuntimeType } from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
@@ -12,10 +12,10 @@ addOnUISdk.ready.then(async () => {
     const { runtime } = addOnUISdk.instance;
 
     // Get the proxy object, which is required
-    // to call the APIs defined in the Script runtime
-    // i.e., in the `code.js` file of this add-on.
-    const scriptApi = (await runtime.apiProxy(RuntimeType.script)) as ScriptApi;
+    // to call the APIs defined in the Document Sandbox runtime
+    // i.e., in the `code.ts` file of this add-on.
+    const sandboxProxy: DocumentSandboxApi = await runtime.apiProxy(RuntimeType.documentSandbox);
 
     const root = createRoot(document.getElementById("root"));
-    root.render(<App addOnUISdk={addOnUISdk} scriptApi={scriptApi} />);
+    root.render(<App addOnUISdk={addOnUISdk} sandboxProxy={sandboxProxy} />);
 });

package/{templates/react-typescript-with-script-runtime → dist/templates/react-typescript-with-document-sandbox}/template/webpack.config.js

@@ -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.tsx",
-        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/
             },
             {
@@ -73,6 +73,6 @@ module.exports = {
         ]
     },
     resolve: {
-        extensions: [".tsx", ".ts", ".js", "css"]
+        extensions: [".tsx", ".ts", ".js", ".css"]
     }
 };