fix(vue-extractor): fix default export burden with /api/extractors/babel (#1626)

Author: Timofei Iatsenko

packages/cli/src/api/index.ts

@@ -3,4 +3,6 @@ export { getCatalogForFile, getCatalogs } from "./catalog/getCatalogs"
 
 export { createCompiledCatalog } from "./compile"
 
+export { default as extractor } from "./extractors/babel"
+
 export * from "./types"

packages/extractor-vue/README.md

@@ -16,12 +16,13 @@ npm install --save-dev @lingui/extractor-vue
 
 ## Usage
 
-This custom extractor requires that you use JavaScript for your Lingui configuration.
+This custom extractor requires that you use JavaScript or TypeScript for your Lingui configuration.
 
 ```js
 import { vueExtractor } from "@lingui/extractor-vue"
-import babel from "@lingui/cli/api/extractors/babel"
+import { extractor as defaultExtractor } from "@lingui/cli/api"
 
+/** @type {import('@lingui/conf').LinguiConfig} */
 const linguiConfig = {
   locales: ["en", "nb"],
   sourceLocale: "en",
@@ -31,7 +32,7 @@ const linguiConfig = {
       include: ["<rootDir>/src"],
     },
   ],
-  extractors: [babel, vueExtractor],
+  extractors: [defaultExtractor, vueExtractor],
 }
 
 export default linguiConfig

packages/extractor-vue/src/vue-extractor.ts

@@ -1,5 +1,5 @@
 import { parse, compileTemplate, SFCBlock } from "@vue/compiler-sfc"
-import babel from "@lingui/cli/api/extractors/babel"
+import { extractor } from "@lingui/cli/api"
 import type { ExtractorCtx, ExtractorType } from "@lingui/conf"
 
 export const vueExtractor: ExtractorType = {
@@ -18,17 +18,21 @@ export const vueExtractor: ExtractorType = {
       ignoreEmpty: true,
     })
 
+    const isTsBlock = (block: SFCBlock) => block?.lang === "ts"
+
     const compiledTemplate =
       descriptor.template &&
       compileTemplate({
         source: descriptor.template.content,
         filename,
         inMap: descriptor.template.map,
         id: filename,
+        compilerOptions: {
+          isTS:
+            isTsBlock(descriptor.script) || isTsBlock(descriptor.scriptSetup),
+        },
       })
 
-    const isTsBlock = (block: SFCBlock) => block?.lang === "ts"
-
     const targets = [
       [
         descriptor.script?.content,
@@ -51,7 +55,7 @@ export const vueExtractor: ExtractorType = {
       targets
         .filter(([source]) => Boolean(source))
         .map(([source, map, isTs]) =>
-          babel.extract(
+          extractor.extract(
             filename + (isTs ? ".ts" : ""),
             source,
             onMessageExtracted,

tsconfig.json

@@ -24,10 +24,7 @@
       "@lingui/macro": ["./packages/macro/src"],
       "@lingui/format-po": ["./packages/format-po/src/po.ts"],
       "@lingui/format-json": ["./packages/format-json/src/json.ts"],
-      "@lingui/extractor-vue": ["./packages/extractor-vue/src"],
-      "@lingui/cli/api/extractors/babel": [
-        "./packages/cli/src/api/extractors/babel"
-      ]
+      "@lingui/extractor-vue": ["./packages/extractor-vue/src"]
     }
   },
   "exclude": [

website/docs/guides/custom-extractor.md

@@ -5,7 +5,7 @@ If your project is not working well with Lingui's Extractor, you can write your
 That might be the case if you use some experimental features (stage0 - stage2) or frameworks with custom syntax such as Vue.js or Svelte.
 
 ```ts title="./my-custom-extractor.ts"
-import babel from "@lingui/cli/api/extractors/babel"
+import { extractor as defaultExtractor } from "@lingui/cli/api"
 
 export const extractor: ExtractorType = {
   match(filename: string) {
@@ -17,7 +17,7 @@ export const extractor: ExtractorType = {
 
     // you can acess lingui config from using `ctx.linguiConfig`
     // reuse extractor from cli
-    return babel.extract(filename, code, onMessageExtracted, {sourcemaps, ...ctx})
+    return defaultExtractor.extract(filename, code, onMessageExtracted, {sourcemaps, ...ctx})
   }
 }
 ```

website/docs/tutorials/extractor-vue.md

@@ -10,12 +10,13 @@ npm install --save-dev @lingui/extractor-vue
 
 ## Usage
 
-It is required that you use JavaScript for your Lingui configuration.
+It is required that you use JavaScript or TypeScript for your Lingui configuration.
 
 ```js title="lingui.config.{js,ts}"
 import { vueExtractor } from "@lingui/extractor-vue"
-import babel from "@lingui/cli/api/extractors/babel"
+import { extractor as defaultExtractor } from "@lingui/cli/api"
 
+/** @type {import('@lingui/conf').LinguiConfig} */
 const linguiConfig = {
   locales: ["en", "nb"],
   sourceLocale: "en",