feat: Restart server when config file dependencies have changed (#203)

zuplo · Oct 1, 2024 · 6ba18b8 · 6ba18b8
1 parent eff6f9b
commit 6ba18b8
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 75 deletions.
diff --git a/docs/sidebar.ts b/docs/sidebar.ts
@@ -0,0 +1,56 @@
+import { Sidebar } from "zudoku";
+
+export const sidebar: Sidebar = {
+  docs: [
+    {
+      type: "category",
+      label: "Getting started",
+      icon: "sparkles",
+      items: ["introduction", "app-quickstart", "html-quickstart"],
+    },
+    {
+      type: "category",
+      label: "Configuration",
+      icon: "cog",
+      link: "configuration/overview",
+      items: [
+        "configuration/api-reference",
+        "configuration/navigation",
+        "configuration/search",
+        "configuration/authentication",
+        "configuration/vite-config",
+      ],
+    },
+    {
+      type: "category",
+      label: "Markdown",
+      icon: "book-open-text",
+      link: "markdown/overview",
+      items: ["markdown/mdx", "markdown/admonitions", "markdown/code-blocks"],
+    },
+    {
+      type: "category",
+      label: "Guide",
+      icon: "monitor-check",
+      items: ["environment-variables", "custom-pages", "using-multiple-apis"],
+    },
+    {
+      type: "category",
+      label: "Deployment",
+      icon: "cloud-upload",
+      link: "deployment",
+      items: [
+        "deploy/cloudflare-pages",
+        "deploy/github-pages",
+        "deploy/vercel",
+        "deploy/direct-upload",
+      ],
+    },
+    {
+      type: "category",
+      label: "Extending",
+      icon: "blocks",
+      items: ["custom-plugins", "api-keys"],
+    },
+  ],
+};
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -12,5 +12,5 @@
     "useUnknownInCatchVariables": false,
     "jsx": "react-jsx"
   },
-  "include": ["zudoku.config.tsx", "src"]
+  "include": ["zudoku.config.tsx", "src", "sidebar.ts"]
 }
diff --git a/docs/zudoku.config.tsx b/docs/zudoku.config.tsx
@@ -1,4 +1,5 @@
 import type { ZudokuConfig } from "zudoku";
+import { sidebar } from "./sidebar";
 import PreviewBanner from "./src/PreviewBanner";
 
 const config: ZudokuConfig = {
@@ -23,60 +24,7 @@ const config: ZudokuConfig = {
     { from: "/docs/getting-started", to: "/docs/app-quickstart" },
   ],
   topNavigation: [{ id: "docs", label: "Documentation" }],
-  sidebar: {
-    docs: [
-      {
-        type: "category",
-        label: "Getting started",
-        icon: "sparkles",
-        items: ["introduction", "app-quickstart", "html-quickstart"],
-      },
-      {
-        type: "category",
-        label: "Configuration",
-        icon: "cog",
-        link: "configuration/overview",
-        items: [
-          "configuration/api-reference",
-          "configuration/navigation",
-          "configuration/search",
-          "configuration/authentication",
-          "configuration/vite-config",
-        ],
-      },
-      {
-        type: "category",
-        label: "Markdown",
-        icon: "book-open-text",
-        link: "markdown/overview",
-        items: ["markdown/mdx", "markdown/admonitions", "markdown/code-blocks"],
-      },
-      {
-        type: "category",
-        label: "Guide",
-        icon: "monitor-check",
-        items: ["environment-variables", "custom-pages", "using-multiple-apis"],
-      },
-      {
-        type: "category",
-        label: "Deployment",
-        icon: "cloud-upload",
-        link: "deployment",
-        items: [
-          "deploy/cloudflare-pages",
-          "deploy/github-pages",
-          "deploy/vercel",
-          "deploy/direct-upload",
-        ],
-      },
-      {
-        type: "category",
-        label: "Extending",
-        icon: "blocks",
-        items: ["custom-plugins", "api-keys"],
-      },
-    ],
-  },
+  sidebar,
 };
 
 export default config;
diff --git a/packages/zudoku/src/config/config.ts b/packages/zudoku/src/config/config.ts
@@ -1,10 +1,11 @@
 import type { ZudokuConfig } from "./validators/validate.js";
+import type { LoadedConfig } from "../vite/config.js";
 
 export type URLString = `https://${string}` | `http://${string}`;
 
 export { type ZudokuConfig };
 
-export interface ZudokuPluginOptions extends ZudokuConfig {
+export interface ZudokuPluginOptions extends LoadedConfig {
   rootDir: string;
   moduleDir: string;
 

diff --git a/packages/zudoku/src/config/validators/InputSidebarSchema.ts b/packages/zudoku/src/config/validators/InputSidebarSchema.ts
@@ -108,3 +108,5 @@ export const InputSidebarItemCategorySchema: z.ZodType<InputSidebarItemCategory>
 export const InputSidebarSchema = InputSidebarItemSchema.array();
 
 export type InputSidebar = z.infer<typeof InputSidebarSchema>;
+
+export type ConfigSidebar = Record<string, InputSidebar>;
diff --git a/packages/zudoku/src/index.ts b/packages/zudoku/src/index.ts
@@ -1,4 +1,4 @@
 // Config
 export type { ZudokuConfig } from "./config/config.js";
-export type { InputSidebar as Sidebar } from "./config/validators/InputSidebarSchema.js";
+export type { ConfigSidebar as Sidebar } from "./config/validators/InputSidebarSchema.js";
 export type { MDXImport } from "./lib/plugins/markdown/index.js";
diff --git a/packages/zudoku/src/vite/config.ts b/packages/zudoku/src/vite/config.ts
@@ -141,7 +141,7 @@ export function getPluginOptions({
 }): ZudokuPluginOptions {
   const moduleDir = getModuleDir();
   return {
-    ...config,
+    ...config!,
     rootDir: dir,
     moduleDir,
     mode,
@@ -151,10 +151,16 @@ export function getPluginOptions({
 export async function getViteConfig(
   dir: string,
   configEnv: ZudokuConfigEnv,
+  onConfigChange?: (config: LoadedConfig) => void,
 ): Promise<InlineConfig> {
   const config = await loadZudokuConfig(dir);
 
-  const onConfigChange = () => loadZudokuConfig(dir, true);
+  const handleConfigChange = async () => {
+    const config = await loadZudokuConfig(dir, true);
+    onConfigChange?.(config);
+
+    return config;
+  };
 
   validateConfig(config);
 
@@ -236,7 +242,7 @@ export async function getViteConfig(
       vitePluginSsrCss({
         entries: [`${pluginOptions.moduleDir}/src/app/entry.client.tsx`],
       }),
-      vitePlugin(pluginOptions, onConfigChange),
+      vitePlugin(pluginOptions, handleConfigChange),
     ],
     css: {
       postcss: {

diff --git a/packages/zudoku/src/vite/dev-server.ts b/packages/zudoku/src/vite/dev-server.ts
@@ -26,11 +26,15 @@ export class DevServer {
   async start() {
     const app = express();
 
-    const viteConfig = await getViteConfig(this.options.dir, {
-      mode: "development",
-      command: "serve",
-      isSsrBuild: this.options.ssr,
-    });
+    const viteConfig = await getViteConfig(
+      this.options.dir,
+      {
+        mode: "development",
+        command: "serve",
+        isSsrBuild: this.options.ssr,
+      },
+      (zudokuConfig) => (this.currentConfig = zudokuConfig),
+    );
 
     const vite = await createViteServer(viteConfig);
 

diff --git a/packages/zudoku/src/vite/plugin-config-reload.ts b/packages/zudoku/src/vite/plugin-config-reload.ts
@@ -2,29 +2,35 @@ import path from "node:path";
 import { type Plugin } from "vite";
 import { printDiagnosticsToConsole } from "../cli/common/output.js";
 import { type ZudokuPluginOptions } from "../config/config.js";
-import { getConfigFilePath, type LoadedConfig } from "./config.js";
+import { type LoadedConfig } from "./config.js";
 
 export const createConfigReloadPlugin = (
   initialConfig: ZudokuPluginOptions,
   onConfigChange?: () => Promise<LoadedConfig>,
 ): [Plugin, () => ZudokuPluginOptions] => {
   let currentConfig = initialConfig;
+  let importDependencies = initialConfig.__meta.dependencies;
 
   const plugin = {
     name: "zudoku-config-reload",
     configureServer: ({ watcher, restart }) => {
       if (!onConfigChange) return;
 
       watcher.on("change", async (file) => {
-        const configFilePath = await getConfigFilePath(currentConfig.rootDir);
-
-        if (file !== configFilePath) return;
+        if (!file.startsWith(currentConfig.rootDir)) return;
+        if (!importDependencies.includes(file)) return;
 
         const newConfig = await onConfigChange();
         currentConfig = { ...initialConfig, ...newConfig };
+
+        importDependencies = newConfig.__meta.dependencies;
+
+        // Assume `.tsx` files are handled by HMR (skip if the config file itself changed)
+        if (file !== newConfig.__meta.path && file.endsWith(".tsx")) return;
+
         await restart();
         printDiagnosticsToConsole(
-          `${new Date().toLocaleTimeString()} Config ${path.basename(file)} changed. Restarted server.`,
+          `[${new Date().toLocaleTimeString()}]: Config ${path.basename(currentConfig.__meta.path)} changed. Restarted server.`,
         );
       });
     },

diff --git a/packages/zudoku/vite.standalone.config.ts b/packages/zudoku/vite.standalone.config.ts
@@ -11,10 +11,13 @@ const entries: Record<string, string> = {
   demo: "./src/app/demo.tsx",
 };
 
-const pluginOptions = getPluginOptions({
-  mode: "standalone",
-  dir: path.resolve(__dirname),
-});
+const config = {
+  ...getPluginOptions({
+    mode: "standalone",
+    dir: path.resolve(__dirname),
+  }),
+  __meta: {},
+};
 
 export default defineConfig({
   worker: {
@@ -55,7 +58,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [vitePlugin(pluginOptions)],
+  plugins: [vitePlugin(config)],
   css: {
     postcss: {
       plugins: [