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

Revive JavaScript Bindings (#1177)

Browse Source 
Summary:
Yoga's JavaScript bindings do not work past Node 10, or on recent versions of Ubuntu even using it. This is due to a reliance on `nbind`, a library which is no longer maintained. `nbind` itself abstracts over `embind` running Emscripten to generate an asm.js build, along with building Node native modules. In the meantime, [yoga-layout-prebuilt](https://www.npmjs.com/package/yoga-layout-prebuilt) has been used by the community instead of the official package.

https://github.com/facebook/yoga/pull/1177 was contributed as a conversion of bindings created using `nbind` to instead use `embind` directly.

I continued building on this to add more:
1. WebAssembly support (required to be async in browsers)
2. CMake + Ninja Build for the 4 flavors
3. TypeScript typings (partially generated)
4. yarn scripts to build (working on macOS, Ubuntu, Windows)
5. A README with some usage and contribution instructions
6. Updated tests to work with Jest, and updated general infra
7. ESLint and clang-format scripts
8. More GitHub actions (and now testing Windows)
9. Probably more I kinda got carried away here lol

The plan is to eventually publish this to NPM, but there is a little bit of work after this before that happens.

Pull Request resolved: https://github.com/facebook/yoga/pull/1177

Test Plan: The bindings pass Jest tests (both manual and generated). GitHub actions added for the different yarn scripts. Did some manual checks on using the library as TS.

Reviewed By: christophpurrer

Differential Revision: D42207782

Pulled By: NickGerleman

fbshipit-source-id: 1dc5ce440f1c2b9705a005bbdcc86f952785d94e
This commit is contained in:
Dmitry Ivakhnenko
2022-12-28 01:27:12 -08:00
committed by Facebook GitHub Bot
parent 8035456330
commit 1813748eaa
110 changed files with 24702 additions and 22470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
javascript/tests/Benchmarks/YGBenchmark.js → javascript/tests/Benchmarks/YGBenchmark.test.js
View File

@@ -5,18 +5,16 @@
* LICENSE file in the root directory of this source tree.
*/
var Yoga = Yoga || require("../../dist/entry-" + process.env.TEST_ENTRY);
const ITERATIONS = 2000;
var ITERATIONS = 2000;
YGBENCHMARK("Stack with flex", function() {
var root = Yoga.Node.create();
YGBENCHMARK("Stack with flex", () => {
const root = Yoga.Node.create();
root.setWidth(100);
root.setHeight(100);
var measureCounter = getMeasureCounter(Yoga);
const measureCounter = getMeasureCounter(Yoga);
for (var i = 0; i < ITERATIONS; i++) {
for (let i = 0; i < ITERATIONS; i++) {
const child = Yoga.Node.create();
child.setMeasureFunc(measureCounter.inc);
child.setFlex(1);
@@ -27,13 +25,13 @@ YGBENCHMARK("Stack with flex", function() {
root.freeRecursive();
});
YGBENCHMARK("Align stretch in undefined axis", function() {
var root = Yoga.Node.create();
YGBENCHMARK("Align stretch in undefined axis", () => {
const root = Yoga.Node.create();
var measureCounter = getMeasureCounter(Yoga);
const measureCounter = getMeasureCounter(Yoga);
for (var i = 0; i < ITERATIONS; i++) {
var child = Yoga.Node.create();
for (let i = 0; i < ITERATIONS; i++) {
const child = Yoga.Node.create();
child.setMeasureFunc(measureCounter.inc);
child.setHeight(20);
root.insertChild(child, 0);
@@ -43,20 +41,20 @@ YGBENCHMARK("Align stretch in undefined axis", function() {
root.freeRecursive();
});
YGBENCHMARK("Nested flex", function() {
var root = Yoga.Node.create();
YGBENCHMARK("Nested flex", () => {
const root = Yoga.Node.create();
var measureCounter = getMeasureCounter(Yoga);
const measureCounter = getMeasureCounter(Yoga);
var iterations = Math.pow(ITERATIONS, 1 / 2);
const iterations = Math.pow(ITERATIONS, 1 / 2);
for (var i = 0; i < iterations; i++) {
var child = Yoga.Node.create();
for (let i = 0; i < iterations; i++) {
const child = Yoga.Node.create();
child.setFlex(1);
root.insertChild(child, 0);
for (var ii = 0; ii < iterations; ii++) {
var grandChild = Yoga.Node.create();
for (let ii = 0; ii < iterations; ii++) {
const grandChild = Yoga.Node.create();
grandChild.setMeasureFunc(measureCounter.inc);
grandChild.setFlex(1);
child.insertChild(grandChild, 0);
@@ -67,35 +65,35 @@ YGBENCHMARK("Nested flex", function() {
root.freeRecursive();
});
YGBENCHMARK("Huge nested layout", function() {
var root = Yoga.Node.create();
YGBENCHMARK("Huge nested layout", () => {
const root = Yoga.Node.create();
var iterations = Math.pow(ITERATIONS, 1 / 4);
const iterations = Math.pow(ITERATIONS, 1 / 4);
for (var i = 0; i < iterations; i++) {
var child = Yoga.Node.create();
for (let i = 0; i < iterations; i++) {
const child = Yoga.Node.create();
child.setFlexGrow(1);
child.setWidth(10);
child.setHeight(10);
root.insertChild(child, 0);
for (var ii = 0; ii < iterations; ii++) {
var grandChild = Yoga.Node.create();
for (let ii = 0; ii < iterations; ii++) {
const grandChild = Yoga.Node.create();
grandChild.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
grandChild.setFlexGrow(1);
grandChild.setWidth(10);
grandChild.setHeight(10);
child.insertChild(grandChild, 0);
for (var iii = 0; iii < iterations; iii++) {
var grandGrandChild = Yoga.Node.create();
for (let iii = 0; iii < iterations; iii++) {
const grandGrandChild = Yoga.Node.create();
grandGrandChild.setFlexGrow(1);
grandGrandChild.setWidth(10);
grandGrandChild.setHeight(10);
grandChild.insertChild(grandGrandChild, 0);
for (var iiii = 0; iiii < iterations; iiii++) {
var grandGrandGrandChild = Yoga.Node.create();
for (let iiii = 0; iiii < iterations; iiii++) {
const grandGrandGrandChild = Yoga.Node.create();
grandGrandGrandChild.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
grandGrandGrandChild.setFlexGrow(1);
grandGrandGrandChild.setWidth(10);