@canva/cli 1.19.0 → 1.20.0

package/templates/gen_ai/webpack.config.ts

@@ -1,247 +0,0 @@
-import type { Configuration } from "webpack";
-import { DefinePlugin, optimize } from "webpack";
-import path from "path";
-import TerserPlugin from "terser-webpack-plugin";
-import { transform } from "@formatjs/ts-transformer";
-import chalk from "chalk";
-import { config } from "dotenv";
-import { Configuration as DevServerConfiguration } from "webpack-dev-server";
-
-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) {
-    console.warn(
-      chalk.yellow.bold("BACKEND_HOST is undefined."),
-      `If your app requires a backend, refer to "Customizing the backend host" in the README.md for more information.`,
-    );
-  } else if (backendHost.includes("localhost") && mode === "production") {
-    console.error(
-      chalk.redBright.bold(
-        "BACKEND_HOST should not be set to localhost for production builds!",
-      ),
-      `Refer to "Customizing the backend host" in the README.md for more information.`,
-    );
-  }
-
-  return {
-    mode,
-    context: path.resolve(process.cwd(), "./"),
-    entry: inHarness
-      ? {
-          harness: path.join(process.cwd(), "harness", "harness.tsx"),
-          init: path.join(process.cwd(), "harness", "init.ts"),
-        }
-      : {
-          app: appEntry,
-        },
-    target: "web",
-    resolve: {
-      alias: {
-        styles: path.resolve(process.cwd(), "styles"),
-        src: path.resolve(process.cwd(), "src"),
-      },
-      extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
-    },
-    infrastructureLogging: {
-      level: inHarness ? "info" : "none",
-    },
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          exclude: /node_modules/,
-          use: [
-            {
-              loader: "ts-loader",
-              options: {
-                transpileOnly: true,
-                getCustomTransformers() {
-                  return {
-                    before: [
-                      transform({
-                        overrideIdFn: "[sha512:contenthash:base64:6]",
-                      }),
-                    ],
-                  };
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          exclude: /node_modules/,
-          use: [
-            "style-loader",
-            {
-              loader: "css-loader",
-              options: {
-                modules: true,
-              },
-            },
-            {
-              loader: "postcss-loader",
-              options: {
-                postcssOptions: {
-                  plugins: [require("cssnano")({ preset: "default" })],
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(png|jpg|jpeg)$/i,
-          type: "asset/inline",
-        },
-        {
-          test: /\.(woff|woff2)$/,
-          type: "asset/inline",
-        },
-        {
-          test: /\.svg$/,
-          oneOf: [
-            {
-              issuer: /\.[jt]sx?$/,
-              resourceQuery: /react/, // *.svg?react
-              use: ["@svgr/webpack", "url-loader"],
-            },
-            {
-              type: "asset/resource",
-              parser: {
-                dataUrlCondition: {
-                  maxSize: 200,
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          include: /node_modules/,
-          use: [
-            "style-loader",
-            "css-loader",
-            {
-              loader: "postcss-loader",
-              options: {
-                postcssOptions: {
-                  plugins: [require("cssnano")({ preset: "default" })],
-                },
-              },
-            },
-          ],
-        },
-      ],
-    },
-    optimization: {
-      minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            format: {
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-        }),
-      ],
-    },
-    output: {
-      filename: `[name].js`,
-      path: path.resolve(process.cwd(), "dist"),
-      clean: true,
-    },
-    plugins: [
-      new DefinePlugin({
-        BACKEND_HOST: JSON.stringify(backendHost),
-      }),
-      // Apps can only submit a single JS file via the Developer Portal
-      new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ].filter(Boolean),
-    ...buildDevConfig(devConfig),
-  };
-}
-
-function buildDevConfig(options?: DevConfig): {
-  devtool?: string;
-  devServer?: DevServerConfiguration;
-} {
-  if (!options) {
-    return {};
-  }
-
-  const { port, enableHmr, appOrigin, enableHttps, certFile, keyFile } =
-    options;
-  const host = "localhost";
-
-  let devServer: DevServerConfiguration = {
-    server: enableHttps
-      ? {
-          type: "https",
-          options: {
-            cert: certFile,
-            key: keyFile,
-          },
-        }
-      : "http",
-    host,
-    allowedHosts: [host],
-    historyApiFallback: {
-      rewrites: [{ from: /^\/$/, to: "/app.js" }],
-    },
-    port,
-    client: {
-      logging: "verbose",
-    },
-  };
-
-  if (enableHmr && appOrigin) {
-    devServer = {
-      ...devServer,
-      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 && !appOrigin) {
-      console.warn(
-        "Attempted to enable Hot Module Replacement (HMR) without configuring App Origin... Disabling HMR.",
-      );
-    }
-    devServer.webSocketServer = false;
-  }
-
-  return {
-    devtool: "source-map",
-    devServer,
-  };
-}
-
-export default buildConfig;

package/templates/hello_world/canva-app.json

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

package/templates/hello_world/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/hello_world/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/hello_world/package.json

@@ -1,90 +0,0 @@
-{
-  "private": true,
-  "name": "empty-template",
-  "description": "An empty Canva 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",
-    "test:update": "npm run test -- -u",
-    "postinstall": "ts-node ./scripts/copy_env.ts"
-  },
-  "dependencies": {
-    "@canva/app-hooks": "^0.0.0-beta.4",
-    "@canva/app-i18n-kit": "^1.2.0",
-    "@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",
-    "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/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/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",
-    "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",
-    "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/hello_world/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/hello_world/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,
-  };
-};