fix(webpack + vite): fix dependency watching in loader (#1662)

* fix(webpack + vite): fix dependency watching in loader

* refactor(cli): add `pathe` to avoid inconsistence on win/posix

Author: timofei-iatsenko

packages/cli/package.json

@@ -71,6 +71,7 @@
     "micromatch": "4.0.2",
     "normalize-path": "^3.0.0",
     "ora": "^5.1.0",
+    "pathe": "^1.1.0",
     "pkg-up": "^3.1.0",
     "pofile": "^1.1.4",
     "pseudolocale": "^2.0.0",

packages/cli/src/api/catalog/getCatalogDependentFiles.test.ts

@@ -2,15 +2,30 @@ import { getCatalogDependentFiles, getFormat } from "@lingui/cli/api"
 import { makeConfig } from "@lingui/conf"
 import { Catalog } from "../catalog"
 import { FormatterWrapper } from "../formats"
+import mockFs from "mock-fs"
 
 describe("getCatalogDependentFiles", () => {
   let format: FormatterWrapper
 
   beforeAll(async () => {
     format = await getFormat("po", {}, "en")
   })
+  afterEach(() => {
+    mockFs.restore()
+  })
+
+  it("Should return list template + fallbacks + sourceLocale", async () => {
+    mockFs({
+      "src/locales": {
+        "messages.pot": "bla",
+        "en.po": "bla",
+        "pl.po": "bla",
+        "es.po": "bla",
+        "pt-PT.po": "bla",
+        "pt-BR.po": "bla",
+      },
+    })
 
-  it("Should return list template + fallbacks + sourceLocale", () => {
     const config = makeConfig(
       {
         locales: ["en", "pl", "es", "pt-PT", "pt-BR"],
@@ -34,7 +49,10 @@ describe("getCatalogDependentFiles", () => {
       config
     )
 
-    expect(getCatalogDependentFiles(catalog, "pt-PT")).toMatchInlineSnapshot(`
+    const actual = await getCatalogDependentFiles(catalog, "pt-PT")
+    mockFs.restore()
+
+    expect(actual).toMatchInlineSnapshot(`
       [
         src/locales/messages.pot,
         src/locales/pt-BR.po,
@@ -43,7 +61,18 @@ describe("getCatalogDependentFiles", () => {
     `)
   })
 
-  it("Should not return itself", () => {
+  it("Should not return itself", async () => {
+    mockFs({
+      "src/locales": {
+        "messages.pot": "bla",
+        "en.po": "bla",
+        "pl.po": "bla",
+        "es.po": "bla",
+        "pt-PT.po": "bla",
+        "pt-BR.po": "bla",
+      },
+    })
+
     const config = makeConfig(
       {
         locales: ["en", "pl", "es", "pt-PT", "pt-BR"],
@@ -67,10 +96,59 @@ describe("getCatalogDependentFiles", () => {
       config
     )
 
-    expect(getCatalogDependentFiles(catalog, "en")).toMatchInlineSnapshot(`
+    const actual = await getCatalogDependentFiles(catalog, "en")
+    mockFs.restore()
+
+    expect(actual).toMatchInlineSnapshot(`
       [
         src/locales/messages.pot,
       ]
     `)
   })
+
+  it("Should not return non-existing files", async () => {
+    mockFs({
+      "src/locales": {
+        // "messages.pot": "bla",
+        "en.po": "bla",
+        "pl.po": "bla",
+        "es.po": "bla",
+        "pt-PT.po": "bla",
+        "pt-BR.po": "bla",
+      },
+    })
+
+    const config = makeConfig(
+      {
+        locales: ["en", "pl", "es", "pt-PT", "pt-BR"],
+        sourceLocale: "en",
+        fallbackLocales: {
+          "pt-PT": "pt-BR",
+          default: "en",
+        },
+      },
+      { skipValidation: true }
+    )
+
+    const catalog = new Catalog(
+      {
+        name: null,
+        path: "src/locales/{locale}",
+        include: ["src/"],
+        exclude: [],
+        format,
+      },
+      config
+    )
+
+    const actual = await getCatalogDependentFiles(catalog, "pt-PT")
+    mockFs.restore()
+
+    expect(actual).toMatchInlineSnapshot(`
+      [
+        src/locales/pt-BR.po,
+        src/locales/en.po,
+      ]
+    `)
+  })
 })

packages/cli/src/api/catalog/getCatalogDependentFiles.ts

@@ -1,13 +1,18 @@
 import { Catalog } from "../catalog"
 import { getFallbackListForLocale } from "./getFallbackListForLocale"
+import path from "pathe"
+import fs from "node:fs/promises"
+
+const fileExists = async (path: string) =>
+  !!(await fs.stat(path).catch(() => false))
 
 /**
  * Return all files catalog implicitly depends on.
  */
-export function getCatalogDependentFiles(
+export async function getCatalogDependentFiles(
   catalog: Catalog,
   locale: string
-): string[] {
+): Promise<string[]> {
   const files = new Set([catalog.templateFile])
   getFallbackListForLocale(catalog.config.fallbackLocales, locale).forEach(
     (locale) => {
@@ -19,5 +24,14 @@ export function getCatalogDependentFiles(
     files.add(catalog.getFilename(catalog.config.sourceLocale))
   }
 
-  return Array.from(files.values())
+  const out: string[] = []
+
+  for (const file of files) {
+    const filePath = path.join(catalog.config.rootDir, file)
+    if (await fileExists(filePath)) {
+      out.push(filePath)
+    }
+  }
+
+  return out
 }

packages/loader/src/webpackLoader.ts

@@ -29,9 +29,8 @@ const loader: LoaderDefinitionFunction<LinguiLoaderOptions> = async function (
     await getCatalogs(config)
   )
 
-  getCatalogDependentFiles(catalog, locale).forEach((locale) => {
-    this.addDependency(catalog.getFilename(locale))
-  })
+  const dependency = await getCatalogDependentFiles(catalog, locale)
+  dependency.forEach((file) => this.addDependency(file))
 
   const messages = await catalog.getTranslations(locale, {
     fallbackLocales: config.fallbackLocales,

packages/loader/test/json-format/lingui.config.ts

@@ -7,5 +7,8 @@ export default {
       path: "<rootDir>/locale/{locale}",
     },
   ],
+  fallbackLocales: {
+    default: "en",
+  },
   format: formatter({ style: "minimal" }),
 }

packages/loader/test/po-format/.linguirc

@@ -3,5 +3,8 @@
   "catalogs": [{
     "path": "<rootDir>/locale/{locale}"
   }],
+  "fallbackLocales": {
+    "default": "en"
+  },
   "format": "po"
 }

packages/vite-plugin/src/index.ts

@@ -53,9 +53,8 @@ Please check that catalogs.path is filled properly.\n`
 
         const { locale, catalog } = fileCatalog
 
-        getCatalogDependentFiles(catalog, locale).forEach((locale) => {
-          this.addWatchFile(catalog.getFilename(locale))
-        })
+        const dependency = await getCatalogDependentFiles(catalog, locale)
+        dependency.forEach((file) => this.addWatchFile(file))
 
         const messages = await catalog.getTranslations(locale, {
           fallbackLocales: config.fallbackLocales,

packages/vite-plugin/test/json-format/lingui.config.ts

@@ -7,5 +7,8 @@ export default {
       path: "<rootDir>/locale/{locale}",
     },
   ],
+  fallbackLocales: {
+    default: "en",
+  },
   format: formatter({ style: "minimal" }),
 }

packages/vite-plugin/test/po-format/.linguirc

@@ -3,5 +3,8 @@
   "catalogs": [{
     "path": "<rootDir>/locale/{locale}"
   }],
+  "fallbackLocales": {
+    "default": "en"
+  },
   "format": "po"
 }

yarn.lock

@@ -2694,6 +2694,7 @@ __metadata:
     mockdate: ^3.0.5
     normalize-path: ^3.0.0
     ora: ^5.1.0
+    pathe: ^1.1.0
     pkg-up: ^3.1.0
     pofile: ^1.1.4
     pseudolocale: ^2.0.0