@canva/cli 1.7.0 → 1.9.0

package/templates/base/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import * as debug from "debug";
+import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";

package/templates/base/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,10 +1,9 @@
 /* eslint-disable no-console */
-import * as chalk from "chalk";
-import * as debug from "debug";
+import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
-import * as jwt from "jsonwebtoken";
+import jwt from "jsonwebtoken";
 import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
 /**
@@ -125,9 +124,7 @@ export function createJwtMiddleware(
       if (e instanceof SigningKeyNotFoundError) {
         return sendUnauthorizedResponse(
           res,
-          `Public key not found. ${chalk.bgRedBright(
-            "Ensure you have the correct App_ID set",
-          )}.`,
+          `Public key not found. Ensure you have the correct App_ID set`,
         );
       }
 

package/templates/base/webpack.config.ts

@@ -1,9 +1,9 @@
 import type { Configuration } from "webpack";
 import { DefinePlugin, optimize } from "webpack";
-import * as path from "path";
-import * as TerserPlugin from "terser-webpack-plugin";
+import path from "path";
+import TerserPlugin from "terser-webpack-plugin";
 import { transform } from "@formatjs/ts-transformer";
-import * as chalk from "chalk";
+import chalk from "chalk";
 import { config } from "dotenv";
 import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 

package/templates/common/utils/backend/base_backend/create.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 import debug from "debug";
-import * as express from "express";
+import express from "express";
 import type { NextFunction, Request, Response } from "express";
-import * as fs from "fs";
-import * as http from "http";
-import * as https from "https";
+import fs from "fs";
+import http from "http";
+import https from "https";
 
 const serverDebug = debug("server");
 

package/templates/common/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,10 +1,9 @@
 /* eslint-disable no-console */
-import * as chalk from "chalk";
-import * as debug from "debug";
+import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
-import * as jwt from "jsonwebtoken";
+import jwt from "jsonwebtoken";
 import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
 /**
@@ -125,9 +124,7 @@ export function createJwtMiddleware(
       if (e instanceof SigningKeyNotFoundError) {
         return sendUnauthorizedResponse(
           res,
-          `Public key not found. ${chalk.bgRedBright(
-            "Ensure you have the correct App_ID set",
-          )}.`,
+          `Public key not found. Ensure you have the correct App_ID set`,
         );
       }
 

package/templates/dam/backend/routers/dam.ts

@@ -1,6 +1,6 @@
 import type { Container, Resource } from "@canva/app-components";
-import * as crypto from "crypto";
-import * as express from "express";
+import crypto from "crypto";
+import express from "express";
 
 /**
  * Generates a unique hash for a url.

package/templates/dam/backend/server.ts

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

package/templates/dam/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@canva/app-components": "^2.1.0",
     "@canva/app-i18n-kit": "^1.1.1",
-    "@canva/app-ui-kit": "^5.2.0",
+    "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",

package/templates/dam/scripts/copy_env.ts

@@ -1,10 +1,13 @@
 #!/usr/bin/env node
-import * as fs from "fs";
-import * as path from "path";
+/* 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(envPath)) {
+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,7 +1,7 @@
-import * as crypto from "crypto";
-import * as fs from "fs/promises";
+import crypto from "crypto";
+import fs from "fs/promises";
 import { pki } from "node-forge";
-import * as path from "path";
+import path from "path";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

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

@@ -1,12 +1,13 @@
 /* eslint-disable no-console */
 import { generatePreviewUrl } from "@canva/cli";
-import * as ngrok from "@ngrok/ngrok";
-import * as chalk from "chalk";
-import * as Table from "cli-table3";
-import * as nodemon from "nodemon";
+import ngrok from "@ngrok/ngrok";
+import chalk from "chalk";
+import Table from "cli-table3";
+import nodemon from "nodemon";
 import open from "open";
-import * as webpack from "webpack";
-import * as WebpackDevServer from "webpack-dev-server";
+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";
@@ -18,6 +19,22 @@ 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(
@@ -189,9 +206,14 @@ export class AppRunner {
       return;
     }
 
+    const modifierKey = getModifierKey();
+
     table.push([
       previewCellHeader,
-      { content: "Preview URL", href: generatePreviewResult.data },
+      {
+        content: `Preview URL (${modifierKey} + click)`,
+        href: generatePreviewResult.data,
+      },
     ]);
 
     if (openPreview) {

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

@@ -1,5 +1,5 @@
-import * as fs from "fs";
-import * as path from "path";
+import fs from "fs";
+import path from "path";
 
 interface CliArgs {
   example?: string;

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

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import * as yargs from "yargs";
+import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 import { AppRunner } from "./app_runner";
 import { Context } from "./context";

package/templates/dam/tsconfig.json

@@ -18,7 +18,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "noImplicitOverride": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
     "rootDir": ".",
     "outDir": "dist",
     "strict": true,

package/templates/dam/utils/backend/base_backend/create.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 import debug from "debug";
-import * as express from "express";
+import express from "express";
 import type { NextFunction, Request, Response } from "express";
-import * as fs from "fs";
-import * as http from "http";
-import * as https from "https";
+import fs from "fs";
+import http from "http";
+import https from "https";
 
 const serverDebug = debug("server");
 

package/templates/dam/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,10 +1,9 @@
 /* eslint-disable no-console */
-import * as chalk from "chalk";
-import * as debug from "debug";
+import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
-import * as jwt from "jsonwebtoken";
+import jwt from "jsonwebtoken";
 import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
 /**
@@ -125,9 +124,7 @@ export function createJwtMiddleware(
       if (e instanceof SigningKeyNotFoundError) {
         return sendUnauthorizedResponse(
           res,
-          `Public key not found. ${chalk.bgRedBright(
-            "Ensure you have the correct App_ID set",
-          )}.`,
+          `Public key not found. Ensure you have the correct App_ID set`,
         );
       }
 

package/templates/dam/webpack.config.ts

@@ -1,9 +1,9 @@
 import type { Configuration } from "webpack";
 import { DefinePlugin, optimize } from "webpack";
-import * as path from "path";
-import * as TerserPlugin from "terser-webpack-plugin";
+import path from "path";
+import TerserPlugin from "terser-webpack-plugin";
 import { transform } from "@formatjs/ts-transformer";
-import * as chalk from "chalk";
+import chalk from "chalk";
 import { config } from "dotenv";
 import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 

package/templates/data_connector/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.1.1",
-    "@canva/app-ui-kit": "^5.2.0",
+    "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",

package/templates/data_connector/scripts/copy_env.ts

@@ -1,10 +1,13 @@
 #!/usr/bin/env node
-import * as fs from "fs";
-import * as path from "path";
+/* 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(envPath)) {
+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/data_connector/scripts/ssl/ssl.ts

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

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

@@ -1,12 +1,13 @@
 /* eslint-disable no-console */
 import { generatePreviewUrl } from "@canva/cli";
-import * as ngrok from "@ngrok/ngrok";
-import * as chalk from "chalk";
-import * as Table from "cli-table3";
-import * as nodemon from "nodemon";
+import ngrok from "@ngrok/ngrok";
+import chalk from "chalk";
+import Table from "cli-table3";
+import nodemon from "nodemon";
 import open from "open";
-import * as webpack from "webpack";
-import * as WebpackDevServer from "webpack-dev-server";
+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";
@@ -18,6 +19,22 @@ 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(
@@ -189,9 +206,14 @@ export class AppRunner {
       return;
     }
 
+    const modifierKey = getModifierKey();
+
     table.push([
       previewCellHeader,
-      { content: "Preview URL", href: generatePreviewResult.data },
+      {
+        content: `Preview URL (${modifierKey} + click)`,
+        href: generatePreviewResult.data,
+      },
     ]);
 
     if (openPreview) {

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

@@ -1,5 +1,5 @@
-import * as fs from "fs";
-import * as path from "path";
+import fs from "fs";
+import path from "path";
 
 interface CliArgs {
   example?: string;

package/templates/data_connector/scripts/start/start.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import * as yargs from "yargs";
+import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 import { AppRunner } from "./app_runner";
 import { Context } from "./context";

package/templates/data_connector/tsconfig.json

@@ -18,7 +18,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "noImplicitOverride": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
     "rootDir": ".",
     "outDir": "dist",
     "strict": true,

package/templates/data_connector/webpack.config.ts

@@ -1,9 +1,9 @@
 import type { Configuration } from "webpack";
 import { DefinePlugin, optimize } from "webpack";
-import * as path from "path";
-import * as TerserPlugin from "terser-webpack-plugin";
+import path from "path";
+import TerserPlugin from "terser-webpack-plugin";
 import { transform } from "@formatjs/ts-transformer";
-import * as chalk from "chalk";
+import chalk from "chalk";
 import { config } from "dotenv";
 import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 

package/templates/gen_ai/backend/database/database.ts

@@ -1,5 +1,5 @@
-import * as fs from "fs/promises";
-import * as path from "path";
+import fs from "fs/promises";
+import path from "path";
 
 /**
  * This file creates a "database" out of a JSON file. It's only for

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

@@ -8,7 +8,7 @@
  * Use this code as a learning resource, but do not deploy it in a real backend without significant modifications
  * to ensure reliability, security, and scalability.
  */
-import * as express from "express";
+import express from "express";
 
 interface ImageResponse {
   fullsize: { width: number; height: number; url: string };

package/templates/gen_ai/backend/server.ts

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

package/templates/gen_ai/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.1.1",
-    "@canva/app-ui-kit": "^5.2.0",
+    "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",

package/templates/gen_ai/scripts/copy_env.ts

@@ -1,10 +1,13 @@
 #!/usr/bin/env node
-import * as fs from "fs";
-import * as path from "path";
+/* 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(envPath)) {
+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/gen_ai/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
-import * as crypto from "crypto";
-import * as fs from "fs/promises";
+import crypto from "crypto";
+import fs from "fs/promises";
 import { pki } from "node-forge";
-import * as path from "path";
+import path from "path";
 
 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,12 +1,13 @@
 /* eslint-disable no-console */
 import { generatePreviewUrl } from "@canva/cli";
-import * as ngrok from "@ngrok/ngrok";
-import * as chalk from "chalk";
-import * as Table from "cli-table3";
-import * as nodemon from "nodemon";
+import ngrok from "@ngrok/ngrok";
+import chalk from "chalk";
+import Table from "cli-table3";
+import nodemon from "nodemon";
 import open from "open";
-import * as webpack from "webpack";
-import * as WebpackDevServer from "webpack-dev-server";
+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";
@@ -18,6 +19,22 @@ 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(
@@ -189,9 +206,14 @@ export class AppRunner {
       return;
     }
 
+    const modifierKey = getModifierKey();
+
     table.push([
       previewCellHeader,
-      { content: "Preview URL", href: generatePreviewResult.data },
+      {
+        content: `Preview URL (${modifierKey} + click)`,
+        href: generatePreviewResult.data,
+      },
     ]);
 
     if (openPreview) {

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

@@ -1,5 +1,5 @@
-import * as fs from "fs";
-import * as path from "path";
+import fs from "fs";
+import path from "path";
 
 interface CliArgs {
   example?: string;

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

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import * as yargs from "yargs";
+import yargs from "yargs";
 import { hideBin } from "yargs/helpers";
 import { AppRunner } from "./app_runner";
 import { Context } from "./context";

package/templates/gen_ai/tsconfig.json

@@ -18,7 +18,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "noImplicitOverride": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
     "rootDir": ".",
     "outDir": "dist",
     "strict": true,

package/templates/gen_ai/utils/backend/base_backend/create.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 import debug from "debug";
-import * as express from "express";
+import express from "express";
 import type { NextFunction, Request, Response } from "express";
-import * as fs from "fs";
-import * as http from "http";
-import * as https from "https";
+import fs from "fs";
+import http from "http";
+import https from "https";
 
 const serverDebug = debug("server");
 

package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import * as debug from "debug";
+import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";

package/templates/gen_ai/webpack.config.ts

@@ -1,9 +1,9 @@
 import type { Configuration } from "webpack";
 import { DefinePlugin, optimize } from "webpack";
-import * as path from "path";
-import * as TerserPlugin from "terser-webpack-plugin";
+import path from "path";
+import TerserPlugin from "terser-webpack-plugin";
 import { transform } from "@formatjs/ts-transformer";
-import * as chalk from "chalk";
+import chalk from "chalk";
 import { config } from "dotenv";
 import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 

package/templates/hello_world/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.1.1",
-    "@canva/app-ui-kit": "^5.2.0",
+    "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",