@canva/cli 0.0.1-beta.15 → 0.0.1-beta.17

package/templates/hello_world/package.json

@@ -4,7 +4,7 @@
   "description": "An empty Canva App",
   "scripts": {
     "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
-    "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
+    "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",
@@ -15,11 +15,11 @@
     "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
     "test:update": "npm run test -- -u",
-    "postinstall": "ts-node ./scripts/copy-env.ts"
+    "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.5.0",
+    "@canva/app-ui-kit": "^4.7.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -32,9 +32,9 @@
   "devDependencies": {
     "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
     "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.16.0",
-    "@formatjs/cli": "6.3.14",
-    "@formatjs/ts-transformer": "3.13.26",
+    "@eslint/js": "9.18.0",
+    "@formatjs/cli": "6.3.15",
+    "@formatjs/ts-transformer": "3.13.27",
     "@ngrok/ngrok": "1.4.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
@@ -50,8 +50,8 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.18.0",
-    "@typescript-eslint/parser": "8.18.0",
+    "@typescript-eslint/eslint-plugin": "8.20.0",
+    "@typescript-eslint/parser": "8.20.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
@@ -59,10 +59,11 @@
     "cssnano": "7.0.6",
     "debug": "4.4.0",
     "dotenv": "16.4.7",
-    "eslint": "9.16.0",
+    "eslint": "9.18.0",
     "eslint-plugin-formatjs": "5.2.8",
-    "eslint-plugin-jest": "28.9.0",
-    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-jest": "28.11.0",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-unicorn": "56.0.1",
     "express": "4.21.2",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
@@ -79,15 +80,15 @@
     "prettier": "3.4.2",
     "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.10",
+    "terser-webpack-plugin": "5.3.11",
     "ts-jest": "29.2.5",
-    "ts-loader": "9.5.1",
+    "ts-loader": "9.5.2",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.1.0",
+    "webpack-dev-server": "5.2.0",
     "yargs": "17.7.2"
   }
 }

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.cjs";
+import { buildConfig } from "../../webpack.config.js";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";

package/templates/hello_world/src/tests/__snapshots__/app.tests.tsx.snap

@@ -10,7 +10,7 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
       style="--NZu1Zw: 16px;"
     >
       <p
-        class="D6xAvw E44aNA rU8RQQ"
+        class="aWBg0w aZskFA u16U_g"
       >
         To make changes to this app, edit the 
         <code>
@@ -19,7 +19,7 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
          file, then close and reopen the app in the editor to preview the changes.
       </p>
       <button
-        class="_5KtATA LQzFZw xwTbNA _8ERLTg rV61VQ LQzFZw xwTbNA _4_iekA _3oHQrw j34Zww aqbYPg _3FvZZg"
+        class="_5KtATA LQzFZw VgvqkQ _8ERLTg rV61VQ LQzFZw VgvqkQ _4_iekA _3oHQrw j34Zww aqbYPg _3FvZZg"
         type="button"
       >
         <span
@@ -29,7 +29,7 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
         </span>
       </button>
       <button
-        class="_5KtATA LQzFZw xwTbNA _8ERLTg Z3nT2A LQzFZw xwTbNA _4_iekA j34Zww aqbYPg _3FvZZg"
+        class="_5KtATA LQzFZw VgvqkQ _8ERLTg Z3nT2A LQzFZw VgvqkQ _4_iekA j34Zww aqbYPg _3FvZZg"
         type="button"
       >
         <span

package/templates/hello_world/{webpack.config.cjs → webpack.config.ts}

@@ -1,31 +1,33 @@
-require("dotenv").config();
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-const { DefinePlugin, optimize } = require("webpack");
-const chalk = require("chalk");
-const { transform } = require("@formatjs/ts-transformer");
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 
-/**
- *
- * @param {Object} [options]
- * @param {string} [options.appEntry=./src/index.tsx]
- * @param {string} [options.backendHost]
- * @param {Object} [options.devConfig]
- * @param {number} [options.devConfig.port]
- * @param {boolean} [options.devConfig.enableHmr]
- * @param {boolean} [options.devConfig.enableHttps]
- * @param {string} [options.devConfig.appOrigin]
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.devConfig.certFile]
- * @param {string} [options.devConfig.keyFile]
- * @returns {Object}
- */
-function buildConfig({
+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,
-} = {}) {
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+} = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
   if (!backendHost) {
@@ -174,33 +176,23 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-      mode === "development" && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }
 
-/**
- *
- * @param {Object} [options]
- * @param {number} [options.port]
- * @param {boolean} [options.enableHmr]
- * @param {boolean} [options.enableHttps]
- * @param {string} [options.appOrigin]
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.certFile]
- * @param {string} [options.keyFile]
- * @returns {Object|null}
- */
-function buildDevConfig(options) {
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
   if (!options) {
-    return null;
+    return {};
   }
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
 
-  let devServer = {
+  let devServer: DevServerConfiguration = {
     server: enableHttps
       ? {
           type: "https",
@@ -267,6 +259,4 @@ function buildDevConfig(options) {
   };
 }
 
-module.exports = () => buildConfig();
-
-module.exports.buildConfig = buildConfig;
+export default buildConfig;