Revive JavaScript Bindings (#1177)

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

javascript/tests/YGDirtiedTest.test.js

@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+test("dirtied", () => {
+  const root = Yoga.Node.create();
+  root.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root.setWidth(100);
+  root.setHeight(100);
+
+  root.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR);
+
+  let dirtied = 0;
+  root.setDirtiedFunc(() => {
+    dirtied++;
+  });
+  // only nodes with a measure function can be marked dirty
+  root.setMeasureFunc(() => {});
+
+  expect(dirtied).toBe(0);
+
+  // dirtied func MUST be called in case of explicit dirtying.
+  root.markDirty();
+  expect(dirtied).toBe(1);
+
+  // dirtied func MUST be called ONCE.
+  root.markDirty();
+  expect(dirtied).toBe(1);
+
+  root.freeRecursive();
+});
+
+test("dirtied_propagation", () => {
+  const root = Yoga.Node.create();
+  root.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root.setWidth(100);
+  root.setHeight(100);
+
+  const root_child0 = Yoga.Node.create();
+  root_child0.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root_child0.setWidth(50);
+  root_child0.setHeight(20);
+  root_child0.setMeasureFunc(() => {});
+  root.insertChild(root_child0, 0);
+
+  const root_child1 = Yoga.Node.create();
+  root_child1.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root_child1.setWidth(50);
+  root_child1.setHeight(20);
+  root.insertChild(root_child1, 0);
+
+  root.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR);
+
+  let dirtied = 0;
+  root.setDirtiedFunc(() => {
+    dirtied++;
+  });
+
+  expect(dirtied).toBe(0);
+
+  // dirtied func MUST be called for the first time.
+  root_child0.markDirty();
+  expect(dirtied).toBe(1);
+
+  // dirtied func must NOT be called for the second time.
+  root_child0.markDirty();
+  expect(dirtied).toBe(1);
+
+  root.freeRecursive();
+});
+
+test("dirtied_hierarchy", () => {
+  const root = Yoga.Node.create();
+  root.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root.setWidth(100);
+  root.setHeight(100);
+
+  const root_child0 = Yoga.Node.create();
+  root_child0.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root_child0.setWidth(50);
+  root_child0.setHeight(20);
+  root_child0.setMeasureFunc(() => {});
+  root.insertChild(root_child0, 0);
+
+  const root_child1 = Yoga.Node.create();
+  root_child1.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root_child1.setWidth(50);
+  root_child1.setHeight(20);
+  root_child1.setMeasureFunc(() => {});
+  root.insertChild(root_child1, 0);
+
+  root.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR);
+
+  let dirtied = 0;
+  root_child0.setDirtiedFunc(() => {
+    dirtied++;
+  });
+
+  expect(dirtied).toBe(0);
+
+  // dirtied func must NOT be called for descendants.
+  // NOTE: nodes without a measure function cannot be marked dirty manually,
+  // but nodes with a measure function can not have children.
+  // Update the width to dirty the node instead.
+  root.setWidth(110);
+  expect(dirtied).toBe(0);
+
+  // dirtied func MUST be called in case of explicit dirtying.
+  root_child0.markDirty();
+  expect(dirtied).toBe(1);
+
+  root.freeRecursive();
+});
+
+test("dirtied_reset", () => {
+  const root = Yoga.Node.create();
+  root.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root.setWidth(100);
+  root.setHeight(100);
+  root.setMeasureFunc(() => {});
+
+  root.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR);
+
+  let dirtied = 0;
+  root.setDirtiedFunc(() => {
+    dirtied++;
+  });
+
+  expect(dirtied).toBe(0);
+
+  // dirtied func MUST be called in case of explicit dirtying.
+  root.markDirty();
+  expect(dirtied).toBe(1);
+
+  // recalculate so the root is no longer dirty
+  root.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR);
+
+  root.reset();
+  root.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root.setWidth(100);
+  root.setHeight(100);
+  root.setMeasureFunc(() => {});
+
+  root.markDirty();
+
+  // dirtied func must NOT be called after reset.
+  root.markDirty();
+  expect(dirtied).toBe(1);
+
+  root.freeRecursive();
+});