@canva/cli 1.19.0 → 1.20.0

package/templates/data_connector/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/data_connector/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/data_connector/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/data_connector/src/api/connect_client.ts

@@ -1,6 +0,0 @@
-import type { APIResponseItem } from "./data_source";
-
-export interface CanvaItemResponse<T extends APIResponseItem> {
-  continuation: string;
-  items: T[];
-}

package/templates/data_connector/src/api/data_source.ts

@@ -1,97 +0,0 @@
-import type { DataTable } from "@canva/intents/data";
-import type { JSX } from "react";
-import { type DataTableColumn, toDataTable } from "src/utils";
-
-/**
- * This file defines types and classes related to data source configuration, fetching and outputting as a data table.
- * When data is loaded, the app will save the data source config so that it can be queried again later to refresh the data.
- * Strongly typed data sources are simple to reload and validate.
- */
-
-/**
- * The data source configuration represents all parameters that are needed to represent the data source so that it can be queried again later.
- * This includes the schema, any filters that are applied to the data source, and any other parameters that are needed to fetch the data.
- */
-export interface DataSourceConfig {
-  // a unique identifier for the data source that is used to associated the saved data source config with the data source handler
-  schema: string;
-}
-
-/**
- * the API response item is a generic type that represents the data returned from the API
- */
-export interface APIResponseItem {
-  id: string;
-}
-
-export class DataAPIError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "APIError";
-  }
-}
-
-/**
- * The data source handler class defines a particular data source and how to fetch data from it.
- * In this template, the two data sources are brand templates and designs. Each data source has its own handler.
- * The handler defines the schema for the data source configuration (what filters are applied to get the requested data), the columns to display, and how to fetch data from the API.
- * It also defines the UI for how this source is represented on the data source selection page and how to render the data source configuration page where any filters can be set.
- */
-export class DataSourceHandler<
-  T extends DataSourceConfig,
-  R extends APIResponseItem,
-> {
-  schema: string;
-  constructor(
-    // the configuration for this data source. The default values will be overridden by the user setting filters, or on app launch if the previous state is restored
-    public sourceConfig: T,
-    // the columns to display in the data table output. In this template they are fixed, but they could be dynamic based on the data source and configuration
-    public columns: DataTableColumn<R>[],
-    // the fetch logic for turning the data source configuration into an array of data items to turn into a data table
-    public fetchData: (
-      source: T,
-      authToken: string,
-      rowLimit: number,
-      signal: AbortSignal | undefined,
-    ) => Promise<R[]>,
-    // the UI for the data source selection page. This is where the user chooses which data source to use.
-    public selectionPage: () => JSX.Element,
-    // the UI for the data source configuration page. This is where the user sets any filters or other parameters for the data source.
-    public configPage: (sourceConfig: T) => JSX.Element,
-  ) {
-    this.schema = sourceConfig.schema;
-  }
-
-  /**
-   * A type guard / type predicate to check if the data source configuration matches the schema of this data source handler.
-   * @param source the data source configuration to match against
-   * @returns
-   */
-  matchSource(source: DataSourceConfig): source is T {
-    return source.schema === this.schema;
-  }
-
-  /**
-   * The buildTable function is called to fetch data from the API and return it as a data table.
-   * @param source the data source configuration
-   * @param authToken the auth token to use for the API request
-   * @param rowLimit the maximum number of rows to return
-   * @param signal an optional abort signal to cancel the request
-   * @returns a data table with the data from the API
-   */
-  async fetchAndBuildTable(
-    source: T,
-    authToken: string,
-    rowLimit: number,
-    signal: AbortSignal | undefined,
-  ): Promise<DataTable> {
-    let apiData: R[];
-    try {
-      apiData = await this.fetchData(source, authToken || "", rowLimit, signal);
-    } catch {
-      throw new DataAPIError("Failed to fetch data from API");
-    }
-    // the toDataTable utility takes the API data and the configured columns and turns it into a data table
-    return toDataTable(apiData, this.columns, rowLimit);
-  }
-}