@canva/cli 0.0.1-beta.3 → 0.0.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/eslint.config.mjs

@@ -20,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },

package/templates/base/package.json

@@ -6,13 +6,13 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.0.0",
-    "@canva/asset": "^1.7.1",
-    "@canva/design": "^1.10.0",
-    "@canva/error": "^1.1.0",
-    "@canva/platform": "^1.1.0",
-    "@canva/user": "^1.0.0",
-    "cookie-parser": "1.4.6",
+    "@canva/app-ui-kit": "^4.1.0",
+    "@canva/asset": "^2.0.0",
+    "@canva/design": "^2.1.0",
+    "@canva/error": "^2.0.0",
+    "@canva/platform": "^2.0.0",
+    "@canva/user": "^2.0.0",
+    "cookie-parser": "1.4.7",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
@@ -21,26 +21,26 @@
     "@svgr/webpack": "8.1.0",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.5",
-    "@types/jest": "29.5.12",
-    "@types/jsonwebtoken": "9.0.6",
+    "@types/express-serve-static-core": "4.19.6",
+    "@types/jest": "29.5.13",
+    "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
     "@types/node-fetch": "2.6.11",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.0.5",
-    "debug": "4.3.6",
+    "cssnano": "7.0.6",
+    "debug": "4.3.7",
     "dotenv": "16.4.5",
     "exponential-backoff": "3.1.1",
-    "express": "4.19.2",
+    "express": "4.21.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",
@@ -54,14 +54,14 @@
     "prompts": "2.4.2",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
+    "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.94.0",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"
   },
   "keywords": [
@@ -72,7 +72,10 @@
     "npm": "^9 || ^10"
   },
   "canvaCliMetadata": {
-    "version": "Will be read from the root NPM package",
+    "metaFields": [
+      "name",
+      "version"
+    ],
     "inheritable": [
       "author",
       "license",

package/templates/common/.gitignore.template

@@ -1,9 +1,8 @@
-.idea
-.ssl
-node_modules
 .DS_Store
-yarn-error.log
-dist
-secrets.json
 .env
+.idea
+.ssl
+*.log*
 **/*/db.json
+dist
+node_modules

package/templates/common/README.md

@@ -63,18 +63,15 @@ To preview apps in Safari:
 1. Start the development server with HTTPS enabled:
 
 ```bash
-# Run the main app
 npm start --use-https
-
-# Run an example
-npm start <example-name> --use-https
 ```
 
 2. Navigate to <https://localhost:8080>.
 3. Bypass the invalid security certificate warning:
-4. Click **Show details**.
-5. Click **Visit website**.
-6. In the Developer Portal, set the app's **Development URL** to <https://localhost:8080>.
+   1. Click **Show details**.
+   2. Click **Visit website**.
+4. In the Developer Portal, set the app's **Development URL** to <https://localhost:8080>.
+5. Click preview (or refresh your app if it's already open).
 
 You need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.
 

package/templates/common/conf/eslint-general.mjs

@@ -179,6 +179,32 @@ export default [
             "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
         },
       ],
+      "no-restricted-imports": [
+        "warn",
+        {
+          // Warn when importing static assets that increase bundle size
+          patterns: [
+            // Images
+            {
+              group: ["*.png", "*.jpg", "*.jpeg", "*.gif"],
+              message:
+                "Inline images increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
+            },
+            // Videos
+            {
+              group: ["*.mp4", "*.webm", "*.ogg"],
+              message:
+                "Inline videos increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
+            },
+            // Audio
+            {
+              group: ["*.mp3", "*.wav", "*.ogg"],
+              message:
+                "Inline audio files increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
+            },
+          ],
+        },
+      ],
       "no-return-await": "error",
       "no-throw-literal": "error",
       "no-undef-init": "error",

package/templates/common/conf/eslint-i18n.mjs

@@ -7,7 +7,22 @@ export default [
     },
     rules: {
       "formatjs/no-invalid-icu": "error",
-      "formatjs/no-literal-string-in-jsx": "error",
+      "formatjs/no-literal-string-in-jsx": [
+        2,
+        {
+          props: {
+            // These rules are for @canva/app-ui-kit components.
+            // For your own components, suppress any false positives using eslint ignore comments.
+            include: [
+              ["*", "(*Label|label|alt)"],
+              ["*", "(title|description|name|text)"],
+              ["*", "(placeholder|additionalPlaceholder|defaultValue)"],
+              ["FormField", "error"],
+            ],
+            exclude: [["FormattedMessage", "description"]],
+          },
+        },
+      ],
       "formatjs/enforce-description": "error",
       "formatjs/enforce-default-message": "error",
       "formatjs/enforce-placeholders": "error",
@@ -18,6 +33,6 @@ export default [
       "formatjs/no-offset": "error",
       "formatjs/blocklist-elements": [2, ["selectordinal"]],
       "formatjs/no-complex-selectors": "error",
-    }
-  }
+    },
+  },
 ];

package/templates/dam/package.json

@@ -3,7 +3,7 @@
   "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",
+    "extract": "formatjs extract src/**/*.{ts,tsx} --out-file dist/messages_en.json",
     "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
     "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
     "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
@@ -16,14 +16,14 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@canva/app-components": "^1.0.0-beta.28",
-    "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/app-ui-kit": "^4.0.0",
+    "@canva/app-components": "^1.0.0-beta.29",
+    "@canva/app-i18n-kit": "^1.0.0",
+    "@canva/app-ui-kit": "^4.1.0",
     "@canva/asset": "^2.0.0",
     "@canva/design": "^2.1.0",
     "@canva/platform": "^2.0.0",
     "@canva/user": "^2.0.0",
-    "cookie-parser": "1.4.6",
+    "cookie-parser": "1.4.7",
     "cors": "2.8.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.0",
+    "@eslint/js": "9.12.0",
     "@formatjs/cli": "6.2.12",
     "@formatjs/ts-transformer": "3.13.14",
     "@ngrok/ngrok": "1.4.1",
@@ -39,32 +39,32 @@
     "@types/cors": "2.8.17",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.5",
-    "@types/jest": "29.5.12",
-    "@types/jsonwebtoken": "9.0.6",
+    "@types/express-serve-static-core": "4.19.6",
+    "@types/jest": "29.5.13",
+    "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
     "@types/node-fetch": "2.6.11",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.2.0",
-    "@typescript-eslint/parser": "8.2.0",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.0.5",
-    "debug": "4.3.6",
+    "cssnano": "7.0.6",
+    "debug": "4.3.7",
     "dotenv": "16.4.5",
-    "eslint": "8.57.1",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-react": "7.35.0",
+    "eslint": "9.12.0",
+    "eslint-plugin-formatjs": "5.0.0",
+    "eslint-plugin-jest": "28.8.3",
+    "eslint-plugin-react": "7.37.1",
     "exponential-backoff": "3.1.1",
-    "express": "4.19.2",
+    "express": "4.21.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",
@@ -78,14 +78,14 @@
     "prompts": "2.4.2",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
+    "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.94.0",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"
   }
 }

package/templates/gen_ai/README.md

@@ -1,42 +1,3 @@
-## Run the development server with ngrok to use authentication with the app
-
-These steps demonstrate how to start the local development server with ngrok and https.
-
-From your app's root directory
-
-1. Stop any running scripts, and run the following command to launch the backend and frontend development servers. The `--ngrok` parameter exposes the backend server via a publicly accessible URL.
-
-   ```bash
-   npm start --ngrok
-   ```
-
-2. After ngrok is running, copy your ngrok url
-   (e.g. `https://0000-0000.ngrok-free.app`) to the clipboard.
-
-   1. Go to your app in the [Developer Portal](https://www.canva.com/developers/apps).
-   2. Navigate to the "Authentication" section of your app.
-   3. Click the "Add provider" button under the "OAuth 2.0" tab
-   4. Configure the provider as follows:
-      - Provider: local (or name of your choice)
-      - Client ID: `client_id` (exactly this string, in a real app you'd have some opaque identifier)
-      - Client Secret: `client_secret` (same here)
-      - Authorization server URL: Your ngrok url followed by `/auth/authorize` e.g. `https://0000-0000.ngrok-free.app/auth/authorize`
-      - Token exchange URL: Your ngrok url followed by `/auth/token` e.g. `https://0000-0000.ngrok-free.app/auth/token`
-      - Revocation exchange URL: (leave blank)
-      - Proof of Key for Code Exchange (PKCE): off
-        Note: Your ngrok URL changes each time you restart ngrok. Keep these fields up to
-        date to ensure your example authentication step will run.
-
-3. Navigate to your app at `https://www.canva.com/developers/apps` and make sure that under Configuration, App source is pointing to your localhost url.
-
-4. Navigate to your app at `https://www.canva.com/developers/apps`, and click **Preview** to preview the app.
-   1. A new screen will appear asking if you want to authenticate.
-      Press **Connect** to start the authentication flow.
-   2. A ngrok screen may appear. If it does, select **Visit Site**
-   3. An authentication popup will appear. For the username, enter `username`, and
-      for the password enter `password`.
-   4. If successful, you will be redirected back to your app.
-
 ## Generative AI Template
 
 This template captures best practices for improving user experience in your application.
@@ -59,7 +20,7 @@ In this template, we've included a basic obscenity filter to stop users from cre
 
 ### Backend
 
-This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls. This backend implements an [OAuth 2](https://datatracker.ietf.org/doc/html/rfc6749) Authorization Server to authorize and authenticate users. To use this, you will need to set up authentication above.
+This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls. If you require authentication for your app, we recommend looking at the authentication example provided in the [starter kit](https://github.com/canva-sdks/canva-apps-sdk-starter-kit).
 
 ### Thumbnails
 

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

@@ -93,7 +93,7 @@ export const createImageRouter = () => {
 
   /**
    * GET endpoint to retrieve user credits.
-   * Requires authentication. Returns the current number of credits available to the user.
+   * Returns the current number of credits available to the user.
    */
   router.get(Routes.CREDITS, async (req, res) => {
     res.status(200).send({
@@ -103,7 +103,7 @@ export const createImageRouter = () => {
 
   /**
    * POST endpoint to purchase credits.
-   * Requires authentication. Increments the user's credits by the number of credits in a bundle.
+   * Increments the user's credits by the number of credits in a bundle.
    * This endpoint should be backed by proper input validation to prevent misuse.
    */
   router.post(Routes.PURCHASE_CREDITS, async (req, res) => {
@@ -115,7 +115,7 @@ export const createImageRouter = () => {
 
   /**
    * GET endpoint to generate images based on a prompt.
-   * Requires authentication. Generates images based on the provided prompt and adds a job to the processing queue.
+   * Generates images based on the provided prompt and adds a job to the processing queue.
    * If there are not enough credits, it returns a 403 error.
    * If the prompt parameter is missing, it returns a 400 error.
    * Once the job is added to the queue, it returns a jobId that can be used to check the job status.

package/templates/gen_ai/backend/server.ts

@@ -2,7 +2,6 @@ import * as express from "express";
 import * as cors from "cors";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createImageRouter } from "./routers/image";
-import { createAuthRouter } from "./routers/oauth";
 
 async function main() {
   const router = express.Router();
@@ -37,12 +36,6 @@ async function main() {
    */
   router.use(cors());
 
-  /**
-   * Add routes for authorisation.
-   */
-  const authRouter = createAuthRouter();
-  router.use(authRouter);
-
   /**
    * Add routes for image generation.
    */

package/templates/gen_ai/eslint.config.mjs

@@ -20,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },

package/templates/gen_ai/package.json

@@ -3,7 +3,7 @@
   "name": "gen_ai",
   "description": "An example app demonstrating common patterns that you might use in a generative AI app.",
   "scripts": {
-    "extract": "formatjs extract 'src/**/*.{ts,tsx}' --out-file dist/messages_en.json",
+    "extract": "formatjs extract src/**/*.{ts,tsx} --out-file dist/messages_en.json",
     "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
     "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
     "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
@@ -16,57 +16,57 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/app-ui-kit": "^4.0.0",
+    "@canva/app-i18n-kit": "^1.0.0",
+    "@canva/app-ui-kit": "^4.1.0",
     "@canva/asset": "^2.0.0",
     "@canva/design": "^2.1.0",
     "@canva/platform": "^2.0.0",
     "@canva/user": "^2.0.0",
-    "cookie-parser": "1.4.6",
+    "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.1.12",
+    "html-react-parser": "5.1.18",
     "obscenity": "0.4.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.13",
     "react-intl": "6.6.8",
-    "react-router-dom": "6.26.1"
+    "react-router-dom": "6.27.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.0",
+    "@eslint/js": "9.12.0",
     "@formatjs/cli": "6.2.12",
     "@formatjs/ts-transformer": "3.13.14",
     "@ngrok/ngrok": "1.4.1",
     "@svgr/webpack": "8.1.0",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.5",
-    "@types/jest": "29.5.12",
-    "@types/jsonwebtoken": "9.0.6",
+    "@types/express-serve-static-core": "4.19.6",
+    "@types/jest": "29.5.13",
+    "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
     "@types/node-fetch": "2.6.11",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.2.0",
-    "@typescript-eslint/parser": "8.2.0",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.0.5",
-    "debug": "4.3.6",
+    "cssnano": "7.0.6",
+    "debug": "4.3.7",
     "dotenv": "16.4.5",
-    "eslint": "8.57.1",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-react": "7.35.0",
+    "eslint": "9.12.0",
+    "eslint-plugin-formatjs": "5.0.0",
+    "eslint-plugin-jest": "28.8.3",
+    "eslint-plugin-react": "7.37.1",
     "exponential-backoff": "3.1.1",
-    "express": "4.19.2",
+    "express": "4.21.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",
@@ -80,14 +80,14 @@
     "prompts": "2.4.2",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
+    "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.94.0",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"
   }
 }