fixes #411 - add npm config platform env var in order to set which js…
Summary: … platform will be built Closes https://github.com/facebook/yoga/pull/537 Differential Revision: D5069356 Pulled By: emilsjolander fbshipit-source-id: eaa67d17fe9d5ed9d0959781ed12a238cb3d95f2
This commit is contained in:
cregnier
committed by
Facebook Github Bot
Facebook Github Bot
parent
50feb21cb3
commit
fa54167a20
23
README.md
23
README.md
@@ -38,3 +38,26 @@ For the main C implementation of Yoga clang-format is used to ensure a consisten
|
||||
|
||||
## Benchmarks
|
||||
Benchmarks are located in `benchmark/YGBenchmark.c` and can be run with `buck run //benchmark:benchmark`. If you think your change has affected performance please run this before and after your change to validate that nothing has regressed. Benchmarks are run on every commit in CI.
|
||||
|
||||
### Javascript
|
||||
Installing through NPM
|
||||
```sh
|
||||
npm install yoga-layout
|
||||
```
|
||||
By default this will install the library and try to build for all platforms (node, browser asm, and standalone webpack). You may receive errors if you do not have the required platform development tools already installed. To preset the platform you'd like to build for you can set a .npmrc property first.
|
||||
```sh
|
||||
npm config set yoga-layout:platform standalone
|
||||
```
|
||||
This will now only run the standalone webpack build upon install.
|
||||
|
||||
## Build Platforms
|
||||
|
||||
| name | description |
|
||||
|----------------|-------------------------------------------------|
|
||||
| all (default) | Builds all of these platforms. |
|
||||
| browser | Builds asm js browser version. |
|
||||
| node | Builds node js version. |
|
||||
| standalone | Runs webpack. |
|
||||
| none | Does nothing. You can use the prepackaged libs. |
|
||||
|
||||
|
||||
|
||||
@@ -9,6 +9,27 @@ The `yoga-layout` module offers two different implementations of Yoga. The first
|
||||
|
||||
> Because this module is compiled from a C++ codebase, the function prototypes below will use the C++-syntax. Nevertheless, the corresponding methods all exist on the JS side, with the same arguments (`Node *` being a node object).
|
||||
|
||||
### Installing
|
||||
Installing through NPM
|
||||
```sh
|
||||
npm install yoga-layout
|
||||
```
|
||||
By default this will install the library and try to build for all platforms (node, browser asm, and standalone webpack). You may receive errors if you do not have the required platform development tools already installed. To preset the platform you'd like to build for you can set a .npmrc property first.
|
||||
```sh
|
||||
npm config set yoga-layout:platform standalone
|
||||
```
|
||||
This will now only run the standalone webpack build upon install.
|
||||
|
||||
### Build Platforms
|
||||
|
||||
| name | description |
|
||||
|----------------|-------------------------------------------------|
|
||||
| all (default) | Builds all of these platforms. |
|
||||
| browser | Builds asm js browser version. |
|
||||
| node | Builds node js version. |
|
||||
| standalone | Runs webpack. |
|
||||
| none | Does nothing. You can use the prepackaged libs. |
|
||||
|
||||
### Lifecycle
|
||||
|
||||
Create a node via `Yoga.Node.create()`, and destroy it by using its `free()` or `freeRecursive()` method. Note that unlike most objects in your Javascript applications, your nodes will not get automatically garbage collected, which means that it is especially important you keep track of them so you can free them when you no longer need them.
|
||||
@@ -51,3 +72,63 @@ Certain nodes need to ability to measure themselves, the most common example is
|
||||
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
|
||||
|
||||
<script src="http://gist-it.appspot.com/facebook/yoga/raw/master/javascript/sources/global.hh?slice=3:4"></script>
|
||||
|
||||
### Example Usage
|
||||
|
||||
```javascript
|
||||
import yoga, { Node } from 'yoga-layout';
|
||||
|
||||
let rootNode = Node.create();
|
||||
rootNode.setWidth(1024);
|
||||
rootNode.setHeight(768);
|
||||
rootNode.setPadding(yoga.EDGE_ALL, 20);
|
||||
rootNode.setDisplay(yoga.DISPLAY_FLEX);
|
||||
rootNode.setFlexDirection(yoga.FLEX_DIRECTION_ROW);
|
||||
|
||||
let child1 = Node.create();
|
||||
child1.setWidth(250);
|
||||
child1.setHeight(400);
|
||||
child1.setFlex(0);
|
||||
|
||||
let child2 = Node.create();
|
||||
child2.setWidth(400);
|
||||
child2.setHeight(500);
|
||||
child2.setFlex(1);
|
||||
|
||||
rootNode.insertChild(child1, 0);
|
||||
rootNode.insertChild(child2, 1);
|
||||
|
||||
rootNode.calculateLayout(1024, 768, yoga.DIRECTION_LTR);
|
||||
|
||||
console.log(`root pos: {${rootNode.getComputedLeft()}, ${rootNode.getComputedTop()}, ${rootNode.getComputedWidth()}, ${rootNode.getComputedHeight()}}`);
|
||||
for (let i = 0, l = rootNode.getChildCount(); i < l; ++i) {
|
||||
let child = rootNode.getChild(i);
|
||||
console.log(`child ${i} pos: {${child.getComputedLeft()}, ${child.getComputedTop()}, ${child.getComputedWidth()}, ${child.getComputedHeight()}}`);
|
||||
console.log(child.getComputedLayout().toString());
|
||||
}
|
||||
|
||||
rootNode.removeChild(child1);
|
||||
rootNode.removeChild(child2);
|
||||
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes`);
|
||||
Node.destroy(child2);
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes left`);
|
||||
child1.free();
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes left`);
|
||||
rootNode.freeRecursive();
|
||||
console.log(`There are ${yoga.getInstanceCount()} nodes left`);
|
||||
|
||||
---------------------------------
|
||||
Output:
|
||||
|
||||
root pos: {0, 0, 1024, 768}
|
||||
child 0 pos: {20, 20, 250, 400}
|
||||
<Layout#20:0;20:0;250:400>
|
||||
child 1 pos: {270, 20, 734, 500}
|
||||
<Layout#270:0;20:0;734:500>
|
||||
There are 3 nodes
|
||||
There are 2 nodes left
|
||||
There are 1 nodes left
|
||||
There are 0 nodes left
|
||||
|
||||
```
|
||||
|
||||
@@ -11,6 +11,10 @@
|
||||
"main": "./sources/entry-node",
|
||||
"browser": "./sources/entry-browser",
|
||||
|
||||
"config": {
|
||||
"platform": "all"
|
||||
},
|
||||
|
||||
"scripts": {
|
||||
|
||||
"which": "which",
|
||||
@@ -25,7 +29,7 @@
|
||||
"build:browser": "npm -- run copy-sources && npm -- run node-gyp configure build --asmjs=1",
|
||||
"build:standalone": "webpack",
|
||||
"build:all": "npm -- run build:node && npm -- run build:browser && npm -- run build:standalone",
|
||||
"build": "npm -- run build:all",
|
||||
"build": "cross-env \"npm --if-present -- run build:$npm_package_config_platform\"",
|
||||
|
||||
"test:node": "TEST_ENTRY=node time mocha --expose-gc -r tests/tools.js tests/Facebook.Yoga/**/*.js",
|
||||
"test:browser": "TEST_ENTRY=browser time mocha --expose-gc -r tests/tools.js tests/Facebook.Yoga/**/*.js",
|
||||
@@ -50,8 +54,8 @@
|
||||
|
||||
"devDependencies": {
|
||||
|
||||
"cross-env": "^4.0.0",
|
||||
"mocha": "^3.2.0",
|
||||
"webpack": "^2.2.0-rc.2"
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user