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

package/templates/javascript-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/javascript-with-document-sandbox/template/src/{code.js → sandbox/code.js}

@@ -1,5 +1,5 @@
 import addOnSandboxSdk from "add-on-sdk-document-sandbox";
-import { editor, utils } from "express-document-sdk";
+import { editor } from "express-document-sdk";
 
 // Get the document sandbox runtime.
 const { runtime } = addOnSandboxSdk.instance;
@@ -19,11 +19,11 @@ function start() {
             rectangle.translation = { x: 10, y: 10 };
 
             // Define rectangle color.
-            const [red, green, blue, alpha] = [0.32, 0.34, 0.89, 1];
+            const color = { red: 0.32, green: 0.34, blue: 0.89, alpha: 1 };
 
             // Fill the rectangle with the color.
-            const rectangleFill = editor.createColorFill(utils.createColor(red, green, blue, alpha));
-            rectangle.fills.append(rectangleFill);
+            const rectangleFill = editor.makeColorFill(color);
+            rectangle.fill = rectangleFill;
 
             // Add the rectangle to the document.
             const insertionParent = editor.context.insertionParent;

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

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

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

@@ -0,0 +1,7 @@
+// 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/templates/javascript-with-document-sandbox/template/src/ui/index.js

@@ -0,0 +1,24 @@
+import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
+
+addOnUISdk.ready.then(async () => {
+    console.log("addOnUISdk is ready for use.");
+
+    // Get the UI runtime.
+    const { runtime } = addOnUISdk.instance;
+
+    // Get the proxy object, which is required
+    // to call the APIs defined in the Document Sandbox runtime
+    // i.e., in the `code.js` file of this add-on.
+    const sandboxProxy = await runtime.apiProxy("documentSandbox");
+
+    const createRectangleButton = document.getElementById("createRectangle");
+    createRectangleButton.addEventListener("click", async event => {
+        await sandboxProxy.createRectangle();
+    });
+
+    // Enable the button only when:
+    // 1. `addOnUISdk` is ready,
+    // 2. `sandboxProxy` is available, and
+    // 3. `click` event listener is registered.
+    createRectangleButton.disabled = false;
+});

package/templates/javascript-with-document-sandbox/template/src/ui/tsconfig.json

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

package/templates/javascript-with-document-sandbox/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/react-javascript/template/src/add-on-ui-sdk.d.ts

@@ -0,0 +1,7 @@
+// 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/templates/react-javascript/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react",
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "outDir": "dist",
+        "target": "ESNext"
+    },
+    "exclude": ["node_modules"],
+    "include": ["src/**/*"]
+}

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

@@ -9,8 +9,7 @@
                 "name": "Express",
                 "apiVersion": 1
             }
-        ],
-        "experimentalApis": true
+        ]
     },
     "entryPoints": [
         {

package/templates/react-javascript-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/react-javascript-with-document-sandbox/template/src/sandbox/code.js

@@ -1,5 +1,5 @@
 import addOnSandboxSdk from "add-on-sdk-document-sandbox";
-import { editor, utils } from "express-document-sdk";
+import { editor } from "express-document-sdk";
 
 // Get the document sandbox runtime.
 const { runtime } = addOnSandboxSdk.instance;
@@ -19,11 +19,11 @@ function start() {
             rectangle.translation = { x: 10, y: 10 };
 
             // Define rectangle color.
-            const [red, green, blue, alpha] = [0.32, 0.34, 0.89, 1];
+            const color = { red: 0.32, green: 0.34, blue: 0.89, alpha: 1 };
 
             // Fill the rectangle with the color.
-            const rectangleFill = editor.createColorFill(utils.createColor(red, green, blue, alpha));
-            rectangle.fills.append(rectangleFill);
+            const rectangleFill = editor.makeColorFill(color);
+            rectangle.fill = rectangleFill;
 
             // Add the rectangle to the document.
             const insertionParent = editor.context.insertionParent;

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

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

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

@@ -0,0 +1,7 @@
+// 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/templates/react-javascript-with-document-sandbox/template/src/ui/tsconfig.json

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

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

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react",
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "outDir": "dist",
+        "target": "ESNext"
+    },
+    "exclude": ["node_modules"],
+    "include": ["src/**/*"]
+}

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

@@ -9,8 +9,7 @@
                 "name": "Express",
                 "apiVersion": 1
             }
-        ],
-        "experimentalApis": true
+        ]
     },
     "entryPoints": [
         {

package/templates/react-typescript-with-document-sandbox/template/src/sandbox/code.ts

@@ -1,5 +1,5 @@
 import addOnSandboxSdk from "add-on-sdk-document-sandbox";
-import { editor, utils } from "express-document-sdk";
+import { editor } from "express-document-sdk";
 import { DocumentSandboxApi } from "../models/DocumentSandboxApi";
 
 // Get the document sandbox runtime.
@@ -20,11 +20,11 @@ function start(): void {
             rectangle.translation = { x: 10, y: 10 };
 
             // Define rectangle color.
-            const [red, green, blue, alpha] = [0.32, 0.34, 0.89, 1];
+            const color = { red: 0.32, green: 0.34, blue: 0.89, alpha: 1 };
 
             // Fill the rectangle with the color.
-            const rectangleFill = editor.createColorFill(utils.createColor(red, green, blue, alpha));
-            rectangle.fills.append(rectangleFill);
+            const rectangleFill = editor.makeColorFill(color);
+            rectangle.fill = rectangleFill;
 
             // Add the rectangle to the document.
             const insertionParent = editor.context.insertionParent;

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

@@ -9,8 +9,7 @@
                 "name": "Express",
                 "apiVersion": 1
             }
-        ],
-        "experimentalApis": true
+        ]
     },
     "entryPoints": [
         {

package/templates/typescript-with-document-sandbox/template/src/sandbox/code.ts

@@ -1,5 +1,5 @@
 import addOnSandboxSdk from "add-on-sdk-document-sandbox";
-import { editor, utils } from "express-document-sdk";
+import { editor } from "express-document-sdk";
 import { DocumentSandboxApi } from "../models/DocumentSandboxApi";
 
 // Get the document sandbox runtime.
@@ -20,11 +20,11 @@ function start(): void {
             rectangle.translation = { x: 10, y: 10 };
 
             // Define rectangle color.
-            const [red, green, blue, alpha] = [0.32, 0.34, 0.89, 1];
+            const color = { red: 0.32, green: 0.34, blue: 0.89, alpha: 1 };
 
             // Fill the rectangle with the color.
-            const rectangleFill = editor.createColorFill(utils.createColor(red, green, blue, alpha));
-            rectangle.fills.append(rectangleFill);
+            const rectangleFill = editor.makeColorFill(color);
+            rectangle.fill = rectangleFill;
 
             // Add the rectangle to the document.
             const insertionParent = editor.context.insertionParent;