FIO-9618: Move I18n shim to core

- Move relevant translation strings to core
- Add form language to submission metadata

Author: blakekrammes

package.json

@@ -81,7 +81,7 @@
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
     "@formio/bootstrap": "v3.0.0-dev.121.085d187",
-    "@formio/core": "v2.4.0-dev.232.d91b1e4",
+    "@formio/core": "2.4.0-dev.235.b497e17",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",

src/Element.js

@@ -1,10 +1,11 @@
 import EventEmitter from './EventEmitter';
 import { Formio } from './Formio';
 import * as FormioUtils from './utils/utils';
-import { I18n } from './utils/i18n';
+import { I18n } from '@formio/core';
 import _ from 'lodash';
 import moment from 'moment';
 import maskInput from '@formio/vanilla-text-mask';
+import enTranslation from './translations/en';
 
 /**
  * The root component for all elements within the Form.io renderer.
@@ -41,7 +42,7 @@ export default class Element {
     if (this.options?.language) {
       this.options.i18n.language = this.options.language;
     }
-    this.options.i18next = this.i18next = this.options.i18next || I18n.init(this.options.i18n);
+    this.options.i18next = this.i18next = this.options.i18next || I18n.init({ en: enTranslation, ...this.options.i18n });
 
     /**
      * An instance of the EventEmitter class to handle the emitting and registration of events.
@@ -435,11 +436,12 @@ export default class Element {
   /**
    * Translate a text using the i18n system.
    * @param {string|Array<string>} text - The i18n identifier.
+   * @param {any} data - contextual data object containing data, component, row, etc.
    * @param {...any} args - The arguments to pass to the i18n translation.
    * @returns {string} - The translated text.
    */
-  t(text, ...args) {
-    return this.i18next ? this.i18next.t(text, ...args): text;
+  t(text, data, ...args) {
+    return this.i18next ? this.i18next.t(text, data, ...args): text;
   }
 
   /**

src/Webform.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
-import i18nDefaults from './i18n';
+import enTranslation from './translations/en';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
@@ -114,7 +114,7 @@ function getOptions(options) {
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -395,7 +395,7 @@ export default class Webform extends NestedDataComponent {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
+            var translations = _.assign(fastCloneDeep(enTranslation), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -1516,6 +1516,7 @@ export default class Webform extends NestedDataComponent {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
 

src/formio.form.js

@@ -12,7 +12,7 @@ import { Evaluator } from './utils/Evaluator';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
-import { I18n } from './utils/i18n';
+import { I18n } from '@formio/core';
 
 Formio.loadModules = (path = `${Formio.getApiUrl()  }/externalModules.js`, name = 'externalModules') => {
   Formio.requireLibrary(name, name, path, true)

src/i18n.js

@@ -1,61 +1,28 @@
 
 import bootstrap from '@formio/bootstrap';
+import { coreEnTranslation } from '@formio/core';
+import _ from 'lodash';
 
 export default {
   ...(bootstrap?.translations?.en || {}),
+  // these keys contain a '-' to strip whitespace in core
+  // which is not handled correctly in the renderer, so we redefine them
+  ..._.omit(coreEnTranslation, ['maxDate', 'minDate']),
   unsavedRowsError: 'Please save all rows before proceeding.',
   invalidRowsError: 'Please correct invalid rows before proceeding.',
   invalidRowError: 'Invalid row. Please correct it or delete.',
   invalidOption: '{{field}} is an invalid value.',
   invalidDay: '{{field}} is not a valid day.',
+  alertMessageWithLabel: '{{label}}: {{message}}',
+  alertMessage: '{{message}}',
   complete: 'Submission Complete',
   error: 'Please fix the following errors before submitting.',
   errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.',
   errorsListNavigationMessage: 'Click to navigate to the field with following error.',
   submitError: 'Please check the form and correct all errors before submitting.',
-  required: '{{field}} is required',
-  unique: '{{field}} must be unique',
-  array: '{{field}} must be an array',
-  array_nonempty: '{{field}} must be a non-empty array', // eslint-disable-line camelcase
-  nonarray: '{{field}} must not be an array',
-  select: '{{field}} contains an invalid selection',
-  pattern: '{{field}} does not match the pattern {{pattern}}',
-  minLength: '{{field}} must have at least {{length}} characters.',
-  maxLength: '{{field}} must have no more than {{length}} characters.',
-  minWords: '{{field}} must have at least {{length}} words.',
-  maxWords: '{{field}} must have no more than {{length}} words.',
-  min: '{{field}} cannot be less than {{min}}.',
-  max: '{{field}} cannot be greater than {{max}}.',
   maxDate: '{{field}} should not contain date after {{maxDate}}',
   minDate: '{{field}} should not contain date before {{minDate}}',
-  maxYear: '{{field}} should not contain year greater than {{maxYear}}',
-  minYear: '{{field}} should not contain year less than {{minYear}}',
-  minSelectedCount: 'You must select at least {{minCount}} items',
-  maxSelectedCount: 'You may only select up to {{maxCount}} items',
-  invalid_email: '{{field}} must be a valid email.', // eslint-disable-line camelcase
-  invalid_url: '{{field}} must be a valid url.', // eslint-disable-line camelcase
-  invalid_regex: '{{field}} does not match the pattern {{regex}}.', // eslint-disable-line camelcase
-  invalid_date: '{{field}} is not a valid date.', // eslint-disable-line camelcase
-  invalid_day: '{{field}} is not a valid day.', // eslint-disable-line camelcase
-  invalidValueProperty: 'Invalid Value Property',
-  mask: '{{field}} does not match the mask.',
-  valueIsNotAvailable: '{{ field }} is an invalid value.',
   stripe: '{{stripe}}',
-  month: 'Month',
-  day: 'Day',
-  year: 'Year',
-  january: 'January',
-  february: 'February',
-  march: 'March',
-  april: 'April',
-  may: 'May',
-  june: 'June',
-  july: 'July',
-  august: 'August',
-  september: 'September',
-  october: 'October',
-  november: 'November',
-  december: 'December',
   next: 'Next',
   previous: 'Previous',
   cancel: 'Cancel',
@@ -76,10 +43,7 @@ export default {
   apiKey: 'API Key is not unique: {{key}}',
   typeRemaining: '{{ remaining }} {{ type }} remaining.',
   typeCount: '{{ count }} {{ type }}',
-  requiredDayField: '{{ field }} is required',
   requiredDayEmpty: '{{ field }} is required',
-  requiredMonthField: '{{ field }} is required',
-  requiredYearField: '{{ field }} is required',
   formNotReady: 'Form not ready. Use form.ready promise',
   noFormElement: 'No DOM element for form.',
   notUniqueKey: 'API Key is not unique',
@@ -139,8 +103,6 @@ export default {
   words: 'words',
   characters: 'characters',
   addAnother: 'Add Another',
-  yes: 'Yes',
-  no: 'No',
   wantToClearData: 'Do you want to clear data?',
   yesDelete:'Yes, delete it',
   waitFileProcessing: 'Processing file. Please wait...',
@@ -157,8 +119,6 @@ export default {
   maxSelectItems: 'You may only select up to {{maxCount}} items',
   minSelectItems: 'You must select at least {{minCount}} items',
   clickToSign: 'Click to Sign',
-  surveyQuestion: 'Question',
-  surveyQuestionValue: 'Value',
   success: 'Success',
   noResultsFound: 'No results found',
   noChoices: 'No choices to choose from',