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

Merge pull request #105 from ColinEberhardt/build-process

Browse Source 
Added a grunt build process
This commit is contained in:
Colin Eberhardt
2015-08-12 07:19:20 +01:00
parent a87e9e382f 5653e4ef82
commit 50c9712acd
16 changed files with 1165 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc
View File

@@ -19,10 +19,6 @@
"define": true "define": true
}, },
"rules": { "rules": {
"quotes": "single", "quotes": [2, "single"]
"strict": 0,
"no-console": false,
"no-shadow": false,
"no-underscore-dangle": false
} }
} }

66
Gruntfile.js Normal file
View File

@@ -0,0 +1,66 @@
'use strict';
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
paths: {
distFolder: 'dist',
srcFolder: 'src',
testFolder: 'src/__tests__',
},
clean: ['<%= paths.distFolder %>'],
eslint: {
options: {
configFile: '.eslintrc'
},
target: ['<%= paths.srcFolder %>/Layout.js']
},
includereplace: {
options: {
prefix: '// @@',
},
main: {
src: '<%= paths.srcFolder %>/css-layout.js',
dest: '<%= paths.distFolder %>/css-layout.js'
}
},
uglify: {
options: {
sourceMap: true,
sourceMapIncludeSources: true
},
main: {
files: {
'<%= paths.distFolder %>/css-layout.min.js': ['<%= paths.distFolder %>/css-layout.js']
}
}
},
karma: {
main: {
options: {
files: [
'<%= paths.srcFolder %>/Layout.js',
'<%= paths.srcFolder %>/Layout-test-utils.js',
'<%= paths.testFolder %>/Layout-test.js',
'<%= paths.testFolder %>/Layout-consts-test.js'
],
browsers: ['Chrome'],
frameworks: ['jasmine'],
singleRun: true
}
}
}
});
grunt.registerTask('build', ['eslint', 'clean', 'karma' ,'includereplace', 'uglify']);
grunt.registerTask('default', ['build']);
};

17
README.md
View File

@@ -29,11 +29,6 @@ computeLayout(
]} ]}
``` ```
To run the tests
- For the JS tests: Open `RunLayoutTests.html` and `RunLayoutRandomTests.html` in Chrome or run `$ npm test`
- For the C and Java tests: run `make` in your terminal. It will also transpile the JS code
Supported Attributes Supported Attributes
-------------------- --------------------
@@ -81,3 +76,15 @@ div, span {
- Everything is `display: flex` by default. All the behaviors of `block` and `inline-block` can be expressed in term of `flex` but not the opposite. - Everything is `display: flex` by default. All the behaviors of `block` and `inline-block` can be expressed in term of `flex` but not the opposite.
- All the flex elements are oriented from top to bottom, left to right and do not shrink. This is how things are laid out using the default CSS settings and what you'd expect. - All the flex elements are oriented from top to bottom, left to right and do not shrink. This is how things are laid out using the default CSS settings and what you'd expect.
- Everything is `position: relative`. This makes `position: absolute` target the direct parent and not some parent which is either `relative` or `absolute`. If you want to position an element relative to something else, you should move it in the DOM instead of relying of CSS. It also makes `top, left, right, bottom` do something when not specifying `position: absolute`. - Everything is `position: relative`. This makes `position: absolute` target the direct parent and not some parent which is either `relative` or `absolute`. If you want to position an element relative to something else, you should move it in the DOM instead of relying of CSS. It also makes `top, left, right, bottom` do something when not specifying `position: absolute`.
Development
-----------
The core logic resides with `Layout.js`, which is transpiled into equivalent C and Java implementations.
To run the tests
- For the JS tests: run `grunt karma`
- For the C and Java tests: run `make` in your terminal. It will also transpile the JS code. This build is also run via Travis CI.
The JavaScript build process is managed via Grunt. The build performs linting, runs the tests and produce a minified version of the code within a `dist` folder. The build output uses the Universal Module Format (UMD) so that it can be used via AMD / RequireJS, CommonJS or included directly into an HTML page.

31
RunLayoutRandomTests.html
View File

@@ -1,31 +0,0 @@
<!DOCTYPE HTML>
<!--
Copyright (c) 2014, Facebook, Inc.
All rights reserved.
This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree. An additional grant
of patent rights can be found in the PATENTS file in the same directory.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="https://jasmine.github.io/2.0/lib/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="https://jasmine.github.io/2.0/lib/jasmine.css">
<script type="text/javascript" src="https://jasmine.github.io/2.0/lib/jasmine.js"></script>
<script type="text/javascript" src="https://jasmine.github.io/2.0/lib/jasmine-html.js"></script>
<script type="text/javascript" src="https://jasmine.github.io/2.0/lib/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="src/Layout.js"></script>
</head>
<body>
<script type="text/javascript" src="src/Layout-test-utils.js"></script>
<script type="text/javascript" src="src/__tests__/Layout-random-test.js"></script>
</body>
</html>

32
RunLayoutTests.html
View File

@@ -1,32 +0,0 @@
<!DOCTYPE HTML>
<!--
Copyright (c) 2014, Facebook, Inc.
All rights reserved.
This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree. An additional grant
of patent rights can be found in the PATENTS file in the same directory.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="https://jasmine.github.io/2.0/lib/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="https://jasmine.github.io/2.0/lib/jasmine.css">
<script type="text/javascript" src="https://jasmine.github.io/2.0/lib/jasmine.js"></script>
<script type="text/javascript" src="https://jasmine.github.io/2.0/lib/jasmine-html.js"></script>
<script type="text/javascript" src="https://jasmine.github.io/2.0/lib/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="src/Layout.js"></script>
</head>
<body>
<script type="text/javascript" src="src/Layout-test-utils.js"></script>
<script type="text/javascript" src="src/__tests__/Layout-test.js"></script>
<script type="text/javascript" src="src/__tests__/Layout-consts-test.js"></script>
</body>
</html>

1018
dist/css-layout.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
dist/css-layout.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css-layout.min.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

42
karma.conf.js
View File

@@ -1,42 +0,0 @@
'use strict';
module.exports = function (config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: 'src',
// frameworks to use
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'Layout.js',
'Layout-test-utils.js',
'__tests__/Layout-test.js',
'__tests__/Layout-consts-test.js'
],
plugins: [
'karma-chrome-launcher',
'karma-jasmine'
],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
browsers: ['Chrome'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
singleRun: false
});
};

18
package.json
View File

@@ -3,10 +3,6 @@
"version": "0.0.2", "version": "0.0.2",
"description": "Reimplementation of CSS layout using pure JavaScript", "description": "Reimplementation of CSS layout using pure JavaScript",
"main": "src/main.js", "main": "src/main.js",
"scripts": {
"pretest": "./node_modules/eslint/bin/eslint.js src",
"test": "./node_modules/karma/bin/karma start ./karma.conf.js --single-run"
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/facebook/css-layout.git" "url": "https://github.com/facebook/css-layout.git"
@@ -18,10 +14,18 @@
}, },
"homepage": "https://github.com/facebook/css-layout", "homepage": "https://github.com/facebook/css-layout",
"devDependencies": { "devDependencies": {
"eslint": "^0.14.1", "grunt": "^0.4.5",
"grunt-cli": "^0.1.13",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-uglify": "^0.9.1",
"grunt-eslint": "^17.1.0",
"grunt-include-replace": "^3.1.0",
"grunt-karma": "^0.12.0",
"jasmine-core": "^2.2.0", "jasmine-core": "^2.2.0",
"karma": "^0.12.31", "karma": "^0.13.8",
"karma-chrome-launcher": "^0.1.7", "karma-chrome-launcher": "^0.1.7",
"karma-jasmine": "^0.3.5" "karma-jasmine": "^0.3.5",
"load-grunt-tasks": "^3.2.0"
} }
} }

4
src/JavaTranspiler.js
View File

@@ -140,8 +140,8 @@ var JavaTranspiler = {
var allTestsInJava = []; var allTestsInJava = [];
for (var i = 0; i < allTestsInC.length; i++) { for (var i = 0; i < allTestsInC.length; i++) {
allTestsInJava[i] = allTestsInJava[i] =
" @Test\n" + ' @Test\n' +
" public void testCase" + i + "()\n" + ' public void testCase' + i + '()\n' +
__transpileSingleTestToJava(allTestsInC[i]); __transpileSingleTestToJava(allTestsInC[i]);
} }
return allTestsInJava.join('\n\n'); return allTestsInJava.join('\n\n');

6
src/Layout-test-utils.js
View File

@@ -6,7 +6,7 @@
* LICENSE file in the root directory of this source tree. An additional grant * LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory. * of patent rights can be found in the PATENTS file in the same directory.
*/ */
/* globals document, computeLayout */ /* globals document, computeLayout, navigator */
var layoutTestUtils = (function() { var layoutTestUtils = (function() {
@@ -415,7 +415,7 @@ var layoutTestUtils = (function() {
// Note(prenaux): Clearly not what I would like, but it seems to be the only // Note(prenaux): Clearly not what I would like, but it seems to be the only
// way :( My guess is that since the font on Windows is // way :( My guess is that since the font on Windows is
// different than on OSX it has a different size. // different than on OSX it has a different size.
if (typeof navigator !== 'undefined' && navigator.userAgent.indexOf("Windows NT") > -1) { if (typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Windows NT') > -1) {
preDefinedTextSizes.bigHeight = 36; preDefinedTextSizes.bigHeight = 36;
} }
@@ -450,7 +450,7 @@ var layoutTestUtils = (function() {
testNamedLayout('expected-dom', expectedLayout, domLayout); testNamedLayout('expected-dom', expectedLayout, domLayout);
testNamedLayout('layout-dom', layout, domLayout); testNamedLayout('layout-dom', layout, domLayout);
}, },
testLayoutAgainstDomOnly: function(node, expectedLayout) { testLayoutAgainstDomOnly: function(node) {
var layout = computeCSSLayout(node); var layout = computeCSSLayout(node);
var domLayout = computeDOMLayout(node); var domLayout = computeDOMLayout(node);
inplaceRoundNumbersInObject(layout); inplaceRoundNumbersInObject(layout);

19
src/Layout.js
View File

@@ -986,21 +986,6 @@ var computeLayout = (function() {
}; };
})(); })();
// UMD (Universal Module Definition) if (typeof exports === 'object') {
// See https://github.com/umdjs/umd for reference module.exports = computeLayout;
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.returnExports = factory();
} }
}(this, function () {
return computeLayout;
}));

18
src/__tests__/Layout-test.js
View File

@@ -2122,7 +2122,7 @@ describe('Layout', function() {
{style: {width: 400, height: 400}, children: [ {style: {width: 400, height: 400}, children: [
{style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10}, children: [ {style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10}, children: [
{style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}} {style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
]}, ]}
]}, ]},
{width: 400, height: 400, top: 0, left: 0, children: [ {width: 400, height: 400, top: 0, left: 0, children: [
{width: 200, height: 200, top: 100, left: 100, children: [ {width: 200, height: 200, top: 100, left: 100, children: [
@@ -2137,7 +2137,7 @@ describe('Layout', function() {
{style: {width: 400, height: 400}, children: [ {style: {width: 400, height: 400}, children: [
{style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10, borderWidth: 1}, children: [ {style: {position: 'absolute', top: 100, left: 100, right: 100, bottom: 100, padding: 10, borderWidth: 1}, children: [
{style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}} {style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
]}, ]}
]}, ]},
{width: 400, height: 400, top: 0, left: 0, children: [ {width: 400, height: 400, top: 0, left: 0, children: [
{width: 200, height: 200, top: 100, left: 100, children: [ {width: 200, height: 200, top: 100, left: 100, children: [
@@ -2152,7 +2152,7 @@ describe('Layout', function() {
{style: {width: 400, height: 400}, children: [ {style: {width: 400, height: 400}, children: [
{style: {flex: 1, padding: 10}, children: [ {style: {flex: 1, padding: 10}, children: [
{style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}} {style: {position: 'absolute', top: 10, left: 10, right: 10, bottom: 10}}
]}, ]}
]}, ]},
{width: 400, height: 400, top: 0, left: 0, children: [ {width: 400, height: 400, top: 0, left: 0, children: [
{width: 400, height: 400, top: 0, left: 0, children: [ {width: 400, height: 400, top: 0, left: 0, children: [
@@ -2195,7 +2195,7 @@ describe('Layout', function() {
{style: {width: 100, height: 100}}, {style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}, {style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}, {style: {width: 100, height: 100}},
{style: {width: 100, height: 100}}, {style: {width: 100, height: 100}}
]}, ]},
{width: 320, height: 200, top: 0, left: 0, children: [ {width: 320, height: 200, top: 0, left: 0, children: [
{width: 100, height: 100, top: 0, left: 0}, {width: 100, height: 100, top: 0, left: 0},
@@ -2203,7 +2203,7 @@ describe('Layout', function() {
{width: 100, height: 100, top: 0, left: 220}, {width: 100, height: 100, top: 0, left: 220},
{width: 100, height: 100, top: 100, left: 0}, {width: 100, height: 100, top: 100, left: 0},
{width: 100, height: 100, top: 100, left: 110}, {width: 100, height: 100, top: 100, left: 110},
{width: 100, height: 100, top: 100, left: 220}, {width: 100, height: 100, top: 100, left: 220}
]} ]}
); );
}); });
@@ -2344,8 +2344,8 @@ describe('Layout alignContent', function() {
/* 11 */ {style: {width: 50, height: 50, margin: 10}}, /* 11 */ {style: {width: 50, height: 50, margin: 10}},
/* 12 */ {style: {width: 50, height: 50, margin: 10}}, /* 12 */ {style: {width: 50, height: 50, margin: 10}},
/* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
/* 14 */ {style: {width: 50, height: 50, margin: 10}}, /* 14 */ {style: {width: 50, height: 50, margin: 10}}
], ]
}, },
{width: 300, height: 380, top: 0, left: 0, children: [ {width: 300, height: 380, top: 0, left: 0, children: [
{width: 50, height: 50, top: 10, left: 10}, {width: 50, height: 50, top: 10, left: 10},
@@ -2387,8 +2387,8 @@ describe('Layout alignContent', function() {
/* 11 */ {style: {width: 50, height: 50, margin: 10}}, /* 11 */ {style: {width: 50, height: 50, margin: 10}},
/* 12 */ {style: {width: 50, height: 50, margin: 10}}, /* 12 */ {style: {width: 50, height: 50, margin: 10}},
/* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}}, /* 13 */ {style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'}},
/* 14 */ {style: {width: 50, height: 50, margin: 10}}, /* 14 */ {style: {width: 50, height: 50, margin: 10}}
], ]
} }
); );
}); });

14
src/main.js → src/css-layout.js
View File

@@ -1,5 +1,8 @@
// UMD (Universal Module Definition) // UMD (Universal Module Definition)
// See https://github.com/umdjs/umd for reference // See https://github.com/umdjs/umd for reference
//
// This file uses the following specific UMD implementation:
// https://github.com/umdjs/umd/blob/master/returnExports.js
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
@@ -11,14 +14,15 @@
module.exports = factory(); module.exports = factory();
} else { } else {
// Browser globals (root is window) // Browser globals (root is window)
root.returnExports = factory(); root.computeLayout = factory();
} }
}(this, function () { }(this, function () {
var layout = require('./Layout.js'); // @@include('./Layout.js')
return function(node) { return function(node) {
node = layout.fillNodes(node); node = computeLayout.fillNodes(node);
layout.computeLayout(node); computeLayout.computeLayout(node);
node = layout.extractNodes(node); node = computeLayout.extractNodes(node);
return node; return node;
}; };
})); }));

3
src/transpile.js
View File

@@ -20,7 +20,7 @@ global.layoutTestUtils = {
testLayout: function(node, expectedLayout) { testLayout: function(node, expectedLayout) {
allTests.push({name: currentTest, node: node, expectedLayout: expectedLayout}); allTests.push({name: currentTest, node: node, expectedLayout: expectedLayout});
}, },
testLayoutAgainstDomOnly: function(node) { testLayoutAgainstDomOnly: function() {
}, },
testRandomLayout: function(node, i) { testRandomLayout: function(node, i) {
allTests.push({name: 'Random #' + i, node: node, expectedLayout: computeDOMLayout(node)}); allTests.push({name: 'Random #' + i, node: node, expectedLayout: computeDOMLayout(node)});
@@ -272,7 +272,6 @@ function transpileAnnotatedJStoC(jsCode) {
} }
function makeConstDefs() { function makeConstDefs() {
/* eslint no-multi-spaces: 3 */
var lines = [ var lines = [
'#define SMALL_WIDTH ' + layoutTestUtils.textSizes.smallWidth, '#define SMALL_WIDTH ' + layoutTestUtils.textSizes.smallWidth,
'#define SMALL_HEIGHT ' + layoutTestUtils.textSizes.smallHeight, '#define SMALL_HEIGHT ' + layoutTestUtils.textSizes.smallHeight,