feat(builder): use find-cache-dir to support customizing cache direct…

…ory location (#196)

packages/builder-rsbuild/package.json

@@ -67,6 +67,7 @@
     "cjs-module-lexer": "^1.4.1",
     "constants-browserify": "^1.0.0",
     "es-module-lexer": "^1.5.4",
+    "find-cache-dir": "^5.0.0",
     "fs-extra": "^11.2.0",
     "magic-string": "^0.30.17",
     "path-browserify": "^1.0.1",
@@ -80,6 +81,7 @@
   },
   "devDependencies": {
     "@rsbuild/core": "^1.1.7",
+    "@types/find-cache-dir": "^5.0.2",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.0.0",
     "@types/pretty-hrtime": "^1.0.3",

packages/builder-rsbuild/src/preview/virtual-module-mapping.ts

@@ -2,6 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { join, resolve } from 'node:path'
 import { webpackIncludeRegexp } from '@storybook/core-webpack'
+import findCacheDirectory from 'find-cache-dir'
 import slash from 'slash'
 import {
   getBuilderOptions,
@@ -21,12 +22,12 @@ export const getVirtualModules = async (options: Options) => {
   const virtualModules: Record<string, string> = {}
   const cwd = process.cwd()
   const workingDir = options.cache
-    ? path.resolve(
-        process.cwd(),
-        // TODO: This is a hard code cache dir, as Rspack doesn't support virtual modules now.
-        // Remove this when Rspack supports virtual modules.
-        './node_modules/.cache/storybook/storybook-rsbuild-builder',
-      )
+    ? // TODO: This is a hard code cache dir, as Rspack doesn't support virtual modules now.
+      // Remove this when Rspack supports virtual modules.
+      (findCacheDirectory({
+        name: 'storybook-rsbuild-builder',
+        create: true,
+      }) as string)
     : process.cwd()
 
   if (!fs.existsSync(workingDir)) {