@canva/cli 1.19.0 → 1.21.0

package/templates/base/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/base/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/base/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;
-  }
-}

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

@@ -1,46 +0,0 @@
-#!/usr/bin/env node
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import { AppRunner } from "./app_runner";
-import { Context } from "./context";
-
-const appRunner = new AppRunner();
-
-yargs(hideBin(process.argv))
-  .version(false)
-  .help()
-  .option("ngrok", {
-    description: "Run backend server via ngrok.",
-    type: "boolean",
-    // npm swallows command line args instead of forwarding to the script
-    default:
-      process.env.npm_config_ngrok?.toLocaleLowerCase().trim() === "true",
-  })
-  .option("use-https", {
-    description: "Start local development server on HTTPS.",
-    type: "boolean",
-    // npm swallows commands line args instead of forwarding to the script
-    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",
-    () => {},
-    (args) => {
-      const ctx = new Context(process.env, args);
-      appRunner.run(ctx);
-    },
-  )
-  .parse();

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

@@ -1,61 +0,0 @@
-/* eslint-disable no-console */
-
-import type { ChildProcess } from "child_process";
-import { spawn } from "child_process";
-import 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/base/styles/components.css

@@ -1,38 +0,0 @@
-/* Scroll container */
-.scrollContainer {
-  box-sizing: border-box;
-  overflow-y: scroll;
-  height: 100%;
-  padding-top: var(--ui-kit-space-200);
-  padding-right: var(--ui-kit-space-200);
-  padding-bottom: var(--ui-kit-space-200);
-
-  /* for firefox */
-  scrollbar-width: thin;
-  scrollbar-color: var(--ui-kit-color-content-placeholder-fg) transparent;
-}
-
-.scrollContainer::-webkit-scrollbar {
-  position: absolute;
-  width: var(--ui-kit-base-unit);
-  height: 0;
-}
-
-.scrollContainer::-webkit-scrollbar-track {
-  background: transparent;
-  width: var(--ui-kit-base-unit);
-  margin-top: var(--ui-kit-space-100);
-  margin-bottom: var(--ui-kit-space-100);
-}
-
-.scrollContainer::-webkit-scrollbar-thumb {
-  border-radius: var(--ui-kit-radius-element-standard);
-  background: var(--ui-kit-color-content-placeholder-fg);
-  visibility: hidden;
-}
-
-.scrollContainer:hover::-webkit-scrollbar-thumb,
-.scrollContainer:focus::-webkit-scrollbar-thumb,
-.scrollContainer:focus-within::-webkit-scrollbar-thumb {
-  visibility: visible;
-}