chore: Full support i18n (i18next) excluding localization services

.gitignore

@@ -14,3 +14,4 @@ node_modules/
 npm-debug.log
 lerna-debug.log
 **/tsconfig.tsbuildinfo
+.idea

.prettierignore

@@ -0,0 +1,7 @@
+**/coverage/**
+**.graphql
+.graphqlconfig
+
+# breaks prettier graphql parser
+packages/graphql-language-service-server/src/__tests__/__queries__/test.graphql
+packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql

packages/codemirror-graphql/babel.config.js

@@ -4,5 +4,8 @@ module.exports = {
     require.resolve('@babel/preset-flow'),
     require.resolve('@babel/preset-react'),
   ],
-  plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
+  plugins: [
+    require.resolve('@babel/plugin-proposal-class-properties'),
+    require.resolve('babel-plugin-inline-json-import')
+  ],
 };

packages/codemirror-graphql/package.json

@@ -14,12 +14,14 @@
   },
   "license": "MIT",
   "files": [
+    "src/locales",
     "hint.js",
     "info.js",
     "jump.js",
     "lint.js",
     "mode.js",
     "utils",
+    "i18n.js",
     "variables",
     "results",
     "README.md",
@@ -41,7 +43,9 @@
   },
   "peerDependencies": {
     "codemirror": "^5.26.0",
-    "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0"
+    "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0",
+    "i18next": "~17.0.16",
+    "i18next-browser-languagedetector": "~3.0.3"
   },
   "dependencies": {
     "graphql-language-service-interface": "^2.3.0",
@@ -54,6 +58,7 @@
     "graphql": "^14.0.2",
     "jsdom": "^11.2.0",
     "mocha": "3.5.0",
-    "sane": "2.0.0"
+    "sane": "2.0.0",
+    "babel-plugin-inline-json-import": "^0.3.2"
   }
 }

packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql

@@ -63,13 +63,15 @@ extend type Foo {
   seven(argument: [[String!]!]!): Type
 }
 
+# prettier-ignore
 extend type Foo @onType {}
 
+# prettier-ignore
 type NoFields {}
 
 directive @skip(if: Boolean!) on FIELD | FRAGMENT_SPREAD | INLINE_FRAGMENT
 
 directive @include(if: Boolean!)
-  on FIELD
-   | FRAGMENT_SPREAD
-   | INLINE_FRAGMENT
+on FIELD
+  | FRAGMENT_SPREAD
+  | INLINE_FRAGMENT

packages/codemirror-graphql/src/i18n.js

@@ -0,0 +1,75 @@
+import i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import ruTranslation from './locales/ru/translation.json';
+import enTranslation from './locales/en/translation.json';
+
+import ruErrors from './locales/ru/errors.json';
+import enErrors from './locales/en/errors.json';
+
+const i18next_codemirror = i18next.createInstance();
+
+i18next_codemirror
+  .use(LanguageDetector)
+  .init({
+    detection: {
+      // order and from where user language should be detected
+      order: ['querystring', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
+
+      // keys or params to lookup language from
+      lookupQuerystring: 'lng',
+      lookupCookie: 'i18next',
+      lookupLocalStorage: 'i18nextLng',
+      lookupFromPathIndex: 0,
+      lookupFromSubdomainIndex: 0,
+
+      // cache user language on
+      caches: ['localStorage'],
+      excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
+
+      // optional expire and domain for set cookie
+      cookieMinutes: 10,
+      cookieDomain: window.location.hostname,
+
+      // optional htmlTag with lang attribute, the default is:
+      htmlTag: document.documentElement
+    },
+    resources: {
+      en: {
+        translation: enTranslation,
+        errors: enErrors
+      },
+      ru: {
+        translation: ruTranslation,
+        errors: ruErrors
+      },
+    },
+    fallbackLng: {
+      'en-US': ['en'],
+      'ru-RU': ['ru'],
+      default: ['en'],
+    },
+    whitelist: ['en', 'ru'],
+
+    // // have a common namespace used around the full app
+    // ns: ['translations'],
+    debug: !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
+    defaultNS: 'errors',
+    load: 'currentOnly',
+    preload: [ 'en', 'ru'],
+    keySeparator: '.', // we use content as keys
+    nsSeparator: ':',
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+      // formatSeparator: ','
+    },
+    react: {
+      wait: true,
+      useSuspense: true
+    }
+}).then((t) => {
+});
+
+export default i18next_codemirror;
+
+

packages/codemirror-graphql/src/locales/en/errors.json

@@ -0,0 +1,13 @@
+{
+  "Variable {{Name}} does not appear in any GraphQL query": "Variable {{Name}} does not appear in any GraphQL query.",
+  "Type {{Type}} is non-nullable and cannot be null": "Type \"{{Type}}\" is non-nullable and cannot be null.",
+  "Type {{Type}} must be an Object": "Type \"{{Type}}\" must be an Object.",
+  "Type {{Type}} does not have a field {{FieldName}}": "Type \"{{Type}\" does not have a field \"{{FieldName}}\".",
+  "Object of type {{Type}} is missing required field {{FieldName}}": "Object of type \"{{Type}}\" is missing required field \"{{FieldName}}\".",
+  "[end of file]": "[end of file]",
+  "Expected {{str}} but found {{found}}": "Expected {{str}} but found {{found}}.",
+  "Bad character escape sequence": "Bad character escape sequence.",
+  "Unterminated string": "Unterminated string.",
+  "Expected hexadecimal digit": "Expected hexadecimal digit.",
+  "Expected decimal digit": "Expected decimal digit."
+}

packages/codemirror-graphql/src/locales/en/translation.json

@@ -0,0 +1,3 @@
+{
+
+}

packages/codemirror-graphql/src/locales/ru/errors.json

@@ -0,0 +1,13 @@
+{
+  "Variable {{Name}} does not appear in any GraphQL query": "Переменная {{Name}} не отображается ни в одном запросе GraphQL.",
+  "Type {{Type}} is non-nullable and cannot be null": "Тип \"{{Type}}\" не имеет значения NULL и не может быть нулевым.",
+  "Type {{Type}} must be an Object": "Тип \"{{Type}}\" должен быть объектом.",
+  "Type {{Type}} does not have a field {{FieldName}}": "Тип \"{{Type}\" не имеет поля \"{{FieldName}}\".",
+  "Object of type {{Type}} is missing required field {{FieldName}}": "В объекте типа \"{{Type}}\" отсутствует обязательное поле \"{{FieldName}}\".",
+  "[end of file]": "[Конец файла]",
+  "Expected {{str}} but found {{found}}": "Ожидается {{str}} но найдено {{found}}.",
+  "Bad character escape sequence": "Плохая последовательность символов.",
+  "Unterminated string": "Неопределенная строка.",
+  "Expected hexadecimal digit": "Ожидается шестнадцатеричное число.",
+  "Expected decimal digit": "Ожидается число с плавающей запятой."
+}

packages/codemirror-graphql/src/locales/ru/translation.json

@@ -0,0 +1,3 @@
+{
+
+}

packages/codemirror-graphql/src/utils/jsonParse.js

@@ -1,3 +1,5 @@
+
+import i18next from '../i18n'
 /**
  *  Copyright (c) 2019 GraphQL Contributors
  *  All rights reserved.
@@ -118,15 +120,15 @@ function expect(str) {
 
   let found;
   if (kind === 'EOF') {
-    found = '[end of file]';
+    found = i18next.t('[end of file]');
   } else if (end - start > 1) {
     found = '`' + string.slice(start, end) + '`';
   } else {
     const match = string.slice(start).match(/^.+?\b/);
     found = '`' + (match ? match[0] : string[start]) + '`';
   }
 
-  throw syntaxError(`Expected ${str} but found ${found}.`);
+  throw syntaxError(i18next.t('Expected {{str}} but found {{found}}', { str, found }));
 }
 
 function syntaxError(message) {
@@ -241,10 +243,10 @@ function readString() {
           readHex();
           break;
         default:
-          throw syntaxError('Bad character escape sequence.');
+          throw syntaxError(i18next.t('Bad character escape sequence'));
       }
     } else if (end === strLen) {
-      throw syntaxError('Unterminated string.');
+      throw syntaxError(i18next.t('Unterminated string'));
     } else {
       ch();
     }
@@ -255,7 +257,7 @@ function readString() {
     return;
   }
 
-  throw syntaxError('Unterminated string.');
+  throw syntaxError(i18next.t('Unterminated string'));
 }
 
 function readHex() {
@@ -266,7 +268,7 @@ function readHex() {
   ) {
     return ch();
   }
-  throw syntaxError('Expected hexadecimal digit.');
+  throw syntaxError(i18next.t('Expected hexadecimal digit'));
 }
 
 function readNumber() {
@@ -302,7 +304,7 @@ function readNumber() {
 function readDigits() {
   if (code < 48 || code > 57) {
     // 0 - 9
-    throw syntaxError('Expected decimal digit.');
+    throw syntaxError(i18next.t('Expected decimal digit'));
   }
   do {
     ch();

packages/codemirror-graphql/src/variables/lint.js

@@ -17,6 +17,7 @@ import {
 } from 'graphql';
 
 import jsonParse from '../utils/jsonParse';
+import i18next from '../i18n';
 
 /**
  * Registers a "lint" helper for CodeMirror.
@@ -74,8 +75,8 @@ function validateVariables(editor, variableToType, variablesAST) {
         lintError(
           editor,
           member.key,
-          `Variable "$${variableName}" does not appear in any GraphQL query.`
-        )
+          (`${i18next.t('Variable {{Name}} does not appear in any GraphQL query', { Name: variableName })}`),
+        ),
       );
     } else {
       validateValue(type, member.value).forEach(([node, message]) => {
@@ -92,7 +93,7 @@ function validateValue(type, valueAST) {
   // Validate non-nullable values.
   if (type instanceof GraphQLNonNull) {
     if (valueAST.kind === 'Null') {
-      return [[valueAST, `Type "${type}" is non-nullable and cannot be null.`]];
+      return [[valueAST, (i18next.t('Type {{Type}} is non-nullable and cannot be null', { Type: type }))]];
     }
     return validateValue(type.ofType, valueAST);
   }
@@ -113,7 +114,7 @@ function validateValue(type, valueAST) {
   // Validate input objects.
   if (type instanceof GraphQLInputObjectType) {
     if (valueAST.kind !== 'Object') {
-      return [[valueAST, `Type "${type}" must be an Object.`]];
+      return [[valueAST, (i18next.t('Type {{Type}} must be an Object', { Type: type }))]];
     }
 
     // Validate each field in the input object.
@@ -124,7 +125,7 @@ function validateValue(type, valueAST) {
       const inputField = type.getFields()[fieldName];
       if (!inputField) {
         return [
-          [member.key, `Type "${type}" does not have a field "${fieldName}".`],
+          [member.key, (i18next.t('Type {{Type}} does not have a field {{FieldName}}', { Type: type, FieldName: fieldName }))],
         ];
       }
       const fieldType = inputField ? inputField.type : undefined;
@@ -138,7 +139,7 @@ function validateValue(type, valueAST) {
         if (fieldType instanceof GraphQLNonNull) {
           fieldErrors.push([
             valueAST,
-            `Object of type "${type}" is missing required field "${fieldName}".`,
+            (i18next.t('Object of type {{Type}} is missing required field {{FieldName}}', { Type: type, FieldName: fieldName } )),
           ]);
         }
       }

packages/examples/graphiql-cdn/.gitignore

@@ -1,2 +1,3 @@
 graphiql.js
 graphiql.css
+locales