feature: sk-react-toolkit holds the server helpers, web components and Vite font plugin shared by manage-ui and sql-query-webui.

vite/index.ts

@@ -0,0 +1,56 @@
+import type { Plugin } from 'vite'
+
+/** The choices of VITE_FONT. */
+export const FONTS = ['cdn', 'bundled', 'none'] as const
+
+export type Font = (typeof FONTS)[number]
+
+const FONT_MODULE = 'virtual:font'
+
+/**
+ * Provides the fonts of the toolkit's fonts.ts as VITE_FONT selects: cdn adds the Google Fonts links for Roboto and
+ * Roboto Mono to index.html, bundled imports @fontsource/roboto through the virtual:font module, none adds nothing; a
+ * font not provided falls back to the system fonts of its stack. The toolkit's renderApp imports virtual:font.
+ */
+export function font(choice: Font): Plugin {
+  const resolved = `\0${FONT_MODULE}`
+  return {
+    name: 'font',
+    resolveId(id) {
+      return id === FONT_MODULE ? resolved : undefined
+    },
+    load(id) {
+      if (id !== resolved) {
+        return undefined
+      }
+      return choice === 'bundled' ? ['300', '400', '500', '700'].map((weight) => `import '@fontsource/roboto/${weight}.css'`).join('\n') : ''
+    },
+    transformIndexHtml() {
+      if (choice !== 'cdn') {
+        return []
+      }
+      return [
+        { tag: 'link', attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
+        { tag: 'link', attrs: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true } },
+        { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@300;400;500;700&display=swap' } },
+      ]
+    },
+  }
+}
+
+/** VITE_FONT of env, the variables Vite's loadEnv answers, cdn when it is not set; another value throws. */
+export function fontChoice(env: Record<string, string>): Font {
+  const choice = env.VITE_FONT ?? 'cdn'
+  if (!FONTS.includes(choice as Font)) {
+    throw new Error(`VITE_FONT=${choice} is not one of ${FONTS.join(', ')}.`)
+  }
+  return choice as Font
+}
+
+/**
+ * The resolve options of an application that uses the toolkit's web code through a link: the toolkit's imports of
+ * React, MUI and Emotion are resolved from the application's own node_modules, so the page has one copy of each.
+ */
+export const TOOLKIT_RESOLVE = {
+  dedupe: ['react', 'react-dom', '@mui/material', '@mui/icons-material', '@mui/system', '@emotion/react', '@emotion/styled'],
+}