fix: persistent cache panic when using addFileWatchFile with query #2067

.changeset/eight-mice-march.md

@@ -0,0 +1,8 @@
+---
+"@farmfe/js-plugin-postcss": patch
+"@farmfe/js-plugin-less": patch
+"@farmfe/js-plugin-sass": patch
+"@farmfe/core": patch
+---
+
+Fix persistent cache panic when using addFileWatchFile with query #2067

crates/compiler/src/build/module_cache.rs

@@ -305,9 +305,8 @@ fn is_watch_dependencies_timestamp_changed(
     "is_watch_dependencies_timestamp_changed: {:?}",
     cached_module.module.id
   ));
-  let module_id = cached_module.module.id.clean_id();
   let watch_graph = context.watch_graph.read();
-  let relation_dependencies = watch_graph.relation_dependencies(&module_id);
+  let relation_dependencies = watch_graph.relation_dependencies(&cached_module.module.id);
 
   if relation_dependencies.is_empty() {
     return false;
@@ -342,9 +341,8 @@ fn is_watch_dependencies_content_hash_changed(
     "is_watch_dependencies_content_hash_changed: {:?}",
     cached_module.module.id
   ));
-  let module_id = cached_module.module.id.clean_id();
   let watch_graph = context.watch_graph.read();
-  let relation_dependencies = watch_graph.relation_dependencies(&module_id);
+  let relation_dependencies = watch_graph.relation_dependencies(&cached_module.module.id);
 
   if relation_dependencies.is_empty() {
     return false;

crates/core/src/module/mod.rs

@@ -712,14 +712,6 @@ impl ModuleId {
 
     (p.to_string(), query.to_string())
   }
-
-  // path without query
-  pub fn clean_id(&self) -> ModuleId {
-    Self {
-      relative_path: self.relative_path.clone(),
-      query_string: "".to_string(),
-    }
-  }
 }
 
 impl From<&str> for ModuleId {

examples/react/src/index.module.scss

@@ -0,0 +1,11 @@
+@import './variables.scss';
+
+:global {
+  body {
+    background-color: $primaryColor;
+  }  
+}
+
+.main {
+  display: block;
+}

examples/react/src/index.tsx

@@ -1,16 +1,14 @@
-import { Provider } from 'react-redux';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Main } from './main';
-import { store } from './store';
+import { Provider } from "react-redux";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Main } from "./main";
+import { store } from "./store";
 
-import './index.scss';
-
-const container = document.querySelector('#root');
+const container = document.querySelector("#root");
 const root = createRoot(container);
 
 root.render(
   <Provider store={store}>
     <Main />
-  </Provider>
+  </Provider>,
 );

examples/react/src/main.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
-import { useStore } from 'react-redux';
+import React from "react";
+import { useStore } from "react-redux";
 
-import { Welcome } from './components/index';
-import './main.css';
+import { Welcome } from "./components/index";
+import "./main.css";
 
-import { BizType } from './enums';
+import { BizType } from "./enums";
 
-import * as Sentry from '@sentry/react';
-import { Effect } from 'effect';
+import * as Sentry from "@sentry/react";
+import { Effect } from "effect";
+
+import styles from "./index.module.scss";
 
 Sentry.init({});
 
@@ -18,9 +20,9 @@ export function Main() {
   console.log(import.meta.env);
   return (
     <>
-      <div style={{ color: '#fff' }}>
+      <div style={{ color: "#fff" }} className={styles.main}>
         <div>effect: {result}</div>
-        <div style={{ width: '100px', color: '#fff' }}>
+        <div style={{ width: "100px", color: "#fff" }}>
           <b>store.api.config.online: </b>
           {JSON.stringify(store.getState().api.config.online)}
           BizType: {BizType.First} {BizType.Second}

examples/vite-adapter-vue/package.json

@@ -3,14 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@sinclair/typebox": "^0.32.33",
     "@opentiny/vue": "^3.18.0",
+    "@sinclair/typebox": "^0.32.33",
     "ant-design-vue": "3",
+    "argon2-browser": "^1.18.0",
     "axios": "^1.4.0",
     "bcryptjs": "^2.4.3",
     "bootstrap": "^5.3.3",
     "core-js": "^3.30.1",
     "element-plus": "^2.4.1",
+    "lodash-es": "^4.17.21",
     "prettier": "^3.3.2",
     "vue": "^3.2.45",
     "vue-router": "^4.2.1"
@@ -25,6 +27,7 @@
     "@farmfe/js-plugin-vue": "workspace:*",
     "@farmfe/plugin-sass": "workspace:^",
     "@types/bcryptjs": "^2.4.5",
+    "@types/lodash-es": "^4.17.12",
     "@unocss/postcss": "^0.62.2",
     "@vitejs/plugin-vue": "5.1.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

examples/vite-adapter-vue/src/App.vue

@@ -2,6 +2,13 @@
   <el-tabs v-model="activeName">
     <img src="/logo.png" alt="">
     <el-tab-pane label="test" name="test">
+      Map is weakMap: {{mapIsWeakMap}}; 
+      WeakMap is weakMap: {{weakMapIsWeakMap}};
+
+      <ElButton type="primary" @click="hashValue">
+        Argon2 hash
+      </ElButton>
+      Hash Bytes: {{hashBytes}}
       <test />
     </el-tab-pane>
     <el-tab-pane label="test1" name="test1">
@@ -26,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElTabs, ElTabPane } from 'element-plus'
+import { ElTabs, ElTabPane, ElButton } from 'element-plus'
 import 'element-plus/theme-chalk/src/tabs.scss'
 import 'element-plus/theme-chalk/src/tab-pane.scss'
 // import { Button as TinyButton, Modal } from '@opentiny/vue'
@@ -41,8 +48,27 @@ import home from './pages/index.vue';
 import aboute from '../deps/node_modules/my-ui/index.vue'
 
 import './test';
+import { isWeakMap } from 'lodash-es';
+
+const hashBytes = ref('')
+
+async function hashValue() {
+  const {hash: getHash, ArgonType} = await import('argon2-browser/dist/argon2-bundled.min')
+  const {hash} = await getHash({
+    pass: 'any string here',
+    salt: Date.now().toString(),
+    time: 10,
+    mem: 8 * 2 * 10,
+    hashLen: 32,
+    type: ArgonType.Argon2id
+  })
+  hashBytes.value = hash
+}
+
 
 const activeName = ref('test')
+const mapIsWeakMap = isWeakMap(new Map())
+const weakMapIsWeakMap = isWeakMap(new WeakMap())
 </script>
 
 <style lang="scss" scoped>

js-plugins/less/src/index.ts

@@ -137,7 +137,7 @@ export default function farmLessPlugin(
 
           if (compiler && imports && !isProd) {
             for (const dep of imports) {
-              compiler.addExtraWatchFile(param.resolvedPath, [
+              compiler.addExtraWatchFile(param.moduleId, [
                 path.resolve(fileRoot, dep)
               ]);
             }

js-plugins/postcss/src/index.ts

@@ -139,10 +139,7 @@ export default function farmPostcssPlugin(
           if (process.env.NODE_ENV === 'development') {
             for (const message of messages) {
               if (message.type === 'dependency') {
-                context.addWatchFile(
-                  param.resolvedPath,
-                  message.file as string
-                );
+                context.addWatchFile(param.moduleId, message.file as string);
               } else if (message.type === 'dir-dependency') {
                 const { dir, glob: globPattern = '**' } = message;
                 // https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#3-dependencies
@@ -152,7 +149,7 @@ export default function farmPostcssPlugin(
                 });
                 for (const file of files) {
                   context.addWatchFile(
-                    param.resolvedPath,
+                    param.moduleId,
                     path.isAbsolute(file) ? file : path.join(dir, file)
                   );
                 }

js-plugins/sass/src/index.ts

@@ -325,7 +325,7 @@ async function compileScss(param: CompileCssParams) {
 
     if (file === transformParam.resolvedPath) continue;
 
-    ctx.addWatchFile(transformParam.resolvedPath, file);
+    ctx.addWatchFile(transformParam.moduleId, file);
   }
 
   return { css, sourceMap };
@@ -383,7 +383,7 @@ async function compileScssLegacy(param: CompileCssParams) {
 
         result.stats.includedFiles.forEach((file) => {
           if (file === transformParam.resolvedPath) return;
-          ctx.addWatchFile(transformParam.resolvedPath, file);
+          ctx.addWatchFile(transformParam.moduleId, file);
         });
 
         resolve({