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

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",
+  "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",

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/ref/extractor-vue.md

@@ -0,0 +1,32 @@
+# Vue.js extractor
+
+The `@lingui/extractor-vue` package provides a [custom extractor](../guides/custom-extractor.md) 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
+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
+```

website/sidebars.ts

@@ -153,6 +153,11 @@ const sidebar = [
         label: '@lingui/loader',
         id: 'ref/loader',
       },
+      {
+        type: 'doc',
+        label: '@lingui/extractor-vue',
+        id: 'ref/extractor-vue',
+      },
       {
         type: 'doc',
         label: 'Lingui Configuration',