├── .babelrc ├── .flowconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── .vscode └── settings.json ├── API.md ├── README.md ├── config ├── rollup.base.config.js ├── rollup.cjs.config.js ├── rollup.es.config.js └── rollup.umd.config.js ├── flow-typed └── npm │ ├── flow-bin_v0.x.x.js │ ├── flow-typed_vx.x.x.js │ └── yoga-layout_vx.x.x.js ├── package.json ├── src └── index.js ├── test.js ├── wallaby.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "es2015", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "syntax-flow", 12 | "transform-flow-strip-types", 13 | "transform-class-properties", 14 | "transform-object-rest-spread" 15 | ], 16 | "env": { 17 | "test": { 18 | "presets": ["es2015"], 19 | "plugins": [ 20 | "syntax-flow", 21 | "transform-flow-strip-types", 22 | "transform-class-properties", 23 | "transform-object-rest-spread" 24 | ] 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | flow-typed 8 | 9 | [options] 10 | unsafe.enable_getters_and_setters=true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | config 3 | .vscode 4 | .babelrc -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: 3 | yarn: true 4 | directories: 5 | - node_modules 6 | notifications: 7 | email: false 8 | node_js: 9 | - '7' 10 | - '6' 11 | - '4' 12 | script: 13 | - yarn run build 14 | after_success: 15 | - yarn run build 16 | - yarn run semantic-release 17 | branches: 18 | except: 19 | - /^v\d+\.\d+\.\d+$/ 20 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "javascript.validate.enable": false, 4 | "flowide.enabled": true, 5 | "flowide.useCodeSnippetsOnFunctionSuggest": true, 6 | "flowide.pathToFlow": "node_modules/.bin/flow-bin" 7 | } -------------------------------------------------------------------------------- /API.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### Table of Contents 4 | 5 | - [YGLiteralValue](#ygliteralvalue) 6 | - [NodeStyle](#nodestyle) 7 | - [YGLayoutResult](#yglayoutresult) 8 | - [YogaNode](#yoganode) 9 | - [children](#children) 10 | - [calculateLayout](#calculatelayout) 11 | - [insertChild](#insertchild) 12 | - [removeChild](#removechild) 13 | - [getChildCount](#getchildcount) 14 | - [getParent](#getparent) 15 | - [getChild](#getchild) 16 | - [free](#free) 17 | - [freeRecursive](#freerecursive) 18 | - [setMeasureFunc](#setmeasurefunc) 19 | - [unsetMeasureFunc](#unsetmeasurefunc) 20 | - [markDirty](#markdirty) 21 | - [isDirty](#isdirty) 22 | - [style](#style) 23 | - [layout](#layout) 24 | 25 | ## YGLiteralValue 26 | 27 | Value that can generally be represented as either a number, a unit suffixed string (i.e. "10px"), 28 | or in some cases a keyword (i.e. "auto") 29 | 30 | ## NodeStyle 31 | 32 | Layout related style properties used to calculate layout. 33 | 34 | Type: {left: [YGLiteralValue](#ygliteralvalue)?, right: [YGLiteralValue](#ygliteralvalue)?, top: [YGLiteralValue](#ygliteralvalue)?, bottom: [YGLiteralValue](#ygliteralvalue)?, alignContent: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, alignItems: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, alignSelf: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, flexDirection: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, flexWrap: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, justifyContent: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, margin: [YGLiteralValue](#ygliteralvalue)?, marginBottom: [YGLiteralValue](#ygliteralvalue)?, marginHorizontal: [YGLiteralValue](#ygliteralvalue)?, marginLeft: [YGLiteralValue](#ygliteralvalue)?, marginRight: [YGLiteralValue](#ygliteralvalue)?, marginTop: [YGLiteralValue](#ygliteralvalue)?, marginVertical: [YGLiteralValue](#ygliteralvalue)?, overflow: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, display: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?, flex: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?, flexBasis: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?, flexGrow: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?, flexShrink: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?, width: [YGLiteralValue](#ygliteralvalue)?, height: [YGLiteralValue](#ygliteralvalue)?, minWidth: [YGLiteralValue](#ygliteralvalue)?, minHeight: [YGLiteralValue](#ygliteralvalue)?, maxWidth: [YGLiteralValue](#ygliteralvalue)?, maxHeight: [YGLiteralValue](#ygliteralvalue)?, borderWidth: [YGLiteralValue](#ygliteralvalue)?, borderWidthBottom: [YGLiteralValue](#ygliteralvalue)?, borderWidthHorizontal: [YGLiteralValue](#ygliteralvalue)?, borderWidthLeft: [YGLiteralValue](#ygliteralvalue)?, borderWidthRight: [YGLiteralValue](#ygliteralvalue)?, borderWidthTop: [YGLiteralValue](#ygliteralvalue)?, borderWidthVertical: [YGLiteralValue](#ygliteralvalue)?, padding: [YGLiteralValue](#ygliteralvalue)?, paddingBottom: [YGLiteralValue](#ygliteralvalue)?, paddingHorizontal: [YGLiteralValue](#ygliteralvalue)?, paddingLeft: [YGLiteralValue](#ygliteralvalue)?, paddingRight: [YGLiteralValue](#ygliteralvalue)?, paddingTop: [YGLiteralValue](#ygliteralvalue)?, paddingVertical: [YGLiteralValue](#ygliteralvalue)?, position: [string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?} 35 | 36 | **Properties** 37 | 38 | - `left` **[YGLiteralValue](#ygliteralvalue)?** 39 | - `right` **[YGLiteralValue](#ygliteralvalue)?** 40 | - `top` **[YGLiteralValue](#ygliteralvalue)?** 41 | - `bottom` **[YGLiteralValue](#ygliteralvalue)?** 42 | - `alignContent` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 43 | - `alignItems` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 44 | - `alignSelf` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 45 | - `flexDirection` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 46 | - `flexWrap` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 47 | - `justifyContent` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 48 | - `margin` **[YGLiteralValue](#ygliteralvalue)?** 49 | - `marginBottom` **[YGLiteralValue](#ygliteralvalue)?** 50 | - `marginHorizontal` **[YGLiteralValue](#ygliteralvalue)?** 51 | - `marginLeft` **[YGLiteralValue](#ygliteralvalue)?** 52 | - `marginRight` **[YGLiteralValue](#ygliteralvalue)?** 53 | - `marginTop` **[YGLiteralValue](#ygliteralvalue)?** 54 | - `marginVertical` **[YGLiteralValue](#ygliteralvalue)?** 55 | - `overflow` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 56 | - `display` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 57 | - `flex` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** 58 | - `flexBasis` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** 59 | - `flexGrow` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** 60 | - `flexShrink` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)?** 61 | - `width` **[YGLiteralValue](#ygliteralvalue)?** 62 | - `height` **[YGLiteralValue](#ygliteralvalue)?** 63 | - `minWidth` **[YGLiteralValue](#ygliteralvalue)?** 64 | - `minHeight` **[YGLiteralValue](#ygliteralvalue)?** 65 | - `maxWidth` **[YGLiteralValue](#ygliteralvalue)?** 66 | - `maxHeight` **[YGLiteralValue](#ygliteralvalue)?** 67 | - `borderWidth` **[YGLiteralValue](#ygliteralvalue)?** 68 | - `borderWidthBottom` **[YGLiteralValue](#ygliteralvalue)?** 69 | - `borderWidthHorizontal` **[YGLiteralValue](#ygliteralvalue)?** 70 | - `borderWidthLeft` **[YGLiteralValue](#ygliteralvalue)?** 71 | - `borderWidthRight` **[YGLiteralValue](#ygliteralvalue)?** 72 | - `borderWidthTop` **[YGLiteralValue](#ygliteralvalue)?** 73 | - `borderWidthVertical` **[YGLiteralValue](#ygliteralvalue)?** 74 | - `padding` **[YGLiteralValue](#ygliteralvalue)?** 75 | - `paddingBottom` **[YGLiteralValue](#ygliteralvalue)?** 76 | - `paddingHorizontal` **[YGLiteralValue](#ygliteralvalue)?** 77 | - `paddingLeft` **[YGLiteralValue](#ygliteralvalue)?** 78 | - `paddingRight` **[YGLiteralValue](#ygliteralvalue)?** 79 | - `paddingTop` **[YGLiteralValue](#ygliteralvalue)?** 80 | - `paddingVertical` **[YGLiteralValue](#ygliteralvalue)?** 81 | - `position` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 82 | 83 | ## YGLayoutResult 84 | 85 | Calculated layout from style properties 86 | 87 | Type: {left: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), right: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), top: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), bottom: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), width: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), height: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)} 88 | 89 | **Properties** 90 | 91 | - `left` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 92 | - `right` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 93 | - `top` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 94 | - `bottom` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 95 | - `width` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 96 | - `height` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 97 | 98 | ## YogaNode 99 | 100 | Yoga layout node 101 | 102 | ### children 103 | 104 | The [YogaNode](#yoganode)'s children 105 | 106 | Type: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[YogaNode](#yoganode)?> 107 | 108 | ### calculateLayout 109 | 110 | Recalculate the layout 111 | 112 | **Parameters** 113 | 114 | - `width` **[YGLiteralValue](#ygliteralvalue)** 115 | - `height` **[YGLiteralValue](#ygliteralvalue)** 116 | - `direction` **YGEnum** 117 | 118 | Returns **[YGLayoutResult](#yglayoutresult)** 119 | 120 | ### insertChild 121 | 122 | Insert a child at the specified index 123 | 124 | **Parameters** 125 | 126 | - `child` **[YogaNode](#yoganode)** 127 | - `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 128 | 129 | ### removeChild 130 | 131 | Remove a child node 132 | 133 | **Parameters** 134 | 135 | - `child` **[YogaNode](#yoganode)** 136 | 137 | ### getChildCount 138 | 139 | Get total number of children 140 | 141 | Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 142 | 143 | ### getParent 144 | 145 | Get the parent of the node 146 | 147 | Returns **YGNode** 148 | 149 | ### getChild 150 | 151 | Get a child at a given index of a node 152 | 153 | **Parameters** 154 | 155 | - `index` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 156 | 157 | Returns **YGNode** 158 | 159 | ### free 160 | 161 | Purge the node and it's memory 162 | 163 | ### freeRecursive 164 | 165 | Pure the node and all it's children recursively. 166 | 167 | ### setMeasureFunc 168 | 169 | Set the measure function used for nodes who's dimensions are determined outside 170 | of Yoga 171 | 172 | **Parameters** 173 | 174 | - `func` **YGMeasureFunc** 175 | 176 | ### unsetMeasureFunc 177 | 178 | Clear the node's measure function 179 | 180 | ### markDirty 181 | 182 | Explicitly mark the node as dirty 183 | 184 | ### isDirty 185 | 186 | Get the dirtiness of the node. 187 | 188 | Returns **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 189 | 190 | ### style 191 | 192 | Layout-related style properties which dictate the resulting layout 193 | 194 | Type: [NodeStyle](#nodestyle) 195 | 196 | ### layout 197 | 198 | The calculated layout result. 199 | 200 | Type: [YGLayoutResult](#yglayoutresult) 201 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # YogaJS [![Build Status](https://travis-ci.org/vincentriemer/yoga-js.svg?branch=master)](https://travis-ci.org/vincentriemer/yoga-js) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 2 | 3 | Idiomatic JavaScript API for the Yoga layout engine. 4 | 5 | [Documentation](API.md) -------------------------------------------------------------------------------- /config/rollup.base.config.js: -------------------------------------------------------------------------------- 1 | import babel from "rollup-plugin-babel"; 2 | 3 | export default { 4 | entry: "src/index.js", 5 | external: ["yoga-layout"], 6 | onwarn: (warning, next) => { 7 | if (["THIS_IS_UNDEFINED", "EVAL"].indexOf(warning.code) !== -1) return; 8 | console.error(warning.message); 9 | }, 10 | plugins: [ 11 | babel({ 12 | exclude: "node_modules/**", 13 | }), 14 | ], 15 | }; 16 | -------------------------------------------------------------------------------- /config/rollup.cjs.config.js: -------------------------------------------------------------------------------- 1 | import baseConfig from "./rollup.base.config"; 2 | 3 | export default Object.assign({}, baseConfig, { 4 | dest: "dist/yogajs.cjs.js", 5 | format: "cjs", 6 | }); 7 | -------------------------------------------------------------------------------- /config/rollup.es.config.js: -------------------------------------------------------------------------------- 1 | import baseConfig from "./rollup.base.config"; 2 | 3 | export default Object.assign({}, baseConfig, { 4 | dest: "dist/yogajs.js", 5 | format: "es", 6 | }); 7 | -------------------------------------------------------------------------------- /config/rollup.umd.config.js: -------------------------------------------------------------------------------- 1 | import baseConfig from "./rollup.base.config"; 2 | 3 | export default Object.assign({}, baseConfig, { 4 | dest: "dist/yogajs.umd.js", 5 | format: "umd", 6 | moduleName: "YogaJS", 7 | globals: { 8 | "yoga-layout": "Yoga", 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /flow-typed/npm/flow-bin_v0.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583 2 | // flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x 3 | 4 | declare module "flow-bin" { 5 | declare module.exports: string; 6 | } 7 | -------------------------------------------------------------------------------- /flow-typed/npm/flow-typed_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 35df46cf114d68bfbe90ccfcc1fbc42c 2 | // flow-typed version: <>/flow-typed_v^2.1.1/flow_v0.44.2 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'flow-typed' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'flow-typed' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'flow-typed/dist/cli' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'flow-typed/dist/commands/create-stub' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'flow-typed/dist/commands/install' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'flow-typed/dist/commands/runTests' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'flow-typed/dist/commands/search' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'flow-typed/dist/commands/update-cache' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'flow-typed/dist/commands/update' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'flow-typed/dist/commands/validateDefs' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'flow-typed/dist/commands/version' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'flow-typed/dist/lib/cacheRepoUtils' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'flow-typed/dist/lib/codeSign' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'flow-typed/dist/lib/fileUtils' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'flow-typed/dist/lib/flowProjectUtils' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module 'flow-typed/dist/lib/flowVersion' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module 'flow-typed/dist/lib/git' { 82 | declare module.exports: any; 83 | } 84 | 85 | declare module 'flow-typed/dist/lib/github' { 86 | declare module.exports: any; 87 | } 88 | 89 | declare module 'flow-typed/dist/lib/isInFlowTypedRepo' { 90 | declare module.exports: any; 91 | } 92 | 93 | declare module 'flow-typed/dist/lib/libDefs' { 94 | declare module.exports: any; 95 | } 96 | 97 | declare module 'flow-typed/dist/lib/node' { 98 | declare module.exports: any; 99 | } 100 | 101 | declare module 'flow-typed/dist/lib/npm/npmLibDefs' { 102 | declare module.exports: any; 103 | } 104 | 105 | declare module 'flow-typed/dist/lib/npm/npmProjectUtils' { 106 | declare module.exports: any; 107 | } 108 | 109 | declare module 'flow-typed/dist/lib/semver' { 110 | declare module.exports: any; 111 | } 112 | 113 | declare module 'flow-typed/dist/lib/stubUtils' { 114 | declare module.exports: any; 115 | } 116 | 117 | declare module 'flow-typed/dist/lib/validationErrors' { 118 | declare module.exports: any; 119 | } 120 | 121 | // Filename aliases 122 | declare module 'flow-typed/dist/cli.js' { 123 | declare module.exports: $Exports<'flow-typed/dist/cli'>; 124 | } 125 | declare module 'flow-typed/dist/commands/create-stub.js' { 126 | declare module.exports: $Exports<'flow-typed/dist/commands/create-stub'>; 127 | } 128 | declare module 'flow-typed/dist/commands/install.js' { 129 | declare module.exports: $Exports<'flow-typed/dist/commands/install'>; 130 | } 131 | declare module 'flow-typed/dist/commands/runTests.js' { 132 | declare module.exports: $Exports<'flow-typed/dist/commands/runTests'>; 133 | } 134 | declare module 'flow-typed/dist/commands/search.js' { 135 | declare module.exports: $Exports<'flow-typed/dist/commands/search'>; 136 | } 137 | declare module 'flow-typed/dist/commands/update-cache.js' { 138 | declare module.exports: $Exports<'flow-typed/dist/commands/update-cache'>; 139 | } 140 | declare module 'flow-typed/dist/commands/update.js' { 141 | declare module.exports: $Exports<'flow-typed/dist/commands/update'>; 142 | } 143 | declare module 'flow-typed/dist/commands/validateDefs.js' { 144 | declare module.exports: $Exports<'flow-typed/dist/commands/validateDefs'>; 145 | } 146 | declare module 'flow-typed/dist/commands/version.js' { 147 | declare module.exports: $Exports<'flow-typed/dist/commands/version'>; 148 | } 149 | declare module 'flow-typed/dist/lib/cacheRepoUtils.js' { 150 | declare module.exports: $Exports<'flow-typed/dist/lib/cacheRepoUtils'>; 151 | } 152 | declare module 'flow-typed/dist/lib/codeSign.js' { 153 | declare module.exports: $Exports<'flow-typed/dist/lib/codeSign'>; 154 | } 155 | declare module 'flow-typed/dist/lib/fileUtils.js' { 156 | declare module.exports: $Exports<'flow-typed/dist/lib/fileUtils'>; 157 | } 158 | declare module 'flow-typed/dist/lib/flowProjectUtils.js' { 159 | declare module.exports: $Exports<'flow-typed/dist/lib/flowProjectUtils'>; 160 | } 161 | declare module 'flow-typed/dist/lib/flowVersion.js' { 162 | declare module.exports: $Exports<'flow-typed/dist/lib/flowVersion'>; 163 | } 164 | declare module 'flow-typed/dist/lib/git.js' { 165 | declare module.exports: $Exports<'flow-typed/dist/lib/git'>; 166 | } 167 | declare module 'flow-typed/dist/lib/github.js' { 168 | declare module.exports: $Exports<'flow-typed/dist/lib/github'>; 169 | } 170 | declare module 'flow-typed/dist/lib/isInFlowTypedRepo.js' { 171 | declare module.exports: $Exports<'flow-typed/dist/lib/isInFlowTypedRepo'>; 172 | } 173 | declare module 'flow-typed/dist/lib/libDefs.js' { 174 | declare module.exports: $Exports<'flow-typed/dist/lib/libDefs'>; 175 | } 176 | declare module 'flow-typed/dist/lib/node.js' { 177 | declare module.exports: $Exports<'flow-typed/dist/lib/node'>; 178 | } 179 | declare module 'flow-typed/dist/lib/npm/npmLibDefs.js' { 180 | declare module.exports: $Exports<'flow-typed/dist/lib/npm/npmLibDefs'>; 181 | } 182 | declare module 'flow-typed/dist/lib/npm/npmProjectUtils.js' { 183 | declare module.exports: $Exports<'flow-typed/dist/lib/npm/npmProjectUtils'>; 184 | } 185 | declare module 'flow-typed/dist/lib/semver.js' { 186 | declare module.exports: $Exports<'flow-typed/dist/lib/semver'>; 187 | } 188 | declare module 'flow-typed/dist/lib/stubUtils.js' { 189 | declare module.exports: $Exports<'flow-typed/dist/lib/stubUtils'>; 190 | } 191 | declare module 'flow-typed/dist/lib/validationErrors.js' { 192 | declare module.exports: $Exports<'flow-typed/dist/lib/validationErrors'>; 193 | } 194 | -------------------------------------------------------------------------------- /flow-typed/npm/yoga-layout_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: befaaafa74d0e4786f260cd3e6e350a9 2 | // flow-typed version: <>/yoga-layout_v^1.2.0/flow_v0.44.2 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'yoga-layout' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare type YGEnum = number; 17 | declare type YGLiteralValue = string | number; 18 | 19 | declare class YGValue { 20 | unit: number, 21 | value: number, 22 | 23 | constructor(unit: number, value: number): YGValue, 24 | toString(): string, 25 | valueOf(): number, 26 | } 27 | 28 | declare type YGLayoutResult = { 29 | left: number, 30 | right: number, 31 | top: number, 32 | bottom: number, 33 | width: number, 34 | height: number, 35 | }; 36 | 37 | declare type YGMeasureFuncResult = { width: number, height: number }; 38 | declare type YGMeasureFunc = (width: number, widthMeasureMode: number, height: number, heightMeasureMode: number) => YGMeasureFuncResult; 39 | 40 | declare class YGNode { 41 | // patched prototype functions ================================ 42 | free(): void, 43 | freeRecursive(): void, 44 | calculateLayout( 45 | width?: YGLiteralValue, 46 | height?: YGLiteralValue, 47 | direction?: YGEnum 48 | ): YGLayoutResult, 49 | 50 | // prototype functions ======================================== 51 | reset(): void, 52 | copyStyle(other: YGNode): void, 53 | 54 | // style setters ============================================== 55 | setPosition(edge: YGEnum, position: YGLiteralValue): void, 56 | 57 | setAlignContent(alignContent: YGEnum): void, 58 | setAlignItems(alignItems: YGEnum): void, 59 | setAlignSelf(alignSelf: YGEnum): void, 60 | setFlexDirection(flexDirection: YGEnum): void, 61 | setFlexWrap(flexDirection: YGEnum): void, 62 | setJustifyContent(justifyContent: YGEnum): void, 63 | 64 | setMargin(edge: YGEnum, margin: YGLiteralValue): void, 65 | 66 | setOverflow(overflow: YGEnum): void, 67 | setDisplay(display: YGEnum): void, 68 | 69 | setFlex(flex: number): void, 70 | setFlexBasis(flexBasis: YGLiteralValue): void, 71 | setFlexGrow(flexGrow: number): void, 72 | setFlexShrink(flexShrink: number): void, 73 | 74 | setWidth(width: YGLiteralValue): void, 75 | setHeight(height: YGLiteralValue): void, 76 | 77 | setMinWidth(minWidth: YGLiteralValue): void, 78 | setMinHeight(minHeight: YGLiteralValue): void, 79 | 80 | setMaxWidth(maxWidth: YGLiteralValue): void, 81 | setMaxHeight(maxHeight: YGLiteralValue): void, 82 | 83 | setBorder(edge: YGEnum, border: number): void, 84 | 85 | setPadding(edge: YGEnum, padding: YGLiteralValue): void, 86 | 87 | // style getters ============================================== 88 | getPositionType(): YGEnum, 89 | getPosition(edge: YGEnum): YGValue, 90 | 91 | getAlignContent(): YGEnum, 92 | getAlignItems(): YGEnum, 93 | getAlignSelf(): YGEnum, 94 | getFlexDirection(): YGEnum, 95 | getFlexWrap(): YGEnum, 96 | getJustifyContent(): YGEnum, 97 | 98 | getMargin(edge: YGEnum): YGValue, 99 | 100 | getOverflow(): YGEnum, 101 | getDisplay(): YGEnum, 102 | 103 | getFlexBasis(): YGValue, 104 | getFlexGrow(): number, 105 | getFlexShrink(): number, 106 | 107 | getWidth(): YGValue, 108 | getHeight(): YGValue, 109 | 110 | getMinWidth(): YGValue, 111 | getMidHeight(): YGValue, 112 | 113 | getMaxWidth(): YGValue, 114 | getMaxHeight(): YGValue, 115 | 116 | getAspectRatio(): number, 117 | 118 | getBorder(edge: YGEnum): number, 119 | 120 | getPadding(edge: YGEnum): number, 121 | 122 | // layout inspectors 123 | getComputedLayout(): YGLayoutResult, 124 | 125 | // tree hierarchy mutators 126 | insertChild(child: YGNode, index: number): void, 127 | removeChild(child: YGNode): void, 128 | 129 | // tree hierarchy inspectors 130 | getChildCount(): number, 131 | getParent(): YGNode, 132 | getChild(index: number): YGNode, 133 | 134 | // measure func mutators 135 | setMeasureFunc(func: YGMeasureFunc): void, 136 | unsetMeasureFunc(): void, 137 | 138 | // Dirtiness accessors 139 | markDirty(): void, 140 | isDirty(): boolean 141 | } 142 | 143 | declare module "yoga-layout" { 144 | declare module.exports: { 145 | Node: { 146 | create: () => YGNode, 147 | }, 148 | 149 | // YGEnums 150 | ALIGN_COUNT: number, 151 | ALIGN_AUTO: number, 152 | ALIGN_FLEX_START: number, 153 | ALIGN_CENTER: number, 154 | ALIGN_FLEX_END: number, 155 | ALIGN_STRETCH: number, 156 | ALIGN_BASELINE: number, 157 | ALIGN_SPACE_BETWEEN: number, 158 | ALIGN_SPACE_AROUND: number, 159 | 160 | DIMENSION_COUNT: number, 161 | DIMENSION_WIDTH: number, 162 | DIMENSION_HEIGHT: number, 163 | 164 | DIRECTION_COUNT: number, 165 | DIRECTION_INHERIT: number, 166 | DIRECTION_LTR: number, 167 | DIRECTION_RTL: number, 168 | 169 | DISPLAY_COUNT: number, 170 | DISPLAY_FLEX: number, 171 | DISPLAY_NONE: number, 172 | 173 | EDGE_COUNT: number, 174 | EDGE_LEFT: number, 175 | EDGE_TOP: number, 176 | EDGE_RIGHT: number, 177 | EDGE_BOTTOM: number, 178 | EDGE_START: number, 179 | EDGE_END: number, 180 | EDGE_HORIZONTAL: number, 181 | EDGE_VERTICAL: number, 182 | EDGE_ALL: number, 183 | 184 | EXPERIMENTAL_FEATURE_COUNT: number, 185 | EXPERIMENTAL_FEATURE_ROUNDING: number, 186 | EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS: number, 187 | EXPERIMENTAL_FEATURE_MIN_FLEX_FIX: number, 188 | 189 | FLEX_DIRECTION_COUNT: number, 190 | FLEX_DIRECTION_COLUMN: number, 191 | FLEX_DIRECTION_COLUMN_REVERSE: number, 192 | FLEX_DIRECTION_ROW: number, 193 | FLEX_DIRECTION_ROW_REVERSE: number, 194 | 195 | JUSTIFY_COUNT: number, 196 | JUSTIFY_FLEX_START: number, 197 | JUSTIFY_CENTER: number, 198 | JUSTIFY_FLEX_END: number, 199 | JUSTIFY_SPACE_BETWEEN: number, 200 | JUSTIFY_SPACE_AROUND: number, 201 | 202 | LOG_LEVEL_COUNT: number, 203 | LOG_LEVEL_ERROR: number, 204 | LOG_LEVEL_WARN: number, 205 | LOG_LEVEL_INFO: number, 206 | LOG_LEVEL_DEBUG: number, 207 | LOG_LEVEL_VERBOSE: number, 208 | 209 | MEASURE_MODE_COUNT: number, 210 | MEASURE_MODE_UNDEFINED: number, 211 | MEASURE_MODE_EXACTLY: number, 212 | MEASURE_MODE_AT_MOST: number, 213 | 214 | OVERFLOW_COUNT: number, 215 | OVERFLOW_VISIBLE: number, 216 | OVERFLOW_HIDDEN: number, 217 | OVERFLOW_SCROLL: number, 218 | 219 | POSITION_TYPE_COUNT: number, 220 | POSITION_TYPE_RELATIVE: number, 221 | POSITION_TYPE_ABSOLUTE: number, 222 | 223 | PRINT_OPTIONS_COUNT: number, 224 | PRINT_OPTIONS_LAYOUT: number, 225 | PRINT_OPTIONS_STYLE: number, 226 | PRINT_OPTIONS_CHILDREN: number, 227 | 228 | UNIT_COUNT: number, 229 | UNIT_UNDEFINED: number, 230 | UNIT_POINT: number, 231 | UNIT_PERCENT: number, 232 | UNIT_AUTO: number, 233 | 234 | WRAP_COUNT: number, 235 | WRAP_NO_WRAP: number, 236 | WRAP_WRAP: number, 237 | WRAP_WRAP_REVERSE: number, 238 | }; 239 | } 240 | declare module "yoga-layout/build/Release/nbind" { 241 | declare module.exports: any; 242 | } 243 | declare module "yoga-layout/sources/entry-browser" { 244 | declare module.exports: any; 245 | } 246 | declare module "yoga-layout/sources/entry-common" { 247 | declare module.exports: any; 248 | } 249 | declare module "yoga-layout/sources/entry-node" { 250 | declare module.exports: any; 251 | } 252 | declare module "yoga-layout/sources/YGEnums" { 253 | declare module.exports: any; 254 | } 255 | declare module "yoga-layout/tests/Benchmarks/YGBenchmark" { 256 | declare module.exports: any; 257 | } 258 | declare module "yoga-layout/tests/Facebook.Yoga/YGAbsolutePositionTest" { 259 | declare module.exports: any; 260 | } 261 | declare module "yoga-layout/tests/Facebook.Yoga/YGAlignContentTest" { 262 | declare module.exports: any; 263 | } 264 | declare module "yoga-layout/tests/Facebook.Yoga/YGAlignItemsTest" { 265 | declare module.exports: any; 266 | } 267 | declare module "yoga-layout/tests/Facebook.Yoga/YGAlignSelfTest" { 268 | declare module.exports: any; 269 | } 270 | declare module "yoga-layout/tests/Facebook.Yoga/YGBorderTest" { 271 | declare module.exports: any; 272 | } 273 | declare module "yoga-layout/tests/Facebook.Yoga/YGComputedBorderTest" { 274 | declare module.exports: any; 275 | } 276 | declare module "yoga-layout/tests/Facebook.Yoga/YGComputedMarginTest" { 277 | declare module.exports: any; 278 | } 279 | declare module "yoga-layout/tests/Facebook.Yoga/YGComputedPaddingTest" { 280 | declare module.exports: any; 281 | } 282 | declare module "yoga-layout/tests/Facebook.Yoga/YGDimensionTest" { 283 | declare module.exports: any; 284 | } 285 | declare module "yoga-layout/tests/Facebook.Yoga/YGDisplayTest" { 286 | declare module.exports: any; 287 | } 288 | declare module "yoga-layout/tests/Facebook.Yoga/YGFlexDirectionTest" { 289 | declare module.exports: any; 290 | } 291 | declare module "yoga-layout/tests/Facebook.Yoga/YGFlexTest" { 292 | declare module.exports: any; 293 | } 294 | declare module "yoga-layout/tests/Facebook.Yoga/YGFlexWrapTest" { 295 | declare module.exports: any; 296 | } 297 | declare module "yoga-layout/tests/Facebook.Yoga/YGJustifyContentTest" { 298 | declare module.exports: any; 299 | } 300 | declare module "yoga-layout/tests/Facebook.Yoga/YGMarginTest" { 301 | declare module.exports: any; 302 | } 303 | declare module "yoga-layout/tests/Facebook.Yoga/YGMeasureCacheTest" { 304 | declare module.exports: any; 305 | } 306 | declare module "yoga-layout/tests/Facebook.Yoga/YGMeasureTest" { 307 | declare module.exports: any; 308 | } 309 | declare module "yoga-layout/tests/Facebook.Yoga/YGMinMaxDimensionTest" { 310 | declare module.exports: any; 311 | } 312 | declare module "yoga-layout/tests/Facebook.Yoga/YGPaddingTest" { 313 | declare module.exports: any; 314 | } 315 | declare module "yoga-layout/tests/Facebook.Yoga/YGPercentageTest" { 316 | declare module.exports: any; 317 | } 318 | declare module "yoga-layout/tests/Facebook.Yoga/YGRoundingTest" { 319 | declare module.exports: any; 320 | } 321 | declare module "yoga-layout/tests/Facebook.Yoga/YGSizeOverflowTest" { 322 | declare module.exports: any; 323 | } 324 | declare module "yoga-layout/tests/run-bench" { 325 | declare module.exports: any; 326 | } 327 | declare module "yoga-layout/tests/tools" { 328 | declare module.exports: any; 329 | } 330 | declare module "yoga-layout/webpack.config" { 331 | declare module.exports: any; 332 | 333 | // Filename aliases 334 | } 335 | declare module "yoga-layout/build/Release/nbind.js" { 336 | declare module.exports: $Exports<"yoga-layout/build/Release/nbind">; 337 | } 338 | declare module "yoga-layout/sources/entry-browser.js" { 339 | declare module.exports: $Exports<"yoga-layout/sources/entry-browser">; 340 | } 341 | declare module "yoga-layout/sources/entry-common.js" { 342 | declare module.exports: $Exports<"yoga-layout/sources/entry-common">; 343 | } 344 | declare module "yoga-layout/sources/entry-node.js" { 345 | declare module.exports: $Exports<"yoga-layout/sources/entry-node">; 346 | } 347 | declare module "yoga-layout/sources/YGEnums.js" { 348 | declare module.exports: $Exports<"yoga-layout/sources/YGEnums">; 349 | } 350 | declare module "yoga-layout/tests/Benchmarks/YGBenchmark.js" { 351 | declare module.exports: $Exports<"yoga-layout/tests/Benchmarks/YGBenchmark">; 352 | } 353 | declare module "yoga-layout/tests/Facebook.Yoga/YGAbsolutePositionTest.js" { 354 | declare module.exports: $Exports< 355 | "yoga-layout/tests/Facebook.Yoga/YGAbsolutePositionTest" 356 | >; 357 | } 358 | declare module "yoga-layout/tests/Facebook.Yoga/YGAlignContentTest.js" { 359 | declare module.exports: $Exports< 360 | "yoga-layout/tests/Facebook.Yoga/YGAlignContentTest" 361 | >; 362 | } 363 | declare module "yoga-layout/tests/Facebook.Yoga/YGAlignItemsTest.js" { 364 | declare module.exports: $Exports< 365 | "yoga-layout/tests/Facebook.Yoga/YGAlignItemsTest" 366 | >; 367 | } 368 | declare module "yoga-layout/tests/Facebook.Yoga/YGAlignSelfTest.js" { 369 | declare module.exports: $Exports< 370 | "yoga-layout/tests/Facebook.Yoga/YGAlignSelfTest" 371 | >; 372 | } 373 | declare module "yoga-layout/tests/Facebook.Yoga/YGBorderTest.js" { 374 | declare module.exports: $Exports< 375 | "yoga-layout/tests/Facebook.Yoga/YGBorderTest" 376 | >; 377 | } 378 | declare module "yoga-layout/tests/Facebook.Yoga/YGComputedBorderTest.js" { 379 | declare module.exports: $Exports< 380 | "yoga-layout/tests/Facebook.Yoga/YGComputedBorderTest" 381 | >; 382 | } 383 | declare module "yoga-layout/tests/Facebook.Yoga/YGComputedMarginTest.js" { 384 | declare module.exports: $Exports< 385 | "yoga-layout/tests/Facebook.Yoga/YGComputedMarginTest" 386 | >; 387 | } 388 | declare module "yoga-layout/tests/Facebook.Yoga/YGComputedPaddingTest.js" { 389 | declare module.exports: $Exports< 390 | "yoga-layout/tests/Facebook.Yoga/YGComputedPaddingTest" 391 | >; 392 | } 393 | declare module "yoga-layout/tests/Facebook.Yoga/YGDimensionTest.js" { 394 | declare module.exports: $Exports< 395 | "yoga-layout/tests/Facebook.Yoga/YGDimensionTest" 396 | >; 397 | } 398 | declare module "yoga-layout/tests/Facebook.Yoga/YGDisplayTest.js" { 399 | declare module.exports: $Exports< 400 | "yoga-layout/tests/Facebook.Yoga/YGDisplayTest" 401 | >; 402 | } 403 | declare module "yoga-layout/tests/Facebook.Yoga/YGFlexDirectionTest.js" { 404 | declare module.exports: $Exports< 405 | "yoga-layout/tests/Facebook.Yoga/YGFlexDirectionTest" 406 | >; 407 | } 408 | declare module "yoga-layout/tests/Facebook.Yoga/YGFlexTest.js" { 409 | declare module.exports: $Exports< 410 | "yoga-layout/tests/Facebook.Yoga/YGFlexTest" 411 | >; 412 | } 413 | declare module "yoga-layout/tests/Facebook.Yoga/YGFlexWrapTest.js" { 414 | declare module.exports: $Exports< 415 | "yoga-layout/tests/Facebook.Yoga/YGFlexWrapTest" 416 | >; 417 | } 418 | declare module "yoga-layout/tests/Facebook.Yoga/YGJustifyContentTest.js" { 419 | declare module.exports: $Exports< 420 | "yoga-layout/tests/Facebook.Yoga/YGJustifyContentTest" 421 | >; 422 | } 423 | declare module "yoga-layout/tests/Facebook.Yoga/YGMarginTest.js" { 424 | declare module.exports: $Exports< 425 | "yoga-layout/tests/Facebook.Yoga/YGMarginTest" 426 | >; 427 | } 428 | declare module "yoga-layout/tests/Facebook.Yoga/YGMeasureCacheTest.js" { 429 | declare module.exports: $Exports< 430 | "yoga-layout/tests/Facebook.Yoga/YGMeasureCacheTest" 431 | >; 432 | } 433 | declare module "yoga-layout/tests/Facebook.Yoga/YGMeasureTest.js" { 434 | declare module.exports: $Exports< 435 | "yoga-layout/tests/Facebook.Yoga/YGMeasureTest" 436 | >; 437 | } 438 | declare module "yoga-layout/tests/Facebook.Yoga/YGMinMaxDimensionTest.js" { 439 | declare module.exports: $Exports< 440 | "yoga-layout/tests/Facebook.Yoga/YGMinMaxDimensionTest" 441 | >; 442 | } 443 | declare module "yoga-layout/tests/Facebook.Yoga/YGPaddingTest.js" { 444 | declare module.exports: $Exports< 445 | "yoga-layout/tests/Facebook.Yoga/YGPaddingTest" 446 | >; 447 | } 448 | declare module "yoga-layout/tests/Facebook.Yoga/YGPercentageTest.js" { 449 | declare module.exports: $Exports< 450 | "yoga-layout/tests/Facebook.Yoga/YGPercentageTest" 451 | >; 452 | } 453 | declare module "yoga-layout/tests/Facebook.Yoga/YGRoundingTest.js" { 454 | declare module.exports: $Exports< 455 | "yoga-layout/tests/Facebook.Yoga/YGRoundingTest" 456 | >; 457 | } 458 | declare module "yoga-layout/tests/Facebook.Yoga/YGSizeOverflowTest.js" { 459 | declare module.exports: $Exports< 460 | "yoga-layout/tests/Facebook.Yoga/YGSizeOverflowTest" 461 | >; 462 | } 463 | declare module "yoga-layout/tests/run-bench.js" { 464 | declare module.exports: $Exports<"yoga-layout/tests/run-bench">; 465 | } 466 | declare module "yoga-layout/tests/tools.js" { 467 | declare module.exports: $Exports<"yoga-layout/tests/tools">; 468 | } 469 | declare module "yoga-layout/webpack.config.js" { 470 | declare module.exports: $Exports<"yoga-layout/webpack.config">; 471 | } 472 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "yoga-js", 3 | "version": "0.0.0-development", 4 | "description": "Idiomatic JavaScript API for the Yoga layout engine", 5 | "author": "Vincent Riemer", 6 | "license": "MIT", 7 | "main": "dist/yogajs.cjs.js", 8 | "module": "dist/yogajs.js", 9 | "peerDependencies": { 10 | "yoga-layout": "^1.2.0" 11 | }, 12 | "release": { 13 | "branch": "master" 14 | }, 15 | "publishConfig": { 16 | "tag": "latest" 17 | }, 18 | "devDependencies": { 19 | "babel-core": "^6.24.1", 20 | "babel-plugin-syntax-flow": "^6.18.0", 21 | "babel-plugin-transform-class-properties": "^6.24.1", 22 | "babel-plugin-transform-flow-strip-types": "^6.22.0", 23 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 24 | "babel-preset-es2015": "^6.24.1", 25 | "commitizen": "^2.9.6", 26 | "conventional-changelog-lint": "^1.1.9", 27 | "cz-conventional-changelog": "^2.0.0", 28 | "documentation": "^4.0.0-rc.1", 29 | "flow-bin": "^0.44.2", 30 | "flow-typed": "^2.1.1", 31 | "husky": "^0.13.3", 32 | "npm-run-all": "^4.0.2", 33 | "rimraf": "^2.6.1", 34 | "rollup": "^0.41.6", 35 | "rollup-plugin-babel": "^2.7.1", 36 | "semantic-release": "^6.3.2", 37 | "yoga-layout": "^1.2.0" 38 | }, 39 | "scripts": { 40 | "clean": "rimraf dist", 41 | "clean:docs": "rimraf API.md", 42 | "commit": "git-cz", 43 | "precommit": "yarn run build:docs", 44 | "commitmsg": "conventional-changelog-lint -e", 45 | "flow": "flow", 46 | "prebuild:docs": "yarn run clean:docs", 47 | "build:docs": "documentation build src/index.js -f md -o API.md", 48 | "postbuild:docs": "git add API.md", 49 | "build:es": "rollup -c config/rollup.es.config.js", 50 | "build:cjs": "rollup -c config/rollup.cjs.config.js", 51 | "build:umd": "rollup -c config/rollup.umd.config.js", 52 | "build:flow": "flow gen-flow-files ./src/index.js > ./dist/yogajs.js.flow", 53 | "build": "npm-run-all build:{es,cjs,umd,flow}", 54 | "prebuild": "yarn run clean", 55 | "semantic-release": "semantic-release pre && npm publish && semantic-release post" 56 | }, 57 | "repository": { 58 | "type": "git", 59 | "url": "https://github.com/vincentriemer/yoga-js.git" 60 | }, 61 | "config": { 62 | "commitizen": { 63 | "path": "./node_modules/cz-conventional-changelog" 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | import Yoga from "yoga-layout"; 3 | 4 | /** 5 | * Value that can generally be represented as either a number, a unit suffixed string (i.e. "10px"), 6 | * or in some cases a keyword (i.e. "auto") 7 | */ 8 | declare type YGLiteralValue = string | number; 9 | 10 | /** 11 | * Layout related style properties used to calculate layout. 12 | */ 13 | type NodeStyle = { 14 | left?: YGLiteralValue, 15 | right?: YGLiteralValue, 16 | top?: YGLiteralValue, 17 | bottom?: YGLiteralValue, 18 | 19 | alignContent?: string, 20 | alignItems?: string, 21 | alignSelf?: string, 22 | flexDirection?: string, 23 | flexWrap?: string, 24 | justifyContent?: string, 25 | 26 | margin?: YGLiteralValue, 27 | marginBottom?: YGLiteralValue, 28 | marginHorizontal?: YGLiteralValue, 29 | marginLeft?: YGLiteralValue, 30 | marginRight?: YGLiteralValue, 31 | marginTop?: YGLiteralValue, 32 | marginVertical?: YGLiteralValue, 33 | 34 | overflow?: string, 35 | display?: string, 36 | 37 | flex?: number, 38 | flexBasis?: number, 39 | flexGrow?: number, 40 | flexShrink?: number, 41 | 42 | width?: YGLiteralValue, 43 | height?: YGLiteralValue, 44 | 45 | minWidth?: YGLiteralValue, 46 | minHeight?: YGLiteralValue, 47 | 48 | maxWidth?: YGLiteralValue, 49 | maxHeight?: YGLiteralValue, 50 | 51 | borderWidth?: YGLiteralValue, 52 | borderWidthBottom?: YGLiteralValue, 53 | borderWidthHorizontal?: YGLiteralValue, 54 | borderWidthLeft?: YGLiteralValue, 55 | borderWidthRight?: YGLiteralValue, 56 | borderWidthTop?: YGLiteralValue, 57 | borderWidthVertical?: YGLiteralValue, 58 | 59 | padding?: YGLiteralValue, 60 | paddingBottom?: YGLiteralValue, 61 | paddingHorizontal?: YGLiteralValue, 62 | paddingLeft?: YGLiteralValue, 63 | paddingRight?: YGLiteralValue, 64 | paddingTop?: YGLiteralValue, 65 | paddingVertical?: YGLiteralValue, 66 | 67 | position?: string 68 | }; 69 | 70 | /** 71 | * Calculated layout from style properties 72 | */ 73 | type YGLayoutResult = { 74 | left: number, 75 | right: number, 76 | top: number, 77 | bottom: number, 78 | width: number, 79 | height: number 80 | }; 81 | 82 | type EnumMapping = { [string]: number }; 83 | 84 | type SetterMap = { 85 | [propName: string]: ( 86 | node: YGNode, 87 | target: NodeStyle, 88 | property: string, 89 | value: any 90 | ) => boolean 91 | }; 92 | 93 | type NodeEdgeSetter = (edge: YGEnum, value: YGLiteralValue) => void; 94 | 95 | export const MEASURE_MODE_EXACTLY = Yoga.MEASURE_MODE_EXACTLY; 96 | export const MEASURE_MODE_UNDEFINED = Yoga.MEASURE_MODE_UNDEFINED; 97 | export const MEASURE_MODE_COUNT = Yoga.MEASURE_MODE_COUNT; 98 | export const MEASURE_MODE_AT_MOST = Yoga.MEASURE_MODE_AT_MOST; 99 | 100 | const BASE_NODE = Yoga.Node.create(); 101 | 102 | const positionEdgeMapping: EnumMapping = { 103 | left: Yoga.EDGE_LEFT, 104 | right: Yoga.EDGE_RIGHT, 105 | top: Yoga.EDGE_TOP, 106 | bottom: Yoga.EDGE_BOTTOM 107 | }; 108 | 109 | const marginEdgeMapping: EnumMapping = { 110 | marginBottom: Yoga.EDGE_BOTTOM, 111 | marginHorizontal: Yoga.EDGE_HORIZONTAL, 112 | marginLeft: Yoga.EDGE_LEFT, 113 | marginRight: Yoga.EDGE_RIGHT, 114 | marginTop: Yoga.EDGE_TOP, 115 | marginVertical: Yoga.EDGE_VERTICAL 116 | }; 117 | 118 | const paddingEdgeMapping: EnumMapping = { 119 | paddingBottom: Yoga.EDGE_BOTTOM, 120 | paddingHorizontal: Yoga.EDGE_HORIZONTAL, 121 | paddingLeft: Yoga.EDGE_LEFT, 122 | paddingRight: Yoga.EDGE_RIGHT, 123 | paddingTop: Yoga.EDGE_TOP, 124 | paddingVertical: Yoga.EDGE_VERTICAL 125 | }; 126 | 127 | const borderEdgeMapping: EnumMapping = { 128 | borderBottomWdith: Yoga.EDGE_BOTTOM, 129 | borderLeftWidth: Yoga.EDGE_LEFT, 130 | borderRightWidth: Yoga.EDGE_RIGHT, 131 | borderTopWidth: Yoga.EDGE_TOP 132 | }; 133 | 134 | const alignEnumMapping: EnumMapping = { 135 | auto: Yoga.ALIGN_AUTO, 136 | "flex-start": Yoga.ALIGN_FLEX_START, 137 | center: Yoga.ALIGN_CENTER, 138 | "flex-end": Yoga.ALIGN_FLEX_END, 139 | stretch: Yoga.ALIGN_STRETCH, 140 | baseline: Yoga.ALIGN_BASELINE, 141 | "space-between": Yoga.ALIGN_SPACE_BETWEEN, 142 | "space-around": Yoga.ALIGN_SPACE_AROUND 143 | }; 144 | 145 | const flexDirectionEnumMapping: EnumMapping = { 146 | column: Yoga.FLEX_DIRECTION_COLUMN, 147 | "column-reverse": Yoga.FLEX_DIRECTION_COLUMN_REVERSE, 148 | row: Yoga.FLEX_DIRECTION_ROW, 149 | "row-reverse": Yoga.FLEX_DIRECTION_ROW_REVERSE 150 | }; 151 | 152 | const flexWrapEnumMapping: EnumMapping = { 153 | "no-wrap": Yoga.WRAP_NO_WRAP, 154 | wrap: Yoga.WRAP_WRAP, 155 | "wrap-reverse": Yoga.WRAP_WRAP_REVERSE 156 | }; 157 | 158 | const justifyContentEnumMapping: EnumMapping = { 159 | "flex-start": Yoga.JUSTIFY_FLEX_START, 160 | center: Yoga.JUSTIFY_CENTER, 161 | "flex-end": Yoga.JUSTIFY_FLEX_END, 162 | "space-between": Yoga.JUSTIFY_SPACE_BETWEEN, 163 | "space-around": Yoga.JUSTIFY_SPACE_AROUND 164 | }; 165 | 166 | const overflowEnumMapping: EnumMapping = { 167 | visible: Yoga.OVERFLOW_VISIBLE, 168 | hidden: Yoga.OVERFLOW_HIDDEN, 169 | scroll: Yoga.OVERFLOW_SCROLL 170 | }; 171 | 172 | const displayEnumMapping: EnumMapping = { 173 | flex: Yoga.DISPLAY_FLEX, 174 | none: Yoga.DISPLAY_NONE 175 | }; 176 | 177 | const positionTypeEnumMapping: EnumMapping = { 178 | relative: Yoga.POSITION_TYPE_RELATIVE, 179 | absolute: Yoga.POSITION_TYPE_ABSOLUTE 180 | }; 181 | 182 | function checkMappingValue(mapping: EnumMapping, value: mixed) { 183 | if (!mapping.hasOwnProperty(value)) { 184 | throw new Error("invalid value"); 185 | } 186 | } 187 | 188 | const POSITION_PROPS = ["left", "right", "top", "bottom"]; 189 | 190 | function shorthandSetter( 191 | node: YGNode, 192 | target: NodeStyle, 193 | property: string, 194 | value: YGLiteralValue, 195 | nodeEdgeSetter: NodeEdgeSetter 196 | ) { 197 | if (typeof value === "string") { 198 | const valueList = value.split(" "); 199 | 200 | if (valueList.length < 1 || valueList.length > 4) return false; 201 | 202 | switch (valueList.length) { 203 | case 1: { 204 | nodeEdgeSetter(Yoga.EDGE_ALL, valueList[0]); 205 | } 206 | case 2: { 207 | nodeEdgeSetter(Yoga.EDGE_VERTICAL, valueList[0]); 208 | nodeEdgeSetter(Yoga.EDGE_HORIZONTAL, valueList[1]); 209 | } 210 | case 3: { 211 | nodeEdgeSetter(Yoga.EDGE_TOP, valueList[0]); 212 | nodeEdgeSetter(Yoga.EDGE_HORIZONTAL, valueList[1]); 213 | nodeEdgeSetter(Yoga.EDGE_BOTTOM, valueList[2]); 214 | } 215 | case 4: { 216 | nodeEdgeSetter(Yoga.EDGE_TOP, valueList[0]); 217 | nodeEdgeSetter(Yoga.EDGE_RIGHT, valueList[1]); 218 | nodeEdgeSetter(Yoga.EDGE_BOTTOM, valueList[2]); 219 | nodeEdgeSetter(Yoga.EDGE_BOTTOM, valueList[3]); 220 | } 221 | } 222 | 223 | return Reflect.set(target, property, value); 224 | } else if (typeof value === "number") { 225 | nodeEdgeSetter(Yoga.EDGE_ALL, value); 226 | return Reflect.set(target, property, value); 227 | } else { 228 | return false; 229 | } 230 | } 231 | 232 | function edgeSetters(edgeMapping: EnumMapping, nodeEdgeSetter: string) { 233 | return Object.keys(edgeMapping).reduce( 234 | (prev, propName) => ({ 235 | ...prev, 236 | [propName]: ( 237 | node: YGNode, 238 | target: NodeStyle, 239 | property: string, 240 | value: YGLiteralValue 241 | ) => { 242 | const edge = edgeMapping[property]; 243 | return setterBase( 244 | node, 245 | target, 246 | property, 247 | value, 248 | nodeEdgeSetter, 249 | edge, 250 | value 251 | ); 252 | } 253 | }), 254 | {} 255 | ); 256 | } 257 | 258 | function setterBase( 259 | node: YGNode, 260 | target, 261 | property, 262 | value, 263 | setterName, 264 | ...setterArgs 265 | ) { 266 | const nodeSetter = (node: { [key: string]: ?Function })[setterName]; 267 | if (typeof nodeSetter === "function") { 268 | nodeSetter.call(node, ...setterArgs); 269 | return Reflect.set(target, property, value); 270 | } else { 271 | return false; 272 | } 273 | } 274 | 275 | function valueSetter(setterName) { 276 | return ( 277 | node: YGNode, 278 | target: NodeStyle, 279 | property: string, 280 | value: YGLiteralValue 281 | ) => setterBase(node, target, property, value, setterName, value); 282 | } 283 | 284 | function enumSetter(enumMapping: EnumMapping, setterName: string) { 285 | return (node: YGNode, target: NodeStyle, property: string, value: string) => { 286 | checkMappingValue(enumMapping, value); 287 | return setterBase( 288 | node, 289 | target, 290 | property, 291 | value, 292 | setterName, 293 | enumMapping[value] 294 | ); 295 | }; 296 | } 297 | 298 | function YGRemoveAllChildren(node: YGNode) { 299 | const childCount = node.getChildCount(); 300 | for (let i = childCount - 1; i >= 0; i--) { 301 | node.removeChild(node.getChild(i)); 302 | } 303 | } 304 | 305 | const styleSetterMap = { 306 | ...edgeSetters(positionEdgeMapping, "setPosition"), 307 | 308 | alignContent: enumSetter(alignEnumMapping, "setAlignContent"), 309 | alignItems: enumSetter(alignEnumMapping, "setAlignItems"), 310 | alignSelf: enumSetter(alignEnumMapping, "setAlignSelf"), 311 | flexDirection: enumSetter(flexDirectionEnumMapping, "setFlexDirection"), 312 | flexWrap: enumSetter(flexWrapEnumMapping, "setFlexWrap"), 313 | justifyContent: enumSetter(justifyContentEnumMapping, "setJustifyContent"), 314 | 315 | ...edgeSetters(marginEdgeMapping, "setMargin"), 316 | margin: (node: YGNode, ...args) => 317 | shorthandSetter(node, ...args, node.setMargin.bind(node)), 318 | 319 | overflow: enumSetter(overflowEnumMapping, "setOverflow"), 320 | display: enumSetter(displayEnumMapping, "setDisplay"), 321 | 322 | flex: valueSetter("setFlex"), 323 | flexBasis: valueSetter("setFlexBasis"), 324 | flexGrow: valueSetter("setFlexGrow"), 325 | flexShrink: valueSetter("setFlexShrink"), 326 | 327 | width: valueSetter("setWidth"), 328 | height: valueSetter("setHeight"), 329 | 330 | minWidth: valueSetter("setMinWidth"), 331 | minHeight: valueSetter("setMinHeight"), 332 | 333 | maxWidth: valueSetter("setMaxHeight"), 334 | maxHeight: valueSetter("setMaxHeight"), 335 | 336 | ...edgeSetters(borderEdgeMapping, "setBorder"), 337 | borderWidth: (node: YGNode, ...args) => 338 | shorthandSetter(node, ...args, node.setBorder.bind(node)), 339 | 340 | ...edgeSetters(paddingEdgeMapping, "setPadding"), 341 | padding: (node: YGNode, ...args) => 342 | shorthandSetter(node, ...args, node.setPadding.bind(node)), 343 | 344 | position: enumSetter(positionTypeEnumMapping, "setPositionType") 345 | }; 346 | 347 | const STYLE_PROPS = Object.keys(styleSetterMap); 348 | 349 | function styleHandlerFactory(node: YGNode) { 350 | return { 351 | get(target: NodeStyle, name: string): ?YGLiteralValue { 352 | if (STYLE_PROPS.includes(name)) { 353 | return Reflect.get(target, name); 354 | } else { 355 | return undefined; 356 | } 357 | }, 358 | set(target: NodeStyle, property: string, value: any): boolean { 359 | if (styleSetterMap.hasOwnProperty(property)) { 360 | return styleSetterMap[property](node, target, property, value); 361 | } 362 | return false; 363 | } 364 | }; 365 | } 366 | 367 | /** 368 | * Yoga layout node 369 | */ 370 | class YogaNode { 371 | /** 372 | * Private YGNode instance providing the native code to perform layout 373 | * @memberof YogaNode 374 | * @private 375 | */ 376 | _node: YGNode; 377 | 378 | /** 379 | * Layout-related style properties which dictate the resulting layout 380 | * @memberof YogaNode 381 | */ 382 | style: NodeStyle; 383 | 384 | /** 385 | * The calculated layout result. 386 | * @memberof YogaNode 387 | */ 388 | +layout: YGLayoutResult; 389 | 390 | /** 391 | * The {@link YogaNode}'s children 392 | */ 393 | children: Array; 394 | 395 | constructor() { 396 | this._node = Yoga.Node.create(); 397 | 398 | // this.children = Object.freeze([]); 399 | this.children = []; 400 | this.style = new Proxy({}, styleHandlerFactory(this._node)); 401 | 402 | // return proxied instance 403 | return new Proxy(this, { 404 | get(target: YogaNode, name: string) { 405 | switch (name) { 406 | case "layout": { 407 | const { 408 | top, 409 | left, 410 | width, 411 | height 412 | } = target._node.getComputedLayout(); 413 | return { top, left, width, height }; 414 | } 415 | default: { 416 | return Reflect.get(target, name); 417 | } 418 | } 419 | }, 420 | 421 | set(target: YogaNode, property: string, value: any) { 422 | if (property === "style") { 423 | if (typeof value === "object") { 424 | target._node.copyStyle(BASE_NODE); 425 | 426 | const processedValue = new Proxy( 427 | {}, 428 | styleHandlerFactory(target._node) 429 | ); 430 | 431 | Object.keys(value).forEach(propName => { 432 | processedValue[propName] = value[propName]; 433 | }); 434 | 435 | return Reflect.set(target, property, processedValue); 436 | } else { 437 | return false; 438 | } 439 | } else if (property === "children") { 440 | if (Array.isArray(value)) { 441 | Reflect.set(target, property, []); 442 | 443 | YGRemoveAllChildren(target._node); 444 | 445 | value.forEach((child, index) => { 446 | if (child instanceof YogaNode) { 447 | target._node.insertChild(child._node, index); 448 | target.children.push(child); 449 | } 450 | }); 451 | 452 | Object.freeze(target.children); 453 | 454 | return true; 455 | } else { 456 | return false; 457 | } 458 | } else { 459 | return Reflect.set(target, property, value); 460 | } 461 | }, 462 | 463 | ownKeys(target: YogaNode) { 464 | return ["style", "layout", "children"]; 465 | }, 466 | 467 | getOwnPropertyDescriptor( 468 | target: YogaNode, 469 | property: string 470 | ): void | Object { 471 | if (["style", "children"].includes(property)) { 472 | return Reflect.getOwnPropertyDescriptor(target, property); 473 | } 474 | 475 | if (property === "layout") { 476 | const { top, left, width, height } = target._node.getComputedLayout(); 477 | return { 478 | configurable: true, 479 | enumerable: true, 480 | writable: false, 481 | value: { 482 | top, 483 | left, 484 | width, 485 | height 486 | } 487 | }; 488 | } 489 | } 490 | }); 491 | } 492 | 493 | /** 494 | * Recalculate the layout 495 | */ 496 | calculateLayout( 497 | width?: YGLiteralValue, 498 | height?: YGLiteralValue, 499 | direction?: YGEnum 500 | ): YGLayoutResult { 501 | return this._node.calculateLayout(width, height, direction); 502 | } 503 | 504 | /** 505 | * Insert a child at the specified index 506 | */ 507 | insertChild(child: YogaNode, index: number) { 508 | this.children[index] = child; 509 | this._node.insertChild(child._node, index); 510 | } 511 | 512 | /** 513 | * Remove a child node 514 | */ 515 | removeChild(child: YogaNode) { 516 | const childIndex = this.children.indexOf(child); 517 | this.children[childIndex] = undefined; 518 | this._node.removeChild(child._node); 519 | } 520 | 521 | /** 522 | * Get total number of children 523 | */ 524 | getChildCount(): number { 525 | return this._node.getChildCount(); 526 | } 527 | 528 | /** 529 | * Get the parent of the node 530 | */ 531 | getParent(): YGNode { 532 | return this._node.getParent(); 533 | } 534 | 535 | /** 536 | * Get a child at a given index of a node 537 | */ 538 | getChild(index: number): YGNode { 539 | return this._node.getChild(index); 540 | } 541 | 542 | /** 543 | * Purge the node and it's memory 544 | */ 545 | free() { 546 | this._node.free(); 547 | } 548 | 549 | /** 550 | * Pure the node and all it's children recursively. 551 | */ 552 | freeRecursive() { 553 | this._node.freeRecursive(); 554 | } 555 | 556 | /** 557 | * Set the measure function used for nodes who's dimensions are determined outside 558 | * of Yoga 559 | */ 560 | setMeasureFunc(func: YGMeasureFunc) { 561 | this._node.setMeasureFunc(func); 562 | } 563 | 564 | /** 565 | * Clear the node's measure function 566 | */ 567 | unsetMeasureFunc() { 568 | this._node.unsetMeasureFunc(); 569 | } 570 | 571 | /** 572 | * Explicitly mark the node as dirty 573 | */ 574 | markDirty() { 575 | this._node.markDirty(); 576 | } 577 | 578 | /** 579 | * Get the dirtiness of the node. 580 | */ 581 | isDirty(): boolean { 582 | return this._node.isDirty(); 583 | } 584 | } 585 | 586 | export default YogaNode; 587 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | import YogaNode from "./src/index"; 2 | 3 | const parent = new YogaNode(); 4 | parent.style = { 5 | width: "500px", 6 | height: "400px", 7 | marginLeft: 40, 8 | top: 20, 9 | flexDirection: "column", 10 | justifyContent: "center", 11 | alignItems: "center", 12 | }; 13 | 14 | const child = new YogaNode(); 15 | child.style = { width: 50, height: 50 }; 16 | parent.children = [child]; 17 | 18 | parent.calculateLayout(); 19 | 20 | parent.style /*?*/; 21 | parent.layout /*?*/; 22 | 23 | child.style /*?*/; 24 | child.layout /*?*/; 25 | -------------------------------------------------------------------------------- /wallaby.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(wallaby) { 2 | return { 3 | files: ["src/index.js", "YogaNode.js"], 4 | tests: ["test.js"], 5 | env: { 6 | type: "node", 7 | }, 8 | compilers: { 9 | "**/*.js": wallaby.compilers.babel(), 10 | }, 11 | }; 12 | }; 13 | --------------------------------------------------------------------------------