@canva/cli 0.0.1-beta.17 → 0.0.1-beta.19

package/package.json

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

package/templates/base/package.json

@@ -6,9 +6,9 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.7.0",
+    "@canva/app-ui-kit": "^4.8.0",
     "@canva/asset": "^2.1.0",
-    "@canva/design": "^2.3.0",
+    "@canva/design": "^2.4.0",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.1.0",
     "@canva/user": "^2.1.0",
@@ -56,6 +56,7 @@
     "prompts": "2.4.2",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.11",
+    "tree-kill": "1.2.2",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.2",
     "ts-node": "10.9.2",

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.js";
+import { buildConfig } from "../../webpack.config";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
@@ -58,7 +58,7 @@ export class AppRunner {
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
-    await this.generateAndOpenPreviewUrl(table);
+    await this.generateAndOpenPreviewUrl(ctx.openPreview, table);
 
     console.log(table.toString(), "\n");
 
@@ -173,7 +173,10 @@ export class AppRunner {
   /**
    * Calls the Canva CLI to generate a preview URL for the app
    */
-  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    table: Table.Table,
+  ) => {
     const previewCellHeader = { content: "Preview your app in Canva" };
 
     const generatePreviewResult = await generatePreviewUrl();
@@ -191,6 +194,8 @@ export class AppRunner {
       { content: "Preview URL", href: generatePreviewResult.data },
     ]);
 
-    open(generatePreviewResult.data);
+    if (openPreview) {
+      open(generatePreviewResult.data);
+    }
   };
 }

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

@@ -3,8 +3,10 @@ import * as path from "path";
 
 interface CliArgs {
   example?: string;
-  useHttps?: boolean;
-  ngrok?: boolean;
+  useHttps: boolean;
+  ngrok: boolean;
+  preview: boolean;
+  overrideFrontendPort?: number;
 }
 
 interface EnvVars {
@@ -45,7 +47,7 @@ export class Context {
   }
 
   get ngrokEnabled() {
-    return !!this.args.ngrok;
+    return this.args.ngrok;
   }
 
   get hmrEnabled() {
@@ -53,7 +55,7 @@ export class Context {
   }
 
   get httpsEnabled() {
-    return !!this.args.useHttps;
+    return this.args.useHttps;
   }
 
   get frontendEntryPath() {
@@ -69,11 +71,11 @@ export class Context {
   }
 
   get frontendUrl() {
-    return `${this.protocol}://localhost:${this.envVars.frontendPort}`;
+    return `${this.protocol}://localhost:${this.frontendPort}`;
   }
 
   get frontendPort() {
-    return this.envVars.frontendPort;
+    return this.args.overrideFrontendPort || this.envVars.frontendPort;
   }
 
   get developerBackendEntryPath(): string | undefined {
@@ -117,6 +119,10 @@ export class Context {
     return this.envVars.appId;
   }
 
+  get openPreview(): boolean {
+    return this.args.preview;
+  }
+
   private get protocol(): "https" | "http" {
     return this.httpsEnabled ? "https" : "http";
   }

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

@@ -23,6 +23,17 @@ yargs(hideBin(process.argv))
     default:
       process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
   })
+  .option("override-frontend-port", {
+    description:
+      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
+    type: "number",
+    alias: "p",
+  })
+  .option("preview", {
+    description: "Open the app in Canva.",
+    type: "boolean",
+    default: false,
+  })
   .command(
     "$0",
     "Starts local development",

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

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+
+import type { ChildProcess } from "child_process";
+import { spawn } from "child_process";
+import * as treeKill from "tree-kill";
+
+describe("start script", () => {
+  let serverProcess: ChildProcess;
+
+  afterEach(() => {
+    if (serverProcess?.pid && !serverProcess.exitCode) {
+      treeKill(serverProcess.pid);
+    }
+  });
+
+  it("should execute 'npm run start' and start a dev server", async () => {
+    const testServerPort = 8089;
+    serverProcess = await spawn(
+      `npm run start -- -p ${testServerPort} --no-preview`,
+      {
+        shell: true,
+      },
+    );
+
+    if (!serverProcess.pid) {
+      throw new Error("Unable to start server");
+    }
+
+    // wait for the server to start and collect output until it reports the running URL
+    let output = "";
+    await new Promise<void>((resolve, reject) => {
+      serverProcess.stdout?.on("data", (data) => {
+        output += data.toString();
+        if (output.includes("Development URL")) {
+          resolve();
+        }
+      });
+
+      serverProcess.stderr?.on("data", (data) => {
+        console.error("Server process error: ", data.toString());
+        reject();
+      });
+
+      // timeout and fail test if the server hasn't correctly started in 10 seconds
+      setTimeout(() => {
+        if (serverProcess?.pid && !serverProcess.exitCode) {
+          treeKill(serverProcess.pid);
+        }
+        reject(new Error("Test timed out"));
+      }, 10000);
+    });
+
+    // check that the server is running and accessible
+    const expectedServerURL = `http://localhost:${testServerPort}`;
+    expect(output).toContain(expectedServerURL);
+    expect(serverProcess.exitCode).toBeNull();
+
+    // clean up
+    treeKill(serverProcess.pid);
+  }, 15000); // 15 seconds timeout to allow for the server to start
+});

package/templates/common/conf/eslint_general.mjs

@@ -180,6 +180,12 @@ export default [
           message:
             "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
         },
+        {
+          selector:
+            "MemberExpression[object.name='localStorage'], MemberExpression[object.name='sessionStorage']",
+          message:
+            "Using `localStorage` or `sessionStorage` may not be appropriate for certain types of data, such as sensitive information. If your use case is safe and does not involve storing sensitive data (e.g., access tokens or keys), you can ignore this warning with an eslint-disable comment. Otherwise, seek secure storage alternatives. For more details, refer to the Canva Security Guidelines (https://www.canva.dev/docs/apps/security-guidelines/#store-secrets-securely).",
+        },
       ],
       "no-restricted-imports": [
         "warn",

package/templates/dam/package.json

@@ -12,6 +12,7 @@
     "lint:fix": "eslint . --fix",
     "lint:types": "tsc",
     "start": "ts-node ./scripts/start/start.ts",
+    "start:preview": "npm run start -- --preview",
     "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
     "postinstall": "ts-node ./scripts/copy_env.ts"
@@ -19,9 +20,9 @@
   "dependencies": {
     "@canva/app-components": "^1.1.0",
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.7.0",
+    "@canva/app-ui-kit": "^4.8.0",
     "@canva/asset": "^2.1.0",
-    "@canva/design": "^2.3.0",
+    "@canva/design": "^2.4.0",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.1.0",
     "@canva/user": "^2.1.0",
@@ -88,6 +89,7 @@
     "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.11",
+    "tree-kill": "1.2.2",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.2",
     "ts-node": "10.9.2",

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.js";
+import { buildConfig } from "../../webpack.config";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
@@ -58,7 +58,7 @@ export class AppRunner {
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
-    await this.generateAndOpenPreviewUrl(table);
+    await this.generateAndOpenPreviewUrl(ctx.openPreview, table);
 
     console.log(table.toString(), "\n");
 
@@ -173,7 +173,10 @@ export class AppRunner {
   /**
    * Calls the Canva CLI to generate a preview URL for the app
    */
-  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    table: Table.Table,
+  ) => {
     const previewCellHeader = { content: "Preview your app in Canva" };
 
     const generatePreviewResult = await generatePreviewUrl();
@@ -191,6 +194,8 @@ export class AppRunner {
       { content: "Preview URL", href: generatePreviewResult.data },
     ]);
 
-    open(generatePreviewResult.data);
+    if (openPreview) {
+      open(generatePreviewResult.data);
+    }
   };
 }

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

@@ -3,8 +3,10 @@ import * as path from "path";
 
 interface CliArgs {
   example?: string;
-  useHttps?: boolean;
-  ngrok?: boolean;
+  useHttps: boolean;
+  ngrok: boolean;
+  preview: boolean;
+  overrideFrontendPort?: number;
 }
 
 interface EnvVars {
@@ -45,7 +47,7 @@ export class Context {
   }
 
   get ngrokEnabled() {
-    return !!this.args.ngrok;
+    return this.args.ngrok;
   }
 
   get hmrEnabled() {
@@ -53,7 +55,7 @@ export class Context {
   }
 
   get httpsEnabled() {
-    return !!this.args.useHttps;
+    return this.args.useHttps;
   }
 
   get frontendEntryPath() {
@@ -69,11 +71,11 @@ export class Context {
   }
 
   get frontendUrl() {
-    return `${this.protocol}://localhost:${this.envVars.frontendPort}`;
+    return `${this.protocol}://localhost:${this.frontendPort}`;
   }
 
   get frontendPort() {
-    return this.envVars.frontendPort;
+    return this.args.overrideFrontendPort || this.envVars.frontendPort;
   }
 
   get developerBackendEntryPath(): string | undefined {
@@ -117,6 +119,10 @@ export class Context {
     return this.envVars.appId;
   }
 
+  get openPreview(): boolean {
+    return this.args.preview;
+  }
+
   private get protocol(): "https" | "http" {
     return this.httpsEnabled ? "https" : "http";
   }

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

@@ -23,6 +23,17 @@ yargs(hideBin(process.argv))
     default:
       process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
   })
+  .option("override-frontend-port", {
+    description:
+      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
+    type: "number",
+    alias: "p",
+  })
+  .option("preview", {
+    description: "Open the app in Canva.",
+    type: "boolean",
+    default: false,
+  })
   .command(
     "$0",
     "Starts local development",

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

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+
+import type { ChildProcess } from "child_process";
+import { spawn } from "child_process";
+import * as treeKill from "tree-kill";
+
+describe("start script", () => {
+  let serverProcess: ChildProcess;
+
+  afterEach(() => {
+    if (serverProcess?.pid && !serverProcess.exitCode) {
+      treeKill(serverProcess.pid);
+    }
+  });
+
+  it("should execute 'npm run start' and start a dev server", async () => {
+    const testServerPort = 8089;
+    serverProcess = await spawn(
+      `npm run start -- -p ${testServerPort} --no-preview`,
+      {
+        shell: true,
+      },
+    );
+
+    if (!serverProcess.pid) {
+      throw new Error("Unable to start server");
+    }
+
+    // wait for the server to start and collect output until it reports the running URL
+    let output = "";
+    await new Promise<void>((resolve, reject) => {
+      serverProcess.stdout?.on("data", (data) => {
+        output += data.toString();
+        if (output.includes("Development URL")) {
+          resolve();
+        }
+      });
+
+      serverProcess.stderr?.on("data", (data) => {
+        console.error("Server process error: ", data.toString());
+        reject();
+      });
+
+      // timeout and fail test if the server hasn't correctly started in 10 seconds
+      setTimeout(() => {
+        if (serverProcess?.pid && !serverProcess.exitCode) {
+          treeKill(serverProcess.pid);
+        }
+        reject(new Error("Test timed out"));
+      }, 10000);
+    });
+
+    // check that the server is running and accessible
+    const expectedServerURL = `http://localhost:${testServerPort}`;
+    expect(output).toContain(expectedServerURL);
+    expect(serverProcess.exitCode).toBeNull();
+
+    // clean up
+    treeKill(serverProcess.pid);
+  }, 15000); // 15 seconds timeout to allow for the server to start
+});

package/templates/gen_ai/package.json

@@ -12,15 +12,16 @@
     "lint:fix": "eslint . --fix",
     "lint:types": "tsc",
     "start": "ts-node ./scripts/start/start.ts",
+    "start:preview": "npm run start -- --preview",
     "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.7.0",
+    "@canva/app-ui-kit": "^4.8.0",
     "@canva/asset": "^2.1.0",
-    "@canva/design": "^2.3.0",
+    "@canva/design": "^2.4.0",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.1.0",
     "@canva/user": "^2.1.0",
@@ -92,6 +93,7 @@
     "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.11",
+    "tree-kill": "1.2.2",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.2",
     "ts-node": "10.9.2",

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.js";
+import { buildConfig } from "../../webpack.config";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
@@ -58,7 +58,7 @@ export class AppRunner {
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
-    await this.generateAndOpenPreviewUrl(table);
+    await this.generateAndOpenPreviewUrl(ctx.openPreview, table);
 
     console.log(table.toString(), "\n");
 
@@ -173,7 +173,10 @@ export class AppRunner {
   /**
    * Calls the Canva CLI to generate a preview URL for the app
    */
-  private readonly generateAndOpenPreviewUrl = async (table: Table.Table) => {
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    table: Table.Table,
+  ) => {
     const previewCellHeader = { content: "Preview your app in Canva" };
 
     const generatePreviewResult = await generatePreviewUrl();
@@ -191,6 +194,8 @@ export class AppRunner {
       { content: "Preview URL", href: generatePreviewResult.data },
     ]);
 
-    open(generatePreviewResult.data);
+    if (openPreview) {
+      open(generatePreviewResult.data);
+    }
   };
 }

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

@@ -3,8 +3,10 @@ import * as path from "path";
 
 interface CliArgs {
   example?: string;
-  useHttps?: boolean;
-  ngrok?: boolean;
+  useHttps: boolean;
+  ngrok: boolean;
+  preview: boolean;
+  overrideFrontendPort?: number;
 }
 
 interface EnvVars {
@@ -45,7 +47,7 @@ export class Context {
   }
 
   get ngrokEnabled() {
-    return !!this.args.ngrok;
+    return this.args.ngrok;
   }
 
   get hmrEnabled() {
@@ -53,7 +55,7 @@ export class Context {
   }
 
   get httpsEnabled() {
-    return !!this.args.useHttps;
+    return this.args.useHttps;
   }
 
   get frontendEntryPath() {
@@ -69,11 +71,11 @@ export class Context {
   }
 
   get frontendUrl() {
-    return `${this.protocol}://localhost:${this.envVars.frontendPort}`;
+    return `${this.protocol}://localhost:${this.frontendPort}`;
   }
 
   get frontendPort() {
-    return this.envVars.frontendPort;
+    return this.args.overrideFrontendPort || this.envVars.frontendPort;
   }
 
   get developerBackendEntryPath(): string | undefined {
@@ -117,6 +119,10 @@ export class Context {
     return this.envVars.appId;
   }
 
+  get openPreview(): boolean {
+    return this.args.preview;
+  }
+
   private get protocol(): "https" | "http" {
     return this.httpsEnabled ? "https" : "http";
   }

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

@@ -23,6 +23,17 @@ yargs(hideBin(process.argv))
     default:
       process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
   })
+  .option("override-frontend-port", {
+    description:
+      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
+    type: "number",
+    alias: "p",
+  })
+  .option("preview", {
+    description: "Open the app in Canva.",
+    type: "boolean",
+    default: false,
+  })
   .command(
     "$0",
     "Starts local development",

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

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+
+import type { ChildProcess } from "child_process";
+import { spawn } from "child_process";
+import * as treeKill from "tree-kill";
+
+describe("start script", () => {
+  let serverProcess: ChildProcess;
+
+  afterEach(() => {
+    if (serverProcess?.pid && !serverProcess.exitCode) {
+      treeKill(serverProcess.pid);
+    }
+  });
+
+  it("should execute 'npm run start' and start a dev server", async () => {
+    const testServerPort = 8089;
+    serverProcess = await spawn(
+      `npm run start -- -p ${testServerPort} --no-preview`,
+      {
+        shell: true,
+      },
+    );
+
+    if (!serverProcess.pid) {
+      throw new Error("Unable to start server");
+    }
+
+    // wait for the server to start and collect output until it reports the running URL
+    let output = "";
+    await new Promise<void>((resolve, reject) => {
+      serverProcess.stdout?.on("data", (data) => {
+        output += data.toString();
+        if (output.includes("Development URL")) {
+          resolve();
+        }
+      });
+
+      serverProcess.stderr?.on("data", (data) => {
+        console.error("Server process error: ", data.toString());
+        reject();
+      });
+
+      // timeout and fail test if the server hasn't correctly started in 10 seconds
+      setTimeout(() => {
+        if (serverProcess?.pid && !serverProcess.exitCode) {
+          treeKill(serverProcess.pid);
+        }
+        reject(new Error("Test timed out"));
+      }, 10000);
+    });
+
+    // check that the server is running and accessible
+    const expectedServerURL = `http://localhost:${testServerPort}`;
+    expect(output).toContain(expectedServerURL);
+    expect(serverProcess.exitCode).toBeNull();
+
+    // clean up
+    treeKill(serverProcess.pid);
+  }, 15000); // 15 seconds timeout to allow for the server to start
+});

package/templates/hello_world/package.json

@@ -12,6 +12,7 @@
     "lint:fix": "eslint . --fix",
     "lint:types": "tsc",
     "start": "ts-node ./scripts/start/start.ts",
+    "start:preview": "npm run start -- --preview",
     "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
     "test:update": "npm run test -- -u",
@@ -19,9 +20,9 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.7.0",
+    "@canva/app-ui-kit": "^4.8.0",
     "@canva/asset": "^2.1.0",
-    "@canva/design": "^2.3.0",
+    "@canva/design": "^2.4.0",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.1.0",
     "@canva/user": "^2.1.0",
@@ -81,6 +82,7 @@
     "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.11",
+    "tree-kill": "1.2.2",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.2",
     "ts-node": "10.9.2",