DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Unify ESLint and Prettier across xplat/yoga (#1335)

Browse Source 
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1335

Reviewed By: christophpurrer

Differential Revision: D47459866

fbshipit-source-id: fd6b4e4e2518d91968ac7180b32129b3f70edf88
This commit is contained in:
Nick Gerleman
2023-07-17 14:27:32 -07:00
committed by Facebook GitHub Bot
parent 05b2edfb85
commit 44507ec62e
35 changed files with 2064 additions and 1559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
javascript/.eslintrc.js → .eslintrc.js
View File

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

2
.github/workflows/validate-cpp.yml vendored
View File

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

18
.github/workflows/validate-js.yml vendored
View File

@@ -60,7 +60,19 @@ jobs:
working-directory: javascript working-directory: javascript
lint: 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 runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
@@ -69,8 +81,8 @@ jobs:
run: yarn install --frozen-lockfile run: yarn install --frozen-lockfile
working-directory: javascript working-directory: javascript
- name: yarn lint - name: yarn tsc
run: yarn lint run: yarn tsc
working-directory: javascript working-directory: javascript
pack: pack:

41
.github/workflows/validate-website-next.yml vendored Normal file
View File

@@ -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

3
.prettierignore Normal file
View File

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

0
javascript/.prettierrc.js → .prettierrc.js
View File

597
gentest/gentest-cpp.js
View File

@@ -5,254 +5,485 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
/* global Emitter:readable */
function toValueCpp(value) { 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' : ''); return n + (Number(n) == n && n % 1 !== 0 ? 'f' : '');
} }
function toFunctionName(value) { function toFunctionName(value) {
if (value.indexOf('%') >= 0) { if (value.indexOf('%') >= 0) {
return 'Percent'; return 'Percent';
} else if(value.indexOf('Auto') >= 0) { } else if (value.indexOf('Auto') >= 0) {
return 'Auto'; return 'Auto';
} }
return ''; return '';
} }
var CPPEmitter = function() { const CPPEmitter = function () {
Emitter.call(this, 'cpp', ' '); Emitter.call(this, 'cpp', ' ');
}; };
CPPEmitter.prototype = Object.create(Emitter.prototype, { 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('');
} },
},
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) +
');',
);
},
},
}); });

594
gentest/gentest-java.js
View File

@@ -5,29 +5,35 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
/* global Emitter:readable */
function toValueJava(value) { 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 ? '' : ''); return n + (Number(n) == n && n % 1 !== 0 ? '' : '');
} }
function toMethodName(value) { function toMethodName(value) {
if (value.indexOf('%') >= 0){ if (value.indexOf('%') >= 0) {
return 'Percent'; return 'Percent';
} else if(value.indexOf('AUTO') >= 0) { } else if (value.indexOf('AUTO') >= 0) {
return 'Auto'; return 'Auto';
} }
return ''; return '';
} }
var JavaEmitter = function() { const JavaEmitter = function () {
Emitter.call(this, 'java', ' '); Emitter.call(this, 'java', ' ');
}; };
function toJavaUpper(symbol) { 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 += '_';
} }
out += c.toUpperCase(); out += c.toUpperCase();
@@ -36,260 +42,418 @@ function toJavaUpper(symbol) {
} }
JavaEmitter.prototype = Object.create(Emitter.prototype, { 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);',
);
},
},
}); });

521
gentest/gentest-javascript.js
View File

@@ -5,7 +5,9 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
const JavascriptEmitter = function() { /* global Emitter:readable */
const JavascriptEmitter = function () {
Emitter.call(this, 'js', ' '); Emitter.call(this, 'js', ' ');
}; };
@@ -17,255 +19,372 @@ function toValueJavascript(value) {
} }
JavascriptEmitter.prototype = Object.create(Emitter.prototype, { 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('');
} },
},
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) +
');',
);
},
},
}); });

601
gentest/gentest.js
View File

@@ -5,34 +5,38 @@
* LICENSE file in the root directory of this source tree. * 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(); checkDefaultValues();
printTest( 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( 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( 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) { function assert(condition, message) {
if (!condition) { if (!condition) {
@@ -49,21 +53,23 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
' * LICENSE file in the root directory of this source tree.', ' * LICENSE file in the root directory of this source tree.',
' */', ' */',
ext === 'cpp' ? '\n// clang-format off' : '', 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(); 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( e.emitTestPrologue(
genericLayoutTree[i].name, genericLayoutTree[i].name,
genericLayoutTree[i].experiments, genericLayoutTree[i].experiments,
genericLayoutTree[i].disabled genericLayoutTree[i].disabled,
); );
if (genericLayoutTree[i].name == 'wrap_column') { 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 // specification. The undefined dimension of a parent should be defined by the total size
// of their children in that dimension. // of their children in that dimension.
// See diagram under flex-wrap header https://www.w3.org/TR/css-flexbox-1/ // 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; 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; 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; 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; 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; 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; children[3].left = 0;
} }
setupTestTree( 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(''); e.push('');
assertTestTree(e, LTRLayoutTree[i], 'root', null); assertTestTree(e, LTRLayoutTree[i], 'root', null);
e.push(''); e.push('');
e.YGNodeCalculateLayout('root', e.YGDirectionRTL, genericLayoutTree[i].experiments); e.YGNodeCalculateLayout(
'root',
e.YGDirectionRTL,
genericLayoutTree[i].experiments,
);
e.push(''); e.push('');
assertTestTree(e, RTLLayoutTree[i], 'root', null); assertTestTree(e, RTLLayoutTree[i], 'root', null);
@@ -112,15 +145,15 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
e.print(); e.print();
} }
function assertTestTree(e, node, nodeName, parentName) { function assertTestTree(e, node, nodeName, _parentName) {
e.AssertEQ(node.left, e.YGNodeLayoutGetLeft(nodeName)); e.AssertEQ(node.left, e.YGNodeLayoutGetLeft(nodeName));
e.AssertEQ(node.top, e.YGNodeLayoutGetTop(nodeName)); e.AssertEQ(node.top, e.YGNodeLayoutGetTop(nodeName));
e.AssertEQ(node.width, e.YGNodeLayoutGetWidth(nodeName)); e.AssertEQ(node.width, e.YGNodeLayoutGetWidth(nodeName));
e.AssertEQ(node.height, e.YGNodeLayoutGetHeight(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(''); e.push('');
var childName = nodeName + '_child' + i; const childName = nodeName + '_child' + i;
assertTestTree(e, node.children[i], childName, nodeName); assertTestTree(e, node.children[i], childName, nodeName);
} }
} }
@@ -128,81 +161,129 @@ function assertTestTree(e, node, nodeName, parentName) {
function checkDefaultValues() { function checkDefaultValues() {
// Sanity check of the Yoga default values by test-template.html // 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); 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 // 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; continue;
} }
if (!isDefaultStyleValue(style, node.style[style])) { if (!isDefaultStyleValue(style, node.style[style])) {
switch (style) { switch (style) {
case 'gap': case 'gap':
e.YGNodeStyleSetGap(nodeName, e.YGGutterAll, pointValue(e, node.style[style])); e.YGNodeStyleSetGap(
nodeName,
e.YGGutterAll,
pointValue(e, node.style[style]),
);
break; break;
case 'column-gap': case 'column-gap':
e.YGNodeStyleSetGap(nodeName, e.YGGutterColumn, pointValue(e, node.style[style])); e.YGNodeStyleSetGap(
nodeName,
e.YGGutterColumn,
pointValue(e, node.style[style]),
);
break; break;
case 'row-gap': case 'row-gap':
e.YGNodeStyleSetGap(nodeName, e.YGGutterRow, pointValue(e, node.style[style])); e.YGNodeStyleSetGap(
nodeName,
e.YGGutterRow,
pointValue(e, node.style[style]),
);
break; break;
case 'direction': case 'direction':
e.YGNodeStyleSetDirection(nodeName, directionValue(e, node.style[style])); e.YGNodeStyleSetDirection(
nodeName,
directionValue(e, node.style[style]),
);
break; break;
case 'flex-direction': case 'flex-direction':
e.YGNodeStyleSetFlexDirection(nodeName, flexDirectionValue(e, node.style[style])); e.YGNodeStyleSetFlexDirection(
nodeName,
flexDirectionValue(e, node.style[style]),
);
break; break;
case 'justify-content': case 'justify-content':
e.YGNodeStyleSetJustifyContent(nodeName, justifyValue(e, node.style[style])); e.YGNodeStyleSetJustifyContent(
nodeName,
justifyValue(e, node.style[style]),
);
break; break;
case 'align-content': case 'align-content':
e.YGNodeStyleSetAlignContent(nodeName, alignValue(e, node.style[style])); e.YGNodeStyleSetAlignContent(
nodeName,
alignValue(e, node.style[style]),
);
break; break;
case 'align-items': case 'align-items':
e.YGNodeStyleSetAlignItems(nodeName, alignValue(e, node.style[style])); e.YGNodeStyleSetAlignItems(
nodeName,
alignValue(e, node.style[style]),
);
break; break;
case 'align-self': case 'align-self':
if (!parent || node.style[style] !== parent.style['align-items']) { 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; break;
case 'position': case 'position':
e.YGNodeStyleSetPositionType(nodeName, positionValue(e, node.style[style])); e.YGNodeStyleSetPositionType(
nodeName,
positionValue(e, node.style[style]),
);
break; break;
case 'flex-wrap': case 'flex-wrap':
e.YGNodeStyleSetFlexWrap(nodeName, wrapValue(e, node.style[style])); e.YGNodeStyleSetFlexWrap(nodeName, wrapValue(e, node.style[style]));
break; break;
case 'overflow': case 'overflow':
e.YGNodeStyleSetOverflow(nodeName, overflowValue(e, node.style[style])); e.YGNodeStyleSetOverflow(
nodeName,
overflowValue(e, node.style[style]),
);
break; break;
case 'flex-grow': case 'flex-grow':
e.YGNodeStyleSetFlexGrow(nodeName, node.style[style]); e.YGNodeStyleSetFlexGrow(nodeName, node.style[style]);
@@ -215,83 +296,179 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
break; break;
case 'left': case 'left':
if (genericNode.rawStyle.indexOf('start:') >= 0) { 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 { } else {
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style])); e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'top': case 'top':
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeTop, pointValue(e, node.style[style])); e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break; break;
case 'right': case 'right':
if (genericNode.rawStyle.indexOf('end:') >= 0) { 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 { } else {
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeRight, pointValue(e, node.style[style])); e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'bottom': case 'bottom':
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style])); e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break; break;
case 'margin-left': case 'margin-left':
if (genericNode.rawStyle.indexOf('margin-start:') >= 0) { 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 { } else {
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style])); e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'margin-top': case 'margin-top':
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeTop, pointValue(e, node.style[style])); e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break; break;
case 'margin-right': case 'margin-right':
if (genericNode.rawStyle.indexOf('margin-end:') >= 0) { 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 { } else {
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeRight, pointValue(e, node.style[style])); e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'margin-bottom': case 'margin-bottom':
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style])); e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break; break;
case 'padding-left': case 'padding-left':
if (genericNode.rawStyle.indexOf('padding-start:') >= 0) { 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 { } else {
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style])); e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'padding-top': case 'padding-top':
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeTop, pointValue(e, node.style[style])); e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break; break;
case 'padding-right': case 'padding-right':
if (genericNode.rawStyle.indexOf('padding-end:') >= 0) { 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 { } else {
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeRight, pointValue(e, node.style[style])); e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'padding-bottom': case 'padding-bottom':
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style])); e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break; break;
case 'border-left-width': case 'border-left-width':
if (genericNode.rawStyle.indexOf('border-start-width:') >= 0) { 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 { } else {
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style])); e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'border-top-width': 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; break;
case 'border-right-width': case 'border-right-width':
if (genericNode.rawStyle.indexOf('border-end-width:') >= 0) { 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 { } else {
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeRight, pointValue(e, node.style[style])); e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
} }
break; break;
case 'border-bottom-width': 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; break;
case 'width': case 'width':
e.YGNodeStyleSetWidth(nodeName, pointValue(e, node.style[style])); 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])); e.YGNodeStyleSetMaxHeight(nodeName, pointValue(e, node.style[style]));
break; break;
case 'display': case 'display':
e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style])) e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]));
break; break;
} }
} }
@@ -322,106 +499,140 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
e.YGNodeInsertChild(parentName, nodeName, 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(''); e.push('');
var childName = nodeName + '_child' + i; const childName = nodeName + '_child' + i;
setupTestTree( 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) { function overflowValue(e, value) {
switch (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) { function wrapValue(e, value) {
switch (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) { function flexDirectionValue(e, value) {
switch (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) { function justifyValue(e, value) {
switch (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) { function positionValue(e, value) {
switch (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) { function directionValue(e, value) {
switch (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) { function alignValue(e, value) {
switch (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) { function pointValue(e, value) {
switch (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) { function isDefaultStyleValue(style, value) {
let defaultStyle = DEFAULT_STYLES.get(style); let defaultStyle = DEFAULT_STYLES.get(style);
if (defaultStyle == null) { if (defaultStyle == null) {
switch (style) { switch (style) {
case 'position': case 'position':
defaultStyle = new Set(['relative']);; defaultStyle = new Set(['relative']);
break; break;
case 'left': case 'left':
@@ -438,10 +649,11 @@ function isDefaultStyleValue(style, value) {
defaultStyle = new Set(['0', '0px', 'auto']); defaultStyle = new Set(['0', '0px', 'auto']);
break; break;
default: default: {
var node = document.getElementById('default'); const node = document.getElementById('default');
defaultStyle = new Set([getComputedStyle(node, null)[style]]); defaultStyle = new Set([getComputedStyle(node, null)[style]]);
break; break;
}
} }
DEFAULT_STYLES.set(style, defaultStyle); DEFAULT_STYLES.set(style, defaultStyle);
} }
@@ -449,19 +661,19 @@ function isDefaultStyleValue(style, value) {
} }
function getRoundedSize(node) { function getRoundedSize(node) {
var boundingRect = node.getBoundingClientRect(); const boundingRect = node.getBoundingClientRect();
return { return {
width: Math.round(boundingRect.right) - Math.round(boundingRect.left), 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) { 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', name: child.id !== '' ? child.id : 'INSERT_NAME_HERE',
left: child.offsetLeft + child.parentNode.clientLeft, left: child.offsetLeft + child.parentNode.clientLeft,
top: child.offsetTop + child.parentNode.clientTop, top: child.offsetTop + child.parentNode.clientTop,
@@ -472,12 +684,12 @@ function calculateTree(root, roundToPixelGrid) {
declaredStyle: child.style, declaredStyle: child.style,
rawStyle: child.getAttribute('style'), rawStyle: child.getAttribute('style'),
experiments: child.dataset.experiments experiments: child.dataset.experiments
? child.dataset.experiments.split(' ') ? child.dataset.experiments.split(' ')
: DEFAULT_EXPERIMENTS, : DEFAULT_EXPERIMENTS,
disabled: child.dataset.disabled === 'true', disabled: child.dataset.disabled === 'true',
}; };
var size = getRoundedSize(child); const size = getRoundedSize(child);
layout.width = size.width; layout.width = size.width;
layout.height = size.height; layout.height = size.height;
@@ -528,13 +740,14 @@ function getYogaStyle(node) {
'column-gap', 'column-gap',
'row-gap', 'row-gap',
'display', '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; return map;
}, {}); }, {});
} }
var Emitter = function(lang, indent) { const Emitter = function (lang, indent) {
this.lang = lang; this.lang = lang;
this.indent = indent; this.indent = indent;
this.indents = []; this.indents = [];
@@ -542,29 +755,37 @@ var Emitter = function(lang, indent) {
}; };
Emitter.prototype = Object.create(Object.prototype, { 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'));
},
},
}); });

4
javascript/.prettierignore
View File

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

9
javascript/just.config.ts
View File

@@ -10,7 +10,6 @@
import { import {
argv, argv,
cleanTask, cleanTask,
eslintTask,
logger, logger,
jestTask, jestTask,
option, 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 () => { task('prepack-package-json', async () => {
const packageJsonPath = path.join(__dirname, 'package.json'); const packageJsonPath = path.join(__dirname, 'package.json');

26
javascript/package.json
View File

@@ -48,36 +48,30 @@
"scripts": { "scripts": {
"benchmark": "just benchmark", "benchmark": "just benchmark",
"build": "just build", "build": "just build",
"clang-format": "just clang-format",
"clang-format:fix": "just clang-format --fix",
"clean": "just clean", "clean": "just clean",
"lint": "just lint", "lint": "eslint .",
"lint:fix": "just lint --fix", "lint:fix": "eslint . --fix",
"prepack": "just prepack", "prepack": "just prepack",
"test": "just test" "test": "just test",
"tsc": "tsc --noEmit"
}, },
"devDependencies": { "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", "@babel/preset-typescript": "^7.21.4",
"@types/glob": "^8.1.0", "@types/glob": "^8.1.0",
"@types/jest": "^29.5.1", "@types/jest": "^29.5.1",
"@types/node": "^16.18.25", "@types/node": "^16.18.25",
"@types/which": "^3.0.0", "@types/which": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"clang-format": "^1.8.0", "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", "glob": "^8.0.3",
"jest": "^29.3.1", "jest": "^29.3.1",
"just-scripts": "^2.1.0", "just-scripts": "^2.1.0",
"prettier": "2.8.8",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"typescript": "5.0.4",
"which": "^3.0.0" "which": "^3.0.0"
} }
} }

6
javascript/src/wrapAssembly.d.ts vendored
View File

@@ -81,7 +81,11 @@ export type MeasureFunction = (
) => Size; ) => Size;
export type Node = { 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; copyStyle(node: Node): void;
free(): void; free(): void;
freeRecursive(): void; freeRecursive(): void;

16
package.json
View File

@@ -2,8 +2,22 @@
"name": "yoga-repo", "name": "yoga-repo",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"workspaces": [ "workspaces": [
"javascript", "javascript",
"website-next" "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"
}
} }

9
website-next/docusaurus.config.js
View File

@@ -13,7 +13,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */ /** @type {import('@docusaurus/types').Config} */
const config = { const config = {
title: 'Yoga', 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', favicon: 'img/favicon.png',
url: 'https:/yogalayout.com', url: 'https:/yogalayout.com',
@@ -37,13 +38,11 @@ const config = {
({ ({
docs: { docs: {
sidebarPath: require.resolve('./sidebars.js'), sidebarPath: require.resolve('./sidebars.js'),
editUrl: editUrl: 'https://github.com/facebook/yoga/tree/main/website',
'https://github.com/facebook/yoga/tree/main/website',
}, },
blog: { blog: {
showReadingTime: true, showReadingTime: true,
editUrl: editUrl: 'https://github.com/facebook/yoga/tree/main/website',
'https://github.com/facebook/yoga/tree/main/website',
}, },
theme: { theme: {
customCss: require.resolve('./src/css/custom.css'), customCss: require.resolve('./src/css/custom.css'),

7
website-next/package.json
View File

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

12
website-next/src/components/Playground/EditValue.tsx
View File

@@ -7,17 +7,17 @@
* @format * @format
*/ */
import React from 'react'; import React from 'react';
import YogaEnumSelect from './YogaEnumSelect'; import YogaEnumSelect from './YogaEnumSelect';
import YogaPositionEditor from './YogaPositionEditor'; import YogaPositionEditor from './YogaPositionEditor';
import {Input} from 'antd'; import {Input} from 'antd';
type Props<T> = { 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>) => { export default (props: Props<any>) => {

20
website-next/src/components/Playground/Editor.tsx
View File

@@ -17,13 +17,13 @@ import './Editor.css';
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
type Props = { 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> { export default class Editor extends Component<Props> {
@@ -47,7 +47,7 @@ export default class Editor extends Component<Props> {
render() { render() {
const {node, selectedNodeIsRoot} = this.props; const {node, selectedNodeIsRoot} = this.props;
const disabled = !Boolean(node); const disabled = !node;
return ( return (
<div className="Editor"> <div className="Editor">
@@ -347,7 +347,7 @@ export default class Editor extends Component<Props> {
<Col span={12}> <Col span={12}>
<Button <Button
icon="plus-circle-o" icon="plus-circle-o"
disabled={!Boolean(this.props.onAdd)} disabled={!this.props.onAdd}
onClick={this.props.onAdd} onClick={this.props.onAdd}
type="primary"> type="primary">
add child node add child node
@@ -356,7 +356,7 @@ export default class Editor extends Component<Props> {
<Col span={12}> <Col span={12}>
<Button <Button
icon="close-circle-o" icon="close-circle-o"
disabled={!Boolean(this.props.onRemove)} disabled={!this.props.onRemove}
onClick={this.props.onRemove} onClick={this.props.onRemove}
type="danger"> type="danger">
remove node remove node

4
website-next/src/components/Playground/InfoText.tsx
View File

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

45
website-next/src/components/Playground/LayoutRecord.tsx
View File

@@ -7,7 +7,6 @@
* @format * @format
*/ */
import {Record, List} from 'immutable'; import {Record, List} from 'immutable';
import PositionRecord from './PositionRecord'; import PositionRecord from './PositionRecord';
import type {PositionRecordType} from './PositionRecord'; import type {PositionRecordType} from './PositionRecord';
@@ -24,28 +23,28 @@ import type {
export type LayoutRecordType = ReturnType<LayoutRecordFactory>; export type LayoutRecordType = ReturnType<LayoutRecordFactory>;
export type LayoutRecordFactory = Record.Factory<{ 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({ const r: LayoutRecordFactory = Record({

12
website-next/src/components/Playground/PositionGuide.tsx
View File

@@ -13,11 +13,11 @@ import type {PositionRecordType} from './PositionRecord';
import './PositionGuide.css'; import './PositionGuide.css';
type Props = { 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> { export default class PositionGuide extends Component<Props> {
@@ -42,8 +42,6 @@ export default class PositionGuide extends Component<Props> {
) { ) {
return null; return null;
} }
if (reverse) { if (reverse) {
let temp1 = left; let temp1 = left;
left = right; left = right;

8
website-next/src/components/Playground/PositionRecord.tsx
View File

@@ -12,10 +12,10 @@ import {Record} from 'immutable';
export type PositionRecordType = ReturnType<PositionRecordFactory>; export type PositionRecordType = ReturnType<PositionRecordFactory>;
export type PositionRecordFactory = Record.Factory<{ 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({ const r: PositionRecordFactory = Record({

4
website-next/src/components/Playground/Sidebar.tsx
View File

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

21
website-next/src/components/Playground/YogaEnumSelect.tsx
View File

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

59
website-next/src/components/Playground/YogaNode.tsx
View File

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

8
website-next/src/components/Playground/YogaPositionEditor.tsx
View File

@@ -16,10 +16,10 @@ import './YogaPositionEditor.css';
type Property = 'position' | 'margin' | 'padding' | 'border'; type Property = 'position' | 'margin' | 'padding' | 'border';
type Props = { 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> { export default class YogaPositionEditor extends Component<Props> {

40
website-next/src/components/Playground/index.tsx
View File

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

4
website/src/components/Playground/src/CodeComponentKit.js
View File

@@ -96,7 +96,9 @@ function getLayoutCode(
}`, }`,
); );
lines.push(indent + ` newWithView:{}`); 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 = [ const CKFlexboxComponentStyle = [
'direction', 'direction',

8
website/src/components/Playground/src/CodeJavaScript.js
View File

@@ -27,9 +27,11 @@ export const JSEnumLookup = {
}; };
function getEnum(yogaEnum: string, value: string | number): string { 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( function setProperty(

1
website/src/components/Playground/src/LayoutRecord.js
View File

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

5
website/src/components/Playground/src/YogaEnumSelect.js
View File

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

9
website/src/components/Playground/src/YogaNode.js
View File

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

5
website/src/pages/index.js
View File

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

870
yarn.lock
View File

File diff suppressed because it is too large Load Diff