fix: dev server error

Author: CPunisher

src/hooks/use-bundle.ts

@@ -1,96 +1,13 @@
-import { useAtom, useSetAtom, useStore } from "jotai";
+import { useSetAtom } from "jotai";
 import { useCallback } from "react";
-import { bundle } from "@/lib/bundle";
-import {
-  type BundleResult,
-  bindingLoadedAtom,
-  bindingLoadingAtom,
-  bundleResultAtom,
-  isBundlingAtom,
-  latestBundleRequestIdAtom,
-  type SourceFile,
-} from "@/store/bundler";
-import { activeOutputFileAtom } from "@/store/editor";
-import { rspackVersionAtom } from "@/store/version";
-
-function createBundleFailure(message: string): BundleResult {
-  return {
-    duration: 0,
-    output: [],
-    formattedOutput: [],
-    success: false,
-    errors: [message],
-    warnings: [],
-    sourcemaps: new Map(),
-    modules: [],
-    chunks: [],
-    chunkGroups: [],
-  };
-}
+import { bundleActionAtom, type SourceFile } from "@/store/bundler";
 
 export default function useBundle() {
-  const [bindingLoadedVersion, setBindingLoadedVersion] = useAtom(bindingLoadedAtom);
-  const setBindingLoading = useSetAtom(bindingLoadingAtom);
-
-  const setIsBundling = useSetAtom(isBundlingAtom);
-  const setBundleResult = useSetAtom(bundleResultAtom);
-  const [activeOutputFile, setActiveOutputFile] = useAtom(activeOutputFileAtom);
-  const [rspackVersion] = useAtom(rspackVersionAtom);
-  const store = useStore();
+  const runBundle = useSetAtom(bundleActionAtom);
 
   const handleBundle = useCallback(
-    async (files: SourceFile[], versionOverride?: string) => {
-      const requestId = store.get(latestBundleRequestIdAtom) + 1;
-      store.set(latestBundleRequestIdAtom, requestId);
-      const targetVersion = versionOverride ?? rspackVersion;
-      const shouldLoadBinding = bindingLoadedVersion !== targetVersion;
-      const isLatestRequest = () => requestId === store.get(latestBundleRequestIdAtom);
-
-      setIsBundling(true);
-      if (shouldLoadBinding) {
-        setBindingLoading(true);
-      }
-
-      try {
-        const result = await bundle(files, targetVersion);
-        if (!isLatestRequest()) {
-          return;
-        }
-
-        setBundleResult(result);
-
-        if (shouldLoadBinding) {
-          setBindingLoadedVersion(targetVersion);
-        }
-
-        if (result.output.length > 0 && activeOutputFile >= result.output.length) {
-          setActiveOutputFile(0);
-        }
-      } catch (error) {
-        if (!isLatestRequest()) {
-          return;
-        }
-
-        const message = error instanceof Error ? error.message : "Failed to load rspack binding";
-        setBundleResult(createBundleFailure(message));
-      } finally {
-        if (isLatestRequest()) {
-          setBindingLoading(false);
-          setIsBundling(false);
-        }
-      }
-    },
-    [
-      activeOutputFile,
-      bindingLoadedVersion,
-      rspackVersion,
-      setActiveOutputFile,
-      setIsBundling,
-      setBundleResult,
-      setBindingLoadedVersion,
-      setBindingLoading,
-      store,
-    ],
+    (files: SourceFile[], versionOverride?: string) => runBundle({ files, versionOverride }),
+    [runBundle],
   );
 
   return handleBundle;

src/store/bundler.ts

@@ -1,12 +1,14 @@
 import { atom } from "jotai";
+import { bundle } from "@/lib/bundle";
 import type {
   RspackChunkGroupInfo,
   RspackChunkInfo,
   RspackModuleDeps,
 } from "@/lib/bundle/dependency";
 import { deserializeShareData } from "@/lib/share";
+import { activeOutputFileAtom } from "./editor";
 import { getPresetFiles, PresetBasicLibrary } from "./presets";
-import { getSafeInitRspackVersion } from "./version";
+import { getSafeInitRspackVersion, rspackVersionAtom } from "./version";
 
 export interface SourceFile {
   filename: string;
@@ -26,6 +28,21 @@ export interface BundleResult {
   chunkGroups: RspackChunkGroupInfo[]; // chunk group graph data
 }
 
+function createBundleFailure(message: string): BundleResult {
+  return {
+    duration: 0,
+    output: [],
+    formattedOutput: [],
+    success: false,
+    errors: [message],
+    warnings: [],
+    sourcemaps: new Map(),
+    modules: [],
+    chunks: [],
+    chunkGroups: [],
+  };
+}
+
 function getInitFiles() {
   const hash = window.location.hash.slice(1);
   if (hash) {
@@ -45,3 +62,54 @@ export const latestBundleRequestIdAtom = atom(0);
 export const inputFilesAtom = atom<SourceFile[]>(getInitFiles());
 export const bundleResultAtom = atom<BundleResult | null>(null);
 export const enableFormatCode = atom(true);
+
+export const bundleActionAtom = atom(
+  null,
+  async (
+    get,
+    set,
+    { files, versionOverride }: { files: SourceFile[]; versionOverride?: string },
+  ) => {
+    const requestId = get(latestBundleRequestIdAtom) + 1;
+    set(latestBundleRequestIdAtom, requestId);
+
+    const targetVersion = versionOverride ?? (await get(rspackVersionAtom));
+    const shouldLoadBinding = get(bindingLoadedAtom) !== targetVersion;
+    const isLatestRequest = () => requestId === get(latestBundleRequestIdAtom);
+
+    set(isBundlingAtom, true);
+    if (shouldLoadBinding) {
+      set(bindingLoadingAtom, true);
+    }
+
+    try {
+      const result = await bundle(files, targetVersion);
+      if (!isLatestRequest()) {
+        return;
+      }
+
+      set(bundleResultAtom, result);
+
+      if (shouldLoadBinding) {
+        set(bindingLoadedAtom, targetVersion);
+      }
+
+      const activeOutputFile = get(activeOutputFileAtom);
+      if (result.output.length > 0 && activeOutputFile >= result.output.length) {
+        set(activeOutputFileAtom, 0);
+      }
+    } catch (error) {
+      if (!isLatestRequest()) {
+        return;
+      }
+
+      const message = error instanceof Error ? error.message : "Failed to load rspack binding";
+      set(bundleResultAtom, createBundleFailure(message));
+    } finally {
+      if (isLatestRequest()) {
+        set(bindingLoadingAtom, false);
+        set(isBundlingAtom, false);
+      }
+    }
+  },
+);