refactor(frontend): split vite config

Also introduces tsconfig.shared.json to keep track of source files used
both and build time and in the browser.

6 files changed, 229 insertions, 0 deletions

diff --git a/subprojects/frontend/config/backendConfigVitePlugin.ts b/subprojects/frontend/config/backendConfigVitePlugin.ts
new file mode 100644
index 00000000..7a6bc3db
--- /dev/null
+++ b/subprojects/frontend/config/backendConfigVitePlugin.ts
@@ -0,0 +1,27 @@
+import type { PluginOption } from 'vite';
+
+import type BackendConfig from '../src/xtext/BackendConfig';
+import { ENDPOINT } from '../src/xtext/BackendConfig';
+
+export default function backendConfigVitePlugin(
+  backendConfig: BackendConfig,
+): PluginOption {
+  return {
+    name: 'backend-config',
+    apply: 'serve',
+    configureServer(server) {
+      const config = JSON.stringify(backendConfig);
+      server.middlewares.use((req, res, next) => {
+        if (req.url === `/${ENDPOINT}`) {
+          res.setHeader('Content-Type', 'application/json');
+          res.end(config);
+        } else {
+          next();
+        }
+      });
+    },
+  };
+}
+
+export type { default as BackendConfig } from '../src/xtext/BackendConfig';
+export { ENDPOINT as CONFIG_ENDPOINT } from '../src/xtext/BackendConfig';
diff --git a/subprojects/frontend/config/detectDevModeOptions.ts b/subprojects/frontend/config/detectDevModeOptions.ts
new file mode 100644
index 00000000..b3696241
--- /dev/null
+++ b/subprojects/frontend/config/detectDevModeOptions.ts
@@ -0,0 +1,94 @@
+import type { PluginOption, ServerOptions } from 'vite';
+
+import backendConfigVitePlugin, {
+  type BackendConfig,
+} from './backendConfigVitePlugin';
+
+export const API_ENDPOINT = 'xtext-service';
+
+export interface DevModeOptions {
+  mode: string;
+  isDevelopment: boolean;
+  devModePlugins: PluginOption[];
+  serverOptions: ServerOptions;
+}
+
+interface ListenOptions {
+  host: string;
+  port: number;
+  secure: boolean;
+}
+
+function detectListenOptions(
+  name: string,
+  fallbackHost: string,
+  fallbackPort: number,
+): ListenOptions {
+  const host = process.env[`${name}_HOST`] ?? fallbackHost;
+  const rawPort = process.env[`${name}_PORT`];
+  const port = rawPort === undefined ? fallbackPort : parseInt(rawPort, 10);
+  const secure = port === 443;
+  return { host, port, secure };
+}
+
+function listenURL(
+  { host, port, secure }: ListenOptions,
+  protocol = 'http',
+): string {
+  return `${secure ? `${protocol}s` : protocol}://${host}:${port}`;
+}
+
+export default function detectDevModeOptions(): DevModeOptions {
+  const mode = process.env['MODE'] || 'development';
+  const isDevelopment = mode === 'development';
+
+  if (!isDevelopment) {
+    return {
+      mode,
+      isDevelopment,
+      devModePlugins: [],
+      serverOptions: {},
+    };
+  }
+
+  const listen = detectListenOptions('LISTEN', 'localhost', 1313);
+  // Make sure we always use IPv4 to connect to the backend,
+  // because it doesn't listen on IPv6.
+  const api = detectListenOptions('API', '127.0.0.1', 1312);
+  const publicAddress = detectListenOptions('PUBLIC', listen.host, listen.port);
+
+  const backendConfig: BackendConfig = {
+    webSocketURL: `${listenURL(publicAddress, 'ws')}/${API_ENDPOINT}`,
+  };
+
+  return {
+    mode,
+    isDevelopment,
+    devModePlugins: [backendConfigVitePlugin(backendConfig)],
+    serverOptions: {
+      host: listen.host,
+      port: listen.port,
+      strictPort: true,
+      https: listen.secure,
+      headers: {
+        // Enable strict origin isolation, see e.g.,
+        // https://github.com/vitejs/vite/issues/3909#issuecomment-1065893956
+        'Cross-Origin-Opener-Policy': 'same-origin',
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+        'Cross-Origin-Resource-Policy': 'cross-origin',
+      },
+      proxy: {
+        [`/${API_ENDPOINT}`]: {
+          target: listenURL(api),
+          ws: true,
+          secure: api.secure,
+        },
+      },
+      hmr: {
+        host: publicAddress.host,
+        clientPort: publicAddress.port,
+        path: '/vite',
+      },
+    },
+  };
+}
diff --git a/subprojects/frontend/config/fetchPackageMetadata.ts b/subprojects/frontend/config/fetchPackageMetadata.ts
new file mode 100644
index 00000000..50807b03
--- /dev/null
+++ b/subprojects/frontend/config/fetchPackageMetadata.ts
@@ -0,0 +1,20 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+
+import z from 'zod';
+
+const PackageInfo = z.object({
+  name: z.string().min(1),
+  version: z.string().min(1),
+});
+
+export default async function fetchPackageMetadata(
+  thisDir: string,
+): Promise<void> {
+  const contents = await readFile(path.join(thisDir, 'package.json'), 'utf8');
+  const { name: packageName, version: packageVersion } = PackageInfo.parse(
+    JSON.parse(contents),
+  );
+  process.env['VITE_PACKAGE_NAME'] ??= packageName;
+  process.env['VITE_PACKAGE_VERSION'] ??= packageVersion;
+}
diff --git a/subprojects/frontend/config/manifest.ts b/subprojects/frontend/config/manifest.ts
new file mode 100644
index 00000000..3cec777c
--- /dev/null
+++ b/subprojects/frontend/config/manifest.ts
@@ -0,0 +1,40 @@
+import type { ManifestOptions } from 'vite-plugin-pwa';
+
+const manifest: Partial<ManifestOptions> = {
+  lang: 'en-US',
+  name: 'Refinery',
+  short_name: 'Refinery',
+  description: 'An efficient graph sovler for generating well-formed models',
+  theme_color: '#f5f5f5',
+  display_override: ['window-controls-overlay'],
+  display: 'standalone',
+  background_color: '#21252b',
+  icons: [
+    {
+      src: 'icon-192x192.png',
+      sizes: '192x192',
+      type: 'image/png',
+      purpose: 'any maskable',
+    },
+    {
+      src: 'icon-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+      purpose: 'any maskable',
+    },
+    {
+      src: 'icon-any.svg',
+      sizes: 'any',
+      type: 'image/svg+xml',
+      purpose: 'any maskable',
+    },
+    {
+      src: 'mask-icon.svg',
+      sizes: 'any',
+      type: 'image/svg+xml',
+      purpose: 'monochrome',
+    },
+  ],
+};
+
+export default manifest;
diff --git a/subprojects/frontend/config/minifyHTMLVitePlugin.ts b/subprojects/frontend/config/minifyHTMLVitePlugin.ts
new file mode 100644
index 00000000..18336d4d
--- /dev/null
+++ b/subprojects/frontend/config/minifyHTMLVitePlugin.ts
@@ -0,0 +1,24 @@
+import { minify, type Options as TerserOptions } from 'html-minifier-terser';
+import type { PluginOption } from 'vite';
+
+export default function minifyHTMLVitePlugin(
+  options?: TerserOptions | undefined,
+): PluginOption {
+  return {
+    name: 'minify-html',
+    apply: 'build',
+    enforce: 'post',
+    transformIndexHtml(html) {
+      return minify(html, {
+        collapseWhitespace: true,
+        collapseBooleanAttributes: true,
+        minifyCSS: true,
+        removeComments: true,
+        removeAttributeQuotes: true,
+        removeRedundantAttributes: true,
+        sortAttributes: true,
+        ...(options ?? {}),
+      });
+    },
+  };
+}
diff --git a/subprojects/frontend/config/preloadFontsVitePlugin.ts b/subprojects/frontend/config/preloadFontsVitePlugin.ts
new file mode 100644
index 00000000..bc6f8eaf
--- /dev/null
+++ b/subprojects/frontend/config/preloadFontsVitePlugin.ts
@@ -0,0 +1,24 @@
+import micromatch from 'micromatch';
+import type { PluginOption } from 'vite';
+
+export default function preloadFontsVitePlugin(
+  fontsGlob: string | string[],
+): PluginOption {
+  return {
+    name: 'refinery-preload-fonts',
+    apply: 'build',
+    enforce: 'post',
+    transformIndexHtml(_html, { bundle }) {
+      return micromatch(Object.keys(bundle ?? {}), fontsGlob).map((href) => ({
+        tag: 'link',
+        attrs: {
+          href,
+          rel: 'preload',
+          type: 'font/woff2',
+          as: 'font',
+          crossorigin: 'anonymous',
+        },
+      }));
+    },
+  };
+}