i18n: typescript integration

.circleci/config.yml

@@ -76,7 +76,7 @@ jobs:
           blackduck-project-name: i18n
           blackduck-project-path: *workspace_root
 
-  fortify-translate-and-scan: 
+  fortify-translate-and-scan:
     executor: fortify
     working_directory: *workspace_root
     steps:
@@ -128,18 +128,6 @@ jobs:
 
       - run: yarn lint
 
-  flow:
-    <<: *container_config
-
-    working_directory: *workspace_root
-
-    steps:
-      - checkout
-
-      - *restore_deps
-
-      - run: yarn flow
-
 workflows:
   version: 2
   build_and_test:
@@ -153,10 +141,6 @@ workflows:
           requires:
             - build
 
-      - flow:
-          requires:
-            - build
-
   blackduck-nightly-scan:
     triggers:
       - schedule:
@@ -171,7 +155,7 @@ workflows:
   fortify-workflow:
     triggers:
       - schedule:
-          cron: "0 0 * * *"
+          cron: '0 0 * * *'
           filters:
             branches:
               only: master

.eslintrc

@@ -1,3 +1,14 @@
 {
-  "extends": "react-app"
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "react-app"
+  ],
+  "rules": {
+    // note you must disable the base rule as it can report incorrect errors
+    // cf. https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
+    "no-use-before-define": "off"
+  }
 }

.gitignore

@@ -2,6 +2,7 @@
 .nyc_output
 
 node_modules
+dist
 lib
 lib-es6
 coverage

bin/i18n-extract.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../lib/scripts/extract')
+require('../dist/lib/scripts/extract')

bin/i18n-merge.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../lib/scripts/merge')
+require('../dist/lib/scripts/merge')

index.d.ts

@@ -0,0 +1,3 @@
+interface NavigatorLanguage {
+  userLanguage?: string
+}

jest.config.js

@@ -2,23 +2,23 @@
  * For a detailed explanation regarding each configuration property, visit:
  * https://jestjs.io/docs/configuration
  */
-
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
+  preset: 'ts-jest',
+
   clearMocks: true,
   collectCoverage: true,
   coverageDirectory: "coverage",
-  reporters: [ "default", "jest-junit" ],
-  coverageProvider: "babel",
+  reporters: ["default", "jest-junit"],
   coverageReporters: [
     "lcov",
   ],
   testEnvironment: "jsdom",
   testMatch: [
-    "**/__tests__/**/*.[jt]s?(x)",
     "**/?(*.)+(spec|test).[tj]s?(x)"
   ],
   transform: {
     '\\.po$': '<rootDir>/test/poFileTransformer.js',
-    '\\.js$': 'babel-jest'
+    '\\.(j|t)s$': 'ts-jest'
   },
 };

package.json

@@ -2,8 +2,8 @@
   "name": "@signavio/i18n",
   "version": "4.0.0",
   "description": "Minimalist gettext style i18n for JavaScript",
-  "main": "lib/index.js",
-  "module": "lib-es6/index.js",
+  "lib": "dist/lib/index.js",
+  "module": "dist/esm/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/signavio/i18n.git"
@@ -17,19 +17,18 @@
   },
   "scripts": {
     "prebuild": "yarn run clean",
-    "build": "yarn build:es5 && yarn build:es6",
-    "build:es5": "cross-env NODE_ENV=production BABEL_ENV=es5 babel src --out-dir lib",
-    "build:es6": "cross-env NODE_ENV=production BABEL_ENV=es6 babel src --out-dir lib-es6",
-    "clean": "rimraf lib lib-es6",
+    "clean": "rimraf lib modules",
+    "build": "yarn run build:lib && yarn build:module",
+    "build:lib": "cross-env NODE_ENV=production tsc --project tsconfig.json",
+    "build:module": "cross-env NODE_ENV=production tsc --project tsconfig.module.json",
     "coverage": "yarn test --runInBand --reporters=jest-junit",
     "dryrun": "node ./bin/i18n-extract.js test/fixtures/**/*.js",
     "format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,test}/**/*.js\"",
-    "lint": "eslint src test/specs",
+    "lint": "eslint src/ test/specs/ --ext .js,.jsx,.ts,.tsx",
     "test": "jest",
     "pretest": "yarn build",
     "prepublishOnly": "yarn build",
-    "predryrun": "yarn build",
-    "flow": "flow check"
+    "predryrun": "yarn build"
   },
   "author": "Jan-Felix Schwarz",
   "license": "BSD-3-Clause",
@@ -44,22 +43,14 @@
     "progress": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.14.5",
-    "@babel/core": "7.14.6",
-    "@babel/plugin-proposal-decorators": "7.14.5",
-    "@babel/plugin-proposal-function-sent": "7.14.5",
-    "@babel/plugin-proposal-throw-expressions": "7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-transform-proto-to-assign": "7.14.5",
-    "@babel/plugin-transform-runtime": "7.14.5",
-    "@babel/preset-env": "7.14.7",
-    "@babel/preset-flow": "7.14.5",
-    "@babel/preset-react": "7.14.5",
-    "babel-eslint": "9.0.0",
-    "babel-plugin-transform-minify-booleans": "6.8.3",
-    "babel-plugin-transform-remove-console": "6.8.5",
-    "babel-plugin-transform-remove-debugger": "6.8.5",
+    "@types/glob": "^7.2.0",
+    "@types/jest": "^27.4.0",
+    "@types/marked": "^4.0.1",
+    "@types/progress": "^2.0.5",
+    "@types/react": "^17.0.38",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "babel-eslint": "9.x",
     "commander": "6.2.1",
     "cross-env": "4.0.0",
     "eslint": "5.16.0",
@@ -68,7 +59,6 @@
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.24.0",
-    "flow-bin": "0.65.0",
     "gettext-to-messageformat": "0.3.1",
     "jest": "27.0.6",
     "jest-junit": "12.2.0",
@@ -77,7 +67,9 @@
     "prettier": "1.15.3",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "rimraf": "2.7.1"
+    "rimraf": "2.7.1",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.4"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",

src/index.js → src/index.ts

@@ -1,6 +1,7 @@
 import createTranslate from './translate'
+import { TranslationConfiguration } from './types'
 
-let config = {}
+let config: TranslationConfiguration = {}
 let specifiedLocale
 let getLangLoader
 let changeLocaleListeners = []
@@ -28,7 +29,10 @@ export default translate
  * @param configObj A hashmap with keys `default` (default locale) and `map` (mapping of locales to
  * other locales)
  **/
-export function init(getLangLoaderFn, configObj = {}) {
+export function init(
+  getLangLoaderFn: (locale: string) => Awaited<any>,
+  configObj: TranslationConfiguration = {}
+) {
   getLangLoader = getLangLoaderFn
   config = configObj
   if (config.interpolationPattern) {

src/scripts/babel-gettext-extractor/index.js → src/scripts/babel-gettext-extractor/index.ts

@@ -1,10 +1,7 @@
-// @flow
 import gettextParser from 'gettext-parser'
 import fs from 'fs'
 
 import type {
-  AddLocationT,
-  ConfigT,
   AstNodeT,
   ObjectPropertyT,
 } from '../../types'
@@ -36,7 +33,7 @@ function getContextProperty(node: AstNodeT) {
   )
 }
 
-function isStringConcatExpr(node: AstNodeT) {
+function isStringConcatExpr(node: any) {
   const left = node.left
   const right = node.right
 
@@ -48,7 +45,7 @@ function isStringConcatExpr(node: AstNodeT) {
   )
 }
 
-function getStringValue(node: AstNodeT) {
+function getStringValue(node: any) {
   if (isStringLiteral(node)) {
     return node.value
   }
@@ -60,9 +57,9 @@ function getStringValue(node: AstNodeT) {
   return null
 }
 
-function getExtractedComment(node: AstNodeT) {
+function getExtractedComment(node: any) {
   const comments = []
-  ;(node.leadingComments || []).forEach((commentNode: AstNodeT) => {
+  ;(node.leadingComments || []).forEach((commentNode: any) => {
     const match = commentNode.value.match(/^\s*translators:\s*(.*?)\s*$/im)
     if (match) {
       comments.push(match[1])
@@ -72,10 +69,10 @@ function getExtractedComment(node: AstNodeT) {
 }
 
 function getReference(
-  addLocation: AddLocationT,
-  fn: string,
-  node: AstNodeT
-): ?string {
+  addLocation: any,
+  fn: any,
+  node: any
+): string | undefined {
   if (!addLocation || addLocation === 'full') {
     return `${fn}:${node.loc.start.line}`
   }
@@ -108,12 +105,12 @@ const relocatedComments = {}
 export default function plugin() {
   return {
     visitor: {
-      VariableDeclaration({ node }: { node: AstNodeT }) {
+      VariableDeclaration({ node }: { node: any }) {
         const extractedComment = getExtractedComment(node)
         if (!extractedComment) {
           return
         }
-        node.declarations.forEach((declarator: AstNodeT) => {
+        node.declarations.forEach((declarator: any) => {
           const comment = getExtractedComment(declarator)
           if (!comment) {
             const key = `${declarator.init.start}|${declarator.init.end}`
@@ -123,8 +120,8 @@ export default function plugin() {
       },
 
       CallExpression(
-        { node, parent }: { node: AstNodeT, parent: AstNodeT },
-        config: ConfigT
+        { node, parent }: { node: any, parent: any },
+        config: any
       ) {
         const {
           functionName = DEFAULT_FUNCTION_NAME,
@@ -153,7 +150,7 @@ export default function plugin() {
           return
         }
 
-        const translate = {}
+        const translate: any = {}
 
         const args = node.arguments
         if (args.length === 0) {
@@ -204,7 +201,7 @@ export default function plugin() {
         const options = args[args.length - 1]
 
         if (isObjectLiteral(options)) {
-          const ctxtProp = getContextProperty(options)
+          const ctxtProp: any = getContextProperty(options)
 
           if (ctxtProp) {
             const messageContext = ctxtProp.value.extra.rawValue