Refactor and port plugin web code to TypeScript

Clean up the configuration for compiling TypeScript for the Web
interface to us its own tsconfig.web.json config files and reference the
TypeScript source files directly in the configuration and imports
instead of files compiled to dist.

To properly support recompliation with TypeScript's projects feature
each package's tsconfig.web.json file is set to output the build to
dist/web_build which is then ignored in .npmignore.  Webpack is still
used to create the proper build in dist/web, so this is mainly to make
TypeScipt's compiler happy but it also allows the root tsconfig.json
file to include the web interface code, meaning running the build script
now also checks the typing of the web interface.

Final part of #491.

.eslintrc.js

@@ -40,7 +40,11 @@ module.exports = {
 			},
 		},
 		{
-			"files": ["packages/web_ui/src/**/*.ts?(x)", "packages/lib/browser.js", "plugins/*/web/**/*.ts?(x)"],
+			"files": [
+				"packages/web_ui/src/**/*.ts?(x)",
+				"packages/lib/browser.ts",
+				"{packages,plugins}/*/web/**/*.ts?(x)",
+			],
 			"env": {
 				"browser": true,
 			},

packages/controller/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

packages/controller/tsconfig.web.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../lib" },
+		{ "path": "../web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "package.json" ],
+	"compilerOptions": {
+		"rootDir": "..",
+		"outDir": "dist/web_build",
+	}
+}

packages/controller/web/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style, no-console */
 import("@clusterio/web_ui").then(webUi => {
 	return webUi.bootstrap();
 }).catch(console.error);

packages/controller/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	devServer: {
 		contentBase: "./dist/web",
 	},

packages/lib/browser.js

@@ -1,17 +0,0 @@
-export * from "./dist/src/api";
-export * from "./dist/src/config";
-export * from "./dist/src/data";
-export * from "./dist/src/errors";
-export * from "./dist/src/factorio/exchange_string";
-export * from "./dist/src/helpers";
-export * from "./dist/src/ini";
-export * from "./dist/src/link";
-export * from "./dist/src/logging";
-export * from "./dist/src/plugin";
-export * from "./dist/src/schema";
-export * from "./dist/src/users";
-export * from "./dist/src/subscriptions";
-
-export { default as ExponentialBackoff } from "./dist/src/ExponentialBackoff";
-export { default as PlayerStats } from "./dist/src/PlayerStats";
-export { default as RateLimiter } from "./dist/src/RateLimiter";

packages/lib/browser.ts

@@ -0,0 +1,17 @@
+export * from "./src/api";
+export * from "./src/config";
+export * from "./src/data";
+export * from "./src/errors";
+export * from "./src/factorio/exchange_string";
+export * from "./src/helpers";
+export * from "./src/ini";
+export * from "./src/link";
+export * from "./src/logging";
+export * from "./src/plugin";
+export * from "./src/schema";
+export * from "./src/users";
+export * from "./src/subscriptions";
+
+export { default as ExponentialBackoff } from "./src/ExponentialBackoff";
+export { default as PlayerStats } from "./src/PlayerStats";
+export { default as RateLimiter } from "./src/RateLimiter";

packages/lib/package.json

@@ -9,7 +9,7 @@
 		"compile_validator": "node scripts/compile_validator.js"
 	},
 	"main": "dist/index.js",
-	"browser": "browser.js",
+	"browser": "browser.ts",
 	"keywords": [
 		"factorio"
 	],

packages/web_ui/package.json

@@ -5,6 +5,7 @@
 	"license": "MIT",
 	"version": "2.0.0-alpha.13",
 	"browser": "src/index.ts",
+	"main": "dist/src/index.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},

packages/web_ui/tsconfig.json

@@ -1,20 +0,0 @@
-{
-	"include": [ "src/**/*.tsx", "src/**/*.ts", "package.json", "global.d.ts" ],
-	"compilerOptions": {
-		"jsx": "react",
-		"lib": ["dom", "es2023"],
-		"module": "commonjs",
-		"target": "es2022",
-		"rootDir": "./",
-		"outDir": "dist",
-		"composite": true,
-		"sourceMap": true,
-		"strict": true,
-		"alwaysStrict": true,
-		"noImplicitAny": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
-		"noEmitOnError": true
-	}
-}

packages/web_ui/tsconfig.web.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../lib" },
+	],
+	"include": [ "src/**/*.tsx", "src/**/*.ts", "package.json", "global.d.ts" ],
+	"compilerOptions": {
+		"outDir": "dist",
+	}
+}

packages/web_ui/webpack.common.js

@@ -78,6 +78,10 @@ module.exports = (env = {}) => ({
 				exclude: /node_modules/,
 				use: {
 					loader: require.resolve("ts-loader"),
+					options: {
+						configFile: "tsconfig.web.json",
+						projectReferences: true,
+					},
 				},
 			},
 			{

plugins/global_chat/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

plugins/global_chat/package.json

@@ -24,6 +24,7 @@
 		"@clusterio/lib": "^2.0.0-alpha.13",
 		"@clusterio/web_ui": "^2.0.0-alpha.13",
 		"@types/node": "^20.4.5",
+		"@types/react": "^18.2.21",
 		"typescript": "^5.1.6",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",

plugins/global_chat/tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../../packages/lib" },
+		{ "path": "../../packages/web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "messages.ts", "package.json" ],
+	"compilerOptions": {
+		"outDir": "dist/web_build",
+	}
+}

plugins/global_chat/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	output: {
 		path: path.resolve(__dirname, "dist", "web"),
 	},
@@ -16,7 +16,7 @@ module.exports = (env = {}) => merge(common(env), {
 			name: "global_chat",
 			library: { type: "var", name: "plugin_global_chat" },
 			exposes: {
-				"./info": "./dist/plugin/info.js",
+				"./info": "./info.ts",
 				"./package.json": "./package.json",
 			},
 			shared: {

plugins/inventory_sync/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

plugins/inventory_sync/package.json

@@ -29,6 +29,7 @@
 		"@clusterio/web_ui": "^2.0.0-alpha.13",
 		"@types/fs-extra": "^11.0.1",
 		"@types/node": "^20.4.5",
+		"@types/react": "^18.2.21",
 		"antd": "^5.7.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

plugins/inventory_sync/tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../../packages/lib" },
+		{ "path": "../../packages/web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "messages.ts", "instance.ts", "package.json" ],
+	"compilerOptions": {
+		"outDir": "dist/web_build",
+	}
+}

plugins/inventory_sync/web/index.tsx

@@ -1,14 +1,14 @@
 import React, { useContext, useEffect, useState } from "react";
 
 import { BaseWebPlugin, PageLayout, ControlContext } from "@clusterio/web_ui";
-import { DatabaseStatsRequest } from "../dist/plugin/messages";
+import { DatabaseStatsRequest, DatabaseStatsResponse } from "../messages";
 
 import "./index.css";
 
 function InventoryPage() {
 	let control = useContext(ControlContext);
 
-	let [statsData, updateStatsData] = useState();
+	let [statsData, updateStatsData] = useState<DatabaseStatsResponse>();
 
 	useEffect(() => {
 		(async () => {
@@ -38,10 +38,4 @@ export class WebPlugin extends BaseWebPlugin {
 			},
 		];
 	}
-
-	onControllerConnectionEvent(event) {
-		if (event === "connect") {
-
-		}
-	}
 }

plugins/inventory_sync/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	output: {
 		path: path.resolve(__dirname, "dist", "web"),
 	},
@@ -16,9 +16,9 @@ module.exports = (env = {}) => merge(common(env), {
 			name: "inventory_sync",
 			library: { type: "var", name: "plugin_inventory_sync" },
 			exposes: {
-				"./info": "./dist/plugin/info.js",
+				"./info": "./info.ts",
 				"./package.json": "./package.json",
-				"./web": "./web/index.jsx",
+				"./web": "./web/index.tsx",
 			},
 			shared: {
 				"@clusterio/lib": { import: false },

plugins/player_auth/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

plugins/player_auth/package.json

@@ -31,6 +31,7 @@
 		"@types/express": "^4.17.17",
 		"@types/jsonwebtoken": "^9.0.2",
 		"@types/node": "^20.4.5",
+		"@types/react": "^18.2.21",
 		"antd": "^5.7.3",
 		"phin": "^3.7.0",
 		"react": "^18.2.0",

plugins/player_auth/tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../../packages/lib" },
+		{ "path": "../../packages/web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "messages.ts", "package.json" ],
+	"compilerOptions": {
+		"outDir": "dist/web_build",
+	}
+}

plugins/player_auth/web/index.tsx

@@ -7,13 +7,16 @@ import "./index.css";
 
 const { Paragraph, Text } = Typography;
 
+interface LoginFormProps {
+	setToken(token: string): void,
+}
 
-function LoginForm(props) {
+function LoginForm(props: LoginFormProps) {
-	let [servers, setServers] = useState(null);
+	let [servers, setServers] = useState<string[] | null>(null);
-	let [playerCode, setPlayerCode] = useState(null);
+	let [playerCode, setPlayerCode] = useState<string | null>(null);
-	let [playerCodeError, setPlayerCodeError] = useState(null);
+	let [playerCodeError, setPlayerCodeError] = useState<string | null>(null);
-	let [verifyCode, setVerifyCode] = useState(null);
+	let [verifyCode, setVerifyCode] = useState<string | undefined>();
-	let [verifyToken, setVerifyToken] = useState(null);
+	let [verifyToken, setVerifyToken] = useState<string | null>(null);
 
 	useEffect(() => {
 		(async () => {
@@ -137,7 +140,7 @@ function LoginForm(props) {
 			<li>
 				<Paragraph>Enter this code into the in-game dialog:</Paragraph>
 				<Paragraph>
-					<Input disabled={verifyCode === null} style={{ width: "10em" }} value={verifyCode} />
+					<Input disabled={verifyCode === undefined} style={{ width: "10em" }} value={verifyCode} />
 				</Paragraph>
 			</li>
 		</ol>

plugins/player_auth/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	output: {
 		path: path.resolve(__dirname, "dist", "web"),
 	},
@@ -16,9 +16,9 @@ module.exports = (env = {}) => merge(common(env), {
 			name: "player_auth",
 			library: { type: "var", name: "plugin_player_auth" },
 			exposes: {
-				"./info": "./dist/plugin/info.js",
+				"./info": "./info.ts",
 				"./package.json": "./package.json",
-				"./web": "./web/index.jsx",
+				"./web": "./web/index.tsx",
 			},
 			shared: {
 				"@clusterio/lib": { import: false },

plugins/research_sync/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

plugins/research_sync/package.json

@@ -27,8 +27,9 @@
 	"devDependencies": {
 		"@clusterio/lib": "^2.0.0-alpha.13",
 		"@clusterio/web_ui": "^2.0.0-alpha.13",
-		"@types/node": "^20.4.5",
 		"@types/fs-extra": "^11.0.1",
+		"@types/node": "^20.4.5",
+		"@types/react": "^18.2.21",
 		"typescript": "^5.1.6",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",

plugins/research_sync/tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../../packages/lib" },
+		{ "path": "../../packages/web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "messages.ts", "package.json" ],
+	"compilerOptions": {
+		"outDir": "dist/web_build",
+	}
+}

plugins/research_sync/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	output: {
 		path: path.resolve(__dirname, "dist", "web"),
 	},
@@ -16,7 +16,7 @@ module.exports = (env = {}) => merge(common(env), {
 			name: "research_sync",
 			library: { type: "var", name: "plugin_research_sync" },
 			exposes: {
-				"./info": "./dist/plugin/info.js",
+				"./info": "./info.ts",
 				"./package.json": "./package.json",
 			},
 			shared: {

plugins/statistics_exporter/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

plugins/statistics_exporter/package.json

@@ -24,6 +24,7 @@
 		"@clusterio/lib": "^2.0.0-alpha.13",
 		"@clusterio/web_ui": "^2.0.0-alpha.13",
 		"@types/node": "^20.4.5",
+		"@types/react": "^18.2.21",
 		"typescript": "^5.1.6",
 		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",

plugins/statistics_exporter/tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../../packages/lib" },
+		{ "path": "../../packages/web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "package.json" ],
+	"compilerOptions": {
+		"outDir": "dist/web_build",
+	}
+}

plugins/statistics_exporter/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	output: {
 		path: path.resolve(__dirname, "dist", "web"),
 	},
@@ -16,7 +16,7 @@ module.exports = (env = {}) => merge(common(env), {
 			name: "statistics_exporter",
 			library: { type: "var", name: "plugin_statistics_exporter" },
 			exposes: {
-				"./info": "./dist/plugin/info.js",
+				"./info": "./info.ts",
 				"./package.json": "./package.json",
 			},
 			shared: {

plugins/subspace_storage/.npmignore

@@ -1 +1,2 @@
 webpack.config.js
+dist/web_build

plugins/subspace_storage/package.json

@@ -30,6 +30,7 @@
 		"@types/express": "^4.17.17",
 		"@types/fs-extra": "^11.0.1",
 		"@types/node": "^20.4.5",
+		"@types/react": "^18.2.21",
 		"antd": "^5.7.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

plugins/subspace_storage/tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.web.json",
+	"references": [
+		{ "path": "../../packages/lib" },
+		{ "path": "../../packages/web_ui/tsconfig.web.json" },
+	],
+	"include": [ "web/**/*.tsx", "web/**/*.ts", "messages.ts", "package.json" ],
+	"compilerOptions": {
+		"outDir": "dist/web_build",
+	}
+}

plugins/subspace_storage/web/index.tsx

@@ -3,18 +3,18 @@ import { Input, Table, Typography } from "antd";
 
 import * as lib from "@clusterio/lib";
 import {
-	BaseWebPlugin, PageLayout, ControlContext,
+	BaseWebPlugin, PageLayout, Control, ControlContext,
 	notifyErrorHandler, useItemMetadata, useLocale,
 } from "@clusterio/web_ui";
-import { GetStorageRequest, SetStorageSubscriptionRequest } from "../dist/plugin/messages";
+import { GetStorageRequest, Item, SetStorageSubscriptionRequest, UpdateStorageEvent } from "../messages";
 
 import "./index.css";
 
 const { Paragraph } = Typography;
 
 
-function useStorage(control) {
+function useStorage(control: Control) {
-	let plugin = control.plugins.get("subspace_storage");
+	let plugin = control.plugins.get("subspace_storage") as WebPlugin;
 	let [storage, setStorage] = useState([...plugin.storage]);
 
 	useEffect(() => {
@@ -35,14 +35,15 @@ function StoragePage() {
 	let locale = useLocale();
 	let itemMetadata = useItemMetadata();
 	let storage = useStorage(control);
-	let [filter, setFilter] = useState(null);
+	type ItemFilter = ([name, count]: [string, number]) => boolean;
+	let [filter, setFilter] = useState<null | ItemFilter>(null);
 
-	function getLocaleName(itemName) {
+	function getLocaleName(itemName: string) {
 		let localeName = itemName;
 		let meta = itemMetadata.get(itemName);
-		if (meta && meta.localized_name) {
+		if (meta && meta.localised_name) {
 			// TODO: implement the locale to name conversion.
-			localeName = locale.get(meta.localized_name[0]);
+			localeName = locale.get(meta.localised_name[0])!;
 		} else {
 			for (let section of ["item-name", "entity-name", "fluid-name", "equipment-name"]) {
 				let name = locale.get(`${section}.${itemName}`);
@@ -72,7 +73,7 @@ function StoragePage() {
 					search = search.replace(/(^| )(\w)/g, "$1\\b$2");
 					search = search.replace(/ +/g, ".*");
 					let filterExpr = new RegExp(search, "i");
-					setFilter(() => (item => {
+					setFilter(() => ((item: [string, number]) => {
 						let name = getLocaleName(item[0]);
 						return filterExpr.test(name) || filterExpr.test(item[0]);
 					}));
@@ -118,6 +119,9 @@ function StoragePage() {
 }
 
 export class WebPlugin extends BaseWebPlugin {
+	storage = new Map<string, number>();
+	callbacks: (() => void)[] = [];
+
 	async init() {
 		this.pages = [
 			{
@@ -127,29 +131,27 @@ export class WebPlugin extends BaseWebPlugin {
 				content: <StoragePage/>,
 			},
 		];
-
+		this.control.handle(UpdateStorageEvent, this.handleUpdateStorageEvent.bind(this));
-		this.storage = new Map();
-		this.callbacks = [];
 	}
 
-	onControllerConnectionEvent(event) {
+	onControllerConnectionEvent(event: "connect" | "drop" | "resume" | "close") {
 		if (event === "connect") {
 			this.updateSubscription();
 		}
 	}
 
-	async updateStorageEventHandler(event) {
+	async handleUpdateStorageEvent(event: UpdateStorageEvent) {
 		this.updateStorage(event.items);
 	}
 
-	onUpdate(callback) {
+	onUpdate(callback: () => void) {
 		this.callbacks.push(callback);
 		if (this.callbacks.length) {
 			this.updateSubscription();
 		}
 	}
 
-	offUpdate(callback) {
+	offUpdate(callback: () => void) {
 		let index = this.callbacks.lastIndexOf(callback);
 		if (index === -1) {
 			throw new Error("callback is not registered");
@@ -161,7 +163,7 @@ export class WebPlugin extends BaseWebPlugin {
 		}
 	}
 
-	updateStorage(items) {
+	updateStorage(items: Item[]) {
 		for (let item of items) {
 			this.storage.set(item.name, item.count);
 		}
@@ -180,7 +182,7 @@ export class WebPlugin extends BaseWebPlugin {
 		).catch(notifyErrorHandler("Error subscribing to storage"));
 
 		if (this.callbacks.length) {
-			this.control.send(new GetStorageRequest()).then(
+			this.control!.send(new GetStorageRequest()).then(
 				items => {
 					this.updateStorage(items);
 				}

plugins/subspace_storage/webpack.config.js

@@ -7,7 +7,7 @@ const common = require("@clusterio/web_ui/webpack.common");
 
 module.exports = (env = {}) => merge(common(env), {
 	context: __dirname,
-	entry: "./web/index.jsx",
+	entry: "./web/index.tsx",
 	output: {
 		path: path.resolve(__dirname, "dist", "web"),
 	},
@@ -16,9 +16,9 @@ module.exports = (env = {}) => merge(common(env), {
 			name: "subspace_storage",
 			library: { type: "var", name: "plugin_subspace_storage" },
 			exposes: {
-				"./info": "./dist/plugin/info.js",
+				"./info": "./info.ts",
 				"./package.json": "./package.json",
-				"./web": "./web/index.jsx",
+				"./web": "./web/index.tsx",
 			},
 			shared: {
 				"@clusterio/lib": { import: false },

tsconfig.base.json

@@ -6,6 +6,7 @@
 		"incremental": true,
 		"sourceMap": true,
 		"strict": true,
+		"esModuleInterop": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 	},

tsconfig.json

@@ -3,14 +3,21 @@
 	"references": [
 		{ "path": "./packages/lib" },
 		{ "path": "./packages/controller" },
+		{ "path": "./packages/controller/tsconfig.web.json" },
 		{ "path": "./packages/host" },
 		{ "path": "./packages/ctl" },
-		{ "path": "./packages/web_ui" },
+		{ "path": "./packages/web_ui/tsconfig.web.json" },
 		{ "path": "./plugins/global_chat" },
+		{ "path": "./plugins/global_chat/tsconfig.web.json" },
 		{ "path": "./plugins/inventory_sync" },
+		{ "path": "./plugins/inventory_sync/tsconfig.web.json" },
 		{ "path": "./plugins/player_auth" },
+		{ "path": "./plugins/player_auth/tsconfig.web.json" },
 		{ "path": "./plugins/research_sync" },
+		{ "path": "./plugins/research_sync/tsconfig.web.json" },
 		{ "path": "./plugins/statistics_exporter" },
+		{ "path": "./plugins/statistics_exporter/tsconfig.web.json" },
 		{ "path": "./plugins/subspace_storage" },
+		{ "path": "./plugins/subspace_storage/tsconfig.web.json" },
 	],
 }

tsconfig.node.json

@@ -5,8 +5,6 @@
 		"module": "node16",
 		"moduleResolution": "node16",
 		"target": "es2022",
-		"esModuleInterop": true,
-		"alwaysStrict": true,
 		"forceConsistentCasingInFileNames": true,
 	},
 }

tsconfig.web.json

@@ -0,0 +1,11 @@
+{
+	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"lib": ["dom", "es2023"],
+		"module": "es2022",
+		"moduleResolution": "bundler",
+		"target": "es2022",
+		"jsx": "react",
+		"noEmitOnError": true,
+	},
+}