@canva/cli 0.0.1-beta.9 → 1.0.0

package/templates/{dam/webpack.config.cjs → data_connector/webpack.config.ts}

@@ -1,31 +1,36 @@
-require("dotenv").config();
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-const { DefinePlugin, optimize } = require("webpack");
-const chalk = require("chalk");
-const { transform } = require("@formatjs/ts-transformer");
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 
-/**
- *
- * @param {Object} [options]
- * @param {string} [options.appEntry=./src/index.tsx]
- * @param {string} [options.backendHost]
- * @param {Object} [options.devConfig]
- * @param {number} [options.devConfig.port]
- * @param {boolean} [options.devConfig.enableHmr]
- * @param {boolean} [options.devConfig.enableHttps]
- * @param {string} [options.devConfig.appOrigin]
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.devConfig.certFile]
- * @param {string} [options.devConfig.keyFile]
- * @returns {Object}
- */
-function buildConfig({
+config();
+
+type DevConfig = {
+  port: number;
+  enableHmr: boolean;
+  enableHttps: boolean;
+  appOrigin?: string;
+  appId?: string; // Deprecated in favour of appOrigin
+  certFile?: string;
+  keyFile?: string;
+};
+
+export function buildConfig({
   devConfig,
   appEntry = path.join(process.cwd(), "src", "index.tsx"),
   backendHost = process.env.CANVA_BACKEND_HOST,
-} = {}) {
+  // For IN_HARNESS, refer to the following docs for more information: https://www.canva.dev/docs/apps/test-harness/
+  inHarness = process.env.IN_HARNESS?.toLowerCase() === "true",
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+  inHarness?: boolean;
+} = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
   if (!backendHost) {
@@ -46,9 +51,14 @@ function buildConfig({
   return {
     mode,
     context: path.resolve(process.cwd(), "./"),
-    entry: {
-      app: appEntry,
-    },
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
     target: "web",
     resolve: {
       alias: {
@@ -60,7 +70,7 @@ function buildConfig({
       extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
     },
     infrastructureLogging: {
-      level: "none",
+      level: inHarness ? "info" : "none",
     },
     module: {
       rules: [
@@ -172,35 +182,26 @@ function buildConfig({
       new DefinePlugin({
         BACKEND_HOST: JSON.stringify(backendHost),
       }),
-      // Apps can only submit a single JS file via the developer portal
+      // Apps can only submit a single JS file via the Developer Portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-      mode === "development" && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }
 
-/**
- *
- * @param {Object} [options]
- * @param {number} [options.port]
- * @param {boolean} [options.enableHmr]
- * @param {boolean} [options.enableHttps]
- * @param {string} [options.appOrigin]
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.certFile]
- * @param {string} [options.keyFile]
- * @returns {Object|null}
- */
-function buildDevConfig(options) {
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
   if (!options) {
-    return null;
+    return {};
   }
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
-  let devServer = {
+  let devServer: DevServerConfiguration = {
     server: enableHttps
       ? {
           type: "https",
@@ -210,7 +211,8 @@ function buildDevConfig(options) {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,31 +229,13 @@ function buildDevConfig(options) {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
         "Access-Control-Allow-Private-Network": "true",
       },
     };
-  } else if (enableHmr && appId) {
-    // Deprecated - App ID should not be used to configure HMR in the future and can be safely removed
-    // after a few months.
-
-    console.warn(
-      "Enabling Hot Module Replacement (HMR) with an App ID is deprecated, please see the README.md on how to update.",
-    );
-
-    const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
-    devServer = {
-      ...devServer,
-      allowedHosts: appDomain,
-      headers: {
-        "Access-Control-Allow-Origin": `https://${appDomain}`,
-        "Access-Control-Allow-Credentials": "true",
-        "Access-Control-Allow-Private-Network": "true",
-      },
-    };
   } else {
     if (enableHmr && !appOrigin) {
       console.warn(
@@ -267,6 +251,4 @@ function buildDevConfig(options) {
   };
 }
 
-module.exports = () => buildConfig();
-
-module.exports.buildConfig = buildConfig;
+export default buildConfig;

package/templates/gen_ai/backend/routers/image.ts

@@ -22,48 +22,48 @@ const imageUrls: ImageResponse[] = [
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_1280.jpg",
+      url: "https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_640.jpg",
+      url: "https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
   {
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/12/youtube-background-7764172_1280.jpg",
+      url: "https://images.pexels.com/photos/4010108/pexels-photo-4010108.jpeg?auto=compress&cs=tinysrgb&w=1280&h=863&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/12/youtube-background-7764172_640.jpg",
+      url: "https://images.pexels.com/photos/4010108/pexels-photo-4010108.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
   {
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/07/colorful-7764162_1280.jpg",
+      url: "https://images.pexels.com/photos/1327496/pexels-photo-1327496.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/07/colorful-7764162_640.jpg",
+      url: "https://images.pexels.com/photos/1327496/pexels-photo-1327496.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
   {
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/04/57/swirls-7764142_1280.jpg",
+      url: "https://images.pexels.com/photos/4693135/pexels-photo-4693135.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/04/57/swirls-7764142_640.jpg",
+      url: "https://images.pexels.com/photos/4693135/pexels-photo-4693135.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
 ];

package/templates/gen_ai/backend/server.ts

@@ -1,5 +1,5 @@
-import * as express from "express";
 import * as cors from "cors";
+import * as express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createImageRouter } from "./routers/image";
 

package/templates/gen_ai/canva-app.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://www.canva.dev/schemas/app/v1/manifest-schema.json",
+  "manifest_schema_version": 1,
+  "runtime": {
+    "permissions": [
+      {
+        "name": "canva:asset:private:write",
+        "type": "mandatory"
+      },
+      {
+        "name": "canva:design:content:read",
+        "type": "mandatory"
+      },
+      {
+        "name": "canva:design:content:write",
+        "type": "mandatory"
+      }
+    ]
+  }
+}

package/templates/gen_ai/eslint.config.mjs

@@ -1,17 +1,4 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-import i18n from "./conf/eslint-i18n.mjs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import canvaPlugin from "@canva/app-eslint-plugin";
 
 export default [
   {
@@ -23,15 +10,5 @@ export default [
       "**/*.config.*",
     ],
   },
-  ...compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-  ),
-  ...general,
-  ...i18n,
+  ...canvaPlugin.configs.apps,
 ];

package/templates/gen_ai/package.json

@@ -4,7 +4,7 @@
   "description": "An example app demonstrating common patterns that you might use in a generative AI app.",
   "scripts": {
     "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
-    "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
+    "build": "webpack --config webpack.config.ts --mode production && npm run extract",
     "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
     "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
     "format:file": "prettier $1 --no-config --write",
@@ -12,89 +12,88 @@
     "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"
+    "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
-    "@canva/asset": "^2.1.0",
-    "@canva/design": "^2.3.0",
+    "@canva/app-i18n-kit": "^1.0.3",
+    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/asset": "^2.2.1",
+    "@canva/design": "^2.7.2",
     "@canva/error": "^2.1.0",
-    "@canva/platform": "^2.1.0",
-    "@canva/user": "^2.1.0",
+    "@canva/platform": "^2.2.0",
+    "@canva/user": "^2.1.1",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.2.0",
-    "obscenity": "0.4.1",
+    "html-react-parser": "5.2.5",
+    "obscenity": "0.4.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-error-boundary": "4.1.2",
+    "react-error-boundary": "6.0.0",
     "react-intl": "6.8.7",
-    "react-router-dom": "6.28.0"
+    "react-router-dom": "7.6.3"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.16.0",
-    "@formatjs/cli": "6.3.14",
-    "@formatjs/ts-transformer": "3.13.26",
-    "@ngrok/ngrok": "1.4.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "@canva/app-eslint-plugin": "^1.0.0-beta.3",
+    "@canva/cli": ">= 0.0.1-beta.13",
+    "@formatjs/cli": "6.7.2",
+    "@formatjs/ts-transformer": "3.14.0",
+    "@ngrok/ngrok": "1.5.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@svgr/webpack": "8.1.0",
-    "@testing-library/react": "16.1.0",
+    "@testing-library/react": "16.3.0",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.6",
+    "@types/express-serve-static-core": "5.0.6",
     "@types/jest": "29.5.14",
-    "@types/jsonwebtoken": "9.0.7",
-    "@types/node": "20.10.0",
+    "@types/jsonwebtoken": "9.0.10",
+    "@types/node": "20.19.2",
     "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.18.0",
-    "@typescript-eslint/parser": "8.18.0",
+    "@types/webpack": "5.28.5",
+    "@types/webpack-dev-server": "4.7.2",
+    "@types/webpack-env": "1.18.8",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.0.6",
-    "debug": "4.4.0",
-    "dotenv": "16.4.7",
-    "eslint": "9.16.0",
-    "eslint-plugin-formatjs": "5.2.8",
-    "eslint-plugin-jest": "28.9.0",
-    "eslint-plugin-react": "7.37.2",
-    "exponential-backoff": "3.1.1",
+    "cssnano": "7.0.7",
+    "debug": "4.4.1",
+    "dotenv": "16.6.0",
+    "exponential-backoff": "3.1.2",
     "express": "4.21.2",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
     "jsonwebtoken": "9.0.2",
-    "jwks-rsa": "3.1.0",
+    "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.2",
     "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",
+    "prettier": "3.6.2",
     "prompts": "2.4.2",
-    "react-refresh": "0.16.0",
+    "react-refresh": "0.17.0",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.5",
-    "ts-loader": "9.5.1",
+    "terser-webpack-plugin": "5.3.14",
+    "tree-kill": "1.2.2",
+    "ts-jest": "29.4.0",
+    "ts-loader": "9.5.2",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4",
+    "typescript": "5.8.2",
     "url-loader": "4.1.1",
-    "webpack": "5.97.1",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.1.0",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }
 }

package/templates/gen_ai/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
+import * as fs from "fs/promises";
 import { pki } from "node-forge";
 import * as path from "path";
-import * as fs from "fs/promises";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

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

@@ -1,14 +1,16 @@
 /* eslint-disable no-console */
-import type { Context } from "./context";
-import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.cjs";
+import { generatePreviewUrl } from "@canva/cli";
 import * as ngrok from "@ngrok/ngrok";
-import * as nodemon from "nodemon";
+import * as chalk from "chalk";
 import * as Table from "cli-table3";
+import * as nodemon from "nodemon";
+import * as open from "open";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import { buildConfig } from "../../webpack.config";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
+import type { Context } from "./context";
 
 export const infoChalk = chalk.blue.bold;
 export const warnChalk = chalk.bgYellow.bold;
@@ -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(ctx.openPreview, table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,33 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    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 },
+    ]);
+
+    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

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import * as yargs from "yargs";
-import { AppRunner } from "./app_runner";
 import { hideBin } from "yargs/helpers";
+import { AppRunner } from "./app_runner";
 import { Context } from "./context";
 
 const appRunner = new AppRunner();
@@ -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",