.eslintrc.js

@@ -7,14 +7,18 @@
  * @format
  */
 
-const path = require('path');
-
 module.exports = {
   root: true,
-  ignorePatterns: ['binaries/**', 'build/**', 'dist/**', 'tests/generated/**'],
+  ignorePatterns: [
+    '/website',
+    '**/binaries/**',
+    '**/build/**',
+    '**/generated/**',
+  ],
   extends: ['eslint:recommended', 'plugin:prettier/recommended'],
   plugins: ['prettier'],
   rules: {
+    'no-unused-vars': ['error', {argsIgnorePattern: '^_'}],
     'no-var': 'error',
     'prefer-arrow-callback': 'error',
     'prefer-const': 'error',
@@ -26,25 +30,25 @@ module.exports = {
     commonjs: true,
     es2018: true,
   },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+  },
   overrides: [
     {
-      files: ['**/*.js'],
+      files: ['**/*.ts', '**/*.tsx'],
-      parser: '@babel/eslint-parser',
-      parserOptions: {
-        babelOptions: {
-          configFile: path.join(__dirname, '.babelrc.js'),
-        },
-      },
-    },
-    {
-      files: ['**/*.ts'],
       extends: ['plugin:@typescript-eslint/recommended'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
-        project: path.join(__dirname, 'tsconfig.json'),
+        project: true,
       },
       plugins: ['@typescript-eslint'],
       rules: {
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {argsIgnorePattern: '^_'},
+        ],
         '@typescript-eslint/no-var-requires': 'off',
       },
     },
@@ -55,7 +59,7 @@ module.exports = {
       },
     },
     {
-      files: ['jest.*', 'tests/**'],
+      files: ['jest.*', '**/tests/**'],
       env: {
         node: true,
       },

.github/workflows/validate-cpp.yml

@@ -64,5 +64,3 @@ jobs:
 
       - name: clang-format
         uses: ./.github/actions/clang-format
-        with:
-          directory: ./yoga

.github/workflows/validate-js.yml

@@ -60,7 +60,19 @@ jobs:
         working-directory: javascript
 
   lint:
-    name: Lint
+    name: ESLint (All Packages)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: yarn install
+        run: yarn install --frozen-lockfile
+
+      - name: yarn lint
+        run: yarn lint
+
+  typecheck:
+    name: Typecheck
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -69,8 +81,8 @@ jobs:
         run: yarn install --frozen-lockfile
         working-directory: javascript
 
-      - name: yarn lint
+      - name: yarn tsc
-        run: yarn lint
+        run: yarn tsc
         working-directory: javascript
 
   pack:

.github/workflows/validate-website-next.yml

@@ -0,0 +1,41 @@
+name: Website (Next)
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/setup-js
+
+      - name: Build Yoga
+        run: yarn build
+        working-directory: javascript
+
+      - name: Build Website
+        run: yarn build
+        working-directory: website-next
+
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: yarn install
+        run: yarn install --frozen-lockfile
+        working-directory: javascript
+
+      - name: yarn tsc
+        run: yarn tsc
+        working-directory: website-next

.prettierignore

@@ -0,0 +1,3 @@
+**/binaries/**
+**/build/**
+**/generated/**

gentest/gentest-cpp.js

@@ -5,254 +5,485 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* global Emitter:readable */
+
 function toValueCpp(value) {
-  var n = value.toString().replace('px','').replace('%','');
+  const n = value.toString().replace('px', '').replace('%', '');
   return n + (Number(n) == n && n % 1 !== 0 ? 'f' : '');
 }
 
 function toFunctionName(value) {
   if (value.indexOf('%') >= 0) {
     return 'Percent';
-  } else if(value.indexOf('Auto') >= 0) {
+  } else if (value.indexOf('Auto') >= 0) {
     return 'Auto';
   }
   return '';
 }
 
-var CPPEmitter = function() {
+const CPPEmitter = function () {
   Emitter.call(this, 'cpp', '  ');
 };
 
 CPPEmitter.prototype = Object.create(Emitter.prototype, {
-  constructor:{value:CPPEmitter},
+  constructor: {value: CPPEmitter},
 
-  emitPrologue:{value:function() {
+  emitPrologue: {
-    this.push([
+    value: function () {
-      '#include <gtest/gtest.h>',
+      this.push(['#include <gtest/gtest.h>', '#include <yoga/Yoga.h>', '']);
-      '#include <yoga/Yoga.h>',
+    },
-      '',
+  },
-    ]);
-  }},
 
-  emitTestPrologue:{value:function(name, experiments, disabled) {
+  emitTestPrologue: {
-    this.push('TEST(YogaTest, ' + name + ') {');
+    value: function (name, experiments, disabled) {
-    this.pushIndent();
+      this.push('TEST(YogaTest, ' + name + ') {');
+      this.pushIndent();
 
-    if (disabled) {
+      if (disabled) {
-      this.push('GTEST_SKIP();');
+        this.push('GTEST_SKIP();');
+        this.push('');
+      }
+
+      this.push('const YGConfigRef config = YGConfigNew();');
+      for (const i in experiments) {
+        this.push(
+          'YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeature' +
+            experiments[i] +
+            ', true);',
+        );
+      }
       this.push('');
-    }
+    },
+  },
 
-    this.push('const YGConfigRef config = YGConfigNew();')
+  emitTestTreePrologue: {
-    for (var i in experiments) {
+    value: function (nodeName) {
-      this.push('YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeature' + experiments[i] +', true);');
+      this.push(
-    }
+        'const YGNodeRef ' + nodeName + ' = YGNodeNewWithConfig(config);',
-    this.push('');
+      );
-  }},
+    },
+  },
 
-  emitTestTreePrologue:{value:function(nodeName) {
+  emitTestEpilogue: {
-    this.push('const YGNodeRef ' + nodeName + ' = YGNodeNewWithConfig(config);');
+    value: function (_experiments) {
-  }},
+      this.push(['', 'YGNodeFreeRecursive(root);']);
 
-  emitTestEpilogue:{value:function(experiments) {
+      this.push('');
-    this.push([
+      this.push('YGConfigFree(config);');
-      '',
-      'YGNodeFreeRecursive(root);',
-    ]);
 
-    this.push('');
+      this.popIndent();
-    this.push('YGConfigFree(config);')
+      this.push(['}', '']);
+    },
+  },
 
-    this.popIndent();
+  emitEpilogue: {value: function () {}},
-    this.push([
-      '}',
-      '',
-    ]);
-  }},
 
-  emitEpilogue:{value:function() {
+  AssertEQ: {
-  }},
+    value: function (v0, v1) {
+      this.push('ASSERT_FLOAT_EQ(' + toValueCpp(v0) + ', ' + v1 + ');');
+    },
+  },
 
-  AssertEQ:{value:function(v0, v1) {
+  YGAlignAuto: {value: 'YGAlignAuto'},
-    this.push('ASSERT_FLOAT_EQ(' + toValueCpp(v0) + ', ' + v1 + ');');
+  YGAlignCenter: {value: 'YGAlignCenter'},
-  }},
+  YGAlignFlexEnd: {value: 'YGAlignFlexEnd'},
+  YGAlignFlexStart: {value: 'YGAlignFlexStart'},
+  YGAlignStretch: {value: 'YGAlignStretch'},
+  YGAlignSpaceBetween: {value: 'YGAlignSpaceBetween'},
+  YGAlignSpaceAround: {value: 'YGAlignSpaceAround'},
+  YGAlignBaseline: {value: 'YGAlignBaseline'},
 
-  YGAlignAuto:{value:'YGAlignAuto'},
+  YGDirectionInherit: {value: 'YGDirectionInherit'},
-  YGAlignCenter:{value:'YGAlignCenter'},
+  YGDirectionLTR: {value: 'YGDirectionLTR'},
-  YGAlignFlexEnd:{value:'YGAlignFlexEnd'},
+  YGDirectionRTL: {value: 'YGDirectionRTL'},
-  YGAlignFlexStart:{value:'YGAlignFlexStart'},
-  YGAlignStretch:{value:'YGAlignStretch'},
-  YGAlignSpaceBetween:{value:'YGAlignSpaceBetween'},
-  YGAlignSpaceAround:{value:'YGAlignSpaceAround'},
-  YGAlignBaseline:{value:'YGAlignBaseline'},
 
-  YGDirectionInherit:{value:'YGDirectionInherit'},
+  YGEdgeBottom: {value: 'YGEdgeBottom'},
-  YGDirectionLTR:{value:'YGDirectionLTR'},
+  YGEdgeEnd: {value: 'YGEdgeEnd'},
-  YGDirectionRTL:{value:'YGDirectionRTL'},
+  YGEdgeLeft: {value: 'YGEdgeLeft'},
+  YGEdgeRight: {value: 'YGEdgeRight'},
+  YGEdgeStart: {value: 'YGEdgeStart'},
+  YGEdgeTop: {value: 'YGEdgeTop'},
 
-  YGEdgeBottom:{value:'YGEdgeBottom'},
+  YGGutterAll: {value: 'YGGutterAll'},
-  YGEdgeEnd:{value:'YGEdgeEnd'},
+  YGGutterColumn: {value: 'YGGutterColumn'},
-  YGEdgeLeft:{value:'YGEdgeLeft'},
+  YGGutterRow: {value: 'YGGutterRow'},
-  YGEdgeRight:{value:'YGEdgeRight'},
-  YGEdgeStart:{value:'YGEdgeStart'},
-  YGEdgeTop:{value:'YGEdgeTop'},
 
-  YGGutterAll:{value:'YGGutterAll'},
+  YGFlexDirectionColumn: {value: 'YGFlexDirectionColumn'},
-  YGGutterColumn:{value:'YGGutterColumn'},
+  YGFlexDirectionColumnReverse: {value: 'YGFlexDirectionColumnReverse'},
-  YGGutterRow:{value:'YGGutterRow'},
+  YGFlexDirectionRow: {value: 'YGFlexDirectionRow'},
+  YGFlexDirectionRowReverse: {value: 'YGFlexDirectionRowReverse'},
 
-  YGFlexDirectionColumn:{value:'YGFlexDirectionColumn'},
+  YGJustifyCenter: {value: 'YGJustifyCenter'},
-  YGFlexDirectionColumnReverse:{value:'YGFlexDirectionColumnReverse'},
+  YGJustifyFlexEnd: {value: 'YGJustifyFlexEnd'},
-  YGFlexDirectionRow:{value:'YGFlexDirectionRow'},
+  YGJustifyFlexStart: {value: 'YGJustifyFlexStart'},
-  YGFlexDirectionRowReverse:{value:'YGFlexDirectionRowReverse'},
+  YGJustifySpaceAround: {value: 'YGJustifySpaceAround'},
+  YGJustifySpaceBetween: {value: 'YGJustifySpaceBetween'},
+  YGJustifySpaceEvenly: {value: 'YGJustifySpaceEvenly'},
 
-  YGJustifyCenter:{value:'YGJustifyCenter'},
+  YGOverflowHidden: {value: 'YGOverflowHidden'},
-  YGJustifyFlexEnd:{value:'YGJustifyFlexEnd'},
+  YGOverflowVisible: {value: 'YGOverflowVisible'},
-  YGJustifyFlexStart:{value:'YGJustifyFlexStart'},
-  YGJustifySpaceAround:{value:'YGJustifySpaceAround'},
-  YGJustifySpaceBetween:{value:'YGJustifySpaceBetween'},
-  YGJustifySpaceEvenly:{value:'YGJustifySpaceEvenly'},
 
-  YGOverflowHidden:{value:'YGOverflowHidden'},
+  YGPositionTypeAbsolute: {value: 'YGPositionTypeAbsolute'},
-  YGOverflowVisible:{value:'YGOverflowVisible'},
+  YGPositionTypeRelative: {value: 'YGPositionTypeRelative'},
 
-  YGPositionTypeAbsolute:{value:'YGPositionTypeAbsolute'},
+  YGWrapNoWrap: {value: 'YGWrapNoWrap'},
-  YGPositionTypeRelative:{value:'YGPositionTypeRelative'},
+  YGWrapWrap: {value: 'YGWrapWrap'},
+  YGWrapWrapReverse: {value: 'YGWrapWrapReverse'},
 
-  YGWrapNoWrap:{value:'YGWrapNoWrap'},
+  YGUndefined: {value: 'YGUndefined'},
-  YGWrapWrap:{value:'YGWrapWrap'},
-  YGWrapWrapReverse:{value: 'YGWrapWrapReverse'},
 
-  YGUndefined:{value:'YGUndefined'},
+  YGDisplayFlex: {value: 'YGDisplayFlex'},
+  YGDisplayNone: {value: 'YGDisplayNone'},
+  YGAuto: {value: 'YGAuto'},
 
-  YGDisplayFlex:{value:'YGDisplayFlex'},
+  YGNodeCalculateLayout: {
-  YGDisplayNone:{value:'YGDisplayNone'},
+    value: function (node, dir, _experiments) {
-  YGAuto:{value:'YGAuto'},
+      this.push(
+        'YGNodeCalculateLayout(' +
+          node +
+          ', YGUndefined, YGUndefined, ' +
+          dir +
+          ');',
+      );
+    },
+  },
 
+  YGNodeInsertChild: {
+    value: function (parentName, nodeName, index) {
+      this.push(
+        'YGNodeInsertChild(' +
+          parentName +
+          ', ' +
+          nodeName +
+          ', ' +
+          index +
+          ');',
+      );
+    },
+  },
 
-  YGNodeCalculateLayout:{value:function(node, dir, experiments) {
+  YGNodeLayoutGetLeft: {
-    this.push('YGNodeCalculateLayout(' + node + ', YGUndefined, YGUndefined, ' + dir + ');');
+    value: function (nodeName) {
-  }},
+      return 'YGNodeLayoutGetLeft(' + nodeName + ')';
+    },
+  },
 
-  YGNodeInsertChild:{value:function(parentName, nodeName, index) {
+  YGNodeLayoutGetTop: {
-    this.push('YGNodeInsertChild(' + parentName + ', ' + nodeName + ', ' + index + ');');
+    value: function (nodeName) {
-  }},
+      return 'YGNodeLayoutGetTop(' + nodeName + ')';
+    },
+  },
 
-  YGNodeLayoutGetLeft:{value:function(nodeName) {
+  YGNodeLayoutGetWidth: {
-    return 'YGNodeLayoutGetLeft(' + nodeName + ')';
+    value: function (nodeName) {
-  }},
+      return 'YGNodeLayoutGetWidth(' + nodeName + ')';
+    },
+  },
 
-  YGNodeLayoutGetTop:{value:function(nodeName) {
+  YGNodeLayoutGetHeight: {
-    return 'YGNodeLayoutGetTop(' + nodeName + ')';
+    value: function (nodeName) {
-  }},
+      return 'YGNodeLayoutGetHeight(' + nodeName + ')';
+    },
+  },
 
-  YGNodeLayoutGetWidth:{value:function(nodeName) {
+  YGNodeStyleSetAlignContent: {
-    return 'YGNodeLayoutGetWidth(' + nodeName + ')';
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetAlignContent(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeLayoutGetHeight:{value:function(nodeName) {
+  YGNodeStyleSetAlignItems: {
-    return 'YGNodeLayoutGetHeight(' + nodeName + ')';
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetAlignItems(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
+  YGNodeStyleSetAlignSelf: {
-    this.push('YGNodeStyleSetAlignContent(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetAlignSelf(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
+  YGNodeStyleSetBorder: {
-    this.push('YGNodeStyleSetAlignItems(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetBorder(' +
+          nodeName +
+          ', ' +
+          edge +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
+  YGNodeStyleSetDirection: {
-    this.push('YGNodeStyleSetAlignSelf(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetDirection(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetDisplay: {
-    this.push('YGNodeStyleSetBorder(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetDisplay(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetDirection:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexBasis: {
-    this.push('YGNodeStyleSetDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetFlexBasis' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexDirection: {
-    this.push('YGNodeStyleSetDisplay(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetFlexDirection(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexGrow: {
-    this.push('YGNodeStyleSetFlexBasis' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetFlexGrow(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexShrink: {
-    this.push('YGNodeStyleSetFlexDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetFlexShrink(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexWrap: {
-    this.push('YGNodeStyleSetFlexGrow(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetFlexWrap(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
+  YGNodeStyleSetHeight: {
-    this.push('YGNodeStyleSetFlexShrink(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetHeight' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
+  YGNodeStyleSetJustifyContent: {
-    this.push('YGNodeStyleSetFlexWrap(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetJustifyContent(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetMargin: {
-    this.push('YGNodeStyleSetHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      let valueStr = toValueCpp(value);
+      if (valueStr != 'YGAuto') {
+        valueStr = ', ' + valueStr;
+      } else {
+        valueStr = '';
+      }
+      this.push(
+        'YGNodeStyleSetMargin' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          edge +
+          valueStr +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
+  YGNodeStyleSetMaxHeight: {
-    this.push('YGNodeStyleSetJustifyContent(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetMaxHeight' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetMaxWidth: {
-    var valueStr = toValueCpp(value);
+    value: function (nodeName, value) {
-    if (valueStr != 'YGAuto') {
+      this.push(
-      valueStr = ', ' + valueStr;
+        'YGNodeStyleSetMaxWidth' +
-    } else {
+          toFunctionName(value) +
-      valueStr = '';
+          '(' +
-    }
+          nodeName +
-    this.push('YGNodeStyleSetMargin' + toFunctionName(value) + '(' + nodeName + ', ' + edge +  valueStr + ');');
+          ', ' +
-  }},
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetMinHeight: {
-    this.push('YGNodeStyleSetMaxHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetMinHeight' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetMinWidth: {
-    this.push('YGNodeStyleSetMaxWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetMinWidth' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetOverflow: {
-    this.push('YGNodeStyleSetMinHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetOverflow(' + nodeName + ', ' + toValueCpp(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetPadding: {
-    this.push('YGNodeStyleSetMinWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetPadding' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          edge +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetOverflow:{value:function(nodeName, value) {
+  YGNodeStyleSetPosition: {
-    this.push('YGNodeStyleSetOverflow(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetPosition' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          edge +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetPositionType: {
-    this.push('YGNodeStyleSetPadding' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetPositionType(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetWidth: {
-    this.push('YGNodeStyleSetPosition' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        'YGNodeStyleSetWidth' +
+          toFunctionName(value) +
+          '(' +
+          nodeName +
+          ', ' +
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetPositionType:{value:function(nodeName, value) {
+  YGNodeStyleSetGap: {
-    this.push('YGNodeStyleSetPositionType(' + nodeName + ', ' + toValueCpp(value) + ');');
+    value: function (nodeName, gap, value) {
-  }},
+      this.push(
-
+        'YGNodeStyleSetGap' +
-  YGNodeStyleSetWidth:{value:function(nodeName, value) {
+          toFunctionName(value) +
-    this.push('YGNodeStyleSetWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
+          '(' +
-  }},
+          nodeName +
-
+          ', ' +
-  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+          gap +
-    this.push('YGNodeStyleSetGap' + toFunctionName(value) + '(' + nodeName + ', ' + gap + ', ' + toValueCpp(value) + ');');
+          ', ' +
-  }},
+          toValueCpp(value) +
+          ');',
+      );
+    },
+  },
 });

gentest/gentest-java.js

@@ -5,29 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* global Emitter:readable */
+
 function toValueJava(value) {
-  var n = value.toString().replace('px','').replace('%','');
+  const n = value.toString().replace('px', '').replace('%', '');
   return n + (Number(n) == n && n % 1 !== 0 ? '' : '');
 }
 
 function toMethodName(value) {
-  if (value.indexOf('%') >= 0){
+  if (value.indexOf('%') >= 0) {
     return 'Percent';
-  } else if(value.indexOf('AUTO') >= 0) {
+  } else if (value.indexOf('AUTO') >= 0) {
     return 'Auto';
   }
   return '';
 }
 
-var JavaEmitter = function() {
+const JavaEmitter = function () {
   Emitter.call(this, 'java', '  ');
 };
 
 function toJavaUpper(symbol) {
-  var out = '';
+  let out = '';
-  for (var i = 0; i < symbol.length; i++) {
+  for (let i = 0; i < symbol.length; i++) {
-    var c = symbol[i];
+    const c = symbol[i];
-    if (c == c.toUpperCase() && i != 0 && symbol[i - 1] != symbol[i - 1].toUpperCase()) {
+    if (
+      c == c.toUpperCase() &&
+      i != 0 &&
+      symbol[i - 1] != symbol[i - 1].toUpperCase()
+    ) {
       out += '_';
     }
     out += c.toUpperCase();
@@ -36,260 +42,418 @@ function toJavaUpper(symbol) {
 }
 
 JavaEmitter.prototype = Object.create(Emitter.prototype, {
-  constructor:{value:JavaEmitter},
+  constructor: {value: JavaEmitter},
 
-  emitPrologue:{value:function() {
+  emitPrologue: {
-    this.push([
+    value: function () {
-      'package com.facebook.yoga;',
+      this.push([
-      '',
+        'package com.facebook.yoga;',
-      'import static org.junit.Assert.assertEquals;',
+        '',
-      '',
+        'import static org.junit.Assert.assertEquals;',
-      'import org.junit.Ignore;',
+        '',
-      'import org.junit.Test;',
+        'import org.junit.Ignore;',
-      'import org.junit.runner.RunWith;',
+        'import org.junit.Test;',
-      'import org.junit.runners.Parameterized;',
+        'import org.junit.runner.RunWith;',
-      '',
+        'import org.junit.runners.Parameterized;',
-      '@RunWith(Parameterized.class)',
+        '',
-      'public class YogaTest {',
+        '@RunWith(Parameterized.class)',
-    ]);
+        'public class YogaTest {',
-    this.pushIndent();
+      ]);
-    this.push([
+      this.pushIndent();
-      '@Parameterized.Parameters(name = "{0}")',
+      this.push([
-      'public static Iterable<TestParametrization.NodeFactory> nodeFactories() {',
+        '@Parameterized.Parameters(name = "{0}")',
-    ]);
+        'public static Iterable<TestParametrization.NodeFactory> nodeFactories() {',
-    this.pushIndent();
+      ]);
-    this.push('return TestParametrization.nodeFactories();');
+      this.pushIndent();
-    this.popIndent();
+      this.push('return TestParametrization.nodeFactories();');
-    this.push('}');
+      this.popIndent();
-    this.push([
+      this.push('}');
-      '',
+      this.push([
-      '@Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;',
+        '',
-      '',
+        '@Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;',
-    ]);
+        '',
-  }},
+      ]);
+    },
+  },
 
-  emitTestPrologue:{value:function(name, experiments, disabled) {
+  emitTestPrologue: {
-    this.push('@Test');
+    value: function (name, experiments, disabled) {
-    if (disabled) {
+      this.push('@Test');
-      this.push('@Ignore');
+      if (disabled) {
-    }
+        this.push('@Ignore');
-    this.push('public void test_' + name + '() {');
+      }
-    this.pushIndent();
+      this.push('public void test_' + name + '() {');
+      this.pushIndent();
 
-    this.push("YogaConfig config = YogaConfigFactory.create();")
+      this.push('YogaConfig config = YogaConfigFactory.create();');
-    for (var i in experiments) {
+      for (const i in experiments) {
-      this.push('config.setExperimentalFeatureEnabled(YogaExperimentalFeature.' + toJavaUpper(experiments[i]) +', true);');
+        this.push(
-    }
+          'config.setExperimentalFeatureEnabled(YogaExperimentalFeature.' +
-    this.push('');
+            toJavaUpper(experiments[i]) +
-  }},
+            ', true);',
+        );
+      }
+      this.push('');
+    },
+  },
 
-  emitTestTreePrologue:{value:function(nodeName) {
+  emitTestTreePrologue: {
-    this.push('final YogaNode ' + nodeName + ' = createNode(config);');
+    value: function (nodeName) {
-  }},
+      this.push('final YogaNode ' + nodeName + ' = createNode(config);');
+    },
+  },
 
-  emitTestEpilogue:{value:function(experiments) {
+  emitTestEpilogue: {
-    this.popIndent();
+    value: function (_experiments) {
-    this.push([
+      this.popIndent();
-      '}',
+      this.push(['}', '']);
-      '',
+    },
-    ]);
+  },
-  }},
 
-  emitEpilogue:{value:function(lines) {
+  emitEpilogue: {
-    this.push('private YogaNode createNode(YogaConfig config) {');
+    value: function (_lines) {
-    this.pushIndent();
+      this.push('private YogaNode createNode(YogaConfig config) {');
-    this.push('return mNodeFactory.create(config);');
+      this.pushIndent();
-    this.popIndent();
+      this.push('return mNodeFactory.create(config);');
-    this.push('}');
+      this.popIndent();
-    this.popIndent();
+      this.push('}');
-    this.push([
+      this.popIndent();
-      '}',
+      this.push(['}', '']);
-      '',
+    },
-    ]);
+  },
-  }},
 
-  AssertEQ:{value:function(v0, v1) {
+  AssertEQ: {
-    this.push('assertEquals(' + v0 + 'f, ' + v1 + ', 0.0f);');
+    value: function (v0, v1) {
-  }},
+      this.push('assertEquals(' + v0 + 'f, ' + v1 + ', 0.0f);');
+    },
+  },
 
-  YGAlignAuto:{value:'YogaAlign.AUTO'},
+  YGAlignAuto: {value: 'YogaAlign.AUTO'},
-  YGAlignCenter:{value:'YogaAlign.CENTER'},
+  YGAlignCenter: {value: 'YogaAlign.CENTER'},
-  YGAlignFlexEnd:{value:'YogaAlign.FLEX_END'},
+  YGAlignFlexEnd: {value: 'YogaAlign.FLEX_END'},
-  YGAlignFlexStart:{value:'YogaAlign.FLEX_START'},
+  YGAlignFlexStart: {value: 'YogaAlign.FLEX_START'},
-  YGAlignStretch:{value:'YogaAlign.STRETCH'},
+  YGAlignStretch: {value: 'YogaAlign.STRETCH'},
-  YGAlignSpaceBetween:{value:'YogaAlign.SPACE_BETWEEN'},
+  YGAlignSpaceBetween: {value: 'YogaAlign.SPACE_BETWEEN'},
-  YGAlignSpaceAround:{value:'YogaAlign.SPACE_AROUND'},
+  YGAlignSpaceAround: {value: 'YogaAlign.SPACE_AROUND'},
-  YGAlignBaseline:{value:'YogaAlign.BASELINE'},
+  YGAlignBaseline: {value: 'YogaAlign.BASELINE'},
 
-  YGDirectionInherit:{value:'YogaDirection.INHERIT'},
+  YGDirectionInherit: {value: 'YogaDirection.INHERIT'},
-  YGDirectionLTR:{value:'YogaDirection.LTR'},
+  YGDirectionLTR: {value: 'YogaDirection.LTR'},
-  YGDirectionRTL:{value:'YogaDirection.RTL'},
+  YGDirectionRTL: {value: 'YogaDirection.RTL'},
 
-  YGEdgeBottom:{value:'YogaEdge.BOTTOM'},
+  YGEdgeBottom: {value: 'YogaEdge.BOTTOM'},
-  YGEdgeEnd:{value:'YogaEdge.END'},
+  YGEdgeEnd: {value: 'YogaEdge.END'},
-  YGEdgeLeft:{value:'YogaEdge.LEFT'},
+  YGEdgeLeft: {value: 'YogaEdge.LEFT'},
-  YGEdgeRight:{value:'YogaEdge.RIGHT'},
+  YGEdgeRight: {value: 'YogaEdge.RIGHT'},
-  YGEdgeStart:{value:'YogaEdge.START'},
+  YGEdgeStart: {value: 'YogaEdge.START'},
-  YGEdgeTop:{value:'YogaEdge.TOP'},
+  YGEdgeTop: {value: 'YogaEdge.TOP'},
 
-  YGGutterAll:{value:'YogaGutter.ALL'},
+  YGGutterAll: {value: 'YogaGutter.ALL'},
-  YGGutterColumn:{value:'YogaGutter.COLUMN'},
+  YGGutterColumn: {value: 'YogaGutter.COLUMN'},
-  YGGutterRow:{value:'YogaGutter.ROW'},
+  YGGutterRow: {value: 'YogaGutter.ROW'},
 
-  YGFlexDirectionColumn:{value:'YogaFlexDirection.COLUMN'},
+  YGFlexDirectionColumn: {value: 'YogaFlexDirection.COLUMN'},
-  YGFlexDirectionColumnReverse:{value:'YogaFlexDirection.COLUMN_REVERSE'},
+  YGFlexDirectionColumnReverse: {value: 'YogaFlexDirection.COLUMN_REVERSE'},
-  YGFlexDirectionRow:{value:'YogaFlexDirection.ROW'},
+  YGFlexDirectionRow: {value: 'YogaFlexDirection.ROW'},
-  YGFlexDirectionRowReverse:{value:'YogaFlexDirection.ROW_REVERSE'},
+  YGFlexDirectionRowReverse: {value: 'YogaFlexDirection.ROW_REVERSE'},
 
-  YGJustifyCenter:{value:'YogaJustify.CENTER'},
+  YGJustifyCenter: {value: 'YogaJustify.CENTER'},
-  YGJustifyFlexEnd:{value:'YogaJustify.FLEX_END'},
+  YGJustifyFlexEnd: {value: 'YogaJustify.FLEX_END'},
-  YGJustifyFlexStart:{value:'YogaJustify.FLEX_START'},
+  YGJustifyFlexStart: {value: 'YogaJustify.FLEX_START'},
-  YGJustifySpaceAround:{value:'YogaJustify.SPACE_AROUND'},
+  YGJustifySpaceAround: {value: 'YogaJustify.SPACE_AROUND'},
-  YGJustifySpaceBetween:{value:'YogaJustify.SPACE_BETWEEN'},
+  YGJustifySpaceBetween: {value: 'YogaJustify.SPACE_BETWEEN'},
-  YGJustifySpaceEvenly:{value:'YogaJustify.SPACE_EVENLY'},
+  YGJustifySpaceEvenly: {value: 'YogaJustify.SPACE_EVENLY'},
 
-  YGOverflowHidden:{value:'YogaOverflow.HIDDEN'},
+  YGOverflowHidden: {value: 'YogaOverflow.HIDDEN'},
-  YGOverflowVisible:{value:'YogaOverflow.VISIBLE'},
+  YGOverflowVisible: {value: 'YogaOverflow.VISIBLE'},
 
-  YGPositionTypeAbsolute:{value:'YogaPositionType.ABSOLUTE'},
+  YGPositionTypeAbsolute: {value: 'YogaPositionType.ABSOLUTE'},
-  YGPositionTypeRelative:{value:'YogaPositionType.RELATIVE'},
+  YGPositionTypeRelative: {value: 'YogaPositionType.RELATIVE'},
 
-  YGUndefined:{value:'YogaConstants.UNDEFINED'},
+  YGUndefined: {value: 'YogaConstants.UNDEFINED'},
 
-  YGDisplayFlex:{value:'YogaDisplay.FLEX'},
+  YGDisplayFlex: {value: 'YogaDisplay.FLEX'},
-  YGDisplayNone:{value:'YogaDisplay.NONE'},
+  YGDisplayNone: {value: 'YogaDisplay.NONE'},
-  YGAuto:{value:'YogaConstants.AUTO'},
+  YGAuto: {value: 'YogaConstants.AUTO'},
 
+  YGWrapNoWrap: {value: 'YogaWrap.NO_WRAP'},
+  YGWrapWrap: {value: 'YogaWrap.WRAP'},
+  YGWrapWrapReverse: {value: 'YogaWrap.WRAP_REVERSE'},
 
-  YGWrapNoWrap:{value:'YogaWrap.NO_WRAP'},
+  YGNodeCalculateLayout: {
-  YGWrapWrap:{value:'YogaWrap.WRAP'},
+    value: function (node, dir, _experiments) {
-  YGWrapWrapReverse:{value: 'YogaWrap.WRAP_REVERSE'},
+      this.push(node + '.setDirection(' + dir + ');');
+      this.push(
+        node +
+          '.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);',
+      );
+    },
+  },
 
-  YGNodeCalculateLayout:{value:function(node, dir, experiments) {
+  YGNodeInsertChild: {
-    this.push(node + '.setDirection(' + dir + ');');
+    value: function (parentName, nodeName, index) {
-    this.push(node + '.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);');
+      this.push(parentName + '.addChildAt(' + nodeName + ', ' + index + ');');
-  }},
+    },
+  },
 
-  YGNodeInsertChild:{value:function(parentName, nodeName, index) {
+  YGNodeLayoutGetLeft: {
-    this.push(parentName + '.addChildAt(' + nodeName + ', ' + index + ');');
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getLayoutX()';
+    },
+  },
 
-  YGNodeLayoutGetLeft:{value:function(nodeName) {
+  YGNodeLayoutGetTop: {
-    return nodeName + '.getLayoutX()';
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getLayoutY()';
+    },
+  },
 
-  YGNodeLayoutGetTop:{value:function(nodeName) {
+  YGNodeLayoutGetWidth: {
-    return nodeName + '.getLayoutY()';
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getLayoutWidth()';
+    },
+  },
 
-  YGNodeLayoutGetWidth:{value:function(nodeName) {
+  YGNodeLayoutGetHeight: {
-    return nodeName + '.getLayoutWidth()';
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getLayoutHeight()';
+    },
+  },
 
-  YGNodeLayoutGetHeight:{value:function(nodeName) {
+  YGNodeStyleSetAlignContent: {
-    return nodeName + '.getLayoutHeight()';
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setAlignContent(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
+  YGNodeStyleSetAlignItems: {
-    this.push(nodeName + '.setAlignContent(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setAlignItems(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
+  YGNodeStyleSetAlignSelf: {
-    this.push(nodeName + '.setAlignItems(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setAlignSelf(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
+  YGNodeStyleSetBorder: {
-    this.push(nodeName + '.setAlignSelf(' + toValueJava(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName + '.setBorder(' + edge + ', ' + toValueJava(value) + 'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetDirection: {
-    this.push(nodeName + '.setBorder(' + edge + ', ' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setDirection(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetDirection:{value:function(nodeName, value) {
+  YGNodeStyleSetDisplay: {
-    this.push(nodeName + '.setDirection(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setDisplay(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexBasis: {
-    this.push(nodeName + '.setDisplay(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setFlexBasis' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexDirection: {
-    this.push(nodeName + '.setFlexBasis' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexDirection(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexGrow: {
-    this.push(nodeName + '.setFlexDirection(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexGrow(' + toValueJava(value) + 'f);');
+    },
+  },
 
-  YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexShrink: {
-    this.push(nodeName + '.setFlexGrow(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexShrink(' + toValueJava(value) + 'f);');
+    },
+  },
 
-  YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexWrap: {
-    this.push(nodeName + '.setFlexShrink(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setWrap(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
+  YGNodeStyleSetHeight: {
-    this.push(nodeName + '.setWrap(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setHeight' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetJustifyContent: {
-    this.push(nodeName + '.setHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setJustifyContent(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
+  YGNodeStyleSetMargin: {
-    this.push(nodeName + '.setJustifyContent(' + toValueJava(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      let valueStr = toValueJava(value);
+      if (valueStr != 'YogaConstants.AUTO') {
+        valueStr = ', ' + valueStr + 'f';
+      } else {
+        valueStr = '';
+      }
 
-  YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
+      this.push(
-    var valueStr = toValueJava(value);
+        nodeName +
-    if (valueStr != 'YogaConstants.AUTO') {
+          '.setMargin' +
-      valueStr = ', ' + valueStr + 'f';
+          toMethodName(value) +
-    } else {
+          '(' +
-      valueStr = '';
+          edge +
-    }
+          valueStr +
+          ');',
+      );
+    },
+  },
 
-    this.push(nodeName + '.setMargin' + toMethodName(value) + '(' + edge + valueStr + ');');
+  YGNodeStyleSetMaxHeight: {
-  }},
+    value: function (nodeName, value) {
+      this.push(
+        nodeName +
+          '.setMaxHeight' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetMaxWidth: {
-    this.push(nodeName + '.setMaxHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setMaxWidth' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetMinHeight: {
-    this.push(nodeName + '.setMaxWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setMinHeight' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetMinWidth: {
-    this.push(nodeName + '.setMinHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setMinWidth' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetOverflow: {
-    this.push(nodeName + '.setMinWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setOverflow(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetOverflow:{value:function(nodeName, value) {
+  YGNodeStyleSetPadding: {
-    this.push(nodeName + '.setOverflow(' + toValueJava(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setPadding' +
+          toMethodName(value) +
+          '(' +
+          edge +
+          ', ' +
+          toValueJava(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetPosition: {
-    this.push(nodeName + '.setPadding' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setPosition' +
+          toMethodName(value) +
+          '(' +
+          edge +
+          ', ' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetPositionType: {
-    this.push(nodeName + '.setPosition' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + 'f);');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setPositionType(' + toValueJava(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetPositionType:{value:function(nodeName, value) {
+  YGNodeStyleSetWidth: {
-    this.push(nodeName + '.setPositionType(' + toValueJava(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setWidth' +
+          toMethodName(value) +
+          '(' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 
-  YGNodeStyleSetWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetGap: {
-    this.push(nodeName + '.setWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
+    value: function (nodeName, gap, value) {
-  }},
+      this.push(
-
+        nodeName +
-  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+          '.setGap' +
-    this.push(nodeName + '.setGap' + toMethodName(value) + '(' + gap + ', ' + toValueJava(value) + 'f);');
+          toMethodName(value) +
-  }},
+          '(' +
+          gap +
+          ', ' +
+          toValueJava(value) +
+          'f);',
+      );
+    },
+  },
 });

gentest/gentest-javascript.js

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const JavascriptEmitter = function() {
+/* global Emitter:readable */
+
+const JavascriptEmitter = function () {
   Emitter.call(this, 'js', '  ');
 };
 
@@ -17,255 +19,372 @@ function toValueJavascript(value) {
 }
 
 JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
-  constructor:{value:JavascriptEmitter},
+  constructor: {value: JavascriptEmitter},
 
-  emitPrologue:{value:function() {
+  emitPrologue: {
-    this.push('import {Yoga} from "../tools/globals";')
+    value: function () {
-    this.push('import {')
+      this.push('import {Yoga} from "../tools/globals";');
-    this.pushIndent();
+      this.push('import {');
-    this.push('Align,');
+      this.pushIndent();
-    this.push('Direction,');
+      this.push('Align,');
-    this.push('Display,');
+      this.push('Direction,');
-    this.push('Edge,');
+      this.push('Display,');
-    this.push('Errata,');
+      this.push('Edge,');
-    this.push('ExperimentalFeature,');
+      this.push('Errata,');
-    this.push('FlexDirection,');
+      this.push('ExperimentalFeature,');
-    this.push('Gutter,');
+      this.push('FlexDirection,');
-    this.push('Justify,');
+      this.push('Gutter,');
-    this.push('MeasureMode,');
+      this.push('Justify,');
-    this.push('Overflow,');
+      this.push('MeasureMode,');
-    this.push('PositionType,');
+      this.push('Overflow,');
-    this.push('Unit,');
+      this.push('PositionType,');
-    this.push('Wrap,');
+      this.push('Unit,');
-    this.popIndent();
+      this.push('Wrap,');
-    this.push('} from \'yoga-layout\';');
+      this.popIndent();
-    this.push('');
+      this.push("} from 'yoga-layout';");
-  }},
-
-  emitTestPrologue:{value:function(name, experiments, ignore) {
-    const testFn = ignore ? `test.skip` : 'test';
-    this.push(`${testFn}('${name}', () => {`);
-    this.pushIndent();
-    this.push('const config = Yoga.Config.create();');
-    this.push('let root;');
-    this.push('');
-
-    if (experiments.length > 0) {
-      for (const experiment of experiments) {
-        this.push(`config.setExperimentalFeatureEnabled(ExperimentalFeature.${experiment}, true);`);
-      }
       this.push('');
-    }
+    },
+  },
 
-    this.push('try {');
+  emitTestPrologue: {
-    this.pushIndent();
+    value: function (name, experiments, ignore) {
-  }},
+      const testFn = ignore ? `test.skip` : 'test';
+      this.push(`${testFn}('${name}', () => {`);
+      this.pushIndent();
+      this.push('const config = Yoga.Config.create();');
+      this.push('let root;');
+      this.push('');
 
-  emitTestTreePrologue:{value:function(nodeName) {
+      if (experiments.length > 0) {
-    if (nodeName === 'root') {
+        for (const experiment of experiments) {
-      this.push(`root = Yoga.Node.create(config);`);
+          this.push(
-    } else {
+            `config.setExperimentalFeatureEnabled(ExperimentalFeature.${experiment}, true);`,
-      this.push(`const ${nodeName} = Yoga.Node.create(config);`);
+          );
-    }
+        }
-  }},
+        this.push('');
+      }
 
-  emitTestEpilogue:{value:function(experiments) {
+      this.push('try {');
-    this.popIndent();
+      this.pushIndent();
-    this.push('} finally {');
+    },
-    this.pushIndent();
+  },
 
-    this.push('if (typeof root !== \'undefined\') {');
+  emitTestTreePrologue: {
-    this.pushIndent();
+    value: function (nodeName) {
-    this.push('root.freeRecursive();');
+      if (nodeName === 'root') {
-    this.popIndent();
+        this.push(`root = Yoga.Node.create(config);`);
-    this.push('}');
+      } else {
-    this.push('');
+        this.push(`const ${nodeName} = Yoga.Node.create(config);`);
-    this.push('config.free();');
+      }
+    },
+  },
 
-    this.popIndent();
+  emitTestEpilogue: {
-    this.push('}');
+    value: function (_experiments) {
+      this.popIndent();
+      this.push('} finally {');
+      this.pushIndent();
 
-    this.popIndent();
+      this.push("if (typeof root !== 'undefined') {");
-    this.push('});');
+      this.pushIndent();
-  }},
+      this.push('root.freeRecursive();');
+      this.popIndent();
+      this.push('}');
+      this.push('');
+      this.push('config.free();');
 
-  emitEpilogue:{value:function () {
+      this.popIndent();
-    this.push('');
+      this.push('}');
-  }},
 
-  AssertEQ:{value:function(v0, v1) {
+      this.popIndent();
-    this.push(`expect(${v1}).toBe(${v0});`);
+      this.push('});');
-  }},
+    },
+  },
 
-  YGAlignAuto:{value: 'Align.Auto'},
+  emitEpilogue: {
-  YGAlignCenter:{value: 'Align.Center'},
+    value: function () {
-  YGAlignFlexEnd:{value: 'Align.FlexEnd'},
+      this.push('');
-  YGAlignFlexStart:{value: 'Align.FlexStart'},
+    },
-  YGAlignStretch:{value: 'Align.Stretch'},
+  },
-  YGAlignSpaceBetween:{value: 'Align.SpaceBetween'},
-  YGAlignSpaceAround:{value: 'Align.SpaceAround'},
-  YGAlignBaseline:{value: 'Align.Baseline'},
 
-  YGDirectionInherit:{value: 'Direction.Inherit'},
+  AssertEQ: {
-  YGDirectionLTR:{value: 'Direction.LTR'},
+    value: function (v0, v1) {
-  YGDirectionRTL:{value: 'Direction.RTL'},
+      this.push(`expect(${v1}).toBe(${v0});`);
+    },
+  },
 
-  YGEdgeBottom:{value: 'Edge.Bottom'},
+  YGAlignAuto: {value: 'Align.Auto'},
-  YGEdgeEnd:{value: 'Edge.End'},
+  YGAlignCenter: {value: 'Align.Center'},
-  YGEdgeLeft:{value: 'Edge.Left'},
+  YGAlignFlexEnd: {value: 'Align.FlexEnd'},
-  YGEdgeRight:{value: 'Edge.Right'},
+  YGAlignFlexStart: {value: 'Align.FlexStart'},
-  YGEdgeStart:{value: 'Edge.Start'},
+  YGAlignStretch: {value: 'Align.Stretch'},
-  YGEdgeTop:{value: 'Edge.Top'},
+  YGAlignSpaceBetween: {value: 'Align.SpaceBetween'},
+  YGAlignSpaceAround: {value: 'Align.SpaceAround'},
+  YGAlignBaseline: {value: 'Align.Baseline'},
 
-  YGGutterAll:{value: 'Gutter.All'},
+  YGDirectionInherit: {value: 'Direction.Inherit'},
-  YGGutterColumn:{value: 'Gutter.Column'},
+  YGDirectionLTR: {value: 'Direction.LTR'},
-  YGGutterRow:{value: 'Gutter.Row'},
+  YGDirectionRTL: {value: 'Direction.RTL'},
 
-  YGFlexDirectionColumn:{value: 'FlexDirection.Column'},
+  YGEdgeBottom: {value: 'Edge.Bottom'},
-  YGFlexDirectionColumnReverse:{value: 'FlexDirection.ColumnReverse'},
+  YGEdgeEnd: {value: 'Edge.End'},
-  YGFlexDirectionRow:{value: 'FlexDirection.Row'},
+  YGEdgeLeft: {value: 'Edge.Left'},
-  YGFlexDirectionRowReverse:{value: 'FlexDirection.RowReverse'},
+  YGEdgeRight: {value: 'Edge.Right'},
+  YGEdgeStart: {value: 'Edge.Start'},
+  YGEdgeTop: {value: 'Edge.Top'},
 
-  YGJustifyCenter:{value: 'Justify.Center'},
+  YGGutterAll: {value: 'Gutter.All'},
-  YGJustifyFlexEnd:{value: 'Justify.FlexEnd'},
+  YGGutterColumn: {value: 'Gutter.Column'},
-  YGJustifyFlexStart:{value: 'Justify.FlexStart'},
+  YGGutterRow: {value: 'Gutter.Row'},
-  YGJustifySpaceAround:{value: 'Justify.SpaceAround'},
-  YGJustifySpaceBetween:{value: 'Justify.SpaceBetween'},
-  YGJustifySpaceEvenly:{value: 'Justify.SpaceEvenly'},
 
-  YGOverflowHidden:{value: 'Overflow.Hidden'},
+  YGFlexDirectionColumn: {value: 'FlexDirection.Column'},
-  YGOverflowVisible:{value: 'Overflow.Visible'},
+  YGFlexDirectionColumnReverse: {value: 'FlexDirection.ColumnReverse'},
+  YGFlexDirectionRow: {value: 'FlexDirection.Row'},
+  YGFlexDirectionRowReverse: {value: 'FlexDirection.RowReverse'},
 
-  YGPositionTypeAbsolute:{value: 'PositionType.Absolute'},
+  YGJustifyCenter: {value: 'Justify.Center'},
-  YGPositionTypeRelative:{value: 'PositionType.Relative'},
+  YGJustifyFlexEnd: {value: 'Justify.FlexEnd'},
+  YGJustifyFlexStart: {value: 'Justify.FlexStart'},
+  YGJustifySpaceAround: {value: 'Justify.SpaceAround'},
+  YGJustifySpaceBetween: {value: 'Justify.SpaceBetween'},
+  YGJustifySpaceEvenly: {value: 'Justify.SpaceEvenly'},
 
-  YGAuto:{value:'\'auto\''},
+  YGOverflowHidden: {value: 'Overflow.Hidden'},
-  YGUndefined:{value:'undefined'},
+  YGOverflowVisible: {value: 'Overflow.Visible'},
 
-  YGWrapNoWrap:{value: 'Wrap.NoWrap'},
+  YGPositionTypeAbsolute: {value: 'PositionType.Absolute'},
-  YGWrapWrap:{value: 'Wrap.Wrap'},
+  YGPositionTypeRelative: {value: 'PositionType.Relative'},
-  YGWrapWrapReverse:{value: 'Wrap.WrapReverse'},
 
-  YGDisplayFlex:{value: 'Display.Flex'},
+  YGAuto: {value: "'auto'"},
-  YGDisplayNone:{value: 'Display.None'},
+  YGUndefined: {value: 'undefined'},
 
-  YGNodeCalculateLayout:{value:function(node, dir, experiments) {
+  YGWrapNoWrap: {value: 'Wrap.NoWrap'},
-    this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');
+  YGWrapWrap: {value: 'Wrap.Wrap'},
-  }},
+  YGWrapWrapReverse: {value: 'Wrap.WrapReverse'},
 
-  YGNodeInsertChild:{value:function(parentName, nodeName, index) {
+  YGDisplayFlex: {value: 'Display.Flex'},
-    this.push(parentName + '.insertChild(' + nodeName + ', ' + index + ');');
+  YGDisplayNone: {value: 'Display.None'},
-  }},
 
-  YGNodeLayoutGetLeft:{value:function(nodeName) {
+  YGNodeCalculateLayout: {
-    return nodeName + '.getComputedLeft()';
+    value: function (node, dir, _experiments) {
-  }},
+      this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');
+    },
+  },
 
-  YGNodeLayoutGetTop:{value:function(nodeName) {
+  YGNodeInsertChild: {
-    return nodeName + '.getComputedTop()';
+    value: function (parentName, nodeName, index) {
-  }},
+      this.push(parentName + '.insertChild(' + nodeName + ', ' + index + ');');
+    },
+  },
 
-  YGNodeLayoutGetWidth:{value:function(nodeName) {
+  YGNodeLayoutGetLeft: {
-    return nodeName + '.getComputedWidth()';
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getComputedLeft()';
+    },
+  },
 
-  YGNodeLayoutGetHeight:{value:function(nodeName) {
+  YGNodeLayoutGetTop: {
-    return nodeName + '.getComputedHeight()';
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getComputedTop()';
+    },
+  },
 
-  YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
+  YGNodeLayoutGetWidth: {
-    this.push(nodeName + '.setAlignContent(' + toValueJavascript(value) + ');');
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getComputedWidth()';
+    },
+  },
 
-  YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
+  YGNodeLayoutGetHeight: {
-    this.push(nodeName + '.setAlignItems(' + toValueJavascript(value) + ');');
+    value: function (nodeName) {
-  }},
+      return nodeName + '.getComputedHeight()';
+    },
+  },
 
-  YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
+  YGNodeStyleSetAlignContent: {
-    this.push(nodeName + '.setAlignSelf(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName + '.setAlignContent(' + toValueJavascript(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetAlignItems: {
-    this.push(nodeName + '.setBorder(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setAlignItems(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetDirection:{value:function(nodeName, value) {
+  YGNodeStyleSetAlignSelf: {
-    this.push(nodeName + '.setDirection(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setAlignSelf(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+  YGNodeStyleSetBorder: {
-    this.push(nodeName + '.setDisplay(' + toValueJavascript(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setBorder(' +
+          toValueJavascript(edge) +
+          ', ' +
+          toValueJavascript(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
+  YGNodeStyleSetDirection: {
-    this.push(nodeName + '.setFlexBasis(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setDirection(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
+  YGNodeStyleSetDisplay: {
-    this.push(nodeName + '.setFlexDirection(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setDisplay(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexBasis: {
-    this.push(nodeName + '.setFlexGrow(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexBasis(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexDirection: {
-    this.push(nodeName + '.setFlexShrink(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName + '.setFlexDirection(' + toValueJavascript(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexGrow: {
-    this.push(nodeName + '.setFlexWrap(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexGrow(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexShrink: {
-    this.push(nodeName + '.setHeight(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexShrink(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
+  YGNodeStyleSetFlexWrap: {
-    this.push(nodeName + '.setJustifyContent(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setFlexWrap(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetHeight: {
-    this.push(nodeName + '.setMargin(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setHeight(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetJustifyContent: {
-    this.push(nodeName + '.setMaxHeight(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName + '.setJustifyContent(' + toValueJavascript(value) + ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetMargin: {
-    this.push(nodeName + '.setMaxWidth(' + toValueJavascript(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setMargin(' +
+          toValueJavascript(edge) +
+          ', ' +
+          toValueJavascript(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
+  YGNodeStyleSetMaxHeight: {
-    this.push(nodeName + '.setMinHeight(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setMaxHeight(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetMaxWidth: {
-    this.push(nodeName + '.setMinWidth(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setMaxWidth(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetOverflow:{value:function(nodeName, value) {
+  YGNodeStyleSetMinHeight: {
-    this.push(nodeName + '.setOverflow(' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setMinHeight(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetMinWidth: {
-    this.push(nodeName + '.setPadding(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setMinWidth(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
+  YGNodeStyleSetOverflow: {
-    this.push(nodeName + '.setPosition(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(nodeName + '.setOverflow(' + toValueJavascript(value) + ');');
+    },
+  },
 
-  YGNodeStyleSetPositionType:{value:function(nodeName, value) {
+  YGNodeStyleSetPadding: {
-    this.push(nodeName + '.setPositionType(' + toValueJavascript(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setPadding(' +
+          toValueJavascript(edge) +
+          ', ' +
+          toValueJavascript(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetWidth:{value:function(nodeName, value) {
+  YGNodeStyleSetPosition: {
-    this.push(nodeName + '.setWidth(' + toValueJavascript(value) + ');');
+    value: function (nodeName, edge, value) {
-  }},
+      this.push(
+        nodeName +
+          '.setPosition(' +
+          toValueJavascript(edge) +
+          ', ' +
+          toValueJavascript(value) +
+          ');',
+      );
+    },
+  },
 
-  YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
+  YGNodeStyleSetPositionType: {
-    this.push(nodeName + '.setGap('+ toValueJavascript(gap) + ', ' + toValueJavascript(value) + ');');
+    value: function (nodeName, value) {
-  }},
+      this.push(
+        nodeName + '.setPositionType(' + toValueJavascript(value) + ');',
+      );
+    },
+  },
+
+  YGNodeStyleSetWidth: {
+    value: function (nodeName, value) {
+      this.push(nodeName + '.setWidth(' + toValueJavascript(value) + ');');
+    },
+  },
+
+  YGNodeStyleSetGap: {
+    value: function (nodeName, gap, value) {
+      this.push(
+        nodeName +
+          '.setGap(' +
+          toValueJavascript(gap) +
+          ', ' +
+          toValueJavascript(value) +
+          ');',
+      );
+    },
+  },
 });

gentest/gentest.js

@@ -5,34 +5,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const DEFAULT_EXPERIMENTS = [
+/* eslint-env browser */
-  'AbsolutePercentageAgainstPaddingEdge',
+/* global CPPEmitter:readable, JavaEmitter:readable, JavascriptEmitter:readable */
-];
 
-window.onload = function() {
+const DEFAULT_EXPERIMENTS = ['AbsolutePercentageAgainstPaddingEdge'];
+
+window.onload = function () {
   checkDefaultValues();
 
   printTest(
-      new CPPEmitter(),
+    new CPPEmitter(),
-      'cpp',
+    'cpp',
-      document.body.children[0],
+    document.body.children[0],
-      document.body.children[1],
+    document.body.children[1],
-      document.body.children[2]);
+    document.body.children[2],
+  );
 
   printTest(
-      new JavaEmitter(),
+    new JavaEmitter(),
-      'java',
+    'java',
-      document.body.children[0],
+    document.body.children[0],
-      document.body.children[1],
+    document.body.children[1],
-      document.body.children[2]);
+    document.body.children[2],
+  );
 
   printTest(
-      new JavascriptEmitter(),
+    new JavascriptEmitter(),
-      'js',
+    'js',
-      document.body.children[0],
+    document.body.children[0],
-      document.body.children[1],
+    document.body.children[1],
-      document.body.children[2]);
+    document.body.children[2],
-}
+  );
+};
 
 function assert(condition, message) {
   if (!condition) {
@@ -49,21 +53,23 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
     ' * LICENSE file in the root directory of this source tree.',
     ' */',
     ext === 'cpp' ? '\n// clang-format off' : '',
-    '// @' + 'generated by gentest/gentest.rb from gentest/fixtures/' + document.title + '.html',
+    '// @' +
+      'generated by gentest/gentest.rb from gentest/fixtures/' +
+      document.title +
+      '.html',
     '',
   ]);
   e.emitPrologue();
 
-  var LTRLayoutTree = calculateTree(LTRContainer);
+  const LTRLayoutTree = calculateTree(LTRContainer);
-  var RTLLayoutTree = calculateTree(RTLContainer);
+  const RTLLayoutTree = calculateTree(RTLContainer);
-  var genericLayoutTree = calculateTree(genericContainer);
+  const genericLayoutTree = calculateTree(genericContainer);
 
-
+  for (let i = 0; i < genericLayoutTree.length; i++) {
-  for (var i = 0; i < genericLayoutTree.length; i++) {
     e.emitTestPrologue(
       genericLayoutTree[i].name,
       genericLayoutTree[i].experiments,
-      genericLayoutTree[i].disabled
+      genericLayoutTree[i].disabled,
     );
 
     if (genericLayoutTree[i].name == 'wrap_column') {
@@ -71,36 +77,63 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
       // specification. The undefined dimension of a parent should be defined by the total size
       // of their children in that dimension.
       // See diagram under flex-wrap header https://www.w3.org/TR/css-flexbox-1/
-      assert(LTRLayoutTree[0].width == 30, 'wrap_column LTR root.width should be 30');
+      assert(
+        LTRLayoutTree[0].width == 30,
+        'wrap_column LTR root.width should be 30',
+      );
       LTRLayoutTree[0].width = 60;
-      assert(RTLLayoutTree[0].width == 30, 'wrap_column RTL root.width should be 30');
+      assert(
+        RTLLayoutTree[0].width == 30,
+        'wrap_column RTL root.width should be 30',
+      );
       RTLLayoutTree[0].width = 60;
-      var children = RTLLayoutTree[0].children;
+      const children = RTLLayoutTree[0].children;
-      assert(children[0].left == 0, 'wrap_column RTL root_child0.left should be 0');
+      assert(
+        children[0].left == 0,
+        'wrap_column RTL root_child0.left should be 0',
+      );
       children[0].left = 30;
-      assert(children[1].left == 0, 'wrap_column RTL root_child0.left should be 0');
+      assert(
+        children[1].left == 0,
+        'wrap_column RTL root_child0.left should be 0',
+      );
       children[1].left = 30;
-      assert(children[2].left == 0, 'wrap_column RTL root_child2.left should be 0');
+      assert(
+        children[2].left == 0,
+        'wrap_column RTL root_child2.left should be 0',
+      );
       children[2].left = 30;
-      assert(children[3].left == -30, 'wrap_column RTL root_child3.left should be -30');
+      assert(
+        children[3].left == -30,
+        'wrap_column RTL root_child3.left should be -30',
+      );
       children[3].left = 0;
     }
 
     setupTestTree(
-        e,
+      e,
-        undefined,
+      undefined,
-        LTRLayoutTree[i],
+      LTRLayoutTree[i],
-        genericLayoutTree[i],
+      genericLayoutTree[i],
-        'root',
+      'root',
-        null);
+      null,
+    );
 
-    e.YGNodeCalculateLayout('root', e.YGDirectionLTR, genericLayoutTree[i].experiments);
+    e.YGNodeCalculateLayout(
+      'root',
+      e.YGDirectionLTR,
+      genericLayoutTree[i].experiments,
+    );
     e.push('');
 
     assertTestTree(e, LTRLayoutTree[i], 'root', null);
     e.push('');
 
-    e.YGNodeCalculateLayout('root', e.YGDirectionRTL, genericLayoutTree[i].experiments);
+    e.YGNodeCalculateLayout(
+      'root',
+      e.YGDirectionRTL,
+      genericLayoutTree[i].experiments,
+    );
     e.push('');
 
     assertTestTree(e, RTLLayoutTree[i], 'root', null);
@@ -112,15 +145,15 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
   e.print();
 }
 
-function assertTestTree(e, node, nodeName, parentName) {
+function assertTestTree(e, node, nodeName, _parentName) {
   e.AssertEQ(node.left, e.YGNodeLayoutGetLeft(nodeName));
   e.AssertEQ(node.top, e.YGNodeLayoutGetTop(nodeName));
   e.AssertEQ(node.width, e.YGNodeLayoutGetWidth(nodeName));
   e.AssertEQ(node.height, e.YGNodeLayoutGetHeight(nodeName));
 
-  for (var i = 0; i < node.children.length; i++) {
+  for (let i = 0; i < node.children.length; i++) {
     e.push('');
-    var childName = nodeName + '_child' + i;
+    const childName = nodeName + '_child' + i;
     assertTestTree(e, node.children[i], childName, nodeName);
   }
 }
@@ -128,81 +161,129 @@ function assertTestTree(e, node, nodeName, parentName) {
 function checkDefaultValues() {
   // Sanity check of the Yoga default values by test-template.html
   [
-    {style:'flex-direction', value:'column'},
+    {style: 'flex-direction', value: 'column'},
-    {style:'justify-content', value:'flex-start'},
+    {style: 'justify-content', value: 'flex-start'},
-    {style:'align-content', value:'flex-start'},
+    {style: 'align-content', value: 'flex-start'},
-    {style:'align-items', value:'stretch'},
+    {style: 'align-items', value: 'stretch'},
-    {style:'position', value:'relative'},
+    {style: 'position', value: 'relative'},
-    {style:'flex-wrap', value:'nowrap'},
+    {style: 'flex-wrap', value: 'nowrap'},
-    {style:'overflow', value:'visible'},
+    {style: 'overflow', value: 'visible'},
-    {style:'flex-grow', value:'0'},
+    {style: 'flex-grow', value: '0'},
-    {style:'flex-shrink', value:'0'},
+    {style: 'flex-shrink', value: '0'},
-    {style:'left', value:'undefined'},
+    {style: 'left', value: 'undefined'},
-    {style:'top', value:'undefined'},
+    {style: 'top', value: 'undefined'},
-    {style:'right', value:'undefined'},
+    {style: 'right', value: 'undefined'},
-    {style:'bottom', value:'undefined'},
+    {style: 'bottom', value: 'undefined'},
-    {style:'display', value:'flex'},
+    {style: 'display', value: 'flex'},
-  ].forEach(function(item) {
+  ].forEach(item => {
-    assert(isDefaultStyleValue(item.style, item.value),
+    assert(
-        item.style + ' should be ' + item.value);
+      isDefaultStyleValue(item.style, item.value),
+      item.style + ' should be ' + item.value,
+    );
   });
 }
 
-function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index) {
+function setupTestTree(
+  e,
+  parent,
+  node,
+  genericNode,
+  nodeName,
+  parentName,
+  index,
+) {
   e.emitTestTreePrologue(nodeName);
 
-  for (var style in node.style) {
+  for (const style in node.style) {
     // Skip position info for root as it messes up tests
-    if (node.declaredStyle[style] === "" &&
+    if (
-        (style == 'position' ||
+      node.declaredStyle[style] === '' &&
-         style == 'left' ||
+      (style == 'position' ||
-         style == 'top' ||
+        style == 'left' ||
-         style == 'right' ||
+        style == 'top' ||
-         style == 'bottom' ||
+        style == 'right' ||
-         style == 'width' ||
+        style == 'bottom' ||
-         style == 'height')) {
+        style == 'width' ||
+        style == 'height')
+    ) {
       continue;
-  }
+    }
 
     if (!isDefaultStyleValue(style, node.style[style])) {
       switch (style) {
         case 'gap':
-          e.YGNodeStyleSetGap(nodeName, e.YGGutterAll, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetGap(
+            nodeName,
+            e.YGGutterAll,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'column-gap':
-          e.YGNodeStyleSetGap(nodeName, e.YGGutterColumn, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetGap(
+            nodeName,
+            e.YGGutterColumn,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'row-gap':
-          e.YGNodeStyleSetGap(nodeName, e.YGGutterRow, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetGap(
+            nodeName,
+            e.YGGutterRow,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'direction':
-          e.YGNodeStyleSetDirection(nodeName, directionValue(e, node.style[style]));
+          e.YGNodeStyleSetDirection(
+            nodeName,
+            directionValue(e, node.style[style]),
+          );
           break;
         case 'flex-direction':
-          e.YGNodeStyleSetFlexDirection(nodeName, flexDirectionValue(e, node.style[style]));
+          e.YGNodeStyleSetFlexDirection(
+            nodeName,
+            flexDirectionValue(e, node.style[style]),
+          );
           break;
         case 'justify-content':
-          e.YGNodeStyleSetJustifyContent(nodeName, justifyValue(e, node.style[style]));
+          e.YGNodeStyleSetJustifyContent(
+            nodeName,
+            justifyValue(e, node.style[style]),
+          );
           break;
         case 'align-content':
-          e.YGNodeStyleSetAlignContent(nodeName, alignValue(e, node.style[style]));
+          e.YGNodeStyleSetAlignContent(
+            nodeName,
+            alignValue(e, node.style[style]),
+          );
           break;
         case 'align-items':
-          e.YGNodeStyleSetAlignItems(nodeName, alignValue(e, node.style[style]));
+          e.YGNodeStyleSetAlignItems(
+            nodeName,
+            alignValue(e, node.style[style]),
+          );
           break;
         case 'align-self':
           if (!parent || node.style[style] !== parent.style['align-items']) {
-            e.YGNodeStyleSetAlignSelf(nodeName, alignValue(e, node.style[style]));
+            e.YGNodeStyleSetAlignSelf(
+              nodeName,
+              alignValue(e, node.style[style]),
+            );
           }
           break;
         case 'position':
-          e.YGNodeStyleSetPositionType(nodeName, positionValue(e, node.style[style]));
+          e.YGNodeStyleSetPositionType(
+            nodeName,
+            positionValue(e, node.style[style]),
+          );
           break;
         case 'flex-wrap':
           e.YGNodeStyleSetFlexWrap(nodeName, wrapValue(e, node.style[style]));
           break;
         case 'overflow':
-          e.YGNodeStyleSetOverflow(nodeName, overflowValue(e, node.style[style]));
+          e.YGNodeStyleSetOverflow(
+            nodeName,
+            overflowValue(e, node.style[style]),
+          );
           break;
         case 'flex-grow':
           e.YGNodeStyleSetFlexGrow(nodeName, node.style[style]);
@@ -215,83 +296,179 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
           break;
         case 'left':
           if (genericNode.rawStyle.indexOf('start:') >= 0) {
-            e.YGNodeStyleSetPosition(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPosition(
+              nodeName,
+              e.YGEdgeStart,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetPosition(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPosition(
+              nodeName,
+              e.YGEdgeLeft,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'top':
-          e.YGNodeStyleSetPosition(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetPosition(
+            nodeName,
+            e.YGEdgeTop,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'right':
           if (genericNode.rawStyle.indexOf('end:') >= 0) {
-            e.YGNodeStyleSetPosition(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPosition(
+              nodeName,
+              e.YGEdgeEnd,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetPosition(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPosition(
+              nodeName,
+              e.YGEdgeRight,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'bottom':
-          e.YGNodeStyleSetPosition(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetPosition(
+            nodeName,
+            e.YGEdgeBottom,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'margin-left':
           if (genericNode.rawStyle.indexOf('margin-start:') >= 0) {
-            e.YGNodeStyleSetMargin(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetMargin(
+              nodeName,
+              e.YGEdgeStart,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetMargin(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetMargin(
+              nodeName,
+              e.YGEdgeLeft,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'margin-top':
-          e.YGNodeStyleSetMargin(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetMargin(
+            nodeName,
+            e.YGEdgeTop,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'margin-right':
           if (genericNode.rawStyle.indexOf('margin-end:') >= 0) {
-            e.YGNodeStyleSetMargin(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetMargin(
+              nodeName,
+              e.YGEdgeEnd,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetMargin(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetMargin(
+              nodeName,
+              e.YGEdgeRight,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'margin-bottom':
-          e.YGNodeStyleSetMargin(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetMargin(
+            nodeName,
+            e.YGEdgeBottom,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'padding-left':
           if (genericNode.rawStyle.indexOf('padding-start:') >= 0) {
-            e.YGNodeStyleSetPadding(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPadding(
+              nodeName,
+              e.YGEdgeStart,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetPadding(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPadding(
+              nodeName,
+              e.YGEdgeLeft,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'padding-top':
-          e.YGNodeStyleSetPadding(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetPadding(
+            nodeName,
+            e.YGEdgeTop,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'padding-right':
           if (genericNode.rawStyle.indexOf('padding-end:') >= 0) {
-            e.YGNodeStyleSetPadding(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPadding(
+              nodeName,
+              e.YGEdgeEnd,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetPadding(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetPadding(
+              nodeName,
+              e.YGEdgeRight,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'padding-bottom':
-          e.YGNodeStyleSetPadding(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetPadding(
+            nodeName,
+            e.YGEdgeBottom,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'border-left-width':
           if (genericNode.rawStyle.indexOf('border-start-width:') >= 0) {
-            e.YGNodeStyleSetBorder(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetBorder(
+              nodeName,
+              e.YGEdgeStart,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetBorder(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetBorder(
+              nodeName,
+              e.YGEdgeLeft,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'border-top-width':
-          e.YGNodeStyleSetBorder(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetBorder(
+            nodeName,
+            e.YGEdgeTop,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'border-right-width':
           if (genericNode.rawStyle.indexOf('border-end-width:') >= 0) {
-            e.YGNodeStyleSetBorder(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetBorder(
+              nodeName,
+              e.YGEdgeEnd,
+              pointValue(e, node.style[style]),
+            );
           } else {
-            e.YGNodeStyleSetBorder(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
+            e.YGNodeStyleSetBorder(
+              nodeName,
+              e.YGEdgeRight,
+              pointValue(e, node.style[style]),
+            );
           }
           break;
         case 'border-bottom-width':
-          e.YGNodeStyleSetBorder(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
+          e.YGNodeStyleSetBorder(
+            nodeName,
+            e.YGEdgeBottom,
+            pointValue(e, node.style[style]),
+          );
           break;
         case 'width':
           e.YGNodeStyleSetWidth(nodeName, pointValue(e, node.style[style]));
@@ -312,7 +489,7 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
           e.YGNodeStyleSetMaxHeight(nodeName, pointValue(e, node.style[style]));
           break;
         case 'display':
-          e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]))
+          e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]));
           break;
       }
     }
@@ -322,106 +499,140 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
     e.YGNodeInsertChild(parentName, nodeName, index);
   }
 
-  for (var i = 0; i < node.children.length; i++) {
+  for (let i = 0; i < node.children.length; i++) {
     e.push('');
-    var childName = nodeName + '_child' + i;
+    const childName = nodeName + '_child' + i;
     setupTestTree(
-        e,
+      e,
-        node,
+      node,
-        node.children[i],
+      node.children[i],
-        genericNode.children[i],
+      genericNode.children[i],
-        childName,
+      childName,
-        nodeName,
+      nodeName,
-        i);
+      i,
+    );
   }
 }
 
 function overflowValue(e, value) {
   switch (value) {
-    case 'visible': return e.YGOverflowVisible;
+    case 'visible':
-    case 'hidden': return e.YGOverflowHidden;
+      return e.YGOverflowVisible;
+    case 'hidden':
+      return e.YGOverflowHidden;
   }
 }
 
 function wrapValue(e, value) {
   switch (value) {
-    case 'wrap': return e.YGWrapWrap;
+    case 'wrap':
-    case 'wrap-reverse': return e.YGWrapWrapReverse;
+      return e.YGWrapWrap;
-    case 'nowrap': return e.YGWrapNoWrap;
+    case 'wrap-reverse':
+      return e.YGWrapWrapReverse;
+    case 'nowrap':
+      return e.YGWrapNoWrap;
   }
 }
 
 function flexDirectionValue(e, value) {
   switch (value) {
-    case 'row': return e.YGFlexDirectionRow;
+    case 'row':
-    case 'row-reverse': return e.YGFlexDirectionRowReverse;
+      return e.YGFlexDirectionRow;
-    case 'column': return e.YGFlexDirectionColumn;
+    case 'row-reverse':
-    case 'column-reverse': return e.YGFlexDirectionColumnReverse;
+      return e.YGFlexDirectionRowReverse;
+    case 'column':
+      return e.YGFlexDirectionColumn;
+    case 'column-reverse':
+      return e.YGFlexDirectionColumnReverse;
   }
 }
 
 function justifyValue(e, value) {
   switch (value) {
-    case 'center': return e.YGJustifyCenter;
+    case 'center':
-    case 'space-around': return e.YGJustifySpaceAround;
+      return e.YGJustifyCenter;
-    case 'space-between': return e.YGJustifySpaceBetween;
+    case 'space-around':
-    case 'space-evenly': return e.YGJustifySpaceEvenly;
+      return e.YGJustifySpaceAround;
-    case 'flex-start': return e.YGJustifyFlexStart;
+    case 'space-between':
-    case 'flex-end': return e.YGJustifyFlexEnd;
+      return e.YGJustifySpaceBetween;
+    case 'space-evenly':
+      return e.YGJustifySpaceEvenly;
+    case 'flex-start':
+      return e.YGJustifyFlexStart;
+    case 'flex-end':
+      return e.YGJustifyFlexEnd;
   }
 }
 
 function positionValue(e, value) {
   switch (value) {
-    case 'absolute': return e.YGPositionTypeAbsolute;
+    case 'absolute':
-    default: return e.YGPositionTypeRelative
+      return e.YGPositionTypeAbsolute;
+    default:
+      return e.YGPositionTypeRelative;
   }
 }
 
 function directionValue(e, value) {
   switch (value) {
-    case 'ltr': return e.YGDirectionLTR;
+    case 'ltr':
-    case 'rtl': return e.YGDirectionRTL;
+      return e.YGDirectionLTR;
-    case 'inherit': return e.YGDirectionInherit;
+    case 'rtl':
+      return e.YGDirectionRTL;
+    case 'inherit':
+      return e.YGDirectionInherit;
   }
 }
 
 function alignValue(e, value) {
   switch (value) {
-    case 'auto': return e.YGAlignAuto;
+    case 'auto':
-    case 'center': return e.YGAlignCenter;
+      return e.YGAlignAuto;
-    case 'stretch': return e.YGAlignStretch;
+    case 'center':
-    case 'flex-start': return e.YGAlignFlexStart;
+      return e.YGAlignCenter;
-    case 'flex-end': return e.YGAlignFlexEnd;
+    case 'stretch':
-    case 'space-between': return e.YGAlignSpaceBetween;
+      return e.YGAlignStretch;
-    case 'space-around': return e.YGAlignSpaceAround;
+    case 'flex-start':
-    case 'baseline': return e.YGAlignBaseline;
+      return e.YGAlignFlexStart;
+    case 'flex-end':
+      return e.YGAlignFlexEnd;
+    case 'space-between':
+      return e.YGAlignSpaceBetween;
+    case 'space-around':
+      return e.YGAlignSpaceAround;
+    case 'baseline':
+      return e.YGAlignBaseline;
   }
 }
 
 function pointValue(e, value) {
   switch (value) {
-    case 'auto': return e.YGAuto;
+    case 'auto':
-    case 'undefined': return e.YGUndefined;
+      return e.YGAuto;
-    default: return value;
+    case 'undefined':
+      return e.YGUndefined;
+    default:
+      return value;
   }
 }
 
-function displayValue(e, value){
+function displayValue(e, value) {
-  switch(value){
+  switch (value) {
-    case 'flex': return e.YGDisplayFlex;
+    case 'flex':
-    case 'none': return e.YGDisplayNone;
+      return e.YGDisplayFlex;
+    case 'none':
+      return e.YGDisplayNone;
   }
 }
 
-var DEFAULT_STYLES = new Map();
+const DEFAULT_STYLES = new Map();
 
 function isDefaultStyleValue(style, value) {
   let defaultStyle = DEFAULT_STYLES.get(style);
   if (defaultStyle == null) {
     switch (style) {
       case 'position':
-        defaultStyle = new Set(['relative']);;
+        defaultStyle = new Set(['relative']);
         break;
 
       case 'left':
@@ -438,10 +649,11 @@ function isDefaultStyleValue(style, value) {
         defaultStyle = new Set(['0', '0px', 'auto']);
         break;
 
-      default:
+      default: {
-        var node = document.getElementById('default');
+        const node = document.getElementById('default');
         defaultStyle = new Set([getComputedStyle(node, null)[style]]);
         break;
+      }
     }
     DEFAULT_STYLES.set(style, defaultStyle);
   }
@@ -449,19 +661,19 @@ function isDefaultStyleValue(style, value) {
 }
 
 function getRoundedSize(node) {
-  var boundingRect = node.getBoundingClientRect();
+  const boundingRect = node.getBoundingClientRect();
   return {
     width: Math.round(boundingRect.right) - Math.round(boundingRect.left),
-    height: Math.round(boundingRect.bottom) - Math.round(boundingRect.top)
+    height: Math.round(boundingRect.bottom) - Math.round(boundingRect.top),
   };
 }
 
 function calculateTree(root, roundToPixelGrid) {
-  var rootLayout = [];
+  const rootLayout = [];
 
-  for (var i = 0; i < root.children.length; i++) {
+  for (let i = 0; i < root.children.length; i++) {
-    var child = root.children[i];
+    const child = root.children[i];
-    var layout = {
+    const layout = {
       name: child.id !== '' ? child.id : 'INSERT_NAME_HERE',
       left: child.offsetLeft + child.parentNode.clientLeft,
       top: child.offsetTop + child.parentNode.clientTop,
@@ -472,12 +684,12 @@ function calculateTree(root, roundToPixelGrid) {
       declaredStyle: child.style,
       rawStyle: child.getAttribute('style'),
       experiments: child.dataset.experiments
-          ? child.dataset.experiments.split(' ')
+        ? child.dataset.experiments.split(' ')
-          : DEFAULT_EXPERIMENTS,
+        : DEFAULT_EXPERIMENTS,
       disabled: child.dataset.disabled === 'true',
     };
 
-    var size = getRoundedSize(child);
+    const size = getRoundedSize(child);
     layout.width = size.width;
     layout.height = size.height;
 
@@ -528,13 +740,14 @@ function getYogaStyle(node) {
     'column-gap',
     'row-gap',
     'display',
-  ].reduce(function(map, key) {
+  ].reduce((map, key) => {
-    map[key] = node.style[key] || getComputedStyle(node, null).getPropertyValue(key);
+    map[key] =
+      node.style[key] || getComputedStyle(node, null).getPropertyValue(key);
     return map;
   }, {});
 }
 
-var Emitter = function(lang, indent) {
+const Emitter = function (lang, indent) {
   this.lang = lang;
   this.indent = indent;
   this.indents = [];
@@ -542,29 +755,37 @@ var Emitter = function(lang, indent) {
 };
 
 Emitter.prototype = Object.create(Object.prototype, {
-  constructor:{value:Emitter},
+  constructor: {value: Emitter},
 
-  pushIndent:{value:function() {
+  pushIndent: {
-    this.indents.push(this.indent);
+    value: function () {
-  }},
+      this.indents.push(this.indent);
+    },
+  },
 
-  popIndent:{value:function() {
+  popIndent: {
-    this.indents.pop();
+    value: function () {
-  }},
+      this.indents.pop();
+    },
+  },
 
-  push:{value:function(line) {
+  push: {
-    if (line instanceof Array) {
+    value: function (line) {
-      line.forEach(function(element) {
+      if (line instanceof Array) {
-        this.push(element);
+        line.forEach(function (element) {
-      }, this);
+          this.push(element);
-      return;
+        }, this);
-    } else if (line.length > 0) {
+        return;
-      line = this.indents.join('') + line;
+      } else if (line.length > 0) {
-    }
+        line = this.indents.join('') + line;
-    this.lines.push(line);
+      }
-  }},
+      this.lines.push(line);
+    },
+  },
 
-  print:{value:function() {
+  print: {
-    console.log(this.lines.join('\n'));
+    value: function () {
-  }},
+      console.log(this.lines.join('\n'));
+    },
+  },
 });

javascript/.prettierignore

@@ -1,4 +0,0 @@
-binaries/
-build/
-src/generated/
-tests/generated/

javascript/just.config.ts

@@ -10,7 +10,6 @@
 import {
   argv,
   cleanTask,
-  eslintTask,
   logger,
   jestTask,
   option,
@@ -76,13 +75,7 @@ task(
   ),
 );
 
-task(
+task('clang-format', clangFormatTask({fix: argv().fix}));
-  'lint',
-  parallel(
-    tscTask({noEmit: true}),
-    series(eslintTask({fix: argv().fix}), clangFormatTask({fix: argv().fix})),
-  ),
-);
 
 task('prepack-package-json', async () => {
   const packageJsonPath = path.join(__dirname, 'package.json');

javascript/package.json

@@ -48,36 +48,30 @@
   "scripts": {
     "benchmark": "just benchmark",
     "build": "just build",
+    "clang-format": "just clang-format",
+    "clang-format:fix": "just clang-format --fix",
     "clean": "just clean",
-    "lint": "just lint",
+    "lint": "eslint .",
-    "lint:fix": "just lint --fix",
+    "lint:fix": "eslint . --fix",
     "prepack": "just prepack",
-    "test": "just test"
+    "test": "just test",
+    "tsc": "tsc --noEmit"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
+    "@babel/cli": "^7.21.4",
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.21.4",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/node": "^7.21.4",
-    "@babel/node": "^7.20.7",
+    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.4",
     "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.1",
     "@types/node": "^16.18.25",
     "@types/which": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
     "clang-format": "^1.8.0",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-prettier": "^4.2.1",
     "glob": "^8.0.3",
     "jest": "^29.3.1",
     "just-scripts": "^2.1.0",
-    "prettier": "2.8.8",
     "ts-node": "^10.9.1",
-    "typescript": "5.0.4",
     "which": "^3.0.0"
   }
 }

javascript/src/wrapAssembly.d.ts

@@ -81,7 +81,11 @@ export type MeasureFunction = (
 ) => Size;
 
 export type Node = {
-  calculateLayout(width?: number, height?: number, direction?: Direction): void;
+  calculateLayout(
+    width?: number | 'auto',
+    height?: number | 'auto',
+    direction?: Direction,
+  ): void;
   copyStyle(node: Node): void;
   free(): void;
   freeRecursive(): void;

package.json

@@ -2,8 +2,22 @@
   "name": "yoga-repo",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
   "workspaces": [
     "javascript",
     "website-next"
-  ]
+  ],
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^27.1.7",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "2.8.8",
+    "typescript": "5.0.4"
+  }
 }

website-next/docusaurus.config.js

@@ -13,7 +13,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Yoga',
-  tagline: 'Build flexible layouts on any platform with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.',
+  tagline:
+    'Build flexible layouts on any platform with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.',
   favicon: 'img/favicon.png',
 
   url: 'https:/yogalayout.com',
@@ -37,13 +38,11 @@ const config = {
       ({
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
-          editUrl:
+          editUrl: 'https://github.com/facebook/yoga/tree/main/website',
-            'https://github.com/facebook/yoga/tree/main/website',
         },
         blog: {
           showReadingTime: true,
-          editUrl:
+          editUrl: 'https://github.com/facebook/yoga/tree/main/website',
-            'https://github.com/facebook/yoga/tree/main/website',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

website-next/package.json

@@ -12,7 +12,9 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "@docusaurus/core": "2.4.1",
@@ -29,8 +31,7 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5",
+    "@tsconfig/docusaurus": "^1.0.5"
-    "typescript": "^4.7.4"
   },
   "browserslist": {
     "production": [

website-next/src/components/Playground/EditValue.tsx

@@ -7,17 +7,17 @@
  * @format
  */
 
-import React  from 'react';
+import React from 'react';
 import YogaEnumSelect from './YogaEnumSelect';
 import YogaPositionEditor from './YogaPositionEditor';
 import {Input} from 'antd';
 
 type Props<T> = {
-  property: string,
+  property: string;
-  disabled?: boolean,
+  disabled?: boolean;
-  value?: T,
+  value?: T;
-  onChange: (property: string, value: T) => void,
+  onChange: (property: string, value: T) => void;
-  placeholder?: string,
+  placeholder?: string;
 };
 
 export default (props: Props<any>) => {

website-next/src/components/Playground/Editor.tsx

@@ -17,13 +17,13 @@ import './Editor.css';
 const TabPane = Tabs.TabPane;
 
 type Props = {
-  node: LayoutRecordType,
+  node: LayoutRecordType;
-  onChangeLayout: (key: string, value: any) => void,
+  onChangeLayout: (key: string, value: any) => void;
-  onChangeSetting: (key: string, value: any) => void,
+  onChangeSetting: (key: string, value: any) => void;
-  direction: Direction,
+  direction: Direction;
-  selectedNodeIsRoot: boolean,
+  selectedNodeIsRoot: boolean;
-  onRemove?: () => void,
+  onRemove?: () => void;
-  onAdd?: () => void,
+  onAdd?: () => void;
 };
 
 export default class Editor extends Component<Props> {
@@ -47,7 +47,7 @@ export default class Editor extends Component<Props> {
 
   render() {
     const {node, selectedNodeIsRoot} = this.props;
-    const disabled = !Boolean(node);
+    const disabled = !node;
 
     return (
       <div className="Editor">
@@ -347,7 +347,7 @@ export default class Editor extends Component<Props> {
           <Col span={12}>
             <Button
               icon="plus-circle-o"
-              disabled={!Boolean(this.props.onAdd)}
+              disabled={!this.props.onAdd}
               onClick={this.props.onAdd}
               type="primary">
               add child node
@@ -356,7 +356,7 @@ export default class Editor extends Component<Props> {
           <Col span={12}>
             <Button
               icon="close-circle-o"
-              disabled={!Boolean(this.props.onRemove)}
+              disabled={!this.props.onRemove}
               onClick={this.props.onRemove}
               type="danger">
               remove node

website-next/src/components/Playground/InfoText.tsx

@@ -13,8 +13,8 @@ import Link from '@docusaurus/Link';
 import './InfoText.css';
 
 type Props = {
-  children: any,
+  children: any;
-  doclink: string,
+  doclink: string;
 };
 
 export default class InfoText extends Component<Props> {

website-next/src/components/Playground/LayoutRecord.tsx

@@ -7,7 +7,6 @@
  * @format
  */
 
-
 import {Record, List} from 'immutable';
 import PositionRecord from './PositionRecord';
 import type {PositionRecordType} from './PositionRecord';
@@ -24,28 +23,28 @@ import type {
 export type LayoutRecordType = ReturnType<LayoutRecordFactory>;
 
 export type LayoutRecordFactory = Record.Factory<{
-  width?: number | 'auto',
+  width?: number | 'auto';
-  height?: number | 'auto',
+  height?: number | 'auto';
-  minWidth?: number,
+  minWidth?: number;
-  minHeight?: number,
+  minHeight?: number;
-  maxWidth?: number,
+  maxWidth?: number;
-  maxHeight?: number,
+  maxHeight?: number;
-  justifyContent?: Justify,
+  justifyContent?: Justify;
-  padding: PositionRecordType,
+  padding: PositionRecordType;
-  border: PositionRecordType,
+  border: PositionRecordType;
-  margin: PositionRecordType,
+  margin: PositionRecordType;
-  position: PositionRecordType,
+  position: PositionRecordType;
-  positionType: PositionType,
+  positionType: PositionType;
-  alignItems?: Align,
+  alignItems?: Align;
-  alignSelf?: Align,
+  alignSelf?: Align;
-  alignContent?: Align,
+  alignContent?: Align;
-  flexDirection?: FlexDirection,
+  flexDirection?: FlexDirection;
-  flexBasis?: number | 'auto',
+  flexBasis?: number | 'auto';
-  flexGrow?: number,
+  flexGrow?: number;
-  flexShrink?: number,
+  flexShrink?: number;
-  flexWrap?: Wrap,
+  flexWrap?: Wrap;
-  aspectRatio?: number | 'auto',
+  aspectRatio?: number | 'auto';
-  children?: List<LayoutRecordType>,
+  children?: List<LayoutRecordType>;
 }>;
 
 const r: LayoutRecordFactory = Record({

website-next/src/components/Playground/PositionGuide.tsx

@@ -13,11 +13,11 @@ import type {PositionRecordType} from './PositionRecord';
 import './PositionGuide.css';
 
 type Props = {
-  inset?: boolean,
+  inset?: boolean;
-  reverse?: boolean,
+  reverse?: boolean;
-  position: PositionRecordType,
+  position: PositionRecordType;
-  offset: PositionRecordType,
+  offset: PositionRecordType;
-  color: string,
+  color: string;
 };
 
 export default class PositionGuide extends Component<Props> {
@@ -42,8 +42,6 @@ export default class PositionGuide extends Component<Props> {
     ) {
       return null;
     }
-
-
     if (reverse) {
       let temp1 = left;
       left = right;

website-next/src/components/Playground/PositionRecord.tsx

@@ -12,10 +12,10 @@ import {Record} from 'immutable';
 export type PositionRecordType = ReturnType<PositionRecordFactory>;
 
 export type PositionRecordFactory = Record.Factory<{
-  top: string | number,
+  top: string | number;
-  right: string | number,
+  right: string | number;
-  bottom: string | number,
+  bottom: string | number;
-  left: string | number,
+  left: string | number;
 }>;
 
 const r: PositionRecordFactory = Record({

website-next/src/components/Playground/Sidebar.tsx

@@ -11,8 +11,8 @@ import React, {Component} from 'react';
 import './Sidebar.css';
 
 type Props = {
-  width?: number,
+  width?: number;
-  children: any,
+  children: any;
 };
 
 export default class Sidebar extends Component<Props> {

website-next/src/components/Playground/YogaEnumSelect.tsx

@@ -25,19 +25,19 @@ const PROPERTY_LOOKUP = {
   flexWrap: 'WRAP',
 };
 
-type Property = keyof(typeof PROPERTY_LOOKUP);
+type Property = keyof typeof PROPERTY_LOOKUP;
 
 type Props = {
-  property: Property,
+  property: Property;
-  disabled?: boolean,
+  disabled?: boolean;
-  value: string | number,
+  value: string | number;
-  onChange: (property: Property, value: number) => void,
+  onChange: (property: Property, value: number) => void;
 };
 
 export default class YogaEnumSelect extends Component<Props> {
   static availableProperties = Object.keys(PROPERTY_LOOKUP);
 
-  values: Array<{key: string, value: number}>;
+  values: Array<{key: string; value: number}>;
 
   constructor(props: Props) {
     super(props);
@@ -57,17 +57,12 @@ export default class YogaEnumSelect extends Component<Props> {
 
   getTitle = (property: string, key: string): string => {
     const replacer = new RegExp(`^${property}_`);
-    return key
+    return key.replace(replacer, '').replace('_', ' ').toLowerCase();
-      .replace(replacer, '')
-      .replace('_', ' ')
-      .toLowerCase();
   };
 
   render() {
     const property = PROPERTY_LOOKUP[this.props.property];
-    const selected = this.values.find(
+    const selected = this.values.find(({value}) => value === this.props.value);
-      ({key, value}) => value === this.props.value,
-    );
 
     return this.values.length > 3 ? (
       <div className="YogaEnumSelect">

website-next/src/components/Playground/YogaNode.tsx

@@ -18,30 +18,30 @@ import {Direction, Display, Edge, Node, Wrap} from 'yoga-layout/sync';
 import './YogaNode.css';
 
 type ComputedLayout = {
-  left: number,
+  left: number;
-  top: number,
+  top: number;
-  width: number,
+  width: number;
-  height: number,
+  height: number;
-  children: Array<ComputedLayout>,
+  children: Array<ComputedLayout>;
-  node: Node,
+  node: Node;
 };
 
 type Props = {
-  layoutDefinition: LayoutRecordType,
+  layoutDefinition: LayoutRecordType;
-  className?: string,
+  className?: string;
-  computedLayout?: ComputedLayout,
+  computedLayout?: ComputedLayout;
-  path: Array<number>,
+  path: Array<number>;
-  selectedNodePath?: Array<number>,
+  selectedNodePath?: Array<number>;
-  direction?: Direction,
+  direction?: Direction;
-  label?: string,
+  label?: string;
-  showGuides: boolean,
+  showGuides: boolean;
-  onClick?: (path: Array<number>) => void,
+  onClick?: (path: Array<number>) => void;
-  onDoubleClick?: (path: Array<number>) => void,
+  onDoubleClick?: (path: Array<number>) => void;
 };
 
 type State = {
-  visible?: boolean,
+  visible?: boolean;
-  hovered: boolean,
+  hovered: boolean;
 };
 
 export default class YogaNode extends Component<Props, State> {
@@ -68,7 +68,7 @@ export default class YogaNode extends Component<Props, State> {
       this.calculateLayout(props);
       this.state = {
         hovered: false,
-        visible: !Boolean(props.computedLayout),
+        visible: !props.computedLayout,
       };
     }
   }
@@ -137,7 +137,9 @@ export default class YogaNode extends Component<Props, State> {
             ? defaultLayout[key]
             : layoutDefinition[key];
         root[`set${key[0].toUpperCase()}${key.substr(1)}`](value);
-      } catch (e) {}
+      } catch (e) {
+        // Do nothing on failure
+      }
     });
 
     ['padding', 'margin', 'position', 'border'].forEach(key => {
@@ -147,7 +149,9 @@ export default class YogaNode extends Component<Props, State> {
             Yoga[`EDGE_${direction.toUpperCase()}`],
             layoutDefinition[key][direction],
           );
-        } catch (e) {}
+        } catch (e) {
+          // Do nothing on failure
+        }
       });
     });
 
@@ -165,7 +169,7 @@ export default class YogaNode extends Component<Props, State> {
     return {
       ...node.getComputedLayout(),
       node,
-      children: Array.apply(null, Array(node.getChildCount())).map((_, i) =>
+      children: Array(node.getChildCount()).map((_, i) =>
         this.getComputedLayout(node.getChild(i)),
       ),
     };
@@ -187,7 +191,7 @@ export default class YogaNode extends Component<Props, State> {
     }
   };
 
-  onMouseLeave = (e: React.MouseEvent) => this.setState({hovered: false});
+  onMouseLeave = (_e: React.MouseEvent) => this.setState({hovered: false});
 
   showPositionGuides({node}: ComputedLayout) {
     const padding = PositionRecord({
@@ -246,13 +250,8 @@ export default class YogaNode extends Component<Props, State> {
   }
 
   render() {
-    const {
+    const {layoutDefinition, className, path, selectedNodePath, label} =
-      layoutDefinition,
+      this.props;
-      className,
-      path,
-      selectedNodePath,
-      label,
-    } = this.props;
 
     const computedLayout: ComputedLayout =
       this.props.computedLayout || this.computedLayout;

website-next/src/components/Playground/YogaPositionEditor.tsx

@@ -16,10 +16,10 @@ import './YogaPositionEditor.css';
 type Property = 'position' | 'margin' | 'padding' | 'border';
 
 type Props = {
-  value: PositionRecordType,
+  value: PositionRecordType;
-  property: Property,
+  property: Property;
-  disabled?: boolean,
+  disabled?: boolean;
-  onChange: (property: Property, value: PositionRecordType) => void,
+  onChange: (property: Property, value: PositionRecordType) => void;
 };
 
 export default class YogaPositionEditor extends Component<Props> {

website-next/src/components/Playground/index.tsx

@@ -15,28 +15,30 @@ import {List, setIn} from 'immutable';
 import PositionRecord from './PositionRecord';
 import LayoutRecord from './LayoutRecord';
 import Sidebar from './Sidebar';
-import {Row, Col} from 'antd';
 import type {LayoutRecordType} from './LayoutRecord';
 import './index.css';
 
 type Props = {
-  layoutDefinition: Object,
+  layoutDefinition: LayoutRecordType;
-  direction: Direction,
+  direction: Direction;
-  maxDepth: number,
+  maxDepth: number;
-  maxChildren?: number,
+  maxChildren?: number;
-  minChildren?: number,
+  minChildren?: number;
-  selectedNodePath?: Array<number>,
+  selectedNodePath?: Array<number>;
-  showGuides: boolean,
+  showGuides: boolean;
-  className?: string,
+  className?: string;
-  height?: string | number,
+  height?: string | number;
-  persist?: boolean,
+  persist?: boolean;
-  renderSidebar?: (layoutDefinition: LayoutRecordType, onChange: Function) => any,
+  renderSidebar?: (
+    layoutDefinition: LayoutRecordType,
+    onChange: () => any,
+  ) => any;
 };
 
 type State = {
-  selectedNodePath?: Array<number>,
+  selectedNodePath?: Array<number>;
-  layoutDefinition: LayoutRecordType,
+  layoutDefinition: LayoutRecordType;
-  direction: Direction,
+  direction: Direction;
 };
 
 function getPath(path: Array<number>): Array<unknown> {
@@ -62,7 +64,7 @@ export default class Playground extends Component<Props, State> {
     persist: false,
   };
 
-  rehydrate = (node: Object): LayoutRecordType => {
+  rehydrate = (node: LayoutRecordType): LayoutRecordType => {
     let record = LayoutRecord(node);
     record = record.set('padding', PositionRecord(record.padding));
     record = record.set('border', PositionRecord(record.border));
@@ -115,7 +117,7 @@ export default class Playground extends Component<Props, State> {
   };
 
   hideSidePanes() {
-    if (!Boolean(this.props.renderSidebar)) {
+    if (!this.props.renderSidebar) {
       // only unselect if we don't have an external sidebar, otherwise the
       // sidebar may rely on a certain node to be selected
       this.setState({
@@ -183,7 +185,9 @@ export default class Playground extends Component<Props, State> {
   ): string =>
     btoa(JSON.stringify(this.removeUnchangedProperties(layoutDefinition)));
 
-  removeUnchangedProperties = (node: LayoutRecordType): Object => {
+  removeUnchangedProperties = (
+    node: LayoutRecordType,
+  ): {children?: unknown} => {
     const untouchedLayout = LayoutRecord({});
     const untouchedPosition = PositionRecord({});
     const result: {children?: unknown} = {};

website/src/components/Playground/src/CodeComponentKit.js

@@ -96,7 +96,9 @@ function getLayoutCode(
       }`,
   );
   lines.push(indent + ` newWithView:{}`);
-  lines.push(indent + ` size:{${getValue(node.width)},${getValue(node.height)}}`);
+  lines.push(
+    indent + ` size:{${getValue(node.width)},${getValue(node.height)}}`,
+  );
 
   const CKFlexboxComponentStyle = [
     'direction',

website/src/components/Playground/src/CodeJavaScript.js

@@ -27,9 +27,11 @@ export const JSEnumLookup = {
 };
 
 function getEnum(yogaEnum: string, value: string | number): string {
-  return `yoga.${Object.keys(yoga)
+  return `yoga.${
-    .filter(key => key.toLowerCase().startsWith(yogaEnum.toLowerCase()))
+    Object.keys(yoga)
-    .find(key => yoga[key] === value) || value}`;
+      .filter(key => key.toLowerCase().startsWith(yogaEnum.toLowerCase()))
+      .find(key => yoga[key] === value) || value
+  }`;
 }
 
 function setProperty(

website/src/components/Playground/src/LayoutRecord.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-
 import {Record, List} from 'immutable';
 import type {RecordOf} from 'immutable';
 import PositionRecord from './PositionRecord';

website/src/components/Playground/src/YogaEnumSelect.js

@@ -57,10 +57,7 @@ export default class YogaEnumSelect extends Component<Props> {
 
   getTitle = (property: string, key: string): string => {
     const replacer = new RegExp(`^${property}_`);
-    return key
+    return key.replace(replacer, '').replace('_', ' ').toLowerCase();
-      .replace(replacer, '')
-      .replace('_', ' ')
-      .toLowerCase();
   };
 
   render() {

website/src/components/Playground/src/YogaNode.js

@@ -244,13 +244,8 @@ export default class YogaNode extends Component<Props, State> {
   }
 
   render() {
-    const {
+    const {layoutDefinition, className, path, selectedNodePath, label} =
-      layoutDefinition,
+      this.props;
-      className,
-      path,
-      selectedNodePath,
-      label,
-    } = this.props;
 
     // $FlowFixMe
     const computedLayout: ComputedLayout =

website/src/pages/index.js

@@ -137,10 +137,7 @@ const AboutSectionOne = () => (
         <img src={ComponentKitLogo} />
         <h3>ComponentKit</h3>
       </a>
-      <a
+      <a href="https://reactnative.dev" target="_blank" className="logo">
-        href="https://reactnative.dev"
-        target="_blank"
-        className="logo">
         <img src={ReactNativeLogo} />
         <h3>React Native</h3>
       </a>