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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.16",
+  "version": "0.0.1-beta.18",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
@@ -24,7 +24,7 @@
     "lib"
   ],
   "dependencies": {
-    "ink": "5.0.1",
+    "ink": "5.1.0",
     "react": "18.3.1"
   },
   "keywords": [

package/templates/base/eslint.config.mjs

@@ -2,8 +2,8 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-import i18n from "./conf/eslint-i18n.mjs";
+import general from "./conf/eslint_general.mjs";
+import i18n from "./conf/eslint_i18n.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

package/templates/base/package.json

@@ -6,7 +6,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.6.0",
+    "@canva/app-ui-kit": "^4.7.1",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -55,15 +55,15 @@
     "prettier": "3.4.2",
     "prompts": "2.4.2",
     "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"
   },
   "keywords": [

package/templates/base/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";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";

package/templates/{dam/webpack.config.cjs → base/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;

package/templates/common/conf/{eslint-general.mjs → eslint_general.mjs}

@@ -2,6 +2,7 @@ import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import jest from "eslint-plugin-jest";
 import react from "eslint-plugin-react";
 import globals from "globals";
+import eslintPluginUnicorn from "eslint-plugin-unicorn";
 
 export default [
   {
@@ -9,6 +10,7 @@ export default [
       "@typescript-eslint": typescriptEslint,
       jest,
       react,
+      unicorn: eslintPluginUnicorn,
     },
     languageOptions: {
       globals: {
@@ -178,6 +180,12 @@ export default [
           message:
             "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/",
         },
+        {
+          selector:
+            "MemberExpression[object.name='localStorage'], MemberExpression[object.name='sessionStorage']",
+          message:
+            "Using `localStorage` or `sessionStorage` may not be appropriate for certain types of data, such as sensitive information. If your use case is safe and does not involve storing sensitive data (e.g., access tokens or keys), you can ignore this warning with an eslint-disable comment. Otherwise, seek secure storage alternatives. For more details, refer to the Canva Security Guidelines (https://www.canva.dev/docs/apps/security-guidelines/#store-secrets-securely).",
+        },
       ],
       "no-restricted-imports": [
         "warn",
@@ -220,6 +228,12 @@ export default [
       "prefer-rest-params": "error",
       "prefer-spread": "error",
       radix: "error",
+      "unicorn/filename-case": [
+        "error",
+        {
+          case: "snakeCase",
+        },
+      ],
     },
   },
   {

package/templates/dam/eslint.config.mjs

@@ -2,8 +2,8 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-// import i18n from "./conf/eslint-i18n.mjs";
+import general from "./conf/eslint_general.mjs";
+// import i18n from "./conf/eslint_i18n.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

package/templates/dam/package.json

@@ -4,7 +4,7 @@
   "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",
-    "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",
@@ -14,12 +14,12 @@
     "start": "ts-node ./scripts/start/start.ts",
     "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
-    "postinstall": "ts-node ./scripts/copy-env.ts"
+    "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
     "@canva/app-components": "^1.1.0",
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.6.0",
+    "@canva/app-ui-kit": "^4.7.1",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -34,9 +34,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",
@@ -55,8 +55,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",
@@ -64,10 +64,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",
     "exponential-backoff": "3.1.1",
     "express": "4.21.2",
     "express-basic-auth": "1.2.1",
@@ -86,15 +87,15 @@
     "prompts": "2.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/dam/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";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";

package/templates/{base/webpack.config.cjs → dam/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;

package/templates/gen_ai/eslint.config.mjs

@@ -2,8 +2,8 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-import i18n from "./conf/eslint-i18n.mjs";
+import general from "./conf/eslint_general.mjs";
+import i18n from "./conf/eslint_i18n.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

package/templates/gen_ai/package.json

@@ -4,7 +4,7 @@
   "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",
-    "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",
@@ -14,11 +14,11 @@
     "start": "ts-node ./scripts/start/start.ts",
     "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
-    "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.6.0",
+    "@canva/app-ui-kit": "^4.7.1",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -26,7 +26,7 @@
     "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.2.0",
+    "html-react-parser": "5.2.2",
     "obscenity": "0.4.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -37,9 +37,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",
@@ -56,9 +56,11 @@
     "@types/prompts": "2.4.9",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
+    "@types/webpack": "5.28.5",
+    "@types/webpack-dev-server": "4.7.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",
@@ -66,10 +68,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",
     "exponential-backoff": "3.1.1",
     "express": "4.21.2",
     "express-basic-auth": "1.2.1",
@@ -88,15 +91,15 @@
     "prompts": "2.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/gen_ai/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";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";

package/templates/{hello_world/webpack.config.cjs → gen_ai/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;