feat: add full support of Vue.js

jest.config.js

@@ -71,6 +71,7 @@ module.exports = {
         "<rootDir>/packages/format-csv",
         "<rootDir>/packages/message-utils",
         "<rootDir>/packages/extractor-vue",
+        "<rootDir>/packages/vue",
       ],
     },
   ],

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

@@ -27,7 +27,17 @@ export const vueExtractor: ExtractorType = {
         filename,
         inMap: descriptor.template.map,
         id: filename,
+
         compilerOptions: {
+          nodeTransforms: [
+            // will be called for each ast "node"
+            // we want to run our test on the 1st real node
+            (node, context) => {
+              // context.
+              console.log(node, context)
+            },
+          ],
+
           isTS:
             isTsBlock(descriptor.script) || isTsBlock(descriptor.scriptSetup),
         },

packages/vue/README.md

@@ -0,0 +1,34 @@
+[![License][badge-license]][license]
+[![Version][badge-version]][package]
+[![Downloads][badge-downloads]][package]
+
+# @lingui/vue
+
+> vue components for internationalization
+
+`@lingui/vue` is part of [LinguiJS][linguijs]. See the [documentation][documentation] for all information, tutorials and examples.
+
+## Installation
+
+```sh
+npm install --save @lingui/vue
+# yarn add @lingui/vue
+```
+
+## Usage
+
+See the [tutorial][tutorial] or [reference][reference] documentation.
+
+## License
+
+[MIT][license]
+
+[license]: https://github.com/lingui/js-lingui/blob/main/LICENSE
+[linguijs]: https://github.com/lingui/js-lingui
+[documentation]: https://lingui.dev
+[tutorial]: https://lingui.dev/tutorials/vue
+[reference]: https://lingui.dev/ref/vue
+[package]: https://www.npmjs.com/package/@lingui/vue
+[badge-downloads]: https://img.shields.io/npm/dw/@lingui/vue.svg
+[badge-version]: https://img.shields.io/npm/v/@lingui/vue.svg
+[badge-license]: https://img.shields.io/npm/l/@lingui/vue.svg

packages/vue/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@lingui/vue",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "5.0.0-next.0",
+  "sideEffects": false,
+  "description": "Vue components & tools for translations",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "author": {
+    "name": "Jérôme Steunou",
+    "email": "jerome.steunou@gmail.com"
+  },
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "component",
+    "i18n",
+    "internationalization",
+    "i9n",
+    "translation",
+    "icu",
+    "messageformat",
+    "multilingual",
+    "localization",
+    "l10n"
+  ],
+  "scripts": {
+    "build": "rimraf ./dist && unbuild",
+    "stub": "unbuild --stub"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lingui/js-lingui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lingui/js-lingui/issues"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./compiler": {
+      "require": {
+        "types": "./dist/compiler/index.d.cts",
+        "default": "./dist/compiler/index.cjs"
+      },
+      "import": {
+        "types": "./dist/compiler/index.d.mts",
+        "default": "./dist/compiler/index.mjs"
+      }
+    },
+    "./extractor": {
+      "require": {
+        "types": "./dist/extractor/index.d.cts",
+        "default": "./dist/extractor/index.cjs"
+      },
+      "import": {
+        "types": "./dist/extractor/index.d.mts",
+        "default": "./dist/extractor/index.mjs"
+      }
+    },
+    "./vite-plugin": {
+      "require": {
+        "types": "./dist/vite-plugin/index.d.cts",
+        "default": "./dist/vite-plugin/index.cjs"
+      },
+      "import": {
+        "types": "./dist/vite-plugin/index.d.mts",
+        "default": "./dist/vite-plugin/index.mjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/generator": "^7.20.12",
+    "@babel/types": "^7.20.12",
+    "@lingui/babel-plugin-lingui-macro": "5.0.0-next.0",
+    "@lingui/cli": "5.0.0-next.0",
+    "@lingui/core": "5.0.0-next.0",
+    "@lingui/message-utils": "5.0.0-next.0",
+    "@lingui/vite-plugin": "5.0.0-next.0",
+    "@vue/compiler-core": "^3.3.4",
+    "@vue/compiler-sfc": "^3.3.4",
+    "vue": "^3.3.4"
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "*",
+    "vite": "^3 || ^4 || ^5.0.9"
+  },
+  "devDependencies": {
+    "@lingui/conf": "5.0.0-next.0",
+    "@types/babel__core": "^7.20.5",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "unbuild": "2.0.0",
+    "vite": "4.1.4"
+  }
+}

packages/vue/src/common/Trans.ts

@@ -0,0 +1,202 @@
+import {
+  type ElementNode,
+  findProp,
+  TemplateChildNode,
+  SimpleExpressionNode,
+} from "@vue/compiler-core"
+
+import {
+  isAttributeNode,
+  isElementNode,
+  isInterpolationNode,
+  isSimpleExpressionNode,
+  isTextNode,
+} from "./predicates"
+import {
+  TextToken,
+  Token,
+  JsMacroName,
+  ElementToken,
+  ArgToken,
+  isArgDecorator,
+  tokenizeArg,
+  MacroJsContext,
+} from "@lingui/babel-plugin-lingui-macro/ast"
+import * as t from "@babel/types"
+import {
+  tokenizeAsChoiceComponentOrUndefined,
+  tokenizeAsLinguiTemplateLiteralOrUndefined,
+} from "../compiler/transformVt"
+
+export const makeCounter =
+  (index = 0) =>
+  () =>
+    index++
+
+export type MacroTransVueContext = {
+  // Positional expressions counter (e.g. for placeholders `Hello {0}, today is {1}`)
+  getExpressionIndex: () => number
+  getElementIndex: () => number
+  stripNonEssentialProps: boolean
+  isLinguiIdentifier: (node: t.Identifier, macro: JsMacroName) => boolean
+}
+
+export function createMacroTransVueContext(
+  isLinguiIdentifier: MacroTransVueContext["isLinguiIdentifier"],
+  stripNonEssentialProps: boolean
+): MacroTransVueContext {
+  return {
+    getExpressionIndex: makeCounter(),
+    getElementIndex: makeCounter(),
+    isLinguiIdentifier,
+    stripNonEssentialProps,
+  }
+}
+
+function tokenizeText(value: string): TextToken {
+  return {
+    type: "text",
+    value,
+  }
+}
+
+/**
+ * Receive a Vue element which is none of the Lingui macro, and returns Tokens for
+ * element itself and all of it's children
+ *
+ * ```
+ * <Trans>Hello <strong>world!</strong></Trans>
+ *              ^^^^^^^^^^^^^^^^^^^^^^^
+ * ```
+ */
+function tokenizeElementNode(
+  node: ElementNode,
+  ctx: MacroTransVueContext
+): ElementToken {
+  // !!! Important: Calculate element index before traversing children.
+  // That way outside elements are numbered before inner elements. (...and it looks pretty).
+  const name = ctx.getElementIndex()
+
+  return {
+    type: "element",
+    name,
+    value: node,
+    children: node.children
+      .flatMap((child) => tokenizeChildren(child, ctx))
+      .filter(Boolean) as Token[],
+  }
+}
+
+/**
+ * Take `<Trans>Hello <strong>{{name}}</strong></Trans>` and returns Tokens
+ */
+export function tokenizeTrans(node: ElementNode, ctx: MacroTransVueContext) {
+  return node.children
+    .flatMap((child) => tokenizeChildren(child, ctx))
+    .filter(Boolean) as Token[]
+}
+
+/**
+ * Process children of Elements and returns Tokens
+ */
+function tokenizeChildren(
+  node: TemplateChildNode,
+  ctx: MacroTransVueContext
+): Token[] {
+  // <Trans>Hello <strong>Username</strong></Trans>
+  //        ^^^^^^
+  if (isTextNode(node)) {
+    return [tokenizeText(node.content)]
+  }
+
+  // <Trans>Hello <strong>Username</strong></Trans>
+  //              ^^^^^^^^^^^^^^^^^^^^^^^^^
+  // goes into recursion for inner Element Nodes
+  if (isElementNode(node)) {
+    return [tokenizeElementNode(node, ctx)]
+  }
+
+  // <Trans>Hello {{ username }}</Trans>
+  //              ^^^^^^^^^^^^^^
+  if (isInterpolationNode(node) && isSimpleExpressionNode(node.content)) {
+    return tokenizeSimpleExpressionNode(node.content, ctx)
+  }
+
+  return []
+}
+
+/**
+ * Take an expression from Vue interpolation and returns Tokens
+ *
+ * ```
+ * <Trans>Hello {{ username }}</Trans>
+ *              ^^^^^^^^^^^^^
+ * ```
+ *
+ * Supported expressions:
+ *
+ * - {{ username }} -> {username}
+ * - {{ user.name }} -> {0}
+ * - {{ plural(...) }} | {{ select(...) }} -> {count, plural, one {...} other {...}}
+ * - {{ arg(username) }} -> username
+ */
+function tokenizeSimpleExpressionNode(
+  node: SimpleExpressionNode,
+  ctx: MacroTransVueContext
+): Token[] {
+  if (node.ast) {
+    const vtTokens = tokenizeVt(node.ast, ctx)
+
+    if (vtTokens) {
+      return vtTokens
+    }
+
+    if (t.isCallExpression(node.ast) && isArgDecorator(node.ast, ctx)) {
+      return [tokenizeArg(node.ast, ctx)]
+    }
+
+    return [
+      {
+        type: "arg",
+        name: String(ctx.getExpressionIndex()),
+        value: node.ast as t.Expression,
+      } satisfies ArgToken,
+    ]
+  }
+
+  // For simple interpolation with identifier
+  // only Vue doesn't populate an `.ast`
+  return [
+    {
+      type: "arg",
+      name: node.content,
+      value: t.identifier(node.content),
+    } satisfies ArgToken,
+  ]
+}
+
+function tokenizeVt(node: t.Node, ctx: MacroJsContext) {
+  for (const fn of [
+    tokenizeAsChoiceComponentOrUndefined,
+    tokenizeAsLinguiTemplateLiteralOrUndefined,
+  ]) {
+    const tokens = fn(node, ctx)
+
+    if (tokens) {
+      return tokens
+    }
+  }
+
+  return
+}
+
+export function getTextProp(
+  node: ElementNode,
+  propName: string
+): string | undefined {
+  const prop = findProp(node, propName, undefined, false)
+  if (isAttributeNode(prop) && prop.value?.content) {
+    return prop.value.content
+  }
+  return undefined
+}