@formatjs/ts-transformer 3.9.9 → 3.9.10

package/examples/compile.ts

@@ -0,0 +1,50 @@
+import * as ts from 'typescript'
+import {transform as intlTransformer} from '../'
+
+declare module 'fs-extra' {
+  export function outputJsonSync(file: string, data: any, opts?: {}): void
+}
+const CJS_CONFIG: ts.CompilerOptions = {
+  experimentalDecorators: true,
+  jsx: ts.JsxEmit.React,
+  module: ts.ModuleKind.CommonJS,
+  moduleResolution: ts.ModuleResolutionKind.NodeJs,
+  noEmitOnError: false,
+  noUnusedLocals: true,
+  noUnusedParameters: true,
+  stripInternal: true,
+  declaration: true,
+  baseUrl: __dirname,
+  target: ts.ScriptTarget.ES2015,
+}
+
+export default function compile(
+  input: string,
+  compilerOptions: ts.CompilerOptions = CJS_CONFIG
+) {
+  const compilerHost = ts.createCompilerHost(compilerOptions)
+  const program = ts.createProgram([input], compilerOptions, compilerHost)
+
+  const msgs = {}
+
+  let emitResult = program.emit(undefined, undefined, undefined, undefined, {
+    before: [
+      intlTransformer({
+        overrideIdFn: '[hash:base64:10]',
+      }),
+    ],
+  })
+
+  let allDiagnostics = ts
+    .getPreEmitDiagnostics(program)
+    .concat(emitResult.diagnostics)
+  console.log(
+    ts.formatDiagnosticsWithColorAndContext(allDiagnostics, {
+      getCanonicalFileName: fileName => fileName,
+      getCurrentDirectory: () => process.cwd(),
+      getNewLine: () => ts.sys.newLine,
+    })
+  )
+
+  return msgs
+}

package/index.ts

@@ -0,0 +1,3 @@
+export * from './src/transform'
+export * from './src/types'
+export * from './src/interpolate-name'

package/integration-tests/BUILD

@@ -0,0 +1,37 @@
+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",
+    srcs = glob([
+        "integration/*.ts*",
+    ]),
+    jest_config = "integration/jest.config.js",
+    deps = [
+        ":node_modules/@formatjs/ts-transformer",
+        "//:node_modules/@types/react",
+        "//:node_modules/@types/react-dom",
+        "//:node_modules/react",
+        "//:node_modules/react-dom",
+    ],
+)
+
+jest_test(
+    name = "integration-vue",
+    srcs = ["vue/integration.test.ts"] + glob([
+        "vue/fixtures/*",
+    ]),
+    flaky = True,
+    deps = [
+        ":node_modules/@formatjs/ts-transformer",
+        "//:node_modules/@types/node",
+        "//:node_modules/@types/webpack",
+        "//:node_modules/ts-loader",
+        "//:node_modules/vue",
+        "//:node_modules/vue-class-component",
+        "//:node_modules/vue-loader",
+        "//:node_modules/webpack",
+    ],
+)

package/integration-tests/integration/comp.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+const intl = {
+  formatMessage: (desc: any) => desc,
+}
+
+export function FormattedMessage(props: {
+  id?: string
+  defaultMessage: string
+  description?: string
+  children?: any
+}) {
+  return (
+    <span>
+      {props.id} - {JSON.stringify(props.defaultMessage)} - {props.description}{' '}
+      - {props.children('fooo')}
+    </span>
+  )
+}
+
+function defineMessage(any: any): any {
+  return any
+}
+export const msg = defineMessage({
+  defaultMessage: 'defineMessage',
+  description: 'foo',
+})
+
+export const Component = (): React.ReactElement => {
+  return (
+    <FormattedMessage defaultMessage="test message">
+      {(chunks: any) => chunks}
+    </FormattedMessage>
+  )
+}
+
+export const formattedMessage = intl.formatMessage({
+  defaultMessage: 'formatMessage',
+  description: 'foo',
+})

package/integration-tests/integration/jest.config.js

@@ -0,0 +1,25 @@
+console.log(process.cwd())
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json',
+      astTransformers: {
+        before: [
+          {
+            path: require.resolve(
+              '@formatjs/ts-transformer/ts-jest-integration'
+            ),
+            options: {
+              // options
+              overrideIdFn: '[sha512:contenthash:base64:6]',
+              ast: true,
+            },
+          },
+        ],
+      },
+    },
+  },
+  verbose: true,
+}

package/integration-tests/integration/ts-jest.test.tsx

@@ -0,0 +1,32 @@
+import {msg, Component, formattedMessage} from './comp'
+import * as React from 'react'
+import * as ReactDOMServer from 'react-dom/server'
+describe('ts-jest transformer', function () {
+  it('should work with ts-jest', function () {
+    expect(msg).toEqual({
+      defaultMessage: [
+        {
+          type: 0,
+          value: 'defineMessage',
+        },
+      ],
+      id: 'Vg+BA7',
+    })
+  })
+  it('intl.formatMessage', function () {
+    expect(formattedMessage).toEqual({
+      defaultMessage: [
+        {
+          type: 0,
+          value: 'formatMessage',
+        },
+      ],
+      id: 'w8L3pO',
+    })
+  })
+  it('Comp', function () {
+    expect(ReactDOMServer.renderToString(<Component />)).toEqual(
+      '<span data-reactroot="">lQsqfv<!-- --> - <!-- -->[{&quot;type&quot;:0,&quot;value&quot;:&quot;test message&quot;}]<!-- --> - <!-- --> <!-- -->- <!-- -->fooo</span>'
+    )
+  })
+})

package/integration-tests/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@formatjs/ts-transformer": "workspace:*"
+  }
+}

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

@@ -0,0 +1,30 @@
+<template>
+  <p>
+    Index
+    {{ $formatMessage({defaultMessage: 'test message (id not injected)'}) }}
+  </p>
+</template>
+
+<script lang="ts">
+import {inject} from 'vue'
+import {Vue} from 'vue-class-component'
+
+class Index extends Vue {
+  public created() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const intl = inject('intl')!
+
+    console.log(
+      // @ts-ignore
+      intl.formatMessage({defaultMessage: 'message in created (id injected)'})
+    )
+  }
+}
+
+export default Index
+</script>
+
+<script lang="ts" setup>
+const intl = useIntl()
+console.log(intl.formatMessage({defaultMessage: 'script setup'}))
+</script>

package/integration-tests/vue/fixtures/main.ts

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

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

@@ -0,0 +1,75 @@
+import webpack from 'webpack'
+import {VueLoaderPlugin} from 'vue-loader'
+import {readFileSync} from 'fs'
+import {join} from 'path'
+import {transform} from '@formatjs/ts-transformer'
+test('tranpilation', function (done) {
+  webpack(
+    {
+      entry: require.resolve('./fixtures/main.ts'),
+      output: {
+        path: __dirname,
+        filename: 'out.js',
+      },
+      module: {
+        rules: [
+          {
+            test: /\.vue$/,
+            loader: 'vue-loader',
+          },
+          {
+            test: /\.[t|j]s$/u,
+            use: [
+              {
+                loader: 'ts-loader',
+                options: {
+                  appendTsSuffixTo: [/\.vue$/u],
+                  getCustomTransformers() {
+                    return {
+                      before: [
+                        transform({
+                          overrideIdFn: '[sha512:contenthash:base64:6]',
+                        }),
+                      ],
+                    }
+                  },
+                  transpileOnly: true,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      plugins: [new VueLoaderPlugin()],
+    },
+    (err, stats) => {
+      expect(err).toBeNull()
+      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'
+      )
+      const outFileContent = readFileSync(outFile, 'utf-8')
+      expect(outFileContent).toContain(
+        '.formatMessage({id:"XOeJ9m",defaultMessage:"message in created (id injected)"}))}'
+      )
+      expect(outFileContent).toContain(
+        '$formatMessage({id:"GuoEHM",defaultMessage:"test message (id not injected)"}))'
+      )
+      expect(outFileContent).toContain(
+        '.formatMessage({id:"S3wEt4",defaultMessage:"script setup"}))'
+      )
+      done()
+    }
+  )
+}, 30000)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formatjs/ts-transformer",
-  "version": "3.9.9",
+  "version": "3.9.10",
   "description": "TS Compiler transformer for formatjs",
   "main": "index.js",
   "types": "index.d.ts",
@@ -17,7 +17,7 @@
     "react-intl"
   ],
   "dependencies": {
-    "@formatjs/icu-messageformat-parser": "2.1.4",
+    "@formatjs/icu-messageformat-parser": "2.1.5",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/node": "14 || 16 || 17",
     "chalk": "^4.0.0",
@@ -39,4 +39,4 @@
     "url": "https://github.com/formatjs/formatjs/issues"
   },
   "homepage": "https://github.com/formatjs/formatjs#readme"
-}
+}

package/src/console_utils.ts

@@ -0,0 +1,32 @@
+import {green, red, yellow} from 'chalk'
+import {format} from 'util'
+
+const LEVEL_COLORS = {
+  debug: green,
+  warn: yellow,
+  error: red,
+}
+
+function label(level: keyof typeof LEVEL_COLORS, message: string) {
+  return `[@formatjs/ts-transformer] [${LEVEL_COLORS[level](
+    level.toUpperCase()
+  )}] ${message}`
+}
+
+export async function debug(message: string, ...args: any[]) {
+  if (process.env.LOG_LEVEL !== 'debug') {
+    return
+  }
+  console.error(format(label('debug', message), ...args))
+  console.error('\n')
+}
+
+export function warn(message: string, ...args: any[]): void {
+  console.error(format(label('warn', message), ...args))
+  console.error('\n')
+}
+
+export function error(message: string, ...args: any[]): void {
+  console.error(format(label('error', message), ...args))
+  console.error('\n')
+}

package/src/interpolate-name.ts

@@ -0,0 +1,147 @@
+import * as path from 'path'
+import {BinaryToTextEncoding, createHash} from 'crypto'
+export interface LoaderContext {
+  resourceQuery?: string
+  resourcePath?: string
+  options?: {
+    customInterpolateName(
+      this: LoaderContext,
+      url: string,
+      name: string | NameFn,
+      options: Options
+    ): string
+  }
+}
+
+export interface Options {
+  context?: string
+  content?: string
+  regExp?: RegExp
+}
+
+export type NameFn = (resourcePath?: string, resourceQuery?: string) => string
+
+function getHashDigest(
+  content: string,
+  hashType = 'md5',
+  digestType: BinaryToTextEncoding = 'hex',
+  length = 9999
+) {
+  const hasher = createHash(hashType)
+  hasher.update(content)
+  return hasher.digest(digestType).slice(0, length)
+}
+
+export function interpolateName(
+  loaderContext: LoaderContext,
+  name: string | NameFn,
+  options: Options
+) {
+  let filename
+
+  const hasQuery =
+    loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1
+
+  if (typeof name === 'function') {
+    filename = name(
+      loaderContext.resourcePath,
+      hasQuery ? loaderContext.resourceQuery : undefined
+    )
+  } else {
+    filename = name || '[hash].[ext]'
+  }
+
+  const context = options.context
+  const content = options.content
+  const regExp = options.regExp
+
+  let ext = 'bin'
+  let basename = 'file'
+  let directory = ''
+  let folder = ''
+  let query = ''
+
+  if (loaderContext.resourcePath) {
+    const parsed = path.parse(loaderContext.resourcePath)
+    let resourcePath = loaderContext.resourcePath
+
+    if (parsed.ext) {
+      ext = parsed.ext.slice(1)
+    }
+
+    if (parsed.dir) {
+      basename = parsed.name
+      resourcePath = parsed.dir + path.sep
+    }
+
+    if (typeof context !== 'undefined') {
+      directory = path
+        .relative(context, resourcePath + '_')
+        .replace(/\\/g, '/')
+        .replace(/\.\.(\/)?/g, '_$1')
+      directory = directory.slice(0, -1)
+    } else {
+      directory = resourcePath.replace(/\\/g, '/').replace(/\.\.(\/)?/g, '_$1')
+    }
+
+    if (directory.length === 1) {
+      directory = ''
+    } else if (directory.length > 1) {
+      folder = path.basename(directory)
+    }
+  }
+
+  if (loaderContext.resourceQuery && loaderContext.resourceQuery.length > 1) {
+    query = loaderContext.resourceQuery
+
+    const hashIdx = query.indexOf('#')
+
+    if (hashIdx >= 0) {
+      query = query.slice(0, hashIdx)
+    }
+  }
+
+  let url = filename
+
+  if (content) {
+    // Match hash template
+    url = url
+      // `hash` and `contenthash` are same in `loader-utils` context
+      // let's keep `hash` for backward compatibility
+      .replace(
+        /\[(?:([^:\]]+):)?(?:hash|contenthash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi,
+        (_, hashType, digestType, maxLength) =>
+          getHashDigest(content, hashType, digestType, parseInt(maxLength, 10))
+      )
+  }
+
+  url = url
+    .replace(/\[ext\]/gi, () => ext)
+    .replace(/\[name\]/gi, () => basename)
+    .replace(/\[path\]/gi, () => directory)
+    .replace(/\[folder\]/gi, () => folder)
+    .replace(/\[query\]/gi, () => query)
+
+  if (regExp && loaderContext.resourcePath) {
+    const match = loaderContext.resourcePath.match(new RegExp(regExp))
+
+    match &&
+      match.forEach((matched, i) => {
+        url = url.replace(new RegExp('\\[' + i + '\\]', 'ig'), matched)
+      })
+  }
+
+  if (
+    typeof loaderContext.options === 'object' &&
+    typeof loaderContext.options.customInterpolateName === 'function'
+  ) {
+    url = loaderContext.options.customInterpolateName.call(
+      loaderContext,
+      url,
+      name,
+      options
+    )
+  }
+
+  return url
+}