Add --noWatch option to serve command (#523)

* Add --noWatch option to serve command * add changeset * fix types and docs
tajo · Oct 17, 2023 · 6138c7f · 6138c7f
1 parent 06efcd8
commit 6138c7f
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 43 deletions.
diff --git a/.changeset/itchy-peas-repeat.md b/.changeset/itchy-peas-repeat.md
@@ -0,0 +1,5 @@
+---
+"@ladle/react": patch
+---
+
+Add --noWatch option to serve command
diff --git a/packages/ladle/lib/cli/cli.js b/packages/ladle/lib/cli/cli.js
@@ -24,6 +24,7 @@ program
   .option("--viteConfig [string]", "file with Vite configuration")
   .option("--base [string]", "base URL path for build output")
   .option("--mode [string]", "Vite mode")
+  .option("--noWatch", "Disable file system watching")
   .action(serve);
 
 program
@@ -55,7 +56,11 @@ program
   .option("--base [string]", "base URL path for build output")
   .option("--mode [string]", "Vite mode")
   .action(async (params) => {
-    await preview({ ...params, previewHost: params.host, previewPort: params.port });
+    await preview({
+      ...params,
+      previewHost: params.host,
+      previewPort: params.port,
+    });
   });
 
 program.parse(process.argv);
diff --git a/packages/ladle/lib/cli/vite-dev.js b/packages/ladle/lib/cli/vite-dev.js
@@ -45,6 +45,12 @@ const bundler = async (config, configFolder) => {
         fs: {
           allow: [searchForWorkspaceRoot(process.cwd())],
         },
+        // TODO: pass null instead once this diff is included in release
+        // https://github.com/vitejs/vite/pull/14208
+        // watch: config.noWatch ? null : undefined,
+        watch: {
+          ignored: config.noWatch ? "**" : undefined,
+        },
       },
     });
     const vite = await createServer(viteConfig);
@@ -149,50 +155,52 @@ const bundler = async (config, configFolder) => {
       http.createServer(app.callback()).listen(port, hostname, listenCallback);
     }
 
-    // trigger full reload when new stories are added or removed
-    const watcher = chokidar.watch(config.stories, {
-      persistent: true,
-      ignoreInitial: true,
-    });
-    let checkSum = "";
-    const getChecksum = async () => {
-      try {
-        const entryData = await getEntryData(
-          await globby(
-            Array.isArray(config.stories) ? config.stories : [config.stories],
-          ),
-        );
-        const jsonContent = getMetaJsonObject(entryData);
-        // loc changes should not grant a full reload
-        Object.keys(jsonContent.stories).forEach((storyId) => {
-          jsonContent.stories[storyId].locStart = 0;
-          jsonContent.stories[storyId].locEnd = 0;
-        });
-        return JSON.stringify(jsonContent);
-      } catch (e) {
-        return checkSum;
-      }
-    };
-    checkSum = await getChecksum();
-    const invalidate = async () => {
-      const newChecksum = await getChecksum();
-      if (checkSum === newChecksum) return;
-      checkSum = newChecksum;
-      const module = moduleGraph.getModuleById("\0virtual:generated-list");
-      if (module) {
-        moduleGraph.invalidateModule(module);
-        if (ws) {
-          ws.send({
-            type: "full-reload",
-            path: "*",
+    if (config.noWatch === false) {
+      // trigger full reload when new stories are added or removed
+      const watcher = chokidar.watch(config.stories, {
+        persistent: true,
+        ignoreInitial: true,
+      });
+      let checkSum = "";
+      const getChecksum = async () => {
+        try {
+          const entryData = await getEntryData(
+            await globby(
+              Array.isArray(config.stories) ? config.stories : [config.stories],
+            ),
+          );
+          const jsonContent = getMetaJsonObject(entryData);
+          // loc changes should not grant a full reload
+          Object.keys(jsonContent.stories).forEach((storyId) => {
+            jsonContent.stories[storyId].locStart = 0;
+            jsonContent.stories[storyId].locEnd = 0;
           });
+          return JSON.stringify(jsonContent);
+        } catch (e) {
+          return checkSum;
         }
-      }
-    };
-    watcher
-      .on("add", invalidate)
-      .on("change", invalidate)
-      .on("unlink", invalidate);
+      };
+      checkSum = await getChecksum();
+      const invalidate = async () => {
+        const newChecksum = await getChecksum();
+        if (checkSum === newChecksum) return;
+        checkSum = newChecksum;
+        const module = moduleGraph.getModuleById("\0virtual:generated-list");
+        if (module) {
+          moduleGraph.invalidateModule(module);
+          if (ws) {
+            ws.send({
+              type: "full-reload",
+              path: "*",
+            });
+          }
+        }
+      };
+      watcher
+        .on("add", invalidate)
+        .on("change", invalidate)
+        .on("unlink", invalidate);
+    }
   } catch (e) {
     console.log(e);
   }

diff --git a/packages/ladle/lib/shared/default-config.js b/packages/ladle/lib/shared/default-config.js
@@ -7,6 +7,7 @@ export default {
   storyOrder: (stories) => stories, // default is alphabetical
   viteConfig: undefined,
   appendToHead: "",
+  noWatch: false,
   port: 61000,
   previewPort: 8080,
   outDir: "build",

diff --git a/packages/ladle/lib/shared/types.ts b/packages/ladle/lib/shared/types.ts
@@ -186,6 +186,7 @@ export type Config = {
   outDir: string;
   base?: string;
   mode?: string;
+  noWatch: boolean;
   hotkeys: {
     fullscreen: string[];
     search: string[];

diff --git a/packages/website/docs/cli.md b/packages/website/docs/cli.md
@@ -34,6 +34,7 @@ Options:
   --viteConfig [string]  file with Vite configuration
   --base [string]        base URL path for build output
   --mode [string]        Vite mode
+  --noWatch [string]     disable file system watcher
   -h, --help             display help for command
 
 ```

diff --git a/packages/website/docs/config.md b/packages/website/docs/config.md
@@ -298,3 +298,14 @@ export default {
   },
 };
 ```
+
+### noWatch
+
+Disable the file system watcher when running the `serve` cli command.
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  noWatch: true,
+};
+```