@canva/cli 1.19.0 → 1.20.0

package/templates/dam/declarations/declarations.d.ts

@@ -1,29 +0,0 @@
-declare module "*.css" {
-  const styles: { [className: string]: string };
-  export = styles;
-}
-
-declare module "*.jpg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.jpeg" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.png" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.svg" {
-  const content: React.FunctionComponent<{
-    size?: "tiny" | "small" | "medium" | "large";
-    className?: string;
-  }>;
-  export default content;
-}
-
-declare const BACKEND_HOST: string;

package/templates/dam/eslint.config.mjs

@@ -1,14 +0,0 @@
-import canvaPlugin from "@canva/app-eslint-plugin";
-
-export default [
-  {
-    ignores: [
-      "**/node_modules/",
-      "**/dist",
-      "**/*.d.ts",
-      "**/*.d.tsx",
-      "**/*.config.*",
-    ],
-  },
-  ...canvaPlugin.configs.apps,
-];

package/templates/dam/package.json

@@ -1,97 +0,0 @@
-{
-  "private": true,
-  "name": "digital_asset_management",
-  "description": "An example app leveraging @canva/app-components to develop a digital asset management (DAM) app.",
-  "scripts": {
-    "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
-    "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",
-    "lint": "eslint .",
-    "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-components": "^2.1.0",
-    "@canva/app-hooks": "^0.0.0-beta.4",
-    "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-middleware": "^0.0.0-beta.5",
-    "@canva/app-ui-kit": "^5.5.0",
-    "@canva/asset": "^2.3.0",
-    "@canva/design": "^2.8.0",
-    "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.2.0",
-    "@canva/platform": "^2.2.1",
-    "@canva/user": "^2.1.2",
-    "cookie-parser": "1.4.7",
-    "cors": "2.8.5",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-intl": "^7.1.11"
-  },
-  "devDependencies": {
-    "@canva/app-eslint-plugin": "^1.0.0-beta.7",
-    "@canva/cli": ">= 0.0.1-beta.13",
-    "@formatjs/cli": "6.7.2",
-    "@formatjs/ts-transformer": "3.14.0",
-    "@ngrok/ngrok": "1.5.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
-    "@svgr/webpack": "8.1.0",
-    "@testing-library/react": "16.3.0",
-    "@types/cors": "2.8.19",
-    "@types/debug": "4.1.12",
-    "@types/express": "4.17.21",
-    "@types/jest": "29.5.14",
-    "@types/jsonwebtoken": "9.0.10",
-    "@types/node": "20.19.2",
-    "@types/node-fetch": "2.6.13",
-    "@types/node-forge": "1.3.14",
-    "@types/nodemon": "1.19.6",
-    "@types/prompts": "2.4.9",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.1",
-    "@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.1.1",
-    "debug": "4.4.1",
-    "dotenv": "16.6.0",
-    "exponential-backoff": "3.1.2",
-    "express": "4.22.1",
-    "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.3",
-    "jwks-rsa": "3.2.0",
-    "mini-css-extract-plugin": "2.9.4",
-    "node-fetch": "3.3.2",
-    "node-forge": "1.3.2",
-    "nodemon": "3.0.1",
-    "open": "8.4.2",
-    "postcss-loader": "8.1.1",
-    "prettier": "3.6.2",
-    "prompts": "2.4.2",
-    "react-refresh": "0.17.0",
-    "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.14",
-    "tree-kill": "1.2.2",
-    "ts-jest": "29.4.1",
-    "ts-loader": "9.5.4",
-    "ts-node": "10.9.2",
-    "typescript": "5.9.2",
-    "url-loader": "4.1.1",
-    "webpack": "5.99.9",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.2",
-    "yargs": "17.7.2"
-  }
-}

package/templates/dam/scripts/copy_env.ts

@@ -1,13 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable no-console */
-import fs from "fs";
-import path from "path";
-
-const envPath = path.resolve(__dirname, "..", ".env");
-const templatePath = path.resolve(__dirname, "..", ".env.template");
-
-if (!fs.existsSync(templatePath)) {
-  console.warn(".env.template file does not exist, skipping copy of .env file");
-} else if (!fs.existsSync(envPath)) {
-  fs.copyFileSync(templatePath, envPath);
-}

package/templates/dam/scripts/ssl/ssl.ts

@@ -1,131 +0,0 @@
-import crypto from "crypto";
-import fs from "fs/promises";
-import { pki } from "node-forge";
-import path from "path";
-
-const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
-const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");
-const KEY_FILE = path.resolve(SSL_CERT_DIR, "private-key.pem");
-
-export interface Certificate {
-  keyFile: string;
-  certFile: string;
-}
-
-const CERT_ATTRS: { name: string; value: string }[] = [
-  {
-    name: "commonName",
-    value: "localhost",
-  },
-  {
-    name: "countryName",
-    value: "AU",
-  },
-  {
-    name: "stateOrProvinceName",
-    value: "New South Wales",
-  },
-  {
-    name: "localityName",
-    value: "Sydney",
-  },
-  {
-    name: "organizationName",
-    value: "Test",
-  },
-  {
-    name: "organizationalUnitName",
-    value: "Test",
-  },
-];
-
-const generateRsaKeys = async (): Promise<{
-  publicKey: string;
-  privateKey: string;
-}> =>
-  new Promise((resolve, reject) => {
-    crypto.generateKeyPair(
-      "rsa",
-      {
-        modulusLength: 2096,
-        publicKeyEncoding: {
-          type: "spki",
-          format: "pem",
-        },
-        privateKeyEncoding: {
-          type: "pkcs8",
-          format: "pem",
-        },
-      },
-      (err, publicKey, privateKey) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve({ publicKey, privateKey });
-        }
-      },
-    );
-  });
-
-const generateCertificate = (opts: {
-  privateKey: string;
-  publicKey: string;
-}): string => {
-  const privateKey = pki.privateKeyFromPem(opts.privateKey);
-  const publicKey = pki.publicKeyFromPem(opts.publicKey);
-
-  const cert = pki.createCertificate();
-
-  cert.publicKey = publicKey;
-  cert.serialNumber = "01";
-  cert.validity.notBefore = new Date();
-  cert.validity.notAfter = new Date();
-  cert.validity.notAfter.setFullYear(cert.validity.notBefore.getFullYear() + 1);
-
-  cert.setSubject(CERT_ATTRS);
-  cert.setIssuer(CERT_ATTRS);
-
-  // the actual certificate signing
-  cert.sign(privateKey);
-
-  // now convert the Forge certificate to PEM format
-  return pki.certificateToPem(cert);
-};
-
-const writeCertFiles = async (opts: {
-  cert: string;
-  privateKey: string;
-}): Promise<void> => {
-  const { cert, privateKey } = opts;
-
-  await fs.mkdir(SSL_CERT_DIR, { recursive: true });
-  await Promise.all([
-    fs.writeFile(CERT_FILE, cert, { encoding: "utf8" }),
-    fs.writeFile(KEY_FILE, privateKey, { encoding: "utf8" }),
-  ]);
-};
-
-const cerfFilesExist = async (): Promise<boolean> => {
-  try {
-    await Promise.all([
-      fs.access(CERT_FILE, fs.constants.R_OK | fs.constants.W_OK),
-      fs.access(KEY_FILE, fs.constants.R_OK | fs.constants.W_OK),
-    ]);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-export const createOrRetrieveCertificate = async (): Promise<Certificate> => {
-  if (!(await cerfFilesExist())) {
-    const keys = await generateRsaKeys();
-    const cert = generateCertificate(keys);
-    await writeCertFiles({ cert, privateKey: keys.privateKey });
-  }
-
-  return {
-    certFile: CERT_FILE,
-    keyFile: KEY_FILE,
-  };
-};

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

@@ -1,223 +0,0 @@
-/* eslint-disable no-console */
-import { generatePreviewUrl } from "@canva/cli";
-import ngrok from "@ngrok/ngrok";
-import chalk from "chalk";
-import Table from "cli-table3";
-import nodemon from "nodemon";
-import open from "open";
-import os from "os";
-import webpack from "webpack";
-import 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;
-export const errorChalk = chalk.bgRed.bold;
-export const highlightChalk = chalk.greenBright.bold;
-export const linkChalk = chalk.cyan;
-
-/**
- * Returns the appropriate modifier key text based on the user's operating system.
- * @returns "cmd" for macOS, "ctrl" for Windows and Linux
- */
-export function getModifierKey(): string {
-  const platform = os.platform();
-  switch (platform) {
-    case "darwin": // macOS
-      return "cmd";
-    case "win32": // Windows
-      return "ctrl";
-    default: // Linux and others
-      return "ctrl";
-  }
-}
-
-export class AppRunner {
-  async run(ctx: Context) {
-    console.log(
-      infoChalk("Info:"),
-      `Starting development server for ${highlightChalk(ctx.entryDir)}\n`,
-    );
-
-    if (!ctx.hmrEnabled) {
-      console.log(
-        `${infoChalk(
-          "Note:",
-        )} Hot Module Replacement (HMR) not enabled. To enable it, please refer to the instructions in the ${highlightChalk(
-          "README.md",
-        )}\n`,
-      );
-    }
-
-    let cert: Certificate | undefined;
-    if (ctx.httpsEnabled) {
-      try {
-        cert = await createOrRetrieveCertificate();
-      } catch (err) {
-        console.log(
-          errorChalk("Error:"),
-          "Unable to generate SSL certificate.",
-        );
-        throw err;
-      }
-    }
-
-    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(
-      `${infoChalk(
-        "Note:",
-      )} For instructions on how to set up the app via the Developer Portal, see the ${highlightChalk(
-        "README.md",
-      )}.\n`,
-    );
-  }
-
-  private readonly maybeRunBackendServer = async (
-    ctx: Context,
-    table: Table.Table,
-    cert: Certificate | undefined,
-    webpackDevServer: WebpackDevServer,
-  ) => {
-    if (!ctx.developerBackendEntryPath) {
-      return;
-    }
-
-    // App ID must be set when running a backend example
-    if (!ctx.appId) {
-      console.log(
-        errorChalk("Error:"),
-        `'CANVA_APP_ID' environment variable is undefined. Refer to the instructions in the ${highlightChalk(
-          "README.md",
-        )} on starting a backend example.`,
-      );
-      throw new Error("'CANVA_APP_ID' env variable not set.");
-    }
-
-    await new Promise((resolve) => {
-      const nodemonServer = nodemon({
-        script: ctx.developerBackendEntryPath,
-        ext: "ts",
-        env: {
-          SHOULD_ENABLE_HTTPS: ctx.httpsEnabled,
-          HTTPS_CERT_FILE: cert?.certFile || "",
-          HTTPS_KEY_FILE: cert?.keyFile || "",
-        },
-      });
-
-      nodemonServer.on("start", resolve);
-
-      nodemonServer.on("crash", async () => {
-        console.log(errorChalk("Shutting down local server.\n"));
-
-        await webpackDevServer.stop();
-        process.exit(1);
-      });
-    });
-
-    if (ctx.ngrokEnabled) {
-      console.log(
-        warnChalk("Warning:"),
-        `ngrok exposes a local port via a public URL. Be mindful of what's exposed and shut down the server when it's not in use.\n`,
-      );
-    }
-
-    let url = ctx.backendUrl;
-    if (ctx.ngrokEnabled) {
-      try {
-        const ngrokListener = await ngrok.forward({
-          addr: ctx.backendPort,
-          // requires an `NGROK_AUTHTOKEN` env var to be set
-          authtoken_from_env: true,
-        });
-        url = ngrokListener.url() ?? url;
-      } catch (err) {
-        console.log(
-          errorChalk("Error:"),
-          `Unable to start ngrok server: ${err}`,
-        );
-      }
-    }
-
-    table.push(["Base URL (Backend)", linkChalk(url)]);
-  };
-
-  private readonly runWebpackDevServer = async (
-    ctx: Context,
-    table: Table.Table,
-    cert: Certificate | undefined,
-  ): Promise<WebpackDevServer> => {
-    const runtimeWebpackConfig = buildConfig({
-      appEntry: ctx.frontendEntryPath,
-      backendHost: ctx.backendHost,
-      devConfig: {
-        port: ctx.frontendPort,
-        enableHmr: ctx.hmrEnabled,
-        appId: ctx.appId,
-        appOrigin: ctx.appOrigin,
-        enableHttps: ctx.httpsEnabled,
-        ...cert,
-      },
-    });
-
-    const compiler = webpack(runtimeWebpackConfig);
-    const server = new WebpackDevServer(
-      runtimeWebpackConfig.devServer,
-      compiler,
-    );
-    await server.start();
-
-    table.push(["Development URL (Frontend)", linkChalk(ctx.frontendUrl)]);
-
-    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;
-    }
-
-    const modifierKey = getModifierKey();
-
-    table.push([
-      previewCellHeader,
-      {
-        content: `Preview URL (${modifierKey} + click)`,
-        href: generatePreviewResult.data,
-      },
-    ]);
-
-    if (openPreview) {
-      open(generatePreviewResult.data);
-    }
-  };
-}

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

@@ -1,171 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-interface CliArgs {
-  example?: string;
-  useHttps: boolean;
-  ngrok: boolean;
-  preview: boolean;
-  overrideFrontendPort?: number;
-}
-
-interface EnvVars {
-  frontendPort: number;
-  backendPort: number;
-  hmrEnabled: boolean;
-  appId?: string;
-  appOrigin?: string;
-  backendHost?: string;
-}
-
-export class Context {
-  private readonly envVars: EnvVars;
-
-  constructor(
-    private env: NodeJS.ProcessEnv = process.env,
-    private readonly args: CliArgs,
-  ) {
-    this.envVars = this.parseAndValidateEnvironmentVariables();
-  }
-
-  static get srcDir() {
-    const src = path.join(Context.rootDir, "src");
-
-    if (!fs.existsSync(src)) {
-      throw new Error(`Directory does not exist: ${src}`);
-    }
-
-    return src;
-  }
-
-  static get readmeDir() {
-    return path.join(Context.rootDir, "README.md");
-  }
-
-  get entryDir() {
-    return Context.srcDir;
-  }
-
-  get ngrokEnabled() {
-    return this.args.ngrok;
-  }
-
-  get hmrEnabled() {
-    return this.envVars.hmrEnabled;
-  }
-
-  get httpsEnabled() {
-    return this.args.useHttps;
-  }
-
-  get frontendEntryPath() {
-    const frontendEntryPath = path.join(this.entryDir, "index.tsx");
-
-    if (!fs.existsSync(frontendEntryPath)) {
-      throw new Error(
-        `Entry point for frontend does not exist: ${frontendEntryPath}`,
-      );
-    }
-
-    return frontendEntryPath;
-  }
-
-  get frontendUrl() {
-    return `${this.protocol}://localhost:${this.frontendPort}`;
-  }
-
-  get frontendPort() {
-    return this.args.overrideFrontendPort || this.envVars.frontendPort;
-  }
-
-  get developerBackendEntryPath(): string | undefined {
-    const developerBackendEntryPath = path.join(
-      Context.rootDir,
-      "backend",
-      "server.ts",
-    );
-
-    if (!fs.existsSync(developerBackendEntryPath)) {
-      return undefined;
-    }
-
-    return developerBackendEntryPath;
-  }
-
-  get backendUrl() {
-    return `${this.protocol}://localhost:${this.envVars.backendPort}`;
-  }
-
-  get backendHost() {
-    let backendHost = this.envVars.backendHost;
-
-    // if there's no custom URL provided by the developer, we fallback to our localhost backend
-    if (!backendHost || backendHost.trim() === "") {
-      backendHost = this.backendUrl;
-    }
-
-    return backendHost;
-  }
-
-  get backendPort() {
-    return this.envVars.backendPort;
-  }
-
-  get appOrigin(): string | undefined {
-    return this.envVars.appOrigin;
-  }
-
-  get appId(): string | undefined {
-    return this.envVars.appId;
-  }
-
-  get openPreview(): boolean {
-    return this.args.preview;
-  }
-
-  private get protocol(): "https" | "http" {
-    return this.httpsEnabled ? "https" : "http";
-  }
-
-  private static get rootDir() {
-    return path.join(process.cwd());
-  }
-
-  private parseAndValidateEnvironmentVariables(): EnvVars {
-    const {
-      CANVA_FRONTEND_PORT,
-      CANVA_BACKEND_PORT,
-      CANVA_BACKEND_HOST,
-      CANVA_APP_ID,
-      CANVA_APP_ORIGIN,
-      CANVA_HMR_ENABLED,
-    } = this.env;
-
-    if (!CANVA_FRONTEND_PORT) {
-      throw new Error(
-        "CANVA_FRONTEND_PORT environment variable is not defined",
-      );
-    }
-
-    if (!CANVA_BACKEND_PORT) {
-      throw new Error("CANVA_BACKEND_PORT environment variable is not defined");
-    }
-
-    const envVars: EnvVars = {
-      frontendPort: parseInt(CANVA_FRONTEND_PORT, 10),
-      backendPort: parseInt(CANVA_BACKEND_PORT, 10),
-      hmrEnabled: CANVA_HMR_ENABLED?.toLowerCase().trim() === "true",
-      appId: CANVA_APP_ID,
-      appOrigin: CANVA_APP_ORIGIN,
-      backendHost: CANVA_BACKEND_HOST,
-    };
-
-    if (envVars.hmrEnabled && envVars.appOrigin == null) {
-      throw new Error(
-        "CANVA_HMR_ENABLED environment variable is TRUE, but CANVA_APP_ORIGIN is not set. Refer to the instructions in the README.md on configuring HMR.",
-      );
-    }
-
-    return envVars;
-  }
-}