Attempt to use TypeScript project references

.gitignore

@@ -11,4 +11,6 @@ config.env
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+out
+out.node

Dockerfile

@@ -1,7 +1,7 @@
 FROM node:21-alpine
 MAINTAINER Candid Dauth <[email protected]>
 
-CMD yarn run server
+CMD yarn run prod-server
 EXPOSE 8080
 ENV CACHE_DIR=/opt/facilmap/cache
 
@@ -19,7 +19,7 @@ USER facilmap
 
 RUN cd .. && yarn install
 
-RUN cd .. && yarn run build
+RUN cd .. && yarn run build:frontend:app && yarn run build:server
 
 USER root
 RUN chown -R root:root /opt/facilmap && mkdir -p "$CACHE_DIR" && chown -R facilmap:facilmap "$CACHE_DIR"

client/tsconfig.json

@@ -1,4 +1,15 @@
 {
-	"extends": "../tsconfig.json",
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "./out",
+		"composite": true,
+		"paths": {
+			"facilmap-types": ["../types/src/index.ts"]
+		}
+	},
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "../types/tsconfig.json" }
+	],
 	"include": ["src/**/*"]
 }

client/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "out.node"
+	},
+	"include": [
+		"vite.config.ts"
+	]
+}

frontend/build.ts

@@ -0,0 +1,24 @@
+import { createServer, type InlineConfig, type ViteDevServer } from "vite";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const root = dirname(fileURLToPath(import.meta.url));
+const dist = `${root}/dist/app`;
+
+export const paths = {
+	root,
+	dist,
+	base: '/_app/',
+	mapEntry: "src/map/map.ts",
+	mapEjs: `${root}/src/map/map.ejs`,
+	tableEntry: "src/table/table.ts",
+	tableEjs: `${root}/src/table/table.ejs`,
+	manifest: `${dist}/manifest.json`,
+};
+
+export async function serve(inlineConfig: InlineConfig = {}): Promise<ViteDevServer> {
+	return await createServer({
+		root,
+		...inlineConfig
+	});
+}

frontend/package.json

@@ -33,12 +33,12 @@
   "scripts": {
     "build": "yarn build:lib && yarn build:app",
     "build:lib": "vite --config vite-lib.config.ts build",
-    "build:app": "vite build",
+    "build:app": "NODE_OPTIONS='--import tsx' vite build",
     "clean": "rimraf dist",
-    "dev-server": "vite",
+    "dev-server": "NODE_OPTIONS='--import tsx' vite",
     "test": "vitest run",
     "test-watch": "vitest",
-    "check-types": "vue-tsc --noEmit"
+    "check-types": "vue-tsc -b --emitDeclarationOnly"
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.5.0",
@@ -90,8 +90,9 @@
     "rimraf": "^5.0.5",
     "sass": "^1.69.5",
     "svgo": "^3.0.3",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.7.0",
     "typescript": "^5.2.2",
+    "vite-tsconfig-paths": "^4.2.2",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.22"
   }

frontend/src/lib/components/about-dialog.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import packageJson from "../../../../package.json";
 	import { getLayers } from "facilmap-leaflet";
 	import { Layer, Util } from "leaflet";
 	import { computed } from "vue";
@@ -18,7 +17,7 @@
 		return [...Object.values(baseLayers), ...Object.values(overlays)];
 	});
 
-	const fmVersion = packageJson.version;
+	const fmVersion = __FM_VERSION__;
 
 </script>
 

frontend/src/lib/index.ts

@@ -1,5 +1,5 @@
 import "./styles.scss";
-import "./bootstrap.ts";
+import "./bootstrap";
 
 import { registerDeobfuscationHandlers } from "../utils/obfuscate";
 

frontend/src/shims.d.ts

@@ -9,4 +9,6 @@ declare module "@tmcw/togeojson" {
 	export const gpx: any;
 	export const kml: any;
 	export const tcx: any;
-}
+}
+
+declare const __FM_VERSION__: string;

frontend/tsconfig.json

@@ -1,7 +1,22 @@
 {
-	"extends": "../tsconfig.json",
+	"extends": "../tsconfig.base.json",
 	"compilerOptions": {
-		"resolveJsonModule": true
+		"outDir": "./out",
+		"composite": true,
+		"paths": {
+			"facilmap-client": ["../client/src/client.ts"],
+			"facilmap-leaflet": ["../leaflet/src/index.ts"],
+			"facilmap-types": ["../types/src/index.ts"],
+			"facilmap-utils": ["../utils/src/index.ts"]
+		}
 	},
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "../client/tsconfig.json" },
+		{ "path": "../leaflet/tsconfig.json" },
+		{ "path": "../types/tsconfig.json" },
+		{ "path": "../utils/tsconfig.json" },
+		{ "path": "../tsconfig.json" }
+	],
 	"include": ["src/**/*"]
 }

frontend/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "out.node"
+	},
+	"include": [
+		"vite.config.ts",
+		"vite-define.ts",
+		"build.ts"
+	]
+}

frontend/vite-define.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from "vite";
+import { readFile } from "fs/promises";
+
+export default function definePlugin(): Plugin {
+	return {
+		name: "FacilMap define",
+		config: async (config) => {
+			const packageJson = JSON.parse(await readFile(new URL("./package.json", import.meta.url), "utf8"));
+			config.define = config.define ?? {};
+			config.define["__FM_VERSION__"] = JSON.stringify(packageJson.version);
+		}
+	};
+}

frontend/vite-lib.config.ts

@@ -1,13 +1,17 @@
 import { defineConfig } from "vite";
-//import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import dtsPlugin from "vite-plugin-dts";
 import vuePlugin from "@vitejs/plugin-vue";
+import tsconfigPaths from "vite-tsconfig-paths";
+import definePlugin from "./vite-define";
 
 export default defineConfig(({ mode }) => ({
 	plugins: [
-		//cssInjectedByJsPlugin(),
+		cssInjectedByJsPlugin(),
 		dtsPlugin({ rollupTypes: true }),
-		vuePlugin()
+		vuePlugin(),
+		tsconfigPaths(),
+		definePlugin()
 	],
 	build: {
 		outDir: "./dist/lib",

frontend/vite.config.ts

@@ -1,12 +1,20 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from "vite";
 import { fileURLToPath } from "url";
-import { paths } from "./build.js";
+import { paths } from "./build";
 import vuePlugin from "@vitejs/plugin-vue";
+import tsconfigPaths from "vite-tsconfig-paths";
+import iconsPlugin from "facilmap-leaflet/rollup-icons";
+import definePlugin from "./vite-define";
 
 export default defineConfig({
 	base: paths.base,
 	plugins: [
-		vuePlugin()
+		vuePlugin(),
+		tsconfigPaths({ loose: true }),
+		iconsPlugin(),
+		definePlugin()
 	],
 	assetsInclude: [
 		"**/*.ejs"

leaflet/package.json

@@ -35,8 +35,8 @@
     "build": "vite build",
     "clean": "rimraf dist",
     "dev-server": "vite",
-    "download-icons": "ts-node ./download-icons.ts",
-    "check-types": "tsc --noEmit",
+    "download-icons": "tsx ./download-icons.ts",
+    "check-types": "tsc -b --emitDeclarationOnly",
     "lint": "eslint **/*.ts",
     "test": "vitest run",
     "test-watch": "vitest"
@@ -71,7 +71,7 @@
     "rimraf": "^5.0.5",
     "rollup": "3",
     "svgo": "^3.0.3",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.7.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",

leaflet/src/index.ts

@@ -22,10 +22,4 @@ export * from "./views/hash";
 export * from "./views/initialView";
 export * from "./views/views";
 
-declare module "leaflet" {
-	export interface Map {
-		fmFilter: string | undefined;
-
-		setFmFilter(filter?: string): void;
-	}
-}
+import "./type-extensions";

leaflet/tsconfig.json

@@ -1,4 +1,19 @@
 {
-	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "./out",
+		"composite": true,
+		"paths": {
+			"facilmap-client": ["../client/src/client.ts"],
+			"facilmap-types": ["../types/src/index.ts"],
+			"facilmap-utils": ["../utils/src/index.ts"]
+		}
+	},
+	"extends": "../tsconfig.base.json",
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "../client/tsconfig.json" },
+		{ "path": "../types/tsconfig.json" },
+		{ "path": "../utils/tsconfig.json" }
+	],
 	"include": ["src/**/*"]
 }

leaflet/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "out.node"
+	},
+	"include": [
+		"vite.config.ts",
+		"rollup-icons.ts",
+		"download-icons.ts"
+	]
+}

leaflet/vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from "vite";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import dtsPlugin from "vite-plugin-dts";

package.json

@@ -13,6 +13,11 @@
     "lint": "eslint **/*.ts",
     "clean": "yarn workspaces foreach -v run clean",
     "build": "yarn workspaces foreach -vt run build",
+    "build:frontend:app": "yarn workspace facilmap-frontend run build:app",
+    "build:server": "yarn workspace facilmap-server run build",
+    "prod-server": "yarn workspace facilmap-server run prod-server",
+    "server": "yarn workspace facilmap-server run server",
+    "dev-server": "yarn workspace facilmap-server run dev-server",
     "check-types": "yarn workspaces foreach -vt run check-types"
   },
   "devDependencies": {