fix: update readme after extractor changes that removes limitations

packages/extractor-vue/README.md

@@ -1,18 +1,24 @@
-# Vue extractor
+[![License][badge-license]][license]
+[![Version][badge-version]][package]
+[![Downloads][badge-downloads]][package]
 
-This package contains a set of custom extractors that handles Vue files. It supports extracting messages from script and setup scripts as well as limited support for extracting messages from templates.
+# @lingui/vue-extractor
+
+This package contains a custom extractor that handles Vue.js files. It supports extracting messages from script and setup scripts as well as Vue templates.
+
+`@lingui/vue-extractor` is part of [LinguiJS][linguijs]. See the [documentation][documentation] for all information, tutorials and examples.
 
 ## Installation
 
 ```sh
-npm install @lingui/extractor-vue
+npm install --save-dev @lingui/extractor-vue
 ```
 
 ## Usage
 
-This custom extractor requires that you use typescript for your lingui configuration.
+This custom extractor requires that you use JavaScript for your Lingui configuration.
 
-```ts
+```js
 import { vueExtractor } from "@lingui/extractor-vue"
 import babel from "@lingui/cli/api/extractors/babel"
 
@@ -27,21 +33,14 @@ const linguiConfig = {
   ],
   extractors: [babel, vueExtractor],
 }
+
 export default linguiConfig
 ```
 
-## Vue template limitations
-
-This extractor assumes annotated `i18n` calls in Vue templates.
-
-The following examples will be extracted:
-
-- `i18n._(/*i18n*/ "Message")`
-- `i18n.t(/*i18n*/ { id: "Message" })`
-- `i18n.t(/*i18n*/ { message: "Message", id: "my.message", comment: "Comment" })`
+## License
 
-While the following examples wont:
+This package is licensed under [MIT][license] license.
 
-- `i18n._("Message")`
-- `i18n.t({ id: "Message" })`
-- `i18n.t({ message: "Message", id: "my.message", comment: "Comment" })`
+[license]: https://github.com/lingui/js-lingui/blob/main/LICENSE
+[linguijs]: https://github.com/lingui/js-lingui
+[documentation]: https://lingui.dev/tutorials/extractor-vue

packages/extractor-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lingui/extractor-vue",
-  "version": "4.0.0-next.5",
-  "description": "Custom vue extractor to be used with CLI tool",
+  "version": "4.0.0-next.7",
+  "description": "Custom Vue.js extractor to be used with the CLI tool",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -30,12 +30,12 @@
     "node": ">=16.0.0"
   },
   "dependencies": {
-    "@lingui/cli": "^4.0.0-next.5",
-    "@lingui/conf": "^4.0.0-next.5",
+    "@lingui/cli": "^4.0.0-next.7",
+    "@lingui/conf": "^4.0.0-next.7",
     "@vue/compiler-sfc": "^3.2.47"
   },
   "devDependencies": {
-    "@lingui/babel-plugin-extract-messages": "^4.0.0-next.5",
+    "@lingui/babel-plugin-extract-messages": "^4.0.0-next.7",
     "unbuild": "^1.1.2"
   }
 }

packages/extractor-vue/src/__snapshots__/extractor.test.ts.snap

@@ -31,7 +31,7 @@ exports[`vue extractor should extract message from vue file 1`] = `
     message: My message,
     origin: [
       test.vue,
-      28,
+      27,
       11,
     ],
   },
@@ -41,9 +41,9 @@ exports[`vue extractor should extract message from vue file 1`] = `
     id: my.message,
     message: My descriptor message,
     origin: [
-      ,
-      null,
-      null,
+      test.vue,
+      29,
+      10,
     ],
   },
   {
@@ -53,8 +53,8 @@ exports[`vue extractor should extract message from vue file 1`] = `
     message: undefined,
     origin: [
       test.vue,
-      38,
-      11,
+      35,
+      5,
     ],
   },
   {
@@ -64,7 +64,7 @@ exports[`vue extractor should extract message from vue file 1`] = `
     message: undefined,
     origin: [
       test.vue,
-      39,
+      36,
       11,
     ],
   },

packages/extractor-vue/src/fixtures/test.vue

@@ -16,25 +16,22 @@ export default defineComponent({
   data() {
     return {
       i18n,
-      scriptString: i18n._("Script message"),
+      scriptString: i18n.t("Script message"),
     }
   },
 })
 </script>
 
 <template>
   {{ (x as number).toFixed(2) }}
-
-  {{ i18n.t(/*i18n*/ { id: "custom.id", message: "My message" }) }}
+  {{ i18n.t({ id: "custom.id", message: "My message" }) }}
   {{
-    i18n.t(
-      /*i18n*/ {
+    i18n.t({
         message: "My descriptor message",
         id: "my.message",
         comment: "Message comment",
-      }
-    )
+      })
   }}
-  {{ i18n._(/*i18n*/ "id used as message") }}
-  {{ i18n.t(/*i18n*/ { id: "My message without ID and context" }) }}
+  {{ i18n._("id used as message") }}
+  {{ i18n.t({ id: "My message without ID and context" }) }}
 </template>

website/docs/tutorials/extractor-vue.md

@@ -0,0 +1,38 @@
+# Vue.js Extractor
+
+The `@lingui/extractor-vue` package provides a custom extractor that handles Vue.js files.
+
+## Installation
+
+```bash npm2yarn
+npm install --save-dev @lingui/extractor-vue
+```
+
+## Usage
+
+It is required that you use JavaScript for your Lingui configuration.
+
+```js title="lingui.config.{js,ts}"
+import { vueExtractor } from "@lingui/extractor-vue"
+import babel from "@lingui/cli/api/extractors/babel"
+
+const linguiConfig = {
+  locales: ["en", "nb"],
+  sourceLocale: "en",
+  catalogs: [
+    {
+      path: "<rootDir>/src/{locale}",
+      include: ["<rootDir>/src"],
+    },
+  ],
+  extractors: [babel, vueExtractor],
+}
+
+export default linguiConfig
+```
+
+## Further reading
+
+- [Message Extraction](/docs/guides/message-extraction.md)
+- [Custom Extractor](/docs/guides/custom-extractor.md)
+- [GitHub Repository](https://github.com/lingui/js-lingui/tree/main/packages/extractor-vue)

website/sidebars.ts

@@ -54,6 +54,11 @@ const sidebar = [
         label: 'CLI',
         id: 'tutorials/cli',
       },
+      {
+        type: 'doc',
+        label: 'Extracting Vue.js messages',
+        id: 'tutorials/extractor-vue',
+      },
     ],
   },
   {

yarn.lock

@@ -2647,7 +2647,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lingui/babel-plugin-extract-messages@4.0.0-next.7, @lingui/babel-plugin-extract-messages@^4.0.0-next.5, @lingui/babel-plugin-extract-messages@workspace:packages/babel-plugin-extract-messages":
+"@lingui/babel-plugin-extract-messages@4.0.0-next.7, @lingui/babel-plugin-extract-messages@^4.0.0-next.7, @lingui/babel-plugin-extract-messages@workspace:packages/babel-plugin-extract-messages":
   version: 0.0.0-use.local
   resolution: "@lingui/babel-plugin-extract-messages@workspace:packages/babel-plugin-extract-messages"
   dependencies:
@@ -2659,7 +2659,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@lingui/cli@4.0.0-next.7, @lingui/cli@^4.0.0-next.5, @lingui/cli@workspace:*, @lingui/cli@workspace:packages/cli":
+"@lingui/cli@4.0.0-next.7, @lingui/cli@^4.0.0-next.7, @lingui/cli@workspace:*, @lingui/cli@workspace:packages/cli":
   version: 0.0.0-use.local
   resolution: "@lingui/cli@workspace:packages/cli"
   dependencies:
@@ -2704,7 +2704,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@lingui/conf@4.0.0-next.7, @lingui/conf@^4.0.0-next.5, @lingui/conf@workspace:packages/conf":
+"@lingui/conf@4.0.0-next.7, @lingui/conf@^4.0.0-next.7, @lingui/conf@workspace:packages/conf":
   version: 0.0.0-use.local
   resolution: "@lingui/conf@workspace:packages/conf"
   dependencies:
@@ -2744,9 +2744,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@lingui/extractor-vue@workspace:packages/extractor-vue"
   dependencies:
-    "@lingui/babel-plugin-extract-messages": ^4.0.0-next.5
-    "@lingui/cli": ^4.0.0-next.5
-    "@lingui/conf": ^4.0.0-next.5
+    "@lingui/babel-plugin-extract-messages": ^4.0.0-next.7
+    "@lingui/cli": ^4.0.0-next.7
+    "@lingui/conf": ^4.0.0-next.7
     "@vue/compiler-sfc": ^3.2.47
     unbuild: ^1.1.2
   languageName: unknown