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

package/src/test/app/AddOnTemplateSelector.spec.ts

@@ -36,7 +36,7 @@ import { stubInterface } from "ts-sinon";
 import { AnalyticsErrorMarkers } from "../../AnalyticsMarkers.js";
 import { AddOnTemplateSelector } from "../../app/AddOnTemplateSelector.js";
 import type { TemplateSelector } from "../../app/TemplateSelector.js";
-import { ADD_ON_TEMPLATES, PROGRAM_NAME } from "../../constants.js";
+import { ADD_ON_TEMPLATES, PROGRAM_NAME, WITH_DOCUMENT_SANDBOX } from "../../constants.js";
 import { CLIOptions } from "../../models/index.js";
 
 describe("AddOnTemplateSelector", () => {
@@ -159,7 +159,7 @@ describe("AddOnTemplateSelector", () => {
         });
 
         it("should ask the user to select template name if an invalid templateName is present in CLIOptions.", async () => {
-            const scriptRuntimeChoices = [
+            const documentSandboxChoices = [
                 {
                     title: "No",
                     value: false
@@ -173,7 +173,7 @@ describe("AddOnTemplateSelector", () => {
             const promptsStub = sandbox.stub(prompts, "prompt");
             promptsStub.resolves({
                 selectedTemplate: templateChoices[1].value,
-                includeScriptRuntime: scriptRuntimeChoices[0].value
+                includeDocumentSandbox: documentSandboxChoices[0].value
             });
 
             const cliOptions = new CLIOptions(EntrypointType.PANEL, "test-app", "incorrect-template", false);
@@ -183,12 +183,12 @@ describe("AddOnTemplateSelector", () => {
 
             assert.equal(template, templateChoices[1].value);
             assert.equal(logger.warning.callCount, 1);
-            assert.equal(logger.warning.calledWith("You have chosen an invalid template", { prefix: "\n" }), true);
+            assert.equal(logger.warning.calledWith("You have chosen an invalid template.", { prefix: "\n" }), true);
             assert.equal(analyticsService.postEvent.callCount, 0);
         });
 
         it("should prompt the user to select template if not present in CLIOptions.", async () => {
-            const scriptRuntimeChoices = [
+            const documentSandboxChoices = [
                 {
                     title: "No",
                     value: false
@@ -202,7 +202,7 @@ describe("AddOnTemplateSelector", () => {
             const promptsStub = sandbox.stub(prompts, "prompt");
             promptsStub.resolves({
                 selectedTemplate: templateChoices[1].value,
-                includeScriptRuntime: scriptRuntimeChoices[0].value
+                includeDocumentSandbox: documentSandboxChoices[0].value
             });
 
             const cliOptions = new CLIOptions(EntrypointType.PANEL, "test-app", "", false);
@@ -214,8 +214,8 @@ describe("AddOnTemplateSelector", () => {
             assert.equal(analyticsService.postEvent.callCount, 0);
         });
 
-        it("should return the template name when script runtime is included.", async () => {
-            const scriptRuntimeChoices = [
+        it("should return the template name when document sandbox is included.", async () => {
+            const documentSandboxChoices = [
                 {
                     title: "No",
                     value: false
@@ -229,7 +229,7 @@ describe("AddOnTemplateSelector", () => {
             const promptsStub = sandbox.stub(prompts, "prompt");
             promptsStub.resolves({
                 selectedTemplate: templateChoices[1].value,
-                includeScriptRuntime: scriptRuntimeChoices[1].value
+                includeDocumentSandbox: documentSandboxChoices[1].value
             });
 
             const cliOptions = new CLIOptions(EntrypointType.PANEL, "test-app", "", false);
@@ -238,7 +238,7 @@ describe("AddOnTemplateSelector", () => {
             const template = await templateSelector.setupTemplate(cliOptions);
 
             assert.equal(logger.warning.callCount, 0);
-            assert.equal(template, templateChoices[1].value + "-with-script-runtime");
+            assert.equal(template, templateChoices[1].value + `-${WITH_DOCUMENT_SANDBOX}`);
             assert.equal(analyticsService.postEvent.callCount, 0);
         });
 
@@ -257,10 +257,10 @@ describe("AddOnTemplateSelector", () => {
             assert.equal(analyticsService.postEvent.callCount, 0);
         });
 
-        it("should exit if user doesnt select any option in script runtime prompt.", async () => {
+        it("should exit if user doesnt select any option in document sandbox prompt.", async () => {
             const promptsStub = sandbox.stub(prompts, "prompt");
             const exitProcessStub = sandbox.stub(process, "exit");
-            promptsStub.resolves({ selectedTemplate: templateChoices[1].value, includeScriptRuntime: undefined });
+            promptsStub.resolves({ selectedTemplate: templateChoices[1].value, includeDocumentSandbox: undefined });
 
             const cliOptions = new CLIOptions(EntrypointType.PANEL, "test-app", "", false);
 

package/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/{react-javascript-with-script-runtime/template/src/script → 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 `ScriptApi` to the UI runtime.
-    runtime.exposeApi(scriptApi);
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
 }
 
 start();

package/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/templates/javascript-with-document-sandbox/template/src/manifest.json

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

package/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/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/{dist/templates/react-typescript-with-script-runtime → templates/react-javascript-with-document-sandbox}/template/src/index.html

@@ -2,10 +2,13 @@
 <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>Hello World</title>
+        <title>Get Started</title>
     </head>
     <body>
         <div id="root"></div>

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

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

package/{dist/templates/javascript-with-script-runtime/template/src → templates/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 the APIs to the UI runtime.
-    runtime.exposeApi(scriptApi);
+    // Expose `sandboxApi` to the UI runtime.
+    runtime.exposeApi(sandboxApi);
 }
 
 start();

package/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/{dist/templates/react-javascript-with-script-runtime → 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/{dist/templates/react-javascript-with-script-runtime → 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/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/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/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/{dist/templates/react-typescript-with-script-runtime → 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/templates/{react-typescript-with-script-runtime → react-typescript-with-document-sandbox}/template/src/index.html

@@ -2,10 +2,13 @@
 <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>Hello World</title>
+        <title>Get Started</title>
     </head>
     <body>
         <div id="root"></div>

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

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

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

package/{dist/templates/react-typescript-with-script-runtime → 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/{dist/templates/react-typescript-with-script-runtime → 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} />);
 });