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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/cli.js +450 -454
  2. package/lib/cjs/index.cjs +318 -322
  3. package/lib/esm/index.mjs +318 -322
  4. package/package.json +2 -2
  5. package/templates/base/eslint.config.mjs +2 -2
  6. package/templates/base/package.json +4 -4
  7. package/templates/base/scripts/start/app_runner.ts +1 -1
  8. package/templates/{dam/webpack.config.cjs → base/webpack.config.ts} +33 -43
  9. package/templates/common/conf/{eslint-general.mjs → eslint_general.mjs} +8 -0
  10. package/templates/dam/eslint.config.mjs +2 -2
  11. package/templates/dam/package.json +15 -14
  12. package/templates/dam/scripts/start/app_runner.ts +1 -1
  13. package/templates/{base/webpack.config.cjs → dam/webpack.config.ts} +33 -43
  14. package/templates/gen_ai/eslint.config.mjs +2 -2
  15. package/templates/gen_ai/package.json +18 -15
  16. package/templates/gen_ai/scripts/start/app_runner.ts +1 -1
  17. package/templates/{hello_world/webpack.config.cjs → gen_ai/webpack.config.ts} +33 -43
  18. package/templates/hello_world/eslint.config.mjs +2 -2
  19. package/templates/hello_world/package.json +15 -14
  20. package/templates/hello_world/scripts/start/app_runner.ts +1 -1
  21. package/templates/{gen_ai/webpack.config.cjs → hello_world/webpack.config.ts} +33 -43
  22. /package/templates/base/scripts/{copy-env.ts → copy_env.ts} +0 -0
  23. /package/templates/common/conf/{eslint-i18n.mjs → eslint_i18n.mjs} +0 -0
  24. /package/templates/dam/scripts/{copy-env.ts → copy_env.ts} +0 -0
  25. /package/templates/gen_ai/scripts/{copy-env.ts → copy_env.ts} +0 -0
  26. /package/templates/hello_world/scripts/{copy-env.ts → copy_env.ts} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canva/cli",
3
- "version": "0.0.1-beta.16",
3
+ "version": "0.0.1-beta.17",
4
4
  "description": "The official Canva CLI.",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Canva Pty Ltd.",
@@ -24,7 +24,7 @@
24
24
  "lib"
25
25
  ],
26
26
  "dependencies": {
27
- "ink": "5.0.1",
27
+ "ink": "5.1.0",
28
28
  "react": "18.3.1"
29
29
  },
30
30
  "keywords": [
@@ -2,8 +2,8 @@ import path from "node:path";
2
2
  import { fileURLToPath } from "node:url";
3
3
  import js from "@eslint/js";
4
4
  import { FlatCompat } from "@eslint/eslintrc";
5
- import general from "./conf/eslint-general.mjs";
6
- import i18n from "./conf/eslint-i18n.mjs";
5
+ import general from "./conf/eslint_general.mjs";
6
+ import i18n from "./conf/eslint_i18n.mjs";
7
7
 
8
8
  const __filename = fileURLToPath(import.meta.url);
9
9
  const __dirname = path.dirname(__filename);
@@ -6,7 +6,7 @@
6
6
  "license": "SEE LICENSE IN LICENSE.md",
7
7
  "author": "Canva Pty Ltd.",
8
8
  "dependencies": {
9
- "@canva/app-ui-kit": "^4.6.0",
9
+ "@canva/app-ui-kit": "^4.7.0",
10
10
  "@canva/asset": "^2.1.0",
11
11
  "@canva/design": "^2.3.0",
12
12
  "@canva/error": "^2.1.0",
@@ -55,15 +55,15 @@
55
55
  "prettier": "3.4.2",
56
56
  "prompts": "2.4.2",
57
57
  "style-loader": "4.0.0",
58
- "terser-webpack-plugin": "5.3.10",
58
+ "terser-webpack-plugin": "5.3.11",
59
59
  "ts-jest": "29.2.5",
60
- "ts-loader": "9.5.1",
60
+ "ts-loader": "9.5.2",
61
61
  "ts-node": "10.9.2",
62
62
  "typescript": "5.5.4",
63
63
  "url-loader": "4.1.1",
64
64
  "webpack": "5.97.1",
65
65
  "webpack-cli": "5.1.4",
66
- "webpack-dev-server": "5.1.0",
66
+ "webpack-dev-server": "5.2.0",
67
67
  "yargs": "17.7.2"
68
68
  },
69
69
  "keywords": [
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable no-console */
2
2
  import type { Context } from "./context";
3
3
  import * as chalk from "chalk";
4
- import { buildConfig } from "../../webpack.config.cjs";
4
+ import { buildConfig } from "../../webpack.config.js";
5
5
  import * as ngrok from "@ngrok/ngrok";
6
6
  import * as nodemon from "nodemon";
7
7
  import * as Table from "cli-table3";
@@ -1,31 +1,33 @@
1
- require("dotenv").config();
2
- const path = require("path");
3
- const TerserPlugin = require("terser-webpack-plugin");
4
- const { DefinePlugin, optimize } = require("webpack");
5
- const chalk = require("chalk");
6
- const { transform } = require("@formatjs/ts-transformer");
7
- const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
1
+ import type { Configuration } from "webpack";
2
+ import { DefinePlugin, optimize } from "webpack";
3
+ import * as path from "path";
4
+ import * as TerserPlugin from "terser-webpack-plugin";
5
+ import { transform } from "@formatjs/ts-transformer";
6
+ import * as chalk from "chalk";
7
+ import { config } from "dotenv";
8
+ import { Configuration as DevServerConfiguration } from "webpack-dev-server";
8
9
 
9
- /**
10
- *
11
- * @param {Object} [options]
12
- * @param {string} [options.appEntry=./src/index.tsx]
13
- * @param {string} [options.backendHost]
14
- * @param {Object} [options.devConfig]
15
- * @param {number} [options.devConfig.port]
16
- * @param {boolean} [options.devConfig.enableHmr]
17
- * @param {boolean} [options.devConfig.enableHttps]
18
- * @param {string} [options.devConfig.appOrigin]
19
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
20
- * @param {string} [options.devConfig.certFile]
21
- * @param {string} [options.devConfig.keyFile]
22
- * @returns {Object}
23
- */
24
- function buildConfig({
10
+ config();
11
+
12
+ type DevConfig = {
13
+ port: number;
14
+ enableHmr: boolean;
15
+ enableHttps: boolean;
16
+ appOrigin?: string;
17
+ appId?: string; // Deprecated in favour of appOrigin
18
+ certFile?: string;
19
+ keyFile?: string;
20
+ };
21
+
22
+ export function buildConfig({
25
23
  devConfig,
26
24
  appEntry = path.join(process.cwd(), "src", "index.tsx"),
27
25
  backendHost = process.env.CANVA_BACKEND_HOST,
28
- } = {}) {
26
+ }: {
27
+ devConfig?: DevConfig;
28
+ appEntry?: string;
29
+ backendHost?: string;
30
+ } = {}): Configuration & DevServerConfiguration {
29
31
  const mode = devConfig ? "development" : "production";
30
32
 
31
33
  if (!backendHost) {
@@ -174,33 +176,23 @@ function buildConfig({
174
176
  }),
175
177
  // Apps can only submit a single JS file via the developer portal
176
178
  new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
177
- mode === "development" && new ReactRefreshWebpackPlugin(),
178
179
  ].filter(Boolean),
179
180
  ...buildDevConfig(devConfig),
180
181
  };
181
182
  }
182
183
 
183
- /**
184
- *
185
- * @param {Object} [options]
186
- * @param {number} [options.port]
187
- * @param {boolean} [options.enableHmr]
188
- * @param {boolean} [options.enableHttps]
189
- * @param {string} [options.appOrigin]
190
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
191
- * @param {string} [options.certFile]
192
- * @param {string} [options.keyFile]
193
- * @returns {Object|null}
194
- */
195
- function buildDevConfig(options) {
184
+ function buildDevConfig(options?: DevConfig): {
185
+ devtool?: string;
186
+ devServer?: DevServerConfiguration;
187
+ } {
196
188
  if (!options) {
197
- return null;
189
+ return {};
198
190
  }
199
191
 
200
192
  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
201
193
  options;
202
194
 
203
- let devServer = {
195
+ let devServer: DevServerConfiguration = {
204
196
  server: enableHttps
205
197
  ? {
206
198
  type: "https",
@@ -267,6 +259,4 @@ function buildDevConfig(options) {
267
259
  };
268
260
  }
269
261
 
270
- module.exports = () => buildConfig();
271
-
272
- module.exports.buildConfig = buildConfig;
262
+ export default buildConfig;
@@ -2,6 +2,7 @@ import typescriptEslint from "@typescript-eslint/eslint-plugin";
2
2
  import jest from "eslint-plugin-jest";
3
3
  import react from "eslint-plugin-react";
4
4
  import globals from "globals";
5
+ import eslintPluginUnicorn from "eslint-plugin-unicorn";
5
6
 
6
7
  export default [
7
8
  {
@@ -9,6 +10,7 @@ export default [
9
10
  "@typescript-eslint": typescriptEslint,
10
11
  jest,
11
12
  react,
13
+ unicorn: eslintPluginUnicorn,
12
14
  },
13
15
  languageOptions: {
14
16
  globals: {
@@ -220,6 +222,12 @@ export default [
220
222
  "prefer-rest-params": "error",
221
223
  "prefer-spread": "error",
222
224
  radix: "error",
225
+ "unicorn/filename-case": [
226
+ "error",
227
+ {
228
+ case: "snakeCase",
229
+ },
230
+ ],
223
231
  },
224
232
  },
225
233
  {
@@ -2,8 +2,8 @@ import path from "node:path";
2
2
  import { fileURLToPath } from "node:url";
3
3
  import js from "@eslint/js";
4
4
  import { FlatCompat } from "@eslint/eslintrc";
5
- import general from "./conf/eslint-general.mjs";
6
- // import i18n from "./conf/eslint-i18n.mjs";
5
+ import general from "./conf/eslint_general.mjs";
6
+ // import i18n from "./conf/eslint_i18n.mjs";
7
7
 
8
8
  const __filename = fileURLToPath(import.meta.url);
9
9
  const __dirname = path.dirname(__filename);
@@ -4,7 +4,7 @@
4
4
  "description": "An example app leveraging @canva/app-components to develop a digital asset management (DAM) app.",
5
5
  "scripts": {
6
6
  "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
7
- "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
7
+ "build": "webpack --config webpack.config.ts --mode production && npm run extract",
8
8
  "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
9
9
  "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
10
10
  "format:file": "prettier $1 --no-config --write",
@@ -14,12 +14,12 @@
14
14
  "start": "ts-node ./scripts/start/start.ts",
15
15
  "test": "jest --no-cache",
16
16
  "test:watch": "jest --watchAll",
17
- "postinstall": "ts-node ./scripts/copy-env.ts"
17
+ "postinstall": "ts-node ./scripts/copy_env.ts"
18
18
  },
19
19
  "dependencies": {
20
20
  "@canva/app-components": "^1.1.0",
21
21
  "@canva/app-i18n-kit": "^1.0.2",
22
- "@canva/app-ui-kit": "^4.6.0",
22
+ "@canva/app-ui-kit": "^4.7.0",
23
23
  "@canva/asset": "^2.1.0",
24
24
  "@canva/design": "^2.3.0",
25
25
  "@canva/error": "^2.1.0",
@@ -34,9 +34,9 @@
34
34
  "devDependencies": {
35
35
  "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
36
36
  "@eslint/eslintrc": "3.2.0",
37
- "@eslint/js": "9.16.0",
38
- "@formatjs/cli": "6.3.14",
39
- "@formatjs/ts-transformer": "3.13.26",
37
+ "@eslint/js": "9.18.0",
38
+ "@formatjs/cli": "6.3.15",
39
+ "@formatjs/ts-transformer": "3.13.27",
40
40
  "@ngrok/ngrok": "1.4.1",
41
41
  "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
42
42
  "@svgr/webpack": "8.1.0",
@@ -55,8 +55,8 @@
55
55
  "@types/react": "18.3.12",
56
56
  "@types/react-dom": "18.3.1",
57
57
  "@types/webpack-env": "1.18.5",
58
- "@typescript-eslint/eslint-plugin": "8.18.0",
59
- "@typescript-eslint/parser": "8.18.0",
58
+ "@typescript-eslint/eslint-plugin": "8.20.0",
59
+ "@typescript-eslint/parser": "8.20.0",
60
60
  "chalk": "4.1.2",
61
61
  "cli-table3": "0.6.5",
62
62
  "css-loader": "7.1.2",
@@ -64,10 +64,11 @@
64
64
  "cssnano": "7.0.6",
65
65
  "debug": "4.4.0",
66
66
  "dotenv": "16.4.7",
67
- "eslint": "9.16.0",
67
+ "eslint": "9.18.0",
68
68
  "eslint-plugin-formatjs": "5.2.8",
69
- "eslint-plugin-jest": "28.9.0",
70
- "eslint-plugin-react": "7.37.2",
69
+ "eslint-plugin-jest": "28.11.0",
70
+ "eslint-plugin-react": "7.37.4",
71
+ "eslint-plugin-unicorn": "56.0.1",
71
72
  "exponential-backoff": "3.1.1",
72
73
  "express": "4.21.2",
73
74
  "express-basic-auth": "1.2.1",
@@ -86,15 +87,15 @@
86
87
  "prompts": "2.4.2",
87
88
  "react-refresh": "0.16.0",
88
89
  "style-loader": "4.0.0",
89
- "terser-webpack-plugin": "5.3.10",
90
+ "terser-webpack-plugin": "5.3.11",
90
91
  "ts-jest": "29.2.5",
91
- "ts-loader": "9.5.1",
92
+ "ts-loader": "9.5.2",
92
93
  "ts-node": "10.9.2",
93
94
  "typescript": "5.5.4",
94
95
  "url-loader": "4.1.1",
95
96
  "webpack": "5.97.1",
96
97
  "webpack-cli": "5.1.4",
97
- "webpack-dev-server": "5.1.0",
98
+ "webpack-dev-server": "5.2.0",
98
99
  "yargs": "17.7.2"
99
100
  }
100
101
  }
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable no-console */
2
2
  import type { Context } from "./context";
3
3
  import * as chalk from "chalk";
4
- import { buildConfig } from "../../webpack.config.cjs";
4
+ import { buildConfig } from "../../webpack.config.js";
5
5
  import * as ngrok from "@ngrok/ngrok";
6
6
  import * as nodemon from "nodemon";
7
7
  import * as Table from "cli-table3";
@@ -1,31 +1,33 @@
1
- require("dotenv").config();
2
- const path = require("path");
3
- const TerserPlugin = require("terser-webpack-plugin");
4
- const { DefinePlugin, optimize } = require("webpack");
5
- const chalk = require("chalk");
6
- const { transform } = require("@formatjs/ts-transformer");
7
- const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
1
+ import type { Configuration } from "webpack";
2
+ import { DefinePlugin, optimize } from "webpack";
3
+ import * as path from "path";
4
+ import * as TerserPlugin from "terser-webpack-plugin";
5
+ import { transform } from "@formatjs/ts-transformer";
6
+ import * as chalk from "chalk";
7
+ import { config } from "dotenv";
8
+ import { Configuration as DevServerConfiguration } from "webpack-dev-server";
8
9
 
9
- /**
10
- *
11
- * @param {Object} [options]
12
- * @param {string} [options.appEntry=./src/index.tsx]
13
- * @param {string} [options.backendHost]
14
- * @param {Object} [options.devConfig]
15
- * @param {number} [options.devConfig.port]
16
- * @param {boolean} [options.devConfig.enableHmr]
17
- * @param {boolean} [options.devConfig.enableHttps]
18
- * @param {string} [options.devConfig.appOrigin]
19
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
20
- * @param {string} [options.devConfig.certFile]
21
- * @param {string} [options.devConfig.keyFile]
22
- * @returns {Object}
23
- */
24
- function buildConfig({
10
+ config();
11
+
12
+ type DevConfig = {
13
+ port: number;
14
+ enableHmr: boolean;
15
+ enableHttps: boolean;
16
+ appOrigin?: string;
17
+ appId?: string; // Deprecated in favour of appOrigin
18
+ certFile?: string;
19
+ keyFile?: string;
20
+ };
21
+
22
+ export function buildConfig({
25
23
  devConfig,
26
24
  appEntry = path.join(process.cwd(), "src", "index.tsx"),
27
25
  backendHost = process.env.CANVA_BACKEND_HOST,
28
- } = {}) {
26
+ }: {
27
+ devConfig?: DevConfig;
28
+ appEntry?: string;
29
+ backendHost?: string;
30
+ } = {}): Configuration & DevServerConfiguration {
29
31
  const mode = devConfig ? "development" : "production";
30
32
 
31
33
  if (!backendHost) {
@@ -174,33 +176,23 @@ function buildConfig({
174
176
  }),
175
177
  // Apps can only submit a single JS file via the developer portal
176
178
  new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
177
- mode === "development" && new ReactRefreshWebpackPlugin(),
178
179
  ].filter(Boolean),
179
180
  ...buildDevConfig(devConfig),
180
181
  };
181
182
  }
182
183
 
183
- /**
184
- *
185
- * @param {Object} [options]
186
- * @param {number} [options.port]
187
- * @param {boolean} [options.enableHmr]
188
- * @param {boolean} [options.enableHttps]
189
- * @param {string} [options.appOrigin]
190
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
191
- * @param {string} [options.certFile]
192
- * @param {string} [options.keyFile]
193
- * @returns {Object|null}
194
- */
195
- function buildDevConfig(options) {
184
+ function buildDevConfig(options?: DevConfig): {
185
+ devtool?: string;
186
+ devServer?: DevServerConfiguration;
187
+ } {
196
188
  if (!options) {
197
- return null;
189
+ return {};
198
190
  }
199
191
 
200
192
  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
201
193
  options;
202
194
 
203
- let devServer = {
195
+ let devServer: DevServerConfiguration = {
204
196
  server: enableHttps
205
197
  ? {
206
198
  type: "https",
@@ -267,6 +259,4 @@ function buildDevConfig(options) {
267
259
  };
268
260
  }
269
261
 
270
- module.exports = () => buildConfig();
271
-
272
- module.exports.buildConfig = buildConfig;
262
+ export default buildConfig;
@@ -2,8 +2,8 @@ import path from "node:path";
2
2
  import { fileURLToPath } from "node:url";
3
3
  import js from "@eslint/js";
4
4
  import { FlatCompat } from "@eslint/eslintrc";
5
- import general from "./conf/eslint-general.mjs";
6
- import i18n from "./conf/eslint-i18n.mjs";
5
+ import general from "./conf/eslint_general.mjs";
6
+ import i18n from "./conf/eslint_i18n.mjs";
7
7
 
8
8
  const __filename = fileURLToPath(import.meta.url);
9
9
  const __dirname = path.dirname(__filename);
@@ -4,7 +4,7 @@
4
4
  "description": "An example app demonstrating common patterns that you might use in a generative AI app.",
5
5
  "scripts": {
6
6
  "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
7
- "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
7
+ "build": "webpack --config webpack.config.ts --mode production && npm run extract",
8
8
  "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
9
9
  "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
10
10
  "format:file": "prettier $1 --no-config --write",
@@ -14,11 +14,11 @@
14
14
  "start": "ts-node ./scripts/start/start.ts",
15
15
  "test": "jest --no-cache",
16
16
  "test:watch": "jest --watchAll",
17
- "postinstall": "ts-node ./scripts/copy-env.ts"
17
+ "postinstall": "ts-node ./scripts/copy_env.ts"
18
18
  },
19
19
  "dependencies": {
20
20
  "@canva/app-i18n-kit": "^1.0.2",
21
- "@canva/app-ui-kit": "^4.6.0",
21
+ "@canva/app-ui-kit": "^4.7.0",
22
22
  "@canva/asset": "^2.1.0",
23
23
  "@canva/design": "^2.3.0",
24
24
  "@canva/error": "^2.1.0",
@@ -26,7 +26,7 @@
26
26
  "@canva/user": "^2.1.0",
27
27
  "cookie-parser": "1.4.7",
28
28
  "cors": "2.8.5",
29
- "html-react-parser": "5.2.0",
29
+ "html-react-parser": "5.2.2",
30
30
  "obscenity": "0.4.1",
31
31
  "react": "18.3.1",
32
32
  "react-dom": "18.3.1",
@@ -37,9 +37,9 @@
37
37
  "devDependencies": {
38
38
  "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
39
39
  "@eslint/eslintrc": "3.2.0",
40
- "@eslint/js": "9.16.0",
41
- "@formatjs/cli": "6.3.14",
42
- "@formatjs/ts-transformer": "3.13.26",
40
+ "@eslint/js": "9.18.0",
41
+ "@formatjs/cli": "6.3.15",
42
+ "@formatjs/ts-transformer": "3.13.27",
43
43
  "@ngrok/ngrok": "1.4.1",
44
44
  "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
45
45
  "@svgr/webpack": "8.1.0",
@@ -56,9 +56,11 @@
56
56
  "@types/prompts": "2.4.9",
57
57
  "@types/react": "18.3.12",
58
58
  "@types/react-dom": "18.3.1",
59
+ "@types/webpack": "5.28.5",
60
+ "@types/webpack-dev-server": "4.7.1",
59
61
  "@types/webpack-env": "1.18.5",
60
- "@typescript-eslint/eslint-plugin": "8.18.0",
61
- "@typescript-eslint/parser": "8.18.0",
62
+ "@typescript-eslint/eslint-plugin": "8.20.0",
63
+ "@typescript-eslint/parser": "8.20.0",
62
64
  "chalk": "4.1.2",
63
65
  "cli-table3": "0.6.5",
64
66
  "css-loader": "7.1.2",
@@ -66,10 +68,11 @@
66
68
  "cssnano": "7.0.6",
67
69
  "debug": "4.4.0",
68
70
  "dotenv": "16.4.7",
69
- "eslint": "9.16.0",
71
+ "eslint": "9.18.0",
70
72
  "eslint-plugin-formatjs": "5.2.8",
71
- "eslint-plugin-jest": "28.9.0",
72
- "eslint-plugin-react": "7.37.2",
73
+ "eslint-plugin-jest": "28.11.0",
74
+ "eslint-plugin-react": "7.37.4",
75
+ "eslint-plugin-unicorn": "56.0.1",
73
76
  "exponential-backoff": "3.1.1",
74
77
  "express": "4.21.2",
75
78
  "express-basic-auth": "1.2.1",
@@ -88,15 +91,15 @@
88
91
  "prompts": "2.4.2",
89
92
  "react-refresh": "0.16.0",
90
93
  "style-loader": "4.0.0",
91
- "terser-webpack-plugin": "5.3.10",
94
+ "terser-webpack-plugin": "5.3.11",
92
95
  "ts-jest": "29.2.5",
93
- "ts-loader": "9.5.1",
96
+ "ts-loader": "9.5.2",
94
97
  "ts-node": "10.9.2",
95
98
  "typescript": "5.5.4",
96
99
  "url-loader": "4.1.1",
97
100
  "webpack": "5.97.1",
98
101
  "webpack-cli": "5.1.4",
99
- "webpack-dev-server": "5.1.0",
102
+ "webpack-dev-server": "5.2.0",
100
103
  "yargs": "17.7.2"
101
104
  }
102
105
  }
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable no-console */
2
2
  import type { Context } from "./context";
3
3
  import * as chalk from "chalk";
4
- import { buildConfig } from "../../webpack.config.cjs";
4
+ import { buildConfig } from "../../webpack.config.js";
5
5
  import * as ngrok from "@ngrok/ngrok";
6
6
  import * as nodemon from "nodemon";
7
7
  import * as Table from "cli-table3";
@@ -1,31 +1,33 @@
1
- require("dotenv").config();
2
- const path = require("path");
3
- const TerserPlugin = require("terser-webpack-plugin");
4
- const { DefinePlugin, optimize } = require("webpack");
5
- const chalk = require("chalk");
6
- const { transform } = require("@formatjs/ts-transformer");
7
- const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
1
+ import type { Configuration } from "webpack";
2
+ import { DefinePlugin, optimize } from "webpack";
3
+ import * as path from "path";
4
+ import * as TerserPlugin from "terser-webpack-plugin";
5
+ import { transform } from "@formatjs/ts-transformer";
6
+ import * as chalk from "chalk";
7
+ import { config } from "dotenv";
8
+ import { Configuration as DevServerConfiguration } from "webpack-dev-server";
8
9
 
9
- /**
10
- *
11
- * @param {Object} [options]
12
- * @param {string} [options.appEntry=./src/index.tsx]
13
- * @param {string} [options.backendHost]
14
- * @param {Object} [options.devConfig]
15
- * @param {number} [options.devConfig.port]
16
- * @param {boolean} [options.devConfig.enableHmr]
17
- * @param {boolean} [options.devConfig.enableHttps]
18
- * @param {string} [options.devConfig.appOrigin]
19
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
20
- * @param {string} [options.devConfig.certFile]
21
- * @param {string} [options.devConfig.keyFile]
22
- * @returns {Object}
23
- */
24
- function buildConfig({
10
+ config();
11
+
12
+ type DevConfig = {
13
+ port: number;
14
+ enableHmr: boolean;
15
+ enableHttps: boolean;
16
+ appOrigin?: string;
17
+ appId?: string; // Deprecated in favour of appOrigin
18
+ certFile?: string;
19
+ keyFile?: string;
20
+ };
21
+
22
+ export function buildConfig({
25
23
  devConfig,
26
24
  appEntry = path.join(process.cwd(), "src", "index.tsx"),
27
25
  backendHost = process.env.CANVA_BACKEND_HOST,
28
- } = {}) {
26
+ }: {
27
+ devConfig?: DevConfig;
28
+ appEntry?: string;
29
+ backendHost?: string;
30
+ } = {}): Configuration & DevServerConfiguration {
29
31
  const mode = devConfig ? "development" : "production";
30
32
 
31
33
  if (!backendHost) {
@@ -174,33 +176,23 @@ function buildConfig({
174
176
  }),
175
177
  // Apps can only submit a single JS file via the developer portal
176
178
  new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
177
- mode === "development" && new ReactRefreshWebpackPlugin(),
178
179
  ].filter(Boolean),
179
180
  ...buildDevConfig(devConfig),
180
181
  };
181
182
  }
182
183
 
183
- /**
184
- *
185
- * @param {Object} [options]
186
- * @param {number} [options.port]
187
- * @param {boolean} [options.enableHmr]
188
- * @param {boolean} [options.enableHttps]
189
- * @param {string} [options.appOrigin]
190
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
191
- * @param {string} [options.certFile]
192
- * @param {string} [options.keyFile]
193
- * @returns {Object|null}
194
- */
195
- function buildDevConfig(options) {
184
+ function buildDevConfig(options?: DevConfig): {
185
+ devtool?: string;
186
+ devServer?: DevServerConfiguration;
187
+ } {
196
188
  if (!options) {
197
- return null;
189
+ return {};
198
190
  }
199
191
 
200
192
  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
201
193
  options;
202
194
 
203
- let devServer = {
195
+ let devServer: DevServerConfiguration = {
204
196
  server: enableHttps
205
197
  ? {
206
198
  type: "https",
@@ -267,6 +259,4 @@ function buildDevConfig(options) {
267
259
  };
268
260
  }
269
261
 
270
- module.exports = () => buildConfig();
271
-
272
- module.exports.buildConfig = buildConfig;
262
+ export default buildConfig;
@@ -2,8 +2,8 @@ import path from "node:path";
2
2
  import { fileURLToPath } from "node:url";
3
3
  import js from "@eslint/js";
4
4
  import { FlatCompat } from "@eslint/eslintrc";
5
- import general from "./conf/eslint-general.mjs";
6
- import i18n from "./conf/eslint-i18n.mjs";
5
+ import general from "./conf/eslint_general.mjs";
6
+ import i18n from "./conf/eslint_i18n.mjs";
7
7
 
8
8
  const __filename = fileURLToPath(import.meta.url);
9
9
  const __dirname = path.dirname(__filename);