@canva/cli 0.0.1-beta.11 → 0.0.1-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.11",
+  "version": "0.0.1-beta.13",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/package.json

@@ -6,7 +6,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -17,6 +17,7 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
+    "@canva/cli": "^0.0.1-beta.11",
     "@ngrok/ngrok": "1.4.1",
     "@svgr/webpack": "8.1.0",
     "@types/debug": "4.1.12",
@@ -49,6 +50,7 @@
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
+    "open": "8.4.2",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
     "prompts": "2.4.2",

package/templates/base/scripts/start/app_runner.ts

@@ -7,6 +7,8 @@ import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,28 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    open(generatePreviewResult.data);
+  };
 }

package/templates/dam/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@canva/app-components": "^1.0.0-beta.29",
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -32,6 +32,7 @@
     "react-intl": "6.8.7"
   },
   "devDependencies": {
+    "@canva/cli": "^0.0.1-beta.11",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
     "@formatjs/cli": "6.3.14",
@@ -79,6 +80,7 @@
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
+    "open": "8.4.2",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
     "prompts": "2.4.2",

package/templates/dam/scripts/start/app_runner.ts

@@ -7,6 +7,8 @@ import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,28 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    open(generatePreviewResult.data);
+  };
 }

package/templates/gen_ai/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -35,6 +35,7 @@
     "react-router-dom": "6.28.0"
   },
   "devDependencies": {
+    "@canva/cli": "^0.0.1-beta.11",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
     "@formatjs/cli": "6.3.14",
@@ -81,6 +82,7 @@
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
+    "open": "8.4.2",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
     "prompts": "2.4.2",

package/templates/gen_ai/scripts/start/app_runner.ts

@@ -7,6 +7,8 @@ import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,28 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    open(generatePreviewResult.data);
+  };
 }

package/templates/hello_world/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -30,6 +30,7 @@
     "react-intl": "6.8.7"
   },
   "devDependencies": {
+    "@canva/cli": "^0.0.1-beta.11",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
     "@formatjs/cli": "6.3.14",
@@ -73,6 +74,7 @@
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
+    "open": "8.4.2",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
     "react-refresh": "0.16.0",

package/templates/hello_world/scripts/start/app_runner.ts

@@ -7,6 +7,8 @@ import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,28 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    open(generatePreviewResult.data);
+  };
 }

package/templates/hello_world/src/tests/__snapshots__/app.tests.tsx.snap

@@ -10,7 +10,7 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
       style="--NZu1Zw: 16px;"
     >
       <p
-        class="fFOiLQ _5Ob_nQ fM_HdA"
+        class="D6xAvw E44aNA rU8RQQ"
       >
         To make changes to this app, edit the 
         <code>
@@ -19,21 +19,21 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
          file, then close and reopen the app in the editor to preview the changes.
       </p>
       <button
-        class="_1QoxDw Qkd66A tYI0Vw o4TrkA zKTE_w Qkd66A tYI0Vw lsXp_w ubW6qw cwOZMg zQlusQ uRvRjQ"
+        class="_5KtATA LQzFZw xwTbNA _8ERLTg rV61VQ LQzFZw xwTbNA _4_iekA _3oHQrw j34Zww aqbYPg _3FvZZg"
         type="button"
       >
         <span
-          class="_38oWvQ"
+          class="khPe7Q"
         >
           Do something cool
         </span>
       </button>
       <button
-        class="_1QoxDw Qkd66A tYI0Vw o4TrkA NT2yCg Qkd66A tYI0Vw lsXp_w cwOZMg zQlusQ uRvRjQ"
+        class="_5KtATA LQzFZw xwTbNA _8ERLTg Z3nT2A LQzFZw xwTbNA _4_iekA j34Zww aqbYPg _3FvZZg"
         type="button"
       >
         <span
-          class="_38oWvQ"
+          class="khPe7Q"
         >
           Open Canva Apps SDK docs
         </span>