Enable Airbnb ESLint restricted syntax

"error: iterators/generators require regenerator-runtime, which is too heavyweight"

Author: tkrotoff

.eslintrc.js

@@ -39,7 +39,6 @@ module.exports = {
     'no-plusplus': 'off',
     'lines-between-class-members': 'off',
     'spaced-comment': 'off',
-    'no-restricted-syntax': 'off',
     'no-lonely-if': 'off',
     'max-classes-per-file': 'off',
 

packages/react-form-with-constraints-tools/src/DisplayFields.tsx

@@ -194,9 +194,10 @@ export class FieldFeedback extends _FieldFeedback {
     // Hack: make FieldFeedback <span style="display: inline">
     // Also make Bootstrap 4 happy because it sets 'display: none', see https://github.com/twbs/bootstrap/blob/v4.1.2/scss/mixins/_forms.scss#L31
     const fieldFeedbackSpans = this.rootEl!.querySelectorAll<HTMLSpanElement>('[data-feedback]');
-    for (const fieldFeedbackSpan of fieldFeedbackSpans) {
+    fieldFeedbackSpans.forEach(fieldFeedbackSpan => {
+      // eslint-disable-next-line no-param-reassign
       fieldFeedbackSpan.style.display = 'inline';
-    }
+    });
 
     // Change Async parent style
     const li = this.rootEl!.closest('li.async');

packages/react-form-with-constraints/src/EventEmitter.ts

@@ -20,7 +20,9 @@ export class EventEmitter<ListenerReturnType = void> {
 
     if (listeners !== undefined) {
       console.assert(listeners.length > 0, `No listener for event '${eventName}'`);
-      for (const listener of listeners) {
+      for (let i = 0; i < listeners.length; i++) {
+        const listener = listeners[i];
+
         // Why await? Two cases:
         // - listener does not return a Promise:
         //   => await changes nothing: the next listener call happens when the current one is done

packages/react-form-with-constraints/src/FormWithConstraints.tsx

@@ -81,7 +81,8 @@ export class FormWithConstraints
 
     const inputs = this.normalizeInputs(...inputsOrNames);
 
-    for (const input of inputs) {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
       // eslint-disable-next-line no-await-in-loop
       const field = await this.validateField(forceValidateFields, new InputElement(input));
       if (field !== undefined) {
@@ -132,7 +133,8 @@ export class FormWithConstraints
     if (inputsOrNames.length === 0) {
       // [name] matches <input name="...">, <select name="...">, <button name="...">, ...
       // See [Convert JavaScript NodeList to Array?](https://stackoverflow.com/a/33822526/990356)
-      inputs = [...this.form!.querySelectorAll<HTMLInputElement>('[name]')];
+      // [...HTMLCollection] vs Array.from(HTMLCollection): the latter doesn't need downlevelIteration with IE
+      inputs = Array.from(this.form!.querySelectorAll<HTMLInputElement>('[name]'));
 
       // Remove elements without ValidityState, example:
       // <iframe src="https://www.google.com/recaptcha..." name="a-49ekipqfmwsv">
@@ -158,7 +160,9 @@ export class FormWithConstraints
       inputs = inputsOrNames.map(input => {
         if (typeof input === 'string') {
           const query = `[name="${input}"]`;
-          const elements = [...this.form!.querySelectorAll<HTMLInputElement>(query)];
+
+          // [...HTMLCollection] vs Array.from(HTMLCollection): the latter doesn't need downlevelIteration with IE
+          const elements = Array.from(this.form!.querySelectorAll<HTMLInputElement>(query));
 
           // Checks
 
@@ -204,7 +208,8 @@ export class FormWithConstraints
 
     const inputs = this.normalizeInputs(...inputsOrNames);
 
-    for (const input of inputs) {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
       // eslint-disable-next-line no-await-in-loop
       const field = await this.resetField(new InputElement(input));
       if (field !== undefined) fields.push(field);

tsconfig.json

@@ -8,8 +8,6 @@
     "esModuleInterop": false,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noLib": false,
-    "lib": ["dom", "dom.iterable", "esnext"],
 
     "strict": true,
     "noUnusedLocals": true,