babel-plugin-formatjs 10.3.25 → 10.3.26

package/index.ts

@@ -0,0 +1,88 @@
+import {declare} from '@babel/helper-plugin-utils'
+import {PluginObj, PluginPass} from '@babel/core'
+import babelPluginSyntaxJsx from '@babel/plugin-syntax-jsx'
+import {ExtractedMessageDescriptor, Options, State} from './types'
+import {visitor as JSXOpeningElement} from './visitors/jsx-opening-element'
+import {visitor as CallExpression} from './visitors/call-expression'
+
+export type ExtractionResult<M = Record<string, string>> = {
+  messages: ExtractedMessageDescriptor[]
+  meta: M
+}
+
+export const DEFAULT_ID_INTERPOLATION_PATTERN = '[sha512:contenthash:base64:6]'
+
+// @ts-expect-error PluginPass doesn't allow custom state but it actually does
+export default declare<Options, PluginObj>((api, options) => {
+  api.assertVersion(7)
+  if (!options.idInterpolationPattern) {
+    options.idInterpolationPattern = DEFAULT_ID_INTERPOLATION_PATTERN
+  }
+
+  const {pragma} = options
+  const componentNames = new Set<string>(options.additionalComponentNames)
+  componentNames.add('FormattedMessage')
+  const functionNames = new Set<string>(options.additionalFunctionNames)
+  functionNames.add('formatMessage')
+  // Vue
+  functionNames.add('$formatMessage')
+  return {
+    inherits: babelPluginSyntaxJsx,
+    pre() {
+      this.componentNames = Array.from(componentNames)
+      this.functionNames = Array.from(functionNames)
+    },
+
+    visitor: {
+      Program: {
+        enter(this: PluginPass & State, path) {
+          this.messages = []
+          this.meta = {}
+          if (!pragma) {
+            return
+          }
+          for (const {leadingComments} of path.node.body) {
+            if (!leadingComments) {
+              continue
+            }
+            const pragmaLineNode = leadingComments.find(c =>
+              c.value.includes(pragma)
+            )
+            if (!pragmaLineNode) {
+              continue
+            }
+
+            pragmaLineNode.value
+              .split(pragma)[1]
+              .trim()
+              .split(/\s+/g)
+              .forEach(kv => {
+                const [k, v] = kv.split(':')
+                this.meta[k] = v
+              })
+          }
+        },
+        exit(
+          this: PluginPass & State,
+          _,
+          {
+            opts: _opts,
+            file: {
+              opts: {filename},
+            },
+          }
+        ) {
+          const opts = _opts as Options
+          if (typeof opts?.onMetaExtracted === 'function') {
+            opts.onMetaExtracted(filename || '', this.meta)
+          }
+          if (typeof opts?.onMsgExtracted === 'function') {
+            opts.onMsgExtracted(filename || '', this.messages)
+          }
+        },
+      },
+      JSXOpeningElement,
+      CallExpression,
+    },
+  }
+})

package/integration-tests/BUILD

@@ -0,0 +1,21 @@
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("//tools:jest.bzl", "jest_test")
+
+npm_link_all_packages(name = "node_modules")
+
+jest_test(
+    name = "integration-vue",
+    srcs = ["vue/integration.test.ts"] + glob([
+        "vue/fixtures/*",
+    ]),
+    # flaky = True,
+    deps = [
+        ":node_modules/babel-plugin-formatjs",
+        "//:node_modules/@types/node",
+        "//:node_modules/@types/webpack",
+        "//:node_modules/babel-loader",
+        "//:node_modules/vue",
+        "//:node_modules/vue-loader",
+        "//:node_modules/webpack",
+    ],
+)

package/integration-tests/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "babel-plugin-formatjs": "workspace:*"
+  }
+}

package/integration-tests/vue/fixtures/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <p>
+    {{
+      _ctx.formatMessage(
+        {id: 'myMessage', defaultMessage: 'Today is {ts, date,::yyyyMMdd}'},
+        {ts: Date.now()}
+      )
+    }}
+    <br />
+    {{ $formatNumber(19, {style: 'currency', currency: 'EUR'}) }}
+  </p>
+</template>
+
+<script>
+intl.formatMessage({defaultMessage: 'blah'})
+export default {
+  name: 'App',
+}
+</script>

package/integration-tests/vue/fixtures/app.js

@@ -0,0 +1,6 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.mount('#app')

package/integration-tests/vue/integration.test.ts

@@ -0,0 +1,62 @@
+import webpack from 'webpack'
+import {VueLoaderPlugin} from 'vue-loader'
+import {readFileSync} from 'fs'
+import {join} from 'path'
+test('dummy', function (done) {
+  console.log(require.resolve('babel-plugin-formatjs'))
+  webpack(
+    {
+      entry: require.resolve('./fixtures/app.js'),
+      output: {
+        filename: 'out.js',
+      },
+      module: {
+        rules: [
+          {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+          },
+          // this will apply to both plain `.js` files
+          // AND `<script>` blocks in `.vue` files
+          {
+            test: /\.js$/,
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                [
+                  require.resolve('babel-plugin-formatjs'),
+                  {
+                    idInterpolationPattern: '[sha512:contenthash:base64:6]',
+                    ast: true,
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      },
+      plugins: [new VueLoaderPlugin()],
+    },
+    function (err, stats) {
+      const statsJson = stats?.toJson()
+      if (!statsJson) {
+        throw new Error('missing stats')
+      }
+      if (err) {
+        throw err
+      }
+      if (stats?.hasErrors()) {
+        console.error(statsJson.errors)
+        throw new Error('err compiling')
+      }
+      const outFile = join(
+        statsJson.outputPath || __dirname,
+        statsJson.assets?.[0].name || 'out.js'
+      )
+      expect(readFileSync(outFile, 'utf-8')).toContain(
+        '[{type:0,value:"Today is "},{type:3,value:"ts",style:{type:1,pattern:"yyyyMMdd",parsedOptions:{year:"numeric",month:"2-digit",day:"2-digit"}}}]'
+      )
+      done()
+    }
+  )
+}, 30000)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-formatjs",
-  "version": "10.3.25",
+  "version": "10.3.26",
   "description": "Extracts string messages for translation from modules that use formatjs.",
   "repository": {
     "type": "git",
@@ -16,10 +16,11 @@
     "@babel/plugin-syntax-jsx": "7",
     "@babel/traverse": "7",
     "@babel/types": "^7.12.11",
-    "@formatjs/icu-messageformat-parser": "2.1.4",
-    "@formatjs/ts-transformer": "3.9.9",
+    "@formatjs/icu-messageformat-parser": "2.1.5",
+    "@formatjs/ts-transformer": "3.9.10",
     "@types/babel__core": "^7.1.7",
     "@types/babel__helper-plugin-utils": "^7.10.0",
+    "@types/babel__traverse": "^7.1.7",
     "tslib": "2.4.0"
   },
   "keywords": [
@@ -31,4 +32,4 @@
   },
   "homepage": "https://github.com/formatjs/formatjs#readme",
   "gitHead": "8b0baec8eda5002715cf893274fe59782fc2d371"
-}
+}