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

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

@@ -64,5 +64,3 @@ jobs:
- name: 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
lint:
name: Lint
name: ESLint (All Packages)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: yarn install
run: yarn install --frozen-lockfile
- name: yarn lint
run: yarn lint
typecheck:
name: Typecheck
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
@@ -69,8 +81,8 @@ jobs:
run: yarn install --frozen-lockfile
working-directory: javascript
- name: yarn lint
run: yarn lint
- name: yarn tsc
run: yarn tsc
working-directory: javascript
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.
*/
/* global Emitter:readable */
function toValueCpp(value) {
var n = value.toString().replace('px','').replace('%','');
const n = value.toString().replace('px', '').replace('%', '');
return n + (Number(n) == n && n % 1 !== 0 ? 'f' : '');
}
function toFunctionName(value) {
if (value.indexOf('%') >= 0) {
return 'Percent';
} else if(value.indexOf('Auto') >= 0) {
} else if (value.indexOf('Auto') >= 0) {
return 'Auto';
}
return '';
}
var CPPEmitter = function() {
const CPPEmitter = function () {
Emitter.call(this, 'cpp', ' ');
};
CPPEmitter.prototype = Object.create(Emitter.prototype, {
constructor:{value:CPPEmitter},
constructor: {value: CPPEmitter},
emitPrologue:{value:function() {
this.push([
'#include <gtest/gtest.h>',
'#include <yoga/Yoga.h>',
'',
]);
}},
emitPrologue: {
value: function () {
this.push(['#include <gtest/gtest.h>', '#include <yoga/Yoga.h>', '']);
},
},
emitTestPrologue:{value:function(name, experiments, disabled) {
this.push('TEST(YogaTest, ' + name + ') {');
this.pushIndent();
emitTestPrologue: {
value: function (name, experiments, disabled) {
this.push('TEST(YogaTest, ' + name + ') {');
this.pushIndent();
if (disabled) {
this.push('GTEST_SKIP();');
if (disabled) {
this.push('GTEST_SKIP();');
this.push('');
}
this.push('const YGConfigRef config = YGConfigNew();');
for (const i in experiments) {
this.push(
'YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeature' +
experiments[i] +
', true);',
);
}
this.push('');
}
},
},
this.push('const YGConfigRef config = YGConfigNew();')
for (var i in experiments) {
this.push('YGConfigSetExperimentalFeatureEnabled(config, YGExperimentalFeature' + experiments[i] +', true);');
}
this.push('');
}},
emitTestTreePrologue: {
value: function (nodeName) {
this.push(
'const YGNodeRef ' + nodeName + ' = YGNodeNewWithConfig(config);',
);
},
},
emitTestTreePrologue:{value:function(nodeName) {
this.push('const YGNodeRef ' + nodeName + ' = YGNodeNewWithConfig(config);');
}},
emitTestEpilogue: {
value: function (_experiments) {
this.push(['', 'YGNodeFreeRecursive(root);']);
emitTestEpilogue:{value:function(experiments) {
this.push([
'',
'YGNodeFreeRecursive(root);',
]);
this.push('');
this.push('YGConfigFree(config);');
this.push('');
this.push('YGConfigFree(config);')
this.popIndent();
this.push(['}', '']);
},
},
this.popIndent();
this.push([
'}',
'',
]);
}},
emitEpilogue: {value: function () {}},
emitEpilogue:{value:function() {
}},
AssertEQ: {
value: function (v0, v1) {
this.push('ASSERT_FLOAT_EQ(' + toValueCpp(v0) + ', ' + v1 + ');');
},
},
AssertEQ:{value:function(v0, v1) {
this.push('ASSERT_FLOAT_EQ(' + toValueCpp(v0) + ', ' + v1 + ');');
}},
YGAlignAuto: {value: 'YGAlignAuto'},
YGAlignCenter: {value: 'YGAlignCenter'},
YGAlignFlexEnd: {value: 'YGAlignFlexEnd'},
YGAlignFlexStart: {value: 'YGAlignFlexStart'},
YGAlignStretch: {value: 'YGAlignStretch'},
YGAlignSpaceBetween: {value: 'YGAlignSpaceBetween'},
YGAlignSpaceAround: {value: 'YGAlignSpaceAround'},
YGAlignBaseline: {value: 'YGAlignBaseline'},
YGAlignAuto:{value:'YGAlignAuto'},
YGAlignCenter:{value:'YGAlignCenter'},
YGAlignFlexEnd:{value:'YGAlignFlexEnd'},
YGAlignFlexStart:{value:'YGAlignFlexStart'},
YGAlignStretch:{value:'YGAlignStretch'},
YGAlignSpaceBetween:{value:'YGAlignSpaceBetween'},
YGAlignSpaceAround:{value:'YGAlignSpaceAround'},
YGAlignBaseline:{value:'YGAlignBaseline'},
YGDirectionInherit: {value: 'YGDirectionInherit'},
YGDirectionLTR: {value: 'YGDirectionLTR'},
YGDirectionRTL: {value: 'YGDirectionRTL'},
YGDirectionInherit:{value:'YGDirectionInherit'},
YGDirectionLTR:{value:'YGDirectionLTR'},
YGDirectionRTL:{value:'YGDirectionRTL'},
YGEdgeBottom: {value: 'YGEdgeBottom'},
YGEdgeEnd: {value: 'YGEdgeEnd'},
YGEdgeLeft: {value: 'YGEdgeLeft'},
YGEdgeRight: {value: 'YGEdgeRight'},
YGEdgeStart: {value: 'YGEdgeStart'},
YGEdgeTop: {value: 'YGEdgeTop'},
YGEdgeBottom:{value:'YGEdgeBottom'},
YGEdgeEnd:{value:'YGEdgeEnd'},
YGEdgeLeft:{value:'YGEdgeLeft'},
YGEdgeRight:{value:'YGEdgeRight'},
YGEdgeStart:{value:'YGEdgeStart'},
YGEdgeTop:{value:'YGEdgeTop'},
YGGutterAll: {value: 'YGGutterAll'},
YGGutterColumn: {value: 'YGGutterColumn'},
YGGutterRow: {value: 'YGGutterRow'},
YGGutterAll:{value:'YGGutterAll'},
YGGutterColumn:{value:'YGGutterColumn'},
YGGutterRow:{value:'YGGutterRow'},
YGFlexDirectionColumn: {value: 'YGFlexDirectionColumn'},
YGFlexDirectionColumnReverse: {value: 'YGFlexDirectionColumnReverse'},
YGFlexDirectionRow: {value: 'YGFlexDirectionRow'},
YGFlexDirectionRowReverse: {value: 'YGFlexDirectionRowReverse'},
YGFlexDirectionColumn:{value:'YGFlexDirectionColumn'},
YGFlexDirectionColumnReverse:{value:'YGFlexDirectionColumnReverse'},
YGFlexDirectionRow:{value:'YGFlexDirectionRow'},
YGFlexDirectionRowReverse:{value:'YGFlexDirectionRowReverse'},
YGJustifyCenter: {value: 'YGJustifyCenter'},
YGJustifyFlexEnd: {value: 'YGJustifyFlexEnd'},
YGJustifyFlexStart: {value: 'YGJustifyFlexStart'},
YGJustifySpaceAround: {value: 'YGJustifySpaceAround'},
YGJustifySpaceBetween: {value: 'YGJustifySpaceBetween'},
YGJustifySpaceEvenly: {value: 'YGJustifySpaceEvenly'},
YGJustifyCenter:{value:'YGJustifyCenter'},
YGJustifyFlexEnd:{value:'YGJustifyFlexEnd'},
YGJustifyFlexStart:{value:'YGJustifyFlexStart'},
YGJustifySpaceAround:{value:'YGJustifySpaceAround'},
YGJustifySpaceBetween:{value:'YGJustifySpaceBetween'},
YGJustifySpaceEvenly:{value:'YGJustifySpaceEvenly'},
YGOverflowHidden: {value: 'YGOverflowHidden'},
YGOverflowVisible: {value: 'YGOverflowVisible'},
YGOverflowHidden:{value:'YGOverflowHidden'},
YGOverflowVisible:{value:'YGOverflowVisible'},
YGPositionTypeAbsolute: {value: 'YGPositionTypeAbsolute'},
YGPositionTypeRelative: {value: 'YGPositionTypeRelative'},
YGPositionTypeAbsolute:{value:'YGPositionTypeAbsolute'},
YGPositionTypeRelative:{value:'YGPositionTypeRelative'},
YGWrapNoWrap: {value: 'YGWrapNoWrap'},
YGWrapWrap: {value: 'YGWrapWrap'},
YGWrapWrapReverse: {value: 'YGWrapWrapReverse'},
YGWrapNoWrap:{value:'YGWrapNoWrap'},
YGWrapWrap:{value:'YGWrapWrap'},
YGWrapWrapReverse:{value: 'YGWrapWrapReverse'},
YGUndefined: {value: 'YGUndefined'},
YGUndefined:{value:'YGUndefined'},
YGDisplayFlex: {value: 'YGDisplayFlex'},
YGDisplayNone: {value: 'YGDisplayNone'},
YGAuto: {value: 'YGAuto'},
YGDisplayFlex:{value:'YGDisplayFlex'},
YGDisplayNone:{value:'YGDisplayNone'},
YGAuto:{value:'YGAuto'},
YGNodeCalculateLayout: {
value: function (node, dir, _experiments) {
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) {
this.push('YGNodeCalculateLayout(' + node + ', YGUndefined, YGUndefined, ' + dir + ');');
}},
YGNodeLayoutGetLeft: {
value: function (nodeName) {
return 'YGNodeLayoutGetLeft(' + nodeName + ')';
},
},
YGNodeInsertChild:{value:function(parentName, nodeName, index) {
this.push('YGNodeInsertChild(' + parentName + ', ' + nodeName + ', ' + index + ');');
}},
YGNodeLayoutGetTop: {
value: function (nodeName) {
return 'YGNodeLayoutGetTop(' + nodeName + ')';
},
},
YGNodeLayoutGetLeft:{value:function(nodeName) {
return 'YGNodeLayoutGetLeft(' + nodeName + ')';
}},
YGNodeLayoutGetWidth: {
value: function (nodeName) {
return 'YGNodeLayoutGetWidth(' + nodeName + ')';
},
},
YGNodeLayoutGetTop:{value:function(nodeName) {
return 'YGNodeLayoutGetTop(' + nodeName + ')';
}},
YGNodeLayoutGetHeight: {
value: function (nodeName) {
return 'YGNodeLayoutGetHeight(' + nodeName + ')';
},
},
YGNodeLayoutGetWidth:{value:function(nodeName) {
return 'YGNodeLayoutGetWidth(' + nodeName + ')';
}},
YGNodeStyleSetAlignContent: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetAlignContent(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeLayoutGetHeight:{value:function(nodeName) {
return 'YGNodeLayoutGetHeight(' + nodeName + ')';
}},
YGNodeStyleSetAlignItems: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetAlignItems(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
this.push('YGNodeStyleSetAlignContent(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetAlignSelf: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetAlignSelf(' + nodeName + ', ' + toValueCpp(value) + ');',
);
},
},
YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
this.push('YGNodeStyleSetAlignItems(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetBorder: {
value: function (nodeName, edge, value) {
this.push(
'YGNodeStyleSetBorder(' +
nodeName +
', ' +
edge +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
this.push('YGNodeStyleSetAlignSelf(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetDirection: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetDirection(' + nodeName + ', ' + toValueCpp(value) + ');',
);
},
},
YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetBorder(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetDisplay: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetDisplay(' + nodeName + ', ' + toValueCpp(value) + ');',
);
},
},
YGNodeStyleSetDirection:{value:function(nodeName, value) {
this.push('YGNodeStyleSetDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexBasis: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetFlexBasis' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetDisplay:{value:function(nodeName, value) {
this.push('YGNodeStyleSetDisplay(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexDirection: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetFlexDirection(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexBasis' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexGrow: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetFlexGrow(' + nodeName + ', ' + toValueCpp(value) + ');',
);
},
},
YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexShrink: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetFlexShrink(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexGrow(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexWrap: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetFlexWrap(' + nodeName + ', ' + toValueCpp(value) + ');',
);
},
},
YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexShrink(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetHeight: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetHeight' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexWrap(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetJustifyContent: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetJustifyContent(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetHeight:{value:function(nodeName, value) {
this.push('YGNodeStyleSetHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMargin: {
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) {
this.push('YGNodeStyleSetJustifyContent(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMaxHeight: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetMaxHeight' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
var valueStr = toValueCpp(value);
if (valueStr != 'YGAuto') {
valueStr = ', ' + valueStr;
} else {
valueStr = '';
}
this.push('YGNodeStyleSetMargin' + toFunctionName(value) + '(' + nodeName + ', ' + edge + valueStr + ');');
}},
YGNodeStyleSetMaxWidth: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetMaxWidth' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMaxHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMinHeight: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetMinHeight' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMaxWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMinWidth: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetMinWidth' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMinHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetOverflow: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetOverflow(' + nodeName + ', ' + toValueCpp(value) + ');',
);
},
},
YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMinWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetPadding: {
value: function (nodeName, edge, value) {
this.push(
'YGNodeStyleSetPadding' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
edge +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetOverflow:{value:function(nodeName, value) {
this.push('YGNodeStyleSetOverflow(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetPosition: {
value: function (nodeName, edge, value) {
this.push(
'YGNodeStyleSetPosition' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
edge +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetPadding' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetPositionType: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetPositionType(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetPosition' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetWidth: {
value: function (nodeName, value) {
this.push(
'YGNodeStyleSetWidth' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
toValueCpp(value) +
');',
);
},
},
YGNodeStyleSetPositionType:{value:function(nodeName, value) {
this.push('YGNodeStyleSetPositionType(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetWidth:{value:function(nodeName, value) {
this.push('YGNodeStyleSetWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
this.push('YGNodeStyleSetGap' + toFunctionName(value) + '(' + nodeName + ', ' + gap + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetGap: {
value: function (nodeName, gap, value) {
this.push(
'YGNodeStyleSetGap' +
toFunctionName(value) +
'(' +
nodeName +
', ' +
gap +
', ' +
toValueCpp(value) +
');',
);
},
},
});

594
gentest/gentest-java.js
View File

@@ -5,29 +5,35 @@
* LICENSE file in the root directory of this source tree.
*/
/* global Emitter:readable */
function toValueJava(value) {
var n = value.toString().replace('px','').replace('%','');
const n = value.toString().replace('px', '').replace('%', '');
return n + (Number(n) == n && n % 1 !== 0 ? '' : '');
}
function toMethodName(value) {
if (value.indexOf('%') >= 0){
if (value.indexOf('%') >= 0) {
return 'Percent';
} else if(value.indexOf('AUTO') >= 0) {
} else if (value.indexOf('AUTO') >= 0) {
return 'Auto';
}
return '';
}
var JavaEmitter = function() {
const JavaEmitter = function () {
Emitter.call(this, 'java', ' ');
};
function toJavaUpper(symbol) {
var out = '';
for (var i = 0; i < symbol.length; i++) {
var c = symbol[i];
if (c == c.toUpperCase() && i != 0 && symbol[i - 1] != symbol[i - 1].toUpperCase()) {
let out = '';
for (let i = 0; i < symbol.length; i++) {
const c = symbol[i];
if (
c == c.toUpperCase() &&
i != 0 &&
symbol[i - 1] != symbol[i - 1].toUpperCase()
) {
out += '_';
}
out += c.toUpperCase();
@@ -36,260 +42,418 @@ function toJavaUpper(symbol) {
}
JavaEmitter.prototype = Object.create(Emitter.prototype, {
constructor:{value:JavaEmitter},
constructor: {value: JavaEmitter},
emitPrologue:{value:function() {
this.push([
'package com.facebook.yoga;',
'',
'import static org.junit.Assert.assertEquals;',
'',
'import org.junit.Ignore;',
'import org.junit.Test;',
'import org.junit.runner.RunWith;',
'import org.junit.runners.Parameterized;',
'',
'@RunWith(Parameterized.class)',
'public class YogaTest {',
]);
this.pushIndent();
this.push([
'@Parameterized.Parameters(name = "{0}")',
'public static Iterable<TestParametrization.NodeFactory> nodeFactories() {',
]);
this.pushIndent();
this.push('return TestParametrization.nodeFactories();');
this.popIndent();
this.push('}');
this.push([
'',
'@Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;',
'',
]);
}},
emitPrologue: {
value: function () {
this.push([
'package com.facebook.yoga;',
'',
'import static org.junit.Assert.assertEquals;',
'',
'import org.junit.Ignore;',
'import org.junit.Test;',
'import org.junit.runner.RunWith;',
'import org.junit.runners.Parameterized;',
'',
'@RunWith(Parameterized.class)',
'public class YogaTest {',
]);
this.pushIndent();
this.push([
'@Parameterized.Parameters(name = "{0}")',
'public static Iterable<TestParametrization.NodeFactory> nodeFactories() {',
]);
this.pushIndent();
this.push('return TestParametrization.nodeFactories();');
this.popIndent();
this.push('}');
this.push([
'',
'@Parameterized.Parameter public TestParametrization.NodeFactory mNodeFactory;',
'',
]);
},
},
emitTestPrologue:{value:function(name, experiments, disabled) {
this.push('@Test');
if (disabled) {
this.push('@Ignore');
}
this.push('public void test_' + name + '() {');
this.pushIndent();
emitTestPrologue: {
value: function (name, experiments, disabled) {
this.push('@Test');
if (disabled) {
this.push('@Ignore');
}
this.push('public void test_' + name + '() {');
this.pushIndent();
this.push("YogaConfig config = YogaConfigFactory.create();")
for (var i in experiments) {
this.push('config.setExperimentalFeatureEnabled(YogaExperimentalFeature.' + toJavaUpper(experiments[i]) +', true);');
}
this.push('');
}},
this.push('YogaConfig config = YogaConfigFactory.create();');
for (const i in experiments) {
this.push(
'config.setExperimentalFeatureEnabled(YogaExperimentalFeature.' +
toJavaUpper(experiments[i]) +
', true);',
);
}
this.push('');
},
},
emitTestTreePrologue:{value:function(nodeName) {
this.push('final YogaNode ' + nodeName + ' = createNode(config);');
}},
emitTestTreePrologue: {
value: function (nodeName) {
this.push('final YogaNode ' + nodeName + ' = createNode(config);');
},
},
emitTestEpilogue:{value:function(experiments) {
this.popIndent();
this.push([
'}',
'',
]);
}},
emitTestEpilogue: {
value: function (_experiments) {
this.popIndent();
this.push(['}', '']);
},
},
emitEpilogue:{value:function(lines) {
this.push('private YogaNode createNode(YogaConfig config) {');
this.pushIndent();
this.push('return mNodeFactory.create(config);');
this.popIndent();
this.push('}');
this.popIndent();
this.push([
'}',
'',
]);
}},
emitEpilogue: {
value: function (_lines) {
this.push('private YogaNode createNode(YogaConfig config) {');
this.pushIndent();
this.push('return mNodeFactory.create(config);');
this.popIndent();
this.push('}');
this.popIndent();
this.push(['}', '']);
},
},
AssertEQ:{value:function(v0, v1) {
this.push('assertEquals(' + v0 + 'f, ' + v1 + ', 0.0f);');
}},
AssertEQ: {
value: function (v0, v1) {
this.push('assertEquals(' + v0 + 'f, ' + v1 + ', 0.0f);');
},
},
YGAlignAuto:{value:'YogaAlign.AUTO'},
YGAlignCenter:{value:'YogaAlign.CENTER'},
YGAlignFlexEnd:{value:'YogaAlign.FLEX_END'},
YGAlignFlexStart:{value:'YogaAlign.FLEX_START'},
YGAlignStretch:{value:'YogaAlign.STRETCH'},
YGAlignSpaceBetween:{value:'YogaAlign.SPACE_BETWEEN'},
YGAlignSpaceAround:{value:'YogaAlign.SPACE_AROUND'},
YGAlignBaseline:{value:'YogaAlign.BASELINE'},
YGAlignAuto: {value: 'YogaAlign.AUTO'},
YGAlignCenter: {value: 'YogaAlign.CENTER'},
YGAlignFlexEnd: {value: 'YogaAlign.FLEX_END'},
YGAlignFlexStart: {value: 'YogaAlign.FLEX_START'},
YGAlignStretch: {value: 'YogaAlign.STRETCH'},
YGAlignSpaceBetween: {value: 'YogaAlign.SPACE_BETWEEN'},
YGAlignSpaceAround: {value: 'YogaAlign.SPACE_AROUND'},
YGAlignBaseline: {value: 'YogaAlign.BASELINE'},
YGDirectionInherit:{value:'YogaDirection.INHERIT'},
YGDirectionLTR:{value:'YogaDirection.LTR'},
YGDirectionRTL:{value:'YogaDirection.RTL'},
YGDirectionInherit: {value: 'YogaDirection.INHERIT'},
YGDirectionLTR: {value: 'YogaDirection.LTR'},
YGDirectionRTL: {value: 'YogaDirection.RTL'},
YGEdgeBottom:{value:'YogaEdge.BOTTOM'},
YGEdgeEnd:{value:'YogaEdge.END'},
YGEdgeLeft:{value:'YogaEdge.LEFT'},
YGEdgeRight:{value:'YogaEdge.RIGHT'},
YGEdgeStart:{value:'YogaEdge.START'},
YGEdgeTop:{value:'YogaEdge.TOP'},
YGEdgeBottom: {value: 'YogaEdge.BOTTOM'},
YGEdgeEnd: {value: 'YogaEdge.END'},
YGEdgeLeft: {value: 'YogaEdge.LEFT'},
YGEdgeRight: {value: 'YogaEdge.RIGHT'},
YGEdgeStart: {value: 'YogaEdge.START'},
YGEdgeTop: {value: 'YogaEdge.TOP'},
YGGutterAll:{value:'YogaGutter.ALL'},
YGGutterColumn:{value:'YogaGutter.COLUMN'},
YGGutterRow:{value:'YogaGutter.ROW'},
YGGutterAll: {value: 'YogaGutter.ALL'},
YGGutterColumn: {value: 'YogaGutter.COLUMN'},
YGGutterRow: {value: 'YogaGutter.ROW'},
YGFlexDirectionColumn:{value:'YogaFlexDirection.COLUMN'},
YGFlexDirectionColumnReverse:{value:'YogaFlexDirection.COLUMN_REVERSE'},
YGFlexDirectionRow:{value:'YogaFlexDirection.ROW'},
YGFlexDirectionRowReverse:{value:'YogaFlexDirection.ROW_REVERSE'},
YGFlexDirectionColumn: {value: 'YogaFlexDirection.COLUMN'},
YGFlexDirectionColumnReverse: {value: 'YogaFlexDirection.COLUMN_REVERSE'},
YGFlexDirectionRow: {value: 'YogaFlexDirection.ROW'},
YGFlexDirectionRowReverse: {value: 'YogaFlexDirection.ROW_REVERSE'},
YGJustifyCenter:{value:'YogaJustify.CENTER'},
YGJustifyFlexEnd:{value:'YogaJustify.FLEX_END'},
YGJustifyFlexStart:{value:'YogaJustify.FLEX_START'},
YGJustifySpaceAround:{value:'YogaJustify.SPACE_AROUND'},
YGJustifySpaceBetween:{value:'YogaJustify.SPACE_BETWEEN'},
YGJustifySpaceEvenly:{value:'YogaJustify.SPACE_EVENLY'},
YGJustifyCenter: {value: 'YogaJustify.CENTER'},
YGJustifyFlexEnd: {value: 'YogaJustify.FLEX_END'},
YGJustifyFlexStart: {value: 'YogaJustify.FLEX_START'},
YGJustifySpaceAround: {value: 'YogaJustify.SPACE_AROUND'},
YGJustifySpaceBetween: {value: 'YogaJustify.SPACE_BETWEEN'},
YGJustifySpaceEvenly: {value: 'YogaJustify.SPACE_EVENLY'},
YGOverflowHidden:{value:'YogaOverflow.HIDDEN'},
YGOverflowVisible:{value:'YogaOverflow.VISIBLE'},
YGOverflowHidden: {value: 'YogaOverflow.HIDDEN'},
YGOverflowVisible: {value: 'YogaOverflow.VISIBLE'},
YGPositionTypeAbsolute:{value:'YogaPositionType.ABSOLUTE'},
YGPositionTypeRelative:{value:'YogaPositionType.RELATIVE'},
YGPositionTypeAbsolute: {value: 'YogaPositionType.ABSOLUTE'},
YGPositionTypeRelative: {value: 'YogaPositionType.RELATIVE'},
YGUndefined:{value:'YogaConstants.UNDEFINED'},
YGUndefined: {value: 'YogaConstants.UNDEFINED'},
YGDisplayFlex:{value:'YogaDisplay.FLEX'},
YGDisplayNone:{value:'YogaDisplay.NONE'},
YGAuto:{value:'YogaConstants.AUTO'},
YGDisplayFlex: {value: 'YogaDisplay.FLEX'},
YGDisplayNone: {value: 'YogaDisplay.NONE'},
YGAuto: {value: 'YogaConstants.AUTO'},
YGWrapNoWrap: {value: 'YogaWrap.NO_WRAP'},
YGWrapWrap: {value: 'YogaWrap.WRAP'},
YGWrapWrapReverse: {value: 'YogaWrap.WRAP_REVERSE'},
YGWrapNoWrap:{value:'YogaWrap.NO_WRAP'},
YGWrapWrap:{value:'YogaWrap.WRAP'},
YGWrapWrapReverse:{value: 'YogaWrap.WRAP_REVERSE'},
YGNodeCalculateLayout: {
value: function (node, dir, _experiments) {
this.push(node + '.setDirection(' + dir + ');');
this.push(
node +
'.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);',
);
},
},
YGNodeCalculateLayout:{value:function(node, dir, experiments) {
this.push(node + '.setDirection(' + dir + ');');
this.push(node + '.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);');
}},
YGNodeInsertChild: {
value: function (parentName, nodeName, index) {
this.push(parentName + '.addChildAt(' + nodeName + ', ' + index + ');');
},
},
YGNodeInsertChild:{value:function(parentName, nodeName, index) {
this.push(parentName + '.addChildAt(' + nodeName + ', ' + index + ');');
}},
YGNodeLayoutGetLeft: {
value: function (nodeName) {
return nodeName + '.getLayoutX()';
},
},
YGNodeLayoutGetLeft:{value:function(nodeName) {
return nodeName + '.getLayoutX()';
}},
YGNodeLayoutGetTop: {
value: function (nodeName) {
return nodeName + '.getLayoutY()';
},
},
YGNodeLayoutGetTop:{value:function(nodeName) {
return nodeName + '.getLayoutY()';
}},
YGNodeLayoutGetWidth: {
value: function (nodeName) {
return nodeName + '.getLayoutWidth()';
},
},
YGNodeLayoutGetWidth:{value:function(nodeName) {
return nodeName + '.getLayoutWidth()';
}},
YGNodeLayoutGetHeight: {
value: function (nodeName) {
return nodeName + '.getLayoutHeight()';
},
},
YGNodeLayoutGetHeight:{value:function(nodeName) {
return nodeName + '.getLayoutHeight()';
}},
YGNodeStyleSetAlignContent: {
value: function (nodeName, value) {
this.push(nodeName + '.setAlignContent(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignContent(' + toValueJava(value) + ');');
}},
YGNodeStyleSetAlignItems: {
value: function (nodeName, value) {
this.push(nodeName + '.setAlignItems(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignItems(' + toValueJava(value) + ');');
}},
YGNodeStyleSetAlignSelf: {
value: function (nodeName, value) {
this.push(nodeName + '.setAlignSelf(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignSelf(' + toValueJava(value) + ');');
}},
YGNodeStyleSetBorder: {
value: function (nodeName, edge, value) {
this.push(
nodeName + '.setBorder(' + edge + ', ' + toValueJava(value) + 'f);',
);
},
},
YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setBorder(' + edge + ', ' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetDirection: {
value: function (nodeName, value) {
this.push(nodeName + '.setDirection(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetDirection:{value:function(nodeName, value) {
this.push(nodeName + '.setDirection(' + toValueJava(value) + ');');
}},
YGNodeStyleSetDisplay: {
value: function (nodeName, value) {
this.push(nodeName + '.setDisplay(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetDisplay:{value:function(nodeName, value) {
this.push(nodeName + '.setDisplay(' + toValueJava(value) + ');');
}},
YGNodeStyleSetFlexBasis: {
value: function (nodeName, value) {
this.push(
nodeName +
'.setFlexBasis' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexBasis' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetFlexDirection: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexDirection(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexDirection(' + toValueJava(value) + ');');
}},
YGNodeStyleSetFlexGrow: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexGrow(' + toValueJava(value) + 'f);');
},
},
YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexGrow(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetFlexShrink: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexShrink(' + toValueJava(value) + 'f);');
},
},
YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexShrink(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetFlexWrap: {
value: function (nodeName, value) {
this.push(nodeName + '.setWrap(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
this.push(nodeName + '.setWrap(' + toValueJava(value) + ');');
}},
YGNodeStyleSetHeight: {
value: function (nodeName, value) {
this.push(
nodeName +
'.setHeight' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetJustifyContent: {
value: function (nodeName, value) {
this.push(nodeName + '.setJustifyContent(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
this.push(nodeName + '.setJustifyContent(' + toValueJava(value) + ');');
}},
YGNodeStyleSetMargin: {
value: function (nodeName, edge, value) {
let valueStr = toValueJava(value);
if (valueStr != 'YogaConstants.AUTO') {
valueStr = ', ' + valueStr + 'f';
} else {
valueStr = '';
}
YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
var valueStr = toValueJava(value);
if (valueStr != 'YogaConstants.AUTO') {
valueStr = ', ' + valueStr + 'f';
} else {
valueStr = '';
}
this.push(
nodeName +
'.setMargin' +
toMethodName(value) +
'(' +
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) {
this.push(nodeName + '.setMaxHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMaxWidth: {
value: function (nodeName, value) {
this.push(
nodeName +
'.setMaxWidth' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setMaxWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMinHeight: {
value: function (nodeName, value) {
this.push(
nodeName +
'.setMinHeight' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setMinHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMinWidth: {
value: function (nodeName, value) {
this.push(
nodeName +
'.setMinWidth' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setMinWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetOverflow: {
value: function (nodeName, value) {
this.push(nodeName + '.setOverflow(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetOverflow:{value:function(nodeName, value) {
this.push(nodeName + '.setOverflow(' + toValueJava(value) + ');');
}},
YGNodeStyleSetPadding: {
value: function (nodeName, edge, value) {
this.push(
nodeName +
'.setPadding' +
toMethodName(value) +
'(' +
edge +
', ' +
toValueJava(value) +
');',
);
},
},
YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setPadding' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + ');');
}},
YGNodeStyleSetPosition: {
value: function (nodeName, edge, value) {
this.push(
nodeName +
'.setPosition' +
toMethodName(value) +
'(' +
edge +
', ' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setPosition' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetPositionType: {
value: function (nodeName, value) {
this.push(nodeName + '.setPositionType(' + toValueJava(value) + ');');
},
},
YGNodeStyleSetPositionType:{value:function(nodeName, value) {
this.push(nodeName + '.setPositionType(' + toValueJava(value) + ');');
}},
YGNodeStyleSetWidth: {
value: function (nodeName, value) {
this.push(
nodeName +
'.setWidth' +
toMethodName(value) +
'(' +
toValueJava(value) +
'f);',
);
},
},
YGNodeStyleSetWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
this.push(nodeName + '.setGap' + toMethodName(value) + '(' + gap + ', ' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetGap: {
value: function (nodeName, gap, value) {
this.push(
nodeName +
'.setGap' +
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.
*/
const JavascriptEmitter = function() {
/* global Emitter:readable */
const JavascriptEmitter = function () {
Emitter.call(this, 'js', ' ');
};
@@ -17,255 +19,372 @@ function toValueJavascript(value) {
}
JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
constructor:{value:JavascriptEmitter},
constructor: {value: JavascriptEmitter},
emitPrologue:{value:function() {
this.push('import {Yoga} from "../tools/globals";')
this.push('import {')
this.pushIndent();
this.push('Align,');
this.push('Direction,');
this.push('Display,');
this.push('Edge,');
this.push('Errata,');
this.push('ExperimentalFeature,');
this.push('FlexDirection,');
this.push('Gutter,');
this.push('Justify,');
this.push('MeasureMode,');
this.push('Overflow,');
this.push('PositionType,');
this.push('Unit,');
this.push('Wrap,');
this.popIndent();
this.push('} from \'yoga-layout\';');
this.push('');
}},
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);`);
}
emitPrologue: {
value: function () {
this.push('import {Yoga} from "../tools/globals";');
this.push('import {');
this.pushIndent();
this.push('Align,');
this.push('Direction,');
this.push('Display,');
this.push('Edge,');
this.push('Errata,');
this.push('ExperimentalFeature,');
this.push('FlexDirection,');
this.push('Gutter,');
this.push('Justify,');
this.push('MeasureMode,');
this.push('Overflow,');
this.push('PositionType,');
this.push('Unit,');
this.push('Wrap,');
this.popIndent();
this.push("} from 'yoga-layout';");
this.push('');
}
},
},
this.push('try {');
this.pushIndent();
}},
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('');
emitTestTreePrologue:{value:function(nodeName) {
if (nodeName === 'root') {
this.push(`root = Yoga.Node.create(config);`);
} else {
this.push(`const ${nodeName} = Yoga.Node.create(config);`);
}
}},
if (experiments.length > 0) {
for (const experiment of experiments) {
this.push(
`config.setExperimentalFeatureEnabled(ExperimentalFeature.${experiment}, true);`,
);
}
this.push('');
}
emitTestEpilogue:{value:function(experiments) {
this.popIndent();
this.push('} finally {');
this.pushIndent();
this.push('try {');
this.pushIndent();
},
},
this.push('if (typeof root !== \'undefined\') {');
this.pushIndent();
this.push('root.freeRecursive();');
this.popIndent();
this.push('}');
this.push('');
this.push('config.free();');
emitTestTreePrologue: {
value: function (nodeName) {
if (nodeName === 'root') {
this.push(`root = Yoga.Node.create(config);`);
} else {
this.push(`const ${nodeName} = Yoga.Node.create(config);`);
}
},
},
this.popIndent();
this.push('}');
emitTestEpilogue: {
value: function (_experiments) {
this.popIndent();
this.push('} finally {');
this.pushIndent();
this.popIndent();
this.push('});');
}},
this.push("if (typeof root !== 'undefined') {");
this.pushIndent();
this.push('root.freeRecursive();');
this.popIndent();
this.push('}');
this.push('');
this.push('config.free();');
emitEpilogue:{value:function () {
this.push('');
}},
this.popIndent();
this.push('}');
AssertEQ:{value:function(v0, v1) {
this.push(`expect(${v1}).toBe(${v0});`);
}},
this.popIndent();
this.push('});');
},
},
YGAlignAuto:{value: 'Align.Auto'},
YGAlignCenter:{value: 'Align.Center'},
YGAlignFlexEnd:{value: 'Align.FlexEnd'},
YGAlignFlexStart:{value: 'Align.FlexStart'},
YGAlignStretch:{value: 'Align.Stretch'},
YGAlignSpaceBetween:{value: 'Align.SpaceBetween'},
YGAlignSpaceAround:{value: 'Align.SpaceAround'},
YGAlignBaseline:{value: 'Align.Baseline'},
emitEpilogue: {
value: function () {
this.push('');
},
},
YGDirectionInherit:{value: 'Direction.Inherit'},
YGDirectionLTR:{value: 'Direction.LTR'},
YGDirectionRTL:{value: 'Direction.RTL'},
AssertEQ: {
value: function (v0, v1) {
this.push(`expect(${v1}).toBe(${v0});`);
},
},
YGEdgeBottom:{value: 'Edge.Bottom'},
YGEdgeEnd:{value: 'Edge.End'},
YGEdgeLeft:{value: 'Edge.Left'},
YGEdgeRight:{value: 'Edge.Right'},
YGEdgeStart:{value: 'Edge.Start'},
YGEdgeTop:{value: 'Edge.Top'},
YGAlignAuto: {value: 'Align.Auto'},
YGAlignCenter: {value: 'Align.Center'},
YGAlignFlexEnd: {value: 'Align.FlexEnd'},
YGAlignFlexStart: {value: 'Align.FlexStart'},
YGAlignStretch: {value: 'Align.Stretch'},
YGAlignSpaceBetween: {value: 'Align.SpaceBetween'},
YGAlignSpaceAround: {value: 'Align.SpaceAround'},
YGAlignBaseline: {value: 'Align.Baseline'},
YGGutterAll:{value: 'Gutter.All'},
YGGutterColumn:{value: 'Gutter.Column'},
YGGutterRow:{value: 'Gutter.Row'},
YGDirectionInherit: {value: 'Direction.Inherit'},
YGDirectionLTR: {value: 'Direction.LTR'},
YGDirectionRTL: {value: 'Direction.RTL'},
YGFlexDirectionColumn:{value: 'FlexDirection.Column'},
YGFlexDirectionColumnReverse:{value: 'FlexDirection.ColumnReverse'},
YGFlexDirectionRow:{value: 'FlexDirection.Row'},
YGFlexDirectionRowReverse:{value: 'FlexDirection.RowReverse'},
YGEdgeBottom: {value: 'Edge.Bottom'},
YGEdgeEnd: {value: 'Edge.End'},
YGEdgeLeft: {value: 'Edge.Left'},
YGEdgeRight: {value: 'Edge.Right'},
YGEdgeStart: {value: 'Edge.Start'},
YGEdgeTop: {value: 'Edge.Top'},
YGJustifyCenter:{value: 'Justify.Center'},
YGJustifyFlexEnd:{value: 'Justify.FlexEnd'},
YGJustifyFlexStart:{value: 'Justify.FlexStart'},
YGJustifySpaceAround:{value: 'Justify.SpaceAround'},
YGJustifySpaceBetween:{value: 'Justify.SpaceBetween'},
YGJustifySpaceEvenly:{value: 'Justify.SpaceEvenly'},
YGGutterAll: {value: 'Gutter.All'},
YGGutterColumn: {value: 'Gutter.Column'},
YGGutterRow: {value: 'Gutter.Row'},
YGOverflowHidden:{value: 'Overflow.Hidden'},
YGOverflowVisible:{value: 'Overflow.Visible'},
YGFlexDirectionColumn: {value: 'FlexDirection.Column'},
YGFlexDirectionColumnReverse: {value: 'FlexDirection.ColumnReverse'},
YGFlexDirectionRow: {value: 'FlexDirection.Row'},
YGFlexDirectionRowReverse: {value: 'FlexDirection.RowReverse'},
YGPositionTypeAbsolute:{value: 'PositionType.Absolute'},
YGPositionTypeRelative:{value: 'PositionType.Relative'},
YGJustifyCenter: {value: 'Justify.Center'},
YGJustifyFlexEnd: {value: 'Justify.FlexEnd'},
YGJustifyFlexStart: {value: 'Justify.FlexStart'},
YGJustifySpaceAround: {value: 'Justify.SpaceAround'},
YGJustifySpaceBetween: {value: 'Justify.SpaceBetween'},
YGJustifySpaceEvenly: {value: 'Justify.SpaceEvenly'},
YGAuto:{value:'\'auto\''},
YGUndefined:{value:'undefined'},
YGOverflowHidden: {value: 'Overflow.Hidden'},
YGOverflowVisible: {value: 'Overflow.Visible'},
YGWrapNoWrap:{value: 'Wrap.NoWrap'},
YGWrapWrap:{value: 'Wrap.Wrap'},
YGWrapWrapReverse:{value: 'Wrap.WrapReverse'},
YGPositionTypeAbsolute: {value: 'PositionType.Absolute'},
YGPositionTypeRelative: {value: 'PositionType.Relative'},
YGDisplayFlex:{value: 'Display.Flex'},
YGDisplayNone:{value: 'Display.None'},
YGAuto: {value: "'auto'"},
YGUndefined: {value: 'undefined'},
YGNodeCalculateLayout:{value:function(node, dir, experiments) {
this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');
}},
YGWrapNoWrap: {value: 'Wrap.NoWrap'},
YGWrapWrap: {value: 'Wrap.Wrap'},
YGWrapWrapReverse: {value: 'Wrap.WrapReverse'},
YGNodeInsertChild:{value:function(parentName, nodeName, index) {
this.push(parentName + '.insertChild(' + nodeName + ', ' + index + ');');
}},
YGDisplayFlex: {value: 'Display.Flex'},
YGDisplayNone: {value: 'Display.None'},
YGNodeLayoutGetLeft:{value:function(nodeName) {
return nodeName + '.getComputedLeft()';
}},
YGNodeCalculateLayout: {
value: function (node, dir, _experiments) {
this.push(node + '.calculateLayout(undefined, undefined, ' + dir + ');');
},
},
YGNodeLayoutGetTop:{value:function(nodeName) {
return nodeName + '.getComputedTop()';
}},
YGNodeInsertChild: {
value: function (parentName, nodeName, index) {
this.push(parentName + '.insertChild(' + nodeName + ', ' + index + ');');
},
},
YGNodeLayoutGetWidth:{value:function(nodeName) {
return nodeName + '.getComputedWidth()';
}},
YGNodeLayoutGetLeft: {
value: function (nodeName) {
return nodeName + '.getComputedLeft()';
},
},
YGNodeLayoutGetHeight:{value:function(nodeName) {
return nodeName + '.getComputedHeight()';
}},
YGNodeLayoutGetTop: {
value: function (nodeName) {
return nodeName + '.getComputedTop()';
},
},
YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignContent(' + toValueJavascript(value) + ');');
}},
YGNodeLayoutGetWidth: {
value: function (nodeName) {
return nodeName + '.getComputedWidth()';
},
},
YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignItems(' + toValueJavascript(value) + ');');
}},
YGNodeLayoutGetHeight: {
value: function (nodeName) {
return nodeName + '.getComputedHeight()';
},
},
YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignSelf(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetAlignContent: {
value: function (nodeName, value) {
this.push(
nodeName + '.setAlignContent(' + toValueJavascript(value) + ');',
);
},
},
YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setBorder(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetAlignItems: {
value: function (nodeName, value) {
this.push(nodeName + '.setAlignItems(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetDirection:{value:function(nodeName, value) {
this.push(nodeName + '.setDirection(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetAlignSelf: {
value: function (nodeName, value) {
this.push(nodeName + '.setAlignSelf(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetDisplay:{value:function(nodeName, value) {
this.push(nodeName + '.setDisplay(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetBorder: {
value: function (nodeName, edge, value) {
this.push(
nodeName +
'.setBorder(' +
toValueJavascript(edge) +
', ' +
toValueJavascript(value) +
');',
);
},
},
YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexBasis(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetDirection: {
value: function (nodeName, value) {
this.push(nodeName + '.setDirection(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexDirection(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetDisplay: {
value: function (nodeName, value) {
this.push(nodeName + '.setDisplay(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexGrow(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetFlexBasis: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexBasis(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexShrink(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetFlexDirection: {
value: function (nodeName, value) {
this.push(
nodeName + '.setFlexDirection(' + toValueJavascript(value) + ');',
);
},
},
YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexWrap(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetFlexGrow: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexGrow(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setHeight(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetFlexShrink: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexShrink(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
this.push(nodeName + '.setJustifyContent(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetFlexWrap: {
value: function (nodeName, value) {
this.push(nodeName + '.setFlexWrap(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setMargin(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetHeight: {
value: function (nodeName, value) {
this.push(nodeName + '.setHeight(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setMaxHeight(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetJustifyContent: {
value: function (nodeName, value) {
this.push(
nodeName + '.setJustifyContent(' + toValueJavascript(value) + ');',
);
},
},
YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setMaxWidth(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetMargin: {
value: function (nodeName, edge, value) {
this.push(
nodeName +
'.setMargin(' +
toValueJavascript(edge) +
', ' +
toValueJavascript(value) +
');',
);
},
},
YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setMinHeight(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetMaxHeight: {
value: function (nodeName, value) {
this.push(nodeName + '.setMaxHeight(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setMinWidth(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetMaxWidth: {
value: function (nodeName, value) {
this.push(nodeName + '.setMaxWidth(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetOverflow:{value:function(nodeName, value) {
this.push(nodeName + '.setOverflow(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetMinHeight: {
value: function (nodeName, value) {
this.push(nodeName + '.setMinHeight(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setPadding(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetMinWidth: {
value: function (nodeName, value) {
this.push(nodeName + '.setMinWidth(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setPosition(' + toValueJavascript(edge) + ', ' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetOverflow: {
value: function (nodeName, value) {
this.push(nodeName + '.setOverflow(' + toValueJavascript(value) + ');');
},
},
YGNodeStyleSetPositionType:{value:function(nodeName, value) {
this.push(nodeName + '.setPositionType(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetPadding: {
value: function (nodeName, edge, value) {
this.push(
nodeName +
'.setPadding(' +
toValueJavascript(edge) +
', ' +
toValueJavascript(value) +
');',
);
},
},
YGNodeStyleSetWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setWidth(' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetPosition: {
value: function (nodeName, edge, value) {
this.push(
nodeName +
'.setPosition(' +
toValueJavascript(edge) +
', ' +
toValueJavascript(value) +
');',
);
},
},
YGNodeStyleSetGap:{value:function(nodeName, gap, value) {
this.push(nodeName + '.setGap('+ toValueJavascript(gap) + ', ' + toValueJavascript(value) + ');');
}},
YGNodeStyleSetPositionType: {
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.
*/
const DEFAULT_EXPERIMENTS = [
'AbsolutePercentageAgainstPaddingEdge',
];
/* eslint-env browser */
/* global CPPEmitter:readable, JavaEmitter:readable, JavascriptEmitter:readable */
window.onload = function() {
const DEFAULT_EXPERIMENTS = ['AbsolutePercentageAgainstPaddingEdge'];
window.onload = function () {
checkDefaultValues();
printTest(
new CPPEmitter(),
'cpp',
document.body.children[0],
document.body.children[1],
document.body.children[2]);
new CPPEmitter(),
'cpp',
document.body.children[0],
document.body.children[1],
document.body.children[2],
);
printTest(
new JavaEmitter(),
'java',
document.body.children[0],
document.body.children[1],
document.body.children[2]);
new JavaEmitter(),
'java',
document.body.children[0],
document.body.children[1],
document.body.children[2],
);
printTest(
new JavascriptEmitter(),
'js',
document.body.children[0],
document.body.children[1],
document.body.children[2]);
}
new JavascriptEmitter(),
'js',
document.body.children[0],
document.body.children[1],
document.body.children[2],
);
};
function assert(condition, message) {
if (!condition) {
@@ -49,21 +53,23 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
' * LICENSE file in the root directory of this source tree.',
' */',
ext === 'cpp' ? '\n// clang-format off' : '',
'// @' + 'generated by gentest/gentest.rb from gentest/fixtures/' + document.title + '.html',
'// @' +
'generated by gentest/gentest.rb from gentest/fixtures/' +
document.title +
'.html',
'',
]);
e.emitPrologue();
var LTRLayoutTree = calculateTree(LTRContainer);
var RTLLayoutTree = calculateTree(RTLContainer);
var genericLayoutTree = calculateTree(genericContainer);
const LTRLayoutTree = calculateTree(LTRContainer);
const RTLLayoutTree = calculateTree(RTLContainer);
const genericLayoutTree = calculateTree(genericContainer);
for (var i = 0; i < genericLayoutTree.length; i++) {
for (let i = 0; i < genericLayoutTree.length; i++) {
e.emitTestPrologue(
genericLayoutTree[i].name,
genericLayoutTree[i].experiments,
genericLayoutTree[i].disabled
genericLayoutTree[i].disabled,
);
if (genericLayoutTree[i].name == 'wrap_column') {
@@ -71,36 +77,63 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
// specification. The undefined dimension of a parent should be defined by the total size
// of their children in that dimension.
// See diagram under flex-wrap header https://www.w3.org/TR/css-flexbox-1/
assert(LTRLayoutTree[0].width == 30, 'wrap_column LTR root.width should be 30');
assert(
LTRLayoutTree[0].width == 30,
'wrap_column LTR root.width should be 30',
);
LTRLayoutTree[0].width = 60;
assert(RTLLayoutTree[0].width == 30, 'wrap_column RTL root.width should be 30');
assert(
RTLLayoutTree[0].width == 30,
'wrap_column RTL root.width should be 30',
);
RTLLayoutTree[0].width = 60;
var children = RTLLayoutTree[0].children;
assert(children[0].left == 0, 'wrap_column RTL root_child0.left should be 0');
const children = RTLLayoutTree[0].children;
assert(
children[0].left == 0,
'wrap_column RTL root_child0.left should be 0',
);
children[0].left = 30;
assert(children[1].left == 0, 'wrap_column RTL root_child0.left should be 0');
assert(
children[1].left == 0,
'wrap_column RTL root_child0.left should be 0',
);
children[1].left = 30;
assert(children[2].left == 0, 'wrap_column RTL root_child2.left should be 0');
assert(
children[2].left == 0,
'wrap_column RTL root_child2.left should be 0',
);
children[2].left = 30;
assert(children[3].left == -30, 'wrap_column RTL root_child3.left should be -30');
assert(
children[3].left == -30,
'wrap_column RTL root_child3.left should be -30',
);
children[3].left = 0;
}
setupTestTree(
e,
undefined,
LTRLayoutTree[i],
genericLayoutTree[i],
'root',
null);
e,
undefined,
LTRLayoutTree[i],
genericLayoutTree[i],
'root',
null,
);
e.YGNodeCalculateLayout('root', e.YGDirectionLTR, genericLayoutTree[i].experiments);
e.YGNodeCalculateLayout(
'root',
e.YGDirectionLTR,
genericLayoutTree[i].experiments,
);
e.push('');
assertTestTree(e, LTRLayoutTree[i], 'root', null);
e.push('');
e.YGNodeCalculateLayout('root', e.YGDirectionRTL, genericLayoutTree[i].experiments);
e.YGNodeCalculateLayout(
'root',
e.YGDirectionRTL,
genericLayoutTree[i].experiments,
);
e.push('');
assertTestTree(e, RTLLayoutTree[i], 'root', null);
@@ -112,15 +145,15 @@ function printTest(e, ext, LTRContainer, RTLContainer, genericContainer) {
e.print();
}
function assertTestTree(e, node, nodeName, parentName) {
function assertTestTree(e, node, nodeName, _parentName) {
e.AssertEQ(node.left, e.YGNodeLayoutGetLeft(nodeName));
e.AssertEQ(node.top, e.YGNodeLayoutGetTop(nodeName));
e.AssertEQ(node.width, e.YGNodeLayoutGetWidth(nodeName));
e.AssertEQ(node.height, e.YGNodeLayoutGetHeight(nodeName));
for (var i = 0; i < node.children.length; i++) {
for (let i = 0; i < node.children.length; i++) {
e.push('');
var childName = nodeName + '_child' + i;
const childName = nodeName + '_child' + i;
assertTestTree(e, node.children[i], childName, nodeName);
}
}
@@ -128,81 +161,129 @@ function assertTestTree(e, node, nodeName, parentName) {
function checkDefaultValues() {
// Sanity check of the Yoga default values by test-template.html
[
{style:'flex-direction', value:'column'},
{style:'justify-content', value:'flex-start'},
{style:'align-content', value:'flex-start'},
{style:'align-items', value:'stretch'},
{style:'position', value:'relative'},
{style:'flex-wrap', value:'nowrap'},
{style:'overflow', value:'visible'},
{style:'flex-grow', value:'0'},
{style:'flex-shrink', value:'0'},
{style:'left', value:'undefined'},
{style:'top', value:'undefined'},
{style:'right', value:'undefined'},
{style:'bottom', value:'undefined'},
{style:'display', value:'flex'},
].forEach(function(item) {
assert(isDefaultStyleValue(item.style, item.value),
item.style + ' should be ' + item.value);
{style: 'flex-direction', value: 'column'},
{style: 'justify-content', value: 'flex-start'},
{style: 'align-content', value: 'flex-start'},
{style: 'align-items', value: 'stretch'},
{style: 'position', value: 'relative'},
{style: 'flex-wrap', value: 'nowrap'},
{style: 'overflow', value: 'visible'},
{style: 'flex-grow', value: '0'},
{style: 'flex-shrink', value: '0'},
{style: 'left', value: 'undefined'},
{style: 'top', value: 'undefined'},
{style: 'right', value: 'undefined'},
{style: 'bottom', value: 'undefined'},
{style: 'display', value: 'flex'},
].forEach(item => {
assert(
isDefaultStyleValue(item.style, item.value),
item.style + ' should be ' + item.value,
);
});
}
function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index) {
function setupTestTree(
e,
parent,
node,
genericNode,
nodeName,
parentName,
index,
) {
e.emitTestTreePrologue(nodeName);
for (var style in node.style) {
for (const style in node.style) {
// Skip position info for root as it messes up tests
if (node.declaredStyle[style] === "" &&
(style == 'position' ||
style == 'left' ||
style == 'top' ||
style == 'right' ||
style == 'bottom' ||
style == 'width' ||
style == 'height')) {
if (
node.declaredStyle[style] === '' &&
(style == 'position' ||
style == 'left' ||
style == 'top' ||
style == 'right' ||
style == 'bottom' ||
style == 'width' ||
style == 'height')
) {
continue;
}
}
if (!isDefaultStyleValue(style, node.style[style])) {
switch (style) {
case 'gap':
e.YGNodeStyleSetGap(nodeName, e.YGGutterAll, pointValue(e, node.style[style]));
e.YGNodeStyleSetGap(
nodeName,
e.YGGutterAll,
pointValue(e, node.style[style]),
);
break;
case 'column-gap':
e.YGNodeStyleSetGap(nodeName, e.YGGutterColumn, pointValue(e, node.style[style]));
e.YGNodeStyleSetGap(
nodeName,
e.YGGutterColumn,
pointValue(e, node.style[style]),
);
break;
case 'row-gap':
e.YGNodeStyleSetGap(nodeName, e.YGGutterRow, pointValue(e, node.style[style]));
e.YGNodeStyleSetGap(
nodeName,
e.YGGutterRow,
pointValue(e, node.style[style]),
);
break;
case 'direction':
e.YGNodeStyleSetDirection(nodeName, directionValue(e, node.style[style]));
e.YGNodeStyleSetDirection(
nodeName,
directionValue(e, node.style[style]),
);
break;
case 'flex-direction':
e.YGNodeStyleSetFlexDirection(nodeName, flexDirectionValue(e, node.style[style]));
e.YGNodeStyleSetFlexDirection(
nodeName,
flexDirectionValue(e, node.style[style]),
);
break;
case 'justify-content':
e.YGNodeStyleSetJustifyContent(nodeName, justifyValue(e, node.style[style]));
e.YGNodeStyleSetJustifyContent(
nodeName,
justifyValue(e, node.style[style]),
);
break;
case 'align-content':
e.YGNodeStyleSetAlignContent(nodeName, alignValue(e, node.style[style]));
e.YGNodeStyleSetAlignContent(
nodeName,
alignValue(e, node.style[style]),
);
break;
case 'align-items':
e.YGNodeStyleSetAlignItems(nodeName, alignValue(e, node.style[style]));
e.YGNodeStyleSetAlignItems(
nodeName,
alignValue(e, node.style[style]),
);
break;
case 'align-self':
if (!parent || node.style[style] !== parent.style['align-items']) {
e.YGNodeStyleSetAlignSelf(nodeName, alignValue(e, node.style[style]));
e.YGNodeStyleSetAlignSelf(
nodeName,
alignValue(e, node.style[style]),
);
}
break;
case 'position':
e.YGNodeStyleSetPositionType(nodeName, positionValue(e, node.style[style]));
e.YGNodeStyleSetPositionType(
nodeName,
positionValue(e, node.style[style]),
);
break;
case 'flex-wrap':
e.YGNodeStyleSetFlexWrap(nodeName, wrapValue(e, node.style[style]));
break;
case 'overflow':
e.YGNodeStyleSetOverflow(nodeName, overflowValue(e, node.style[style]));
e.YGNodeStyleSetOverflow(
nodeName,
overflowValue(e, node.style[style]),
);
break;
case 'flex-grow':
e.YGNodeStyleSetFlexGrow(nodeName, node.style[style]);
@@ -215,83 +296,179 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
break;
case 'left':
if (genericNode.rawStyle.indexOf('start:') >= 0) {
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeStart,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
}
break;
case 'top':
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break;
case 'right':
if (genericNode.rawStyle.indexOf('end:') >= 0) {
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeEnd,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
}
break;
case 'bottom':
e.YGNodeStyleSetPosition(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
e.YGNodeStyleSetPosition(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break;
case 'margin-left':
if (genericNode.rawStyle.indexOf('margin-start:') >= 0) {
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeStart,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
}
break;
case 'margin-top':
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break;
case 'margin-right':
if (genericNode.rawStyle.indexOf('margin-end:') >= 0) {
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeEnd,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
}
break;
case 'margin-bottom':
e.YGNodeStyleSetMargin(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
e.YGNodeStyleSetMargin(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break;
case 'padding-left':
if (genericNode.rawStyle.indexOf('padding-start:') >= 0) {
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeStart,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
}
break;
case 'padding-top':
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break;
case 'padding-right':
if (genericNode.rawStyle.indexOf('padding-end:') >= 0) {
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeEnd,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
}
break;
case 'padding-bottom':
e.YGNodeStyleSetPadding(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
e.YGNodeStyleSetPadding(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break;
case 'border-left-width':
if (genericNode.rawStyle.indexOf('border-start-width:') >= 0) {
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeStart, pointValue(e, node.style[style]));
e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeStart,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeLeft, pointValue(e, node.style[style]));
e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeLeft,
pointValue(e, node.style[style]),
);
}
break;
case 'border-top-width':
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeTop, pointValue(e, node.style[style]));
e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeTop,
pointValue(e, node.style[style]),
);
break;
case 'border-right-width':
if (genericNode.rawStyle.indexOf('border-end-width:') >= 0) {
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeEnd, pointValue(e, node.style[style]));
e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeEnd,
pointValue(e, node.style[style]),
);
} else {
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeRight, pointValue(e, node.style[style]));
e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeRight,
pointValue(e, node.style[style]),
);
}
break;
case 'border-bottom-width':
e.YGNodeStyleSetBorder(nodeName, e.YGEdgeBottom, pointValue(e, node.style[style]));
e.YGNodeStyleSetBorder(
nodeName,
e.YGEdgeBottom,
pointValue(e, node.style[style]),
);
break;
case 'width':
e.YGNodeStyleSetWidth(nodeName, pointValue(e, node.style[style]));
@@ -312,7 +489,7 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
e.YGNodeStyleSetMaxHeight(nodeName, pointValue(e, node.style[style]));
break;
case 'display':
e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]))
e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]));
break;
}
}
@@ -322,106 +499,140 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
e.YGNodeInsertChild(parentName, nodeName, index);
}
for (var i = 0; i < node.children.length; i++) {
for (let i = 0; i < node.children.length; i++) {
e.push('');
var childName = nodeName + '_child' + i;
const childName = nodeName + '_child' + i;
setupTestTree(
e,
node,
node.children[i],
genericNode.children[i],
childName,
nodeName,
i);
e,
node,
node.children[i],
genericNode.children[i],
childName,
nodeName,
i,
);
}
}
function overflowValue(e, value) {
switch (value) {
case 'visible': return e.YGOverflowVisible;
case 'hidden': return e.YGOverflowHidden;
case 'visible':
return e.YGOverflowVisible;
case 'hidden':
return e.YGOverflowHidden;
}
}
function wrapValue(e, value) {
switch (value) {
case 'wrap': return e.YGWrapWrap;
case 'wrap-reverse': return e.YGWrapWrapReverse;
case 'nowrap': return e.YGWrapNoWrap;
case 'wrap':
return e.YGWrapWrap;
case 'wrap-reverse':
return e.YGWrapWrapReverse;
case 'nowrap':
return e.YGWrapNoWrap;
}
}
function flexDirectionValue(e, value) {
switch (value) {
case 'row': return e.YGFlexDirectionRow;
case 'row-reverse': return e.YGFlexDirectionRowReverse;
case 'column': return e.YGFlexDirectionColumn;
case 'column-reverse': return e.YGFlexDirectionColumnReverse;
case 'row':
return e.YGFlexDirectionRow;
case 'row-reverse':
return e.YGFlexDirectionRowReverse;
case 'column':
return e.YGFlexDirectionColumn;
case 'column-reverse':
return e.YGFlexDirectionColumnReverse;
}
}
function justifyValue(e, value) {
switch (value) {
case 'center': return e.YGJustifyCenter;
case 'space-around': return e.YGJustifySpaceAround;
case 'space-between': return e.YGJustifySpaceBetween;
case 'space-evenly': return e.YGJustifySpaceEvenly;
case 'flex-start': return e.YGJustifyFlexStart;
case 'flex-end': return e.YGJustifyFlexEnd;
case 'center':
return e.YGJustifyCenter;
case 'space-around':
return e.YGJustifySpaceAround;
case 'space-between':
return e.YGJustifySpaceBetween;
case 'space-evenly':
return e.YGJustifySpaceEvenly;
case 'flex-start':
return e.YGJustifyFlexStart;
case 'flex-end':
return e.YGJustifyFlexEnd;
}
}
function positionValue(e, value) {
switch (value) {
case 'absolute': return e.YGPositionTypeAbsolute;
default: return e.YGPositionTypeRelative
case 'absolute':
return e.YGPositionTypeAbsolute;
default:
return e.YGPositionTypeRelative;
}
}
function directionValue(e, value) {
switch (value) {
case 'ltr': return e.YGDirectionLTR;
case 'rtl': return e.YGDirectionRTL;
case 'inherit': return e.YGDirectionInherit;
case 'ltr':
return e.YGDirectionLTR;
case 'rtl':
return e.YGDirectionRTL;
case 'inherit':
return e.YGDirectionInherit;
}
}
function alignValue(e, value) {
switch (value) {
case 'auto': return e.YGAlignAuto;
case 'center': return e.YGAlignCenter;
case 'stretch': return e.YGAlignStretch;
case 'flex-start': 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;
case 'auto':
return e.YGAlignAuto;
case 'center':
return e.YGAlignCenter;
case 'stretch':
return e.YGAlignStretch;
case 'flex-start':
return e.YGAlignFlexStart;
case 'flex-end':
return e.YGAlignFlexEnd;
case 'space-between':
return e.YGAlignSpaceBetween;
case 'space-around':
return e.YGAlignSpaceAround;
case 'baseline':
return e.YGAlignBaseline;
}
}
function pointValue(e, value) {
switch (value) {
case 'auto': return e.YGAuto;
case 'undefined': return e.YGUndefined;
default: return value;
case 'auto':
return e.YGAuto;
case 'undefined':
return e.YGUndefined;
default:
return value;
}
}
function displayValue(e, value){
switch(value){
case 'flex': return e.YGDisplayFlex;
case 'none': return e.YGDisplayNone;
function displayValue(e, value) {
switch (value) {
case 'flex':
return e.YGDisplayFlex;
case 'none':
return e.YGDisplayNone;
}
}
var DEFAULT_STYLES = new Map();
const DEFAULT_STYLES = new Map();
function isDefaultStyleValue(style, value) {
let defaultStyle = DEFAULT_STYLES.get(style);
if (defaultStyle == null) {
switch (style) {
case 'position':
defaultStyle = new Set(['relative']);;
defaultStyle = new Set(['relative']);
break;
case 'left':
@@ -438,10 +649,11 @@ function isDefaultStyleValue(style, value) {
defaultStyle = new Set(['0', '0px', 'auto']);
break;
default:
var node = document.getElementById('default');
default: {
const node = document.getElementById('default');
defaultStyle = new Set([getComputedStyle(node, null)[style]]);
break;
}
}
DEFAULT_STYLES.set(style, defaultStyle);
}
@@ -449,19 +661,19 @@ function isDefaultStyleValue(style, value) {
}
function getRoundedSize(node) {
var boundingRect = node.getBoundingClientRect();
const boundingRect = node.getBoundingClientRect();
return {
width: Math.round(boundingRect.right) - Math.round(boundingRect.left),
height: Math.round(boundingRect.bottom) - Math.round(boundingRect.top)
height: Math.round(boundingRect.bottom) - Math.round(boundingRect.top),
};
}
function calculateTree(root, roundToPixelGrid) {
var rootLayout = [];
const rootLayout = [];
for (var i = 0; i < root.children.length; i++) {
var child = root.children[i];
var layout = {
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
const layout = {
name: child.id !== '' ? child.id : 'INSERT_NAME_HERE',
left: child.offsetLeft + child.parentNode.clientLeft,
top: child.offsetTop + child.parentNode.clientTop,
@@ -472,12 +684,12 @@ function calculateTree(root, roundToPixelGrid) {
declaredStyle: child.style,
rawStyle: child.getAttribute('style'),
experiments: child.dataset.experiments
? child.dataset.experiments.split(' ')
: DEFAULT_EXPERIMENTS,
? child.dataset.experiments.split(' ')
: DEFAULT_EXPERIMENTS,
disabled: child.dataset.disabled === 'true',
};
var size = getRoundedSize(child);
const size = getRoundedSize(child);
layout.width = size.width;
layout.height = size.height;
@@ -528,13 +740,14 @@ function getYogaStyle(node) {
'column-gap',
'row-gap',
'display',
].reduce(function(map, key) {
map[key] = node.style[key] || getComputedStyle(node, null).getPropertyValue(key);
].reduce((map, key) => {
map[key] =
node.style[key] || getComputedStyle(node, null).getPropertyValue(key);
return map;
}, {});
}
var Emitter = function(lang, indent) {
const Emitter = function (lang, indent) {
this.lang = lang;
this.indent = indent;
this.indents = [];
@@ -542,29 +755,37 @@ var Emitter = function(lang, indent) {
};
Emitter.prototype = Object.create(Object.prototype, {
constructor:{value:Emitter},
constructor: {value: Emitter},
pushIndent:{value:function() {
this.indents.push(this.indent);
}},
pushIndent: {
value: function () {
this.indents.push(this.indent);
},
},
popIndent:{value:function() {
this.indents.pop();
}},
popIndent: {
value: function () {
this.indents.pop();
},
},
push:{value:function(line) {
if (line instanceof Array) {
line.forEach(function(element) {
this.push(element);
}, this);
return;
} else if (line.length > 0) {
line = this.indents.join('') + line;
}
this.lines.push(line);
}},
push: {
value: function (line) {
if (line instanceof Array) {
line.forEach(function (element) {
this.push(element);
}, this);
return;
} else if (line.length > 0) {
line = this.indents.join('') + line;
}
this.lines.push(line);
},
},
print:{value:function() {
console.log(this.lines.join('\n'));
}},
print: {
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 {
argv,
cleanTask,
eslintTask,
logger,
jestTask,
option,
@@ -76,13 +75,7 @@ task(
),
);
task(
'lint',
parallel(
tscTask({noEmit: true}),
series(eslintTask({fix: argv().fix}), clangFormatTask({fix: argv().fix})),
),
);
task('clang-format', clangFormatTask({fix: argv().fix}));
task('prepack-package-json', async () => {
const packageJsonPath = path.join(__dirname, 'package.json');

26
javascript/package.json
View File

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

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

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

16
package.json
View File

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

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} */
const config = {
title: 'Yoga',
tagline: 'Build flexible layouts on any platform with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.',
tagline:
'Build flexible layouts on any platform with a highly optimized open source layout engine designed with speed, size, and ease of use in mind.',
favicon: 'img/favicon.png',
url: 'https:/yogalayout.com',
@@ -37,13 +38,11 @@ const config = {
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl:
'https://github.com/facebook/yoga/tree/main/website',
editUrl: 'https://github.com/facebook/yoga/tree/main/website',
},
blog: {
showReadingTime: true,
editUrl:
'https://github.com/facebook/yoga/tree/main/website',
editUrl: 'https://github.com/facebook/yoga/tree/main/website',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),

7
website-next/package.json
View File

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

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

@@ -7,17 +7,17 @@
* @format
*/
import React from 'react';
import React from 'react';
import YogaEnumSelect from './YogaEnumSelect';
import YogaPositionEditor from './YogaPositionEditor';
import {Input} from 'antd';
type Props<T> = {
property: string,
disabled?: boolean,
value?: T,
onChange: (property: string, value: T) => void,
placeholder?: string,
property: string;
disabled?: boolean;
value?: T;
onChange: (property: string, value: T) => void;
placeholder?: string;
};
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;
type Props = {
node: LayoutRecordType,
onChangeLayout: (key: string, value: any) => void,
onChangeSetting: (key: string, value: any) => void,
direction: Direction,
selectedNodeIsRoot: boolean,
onRemove?: () => void,
onAdd?: () => void,
node: LayoutRecordType;
onChangeLayout: (key: string, value: any) => void;
onChangeSetting: (key: string, value: any) => void;
direction: Direction;
selectedNodeIsRoot: boolean;
onRemove?: () => void;
onAdd?: () => void;
};
export default class Editor extends Component<Props> {
@@ -47,7 +47,7 @@ export default class Editor extends Component<Props> {
render() {
const {node, selectedNodeIsRoot} = this.props;
const disabled = !Boolean(node);
const disabled = !node;
return (
<div className="Editor">
@@ -347,7 +347,7 @@ export default class Editor extends Component<Props> {
<Col span={12}>
<Button
icon="plus-circle-o"
disabled={!Boolean(this.props.onAdd)}
disabled={!this.props.onAdd}
onClick={this.props.onAdd}
type="primary">
add child node
@@ -356,7 +356,7 @@ export default class Editor extends Component<Props> {
<Col span={12}>
<Button
icon="close-circle-o"
disabled={!Boolean(this.props.onRemove)}
disabled={!this.props.onRemove}
onClick={this.props.onRemove}
type="danger">
remove node

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

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

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

@@ -7,7 +7,6 @@
* @format
*/
import {Record, List} from 'immutable';
import PositionRecord from './PositionRecord';
import type {PositionRecordType} from './PositionRecord';
@@ -24,28 +23,28 @@ import type {
export type LayoutRecordType = ReturnType<LayoutRecordFactory>;
export type LayoutRecordFactory = Record.Factory<{
width?: number | 'auto',
height?: number | 'auto',
minWidth?: number,
minHeight?: number,
maxWidth?: number,
maxHeight?: number,
justifyContent?: Justify,
padding: PositionRecordType,
border: PositionRecordType,
margin: PositionRecordType,
position: PositionRecordType,
positionType: PositionType,
alignItems?: Align,
alignSelf?: Align,
alignContent?: Align,
flexDirection?: FlexDirection,
flexBasis?: number | 'auto',
flexGrow?: number,
flexShrink?: number,
flexWrap?: Wrap,
aspectRatio?: number | 'auto',
children?: List<LayoutRecordType>,
width?: number | 'auto';
height?: number | 'auto';
minWidth?: number;
minHeight?: number;
maxWidth?: number;
maxHeight?: number;
justifyContent?: Justify;
padding: PositionRecordType;
border: PositionRecordType;
margin: PositionRecordType;
position: PositionRecordType;
positionType: PositionType;
alignItems?: Align;
alignSelf?: Align;
alignContent?: Align;
flexDirection?: FlexDirection;
flexBasis?: number | 'auto';
flexGrow?: number;
flexShrink?: number;
flexWrap?: Wrap;
aspectRatio?: number | 'auto';
children?: List<LayoutRecordType>;
}>;
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';
type Props = {
inset?: boolean,
reverse?: boolean,
position: PositionRecordType,
offset: PositionRecordType,
color: string,
inset?: boolean;
reverse?: boolean;
position: PositionRecordType;
offset: PositionRecordType;
color: string;
};
export default class PositionGuide extends Component<Props> {
@@ -42,8 +42,6 @@ export default class PositionGuide extends Component<Props> {
) {
return null;
}
if (reverse) {
let temp1 = left;
left = right;

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 PositionRecordFactory = Record.Factory<{
top: string | number,
right: string | number,
bottom: string | number,
left: string | number,
top: string | number;
right: string | number;
bottom: string | number;
left: string | number;
}>;
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';
type Props = {
width?: number,
children: any,
width?: number;
children: any;
};
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',
};
type Property = keyof(typeof PROPERTY_LOOKUP);
type Property = keyof typeof PROPERTY_LOOKUP;
type Props = {
property: Property,
disabled?: boolean,
value: string | number,
onChange: (property: Property, value: number) => void,
property: Property;
disabled?: boolean;
value: string | number;
onChange: (property: Property, value: number) => void;
};
export default class YogaEnumSelect extends Component<Props> {
static availableProperties = Object.keys(PROPERTY_LOOKUP);
values: Array<{key: string, value: number}>;
values: Array<{key: string; value: number}>;
constructor(props: Props) {
super(props);
@@ -57,17 +57,12 @@ export default class YogaEnumSelect extends Component<Props> {
getTitle = (property: string, key: string): string => {
const replacer = new RegExp(`^${property}_`);
return key
.replace(replacer, '')
.replace('_', ' ')
.toLowerCase();
return key.replace(replacer, '').replace('_', ' ').toLowerCase();
};
render() {
const property = PROPERTY_LOOKUP[this.props.property];
const selected = this.values.find(
({key, value}) => value === this.props.value,
);
const selected = this.values.find(({value}) => value === this.props.value);
return this.values.length > 3 ? (
<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';
type ComputedLayout = {
left: number,
top: number,
width: number,
height: number,
children: Array<ComputedLayout>,
node: Node,
left: number;
top: number;
width: number;
height: number;
children: Array<ComputedLayout>;
node: Node;
};
type Props = {
layoutDefinition: LayoutRecordType,
className?: string,
computedLayout?: ComputedLayout,
path: Array<number>,
selectedNodePath?: Array<number>,
direction?: Direction,
label?: string,
showGuides: boolean,
onClick?: (path: Array<number>) => void,
onDoubleClick?: (path: Array<number>) => void,
layoutDefinition: LayoutRecordType;
className?: string;
computedLayout?: ComputedLayout;
path: Array<number>;
selectedNodePath?: Array<number>;
direction?: Direction;
label?: string;
showGuides: boolean;
onClick?: (path: Array<number>) => void;
onDoubleClick?: (path: Array<number>) => void;
};
type State = {
visible?: boolean,
hovered: boolean,
visible?: boolean;
hovered: boolean;
};
export default class YogaNode extends Component<Props, State> {
@@ -68,7 +68,7 @@ export default class YogaNode extends Component<Props, State> {
this.calculateLayout(props);
this.state = {
hovered: false,
visible: !Boolean(props.computedLayout),
visible: !props.computedLayout,
};
}
}
@@ -137,7 +137,9 @@ export default class YogaNode extends Component<Props, State> {
? defaultLayout[key]
: layoutDefinition[key];
root[`set${key[0].toUpperCase()}${key.substr(1)}`](value);
} catch (e) {}
} catch (e) {
// Do nothing on failure
}
});
['padding', 'margin', 'position', 'border'].forEach(key => {
@@ -147,7 +149,9 @@ export default class YogaNode extends Component<Props, State> {
Yoga[`EDGE_${direction.toUpperCase()}`],
layoutDefinition[key][direction],
);
} catch (e) {}
} catch (e) {
// Do nothing on failure
}
});
});
@@ -165,7 +169,7 @@ export default class YogaNode extends Component<Props, State> {
return {
...node.getComputedLayout(),
node,
children: Array.apply(null, Array(node.getChildCount())).map((_, i) =>
children: Array(node.getChildCount()).map((_, i) =>
this.getComputedLayout(node.getChild(i)),
),
};
@@ -187,7 +191,7 @@ export default class YogaNode extends Component<Props, State> {
}
};
onMouseLeave = (e: React.MouseEvent) => this.setState({hovered: false});
onMouseLeave = (_e: React.MouseEvent) => this.setState({hovered: false});
showPositionGuides({node}: ComputedLayout) {
const padding = PositionRecord({
@@ -246,13 +250,8 @@ export default class YogaNode extends Component<Props, State> {
}
render() {
const {
layoutDefinition,
className,
path,
selectedNodePath,
label,
} = this.props;
const {layoutDefinition, className, path, selectedNodePath, label} =
this.props;
const computedLayout: 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 Props = {
value: PositionRecordType,
property: Property,
disabled?: boolean,
onChange: (property: Property, value: PositionRecordType) => void,
value: PositionRecordType;
property: Property;
disabled?: boolean;
onChange: (property: Property, value: PositionRecordType) => void;
};
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 LayoutRecord from './LayoutRecord';
import Sidebar from './Sidebar';
import {Row, Col} from 'antd';
import type {LayoutRecordType} from './LayoutRecord';
import './index.css';
type Props = {
layoutDefinition: Object,
direction: Direction,
maxDepth: number,
maxChildren?: number,
minChildren?: number,
selectedNodePath?: Array<number>,
showGuides: boolean,
className?: string,
height?: string | number,
persist?: boolean,
renderSidebar?: (layoutDefinition: LayoutRecordType, onChange: Function) => any,
layoutDefinition: LayoutRecordType;
direction: Direction;
maxDepth: number;
maxChildren?: number;
minChildren?: number;
selectedNodePath?: Array<number>;
showGuides: boolean;
className?: string;
height?: string | number;
persist?: boolean;
renderSidebar?: (
layoutDefinition: LayoutRecordType,
onChange: () => any,
) => any;
};
type State = {
selectedNodePath?: Array<number>,
layoutDefinition: LayoutRecordType,
direction: Direction,
selectedNodePath?: Array<number>;
layoutDefinition: LayoutRecordType;
direction: Direction;
};
function getPath(path: Array<number>): Array<unknown> {
@@ -62,7 +64,7 @@ export default class Playground extends Component<Props, State> {
persist: false,
};
rehydrate = (node: Object): LayoutRecordType => {
rehydrate = (node: LayoutRecordType): LayoutRecordType => {
let record = LayoutRecord(node);
record = record.set('padding', PositionRecord(record.padding));
record = record.set('border', PositionRecord(record.border));
@@ -115,7 +117,7 @@ export default class Playground extends Component<Props, State> {
};
hideSidePanes() {
if (!Boolean(this.props.renderSidebar)) {
if (!this.props.renderSidebar) {
// only unselect if we don't have an external sidebar, otherwise the
// sidebar may rely on a certain node to be selected
this.setState({
@@ -183,7 +185,9 @@ export default class Playground extends Component<Props, State> {
): string =>
btoa(JSON.stringify(this.removeUnchangedProperties(layoutDefinition)));
removeUnchangedProperties = (node: LayoutRecordType): Object => {
removeUnchangedProperties = (
node: LayoutRecordType,
): {children?: unknown} => {
const untouchedLayout = LayoutRecord({});
const untouchedPosition = PositionRecord({});
const result: {children?: unknown} = {};

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

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

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 {
return `yoga.${Object.keys(yoga)
.filter(key => key.toLowerCase().startsWith(yogaEnum.toLowerCase()))
.find(key => yoga[key] === value) || value}`;
return `yoga.${
Object.keys(yoga)
.filter(key => key.toLowerCase().startsWith(yogaEnum.toLowerCase()))
.find(key => yoga[key] === value) || value
}`;
}
function setProperty(

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

@@ -8,7 +8,6 @@
* @format
*/
import {Record, List} from 'immutable';
import type {RecordOf} from 'immutable';
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 => {
const replacer = new RegExp(`^${property}_`);
return key
.replace(replacer, '')
.replace('_', ' ')
.toLowerCase();
return key.replace(replacer, '').replace('_', ' ').toLowerCase();
};
render() {

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

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

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

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

870
yarn.lock
View File

File diff suppressed because it is too large Load Diff