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/src_js/entrypoint/_entryAsync.js

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const wrapAsm = require("../wrapAsm");
+
+module.exports = (loadAsm) => ({
+  loadYoga: () => loadAsm().then(wrapAsm),
+  ...require("../generated/YGEnums"),
+});

javascript/src_js/entrypoint/_entrySync.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const wrapAsm = require("../wrapAsm");
+module.exports = (asm) => wrapAsm(asm());

javascript/src_js/entrypoint/asmjs-async.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const asm = require("../build/asmjs-async");
+module.exports = require("./_entryAsync")(asm);

javascript/src_js/entrypoint/asmjs-sync.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const asm = require("../build/asmjs-sync");
+module.exports = require("./_entrySync")(asm);

javascript/src_js/entrypoint/wasm-async.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const asm = require("../build/wasm-async");
+module.exports = require("./_entryAsync")(asm);

javascript/src_js/entrypoint/wasm-sync.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const asm = require("../build/wasm-sync");
+module.exports = require("./_entrySync")(asm);

javascript/src_js/generated/YGEnums.d.ts

@@ -0,0 +1,320 @@
+/**
+ * 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.
+ */
+
+// @generated by enums.py
+
+type ALIGN_AUTO = 0 & ['ALIGN']
+export const ALIGN_AUTO: ALIGN_AUTO;
+
+type ALIGN_FLEX_START = 1 & ['ALIGN']
+export const ALIGN_FLEX_START: ALIGN_FLEX_START;
+
+type ALIGN_CENTER = 2 & ['ALIGN']
+export const ALIGN_CENTER: ALIGN_CENTER;
+
+type ALIGN_FLEX_END = 3 & ['ALIGN']
+export const ALIGN_FLEX_END: ALIGN_FLEX_END;
+
+type ALIGN_STRETCH = 4 & ['ALIGN']
+export const ALIGN_STRETCH: ALIGN_STRETCH;
+
+type ALIGN_BASELINE = 5 & ['ALIGN']
+export const ALIGN_BASELINE: ALIGN_BASELINE;
+
+type ALIGN_SPACE_BETWEEN = 6 & ['ALIGN']
+export const ALIGN_SPACE_BETWEEN: ALIGN_SPACE_BETWEEN;
+
+type ALIGN_SPACE_AROUND = 7 & ['ALIGN']
+export const ALIGN_SPACE_AROUND: ALIGN_SPACE_AROUND;
+
+
+type DIMENSION_WIDTH = 0 & ['DIMENSION']
+export const DIMENSION_WIDTH: DIMENSION_WIDTH;
+
+type DIMENSION_HEIGHT = 1 & ['DIMENSION']
+export const DIMENSION_HEIGHT: DIMENSION_HEIGHT;
+
+
+type DIRECTION_INHERIT = 0 & ['DIRECTION']
+export const DIRECTION_INHERIT: DIRECTION_INHERIT;
+
+type DIRECTION_LTR = 1 & ['DIRECTION']
+export const DIRECTION_LTR: DIRECTION_LTR;
+
+type DIRECTION_RTL = 2 & ['DIRECTION']
+export const DIRECTION_RTL: DIRECTION_RTL;
+
+
+type DISPLAY_FLEX = 0 & ['DISPLAY']
+export const DISPLAY_FLEX: DISPLAY_FLEX;
+
+type DISPLAY_NONE = 1 & ['DISPLAY']
+export const DISPLAY_NONE: DISPLAY_NONE;
+
+
+type EDGE_LEFT = 0 & ['EDGE']
+export const EDGE_LEFT: EDGE_LEFT;
+
+type EDGE_TOP = 1 & ['EDGE']
+export const EDGE_TOP: EDGE_TOP;
+
+type EDGE_RIGHT = 2 & ['EDGE']
+export const EDGE_RIGHT: EDGE_RIGHT;
+
+type EDGE_BOTTOM = 3 & ['EDGE']
+export const EDGE_BOTTOM: EDGE_BOTTOM;
+
+type EDGE_START = 4 & ['EDGE']
+export const EDGE_START: EDGE_START;
+
+type EDGE_END = 5 & ['EDGE']
+export const EDGE_END: EDGE_END;
+
+type EDGE_HORIZONTAL = 6 & ['EDGE']
+export const EDGE_HORIZONTAL: EDGE_HORIZONTAL;
+
+type EDGE_VERTICAL = 7 & ['EDGE']
+export const EDGE_VERTICAL: EDGE_VERTICAL;
+
+type EDGE_ALL = 8 & ['EDGE']
+export const EDGE_ALL: EDGE_ALL;
+
+
+type EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS = 0 & ['EXPERIMENTAL_FEATURE']
+export const EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS: EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS;
+
+
+type FLEX_DIRECTION_COLUMN = 0 & ['FLEX_DIRECTION']
+export const FLEX_DIRECTION_COLUMN: FLEX_DIRECTION_COLUMN;
+
+type FLEX_DIRECTION_COLUMN_REVERSE = 1 & ['FLEX_DIRECTION']
+export const FLEX_DIRECTION_COLUMN_REVERSE: FLEX_DIRECTION_COLUMN_REVERSE;
+
+type FLEX_DIRECTION_ROW = 2 & ['FLEX_DIRECTION']
+export const FLEX_DIRECTION_ROW: FLEX_DIRECTION_ROW;
+
+type FLEX_DIRECTION_ROW_REVERSE = 3 & ['FLEX_DIRECTION']
+export const FLEX_DIRECTION_ROW_REVERSE: FLEX_DIRECTION_ROW_REVERSE;
+
+
+type GUTTER_COLUMN = 0 & ['GUTTER']
+export const GUTTER_COLUMN: GUTTER_COLUMN;
+
+type GUTTER_ROW = 1 & ['GUTTER']
+export const GUTTER_ROW: GUTTER_ROW;
+
+type GUTTER_ALL = 2 & ['GUTTER']
+export const GUTTER_ALL: GUTTER_ALL;
+
+
+type JUSTIFY_FLEX_START = 0 & ['JUSTIFY']
+export const JUSTIFY_FLEX_START: JUSTIFY_FLEX_START;
+
+type JUSTIFY_CENTER = 1 & ['JUSTIFY']
+export const JUSTIFY_CENTER: JUSTIFY_CENTER;
+
+type JUSTIFY_FLEX_END = 2 & ['JUSTIFY']
+export const JUSTIFY_FLEX_END: JUSTIFY_FLEX_END;
+
+type JUSTIFY_SPACE_BETWEEN = 3 & ['JUSTIFY']
+export const JUSTIFY_SPACE_BETWEEN: JUSTIFY_SPACE_BETWEEN;
+
+type JUSTIFY_SPACE_AROUND = 4 & ['JUSTIFY']
+export const JUSTIFY_SPACE_AROUND: JUSTIFY_SPACE_AROUND;
+
+type JUSTIFY_SPACE_EVENLY = 5 & ['JUSTIFY']
+export const JUSTIFY_SPACE_EVENLY: JUSTIFY_SPACE_EVENLY;
+
+
+type LOG_LEVEL_ERROR = 0 & ['LOG_LEVEL']
+export const LOG_LEVEL_ERROR: LOG_LEVEL_ERROR;
+
+type LOG_LEVEL_WARN = 1 & ['LOG_LEVEL']
+export const LOG_LEVEL_WARN: LOG_LEVEL_WARN;
+
+type LOG_LEVEL_INFO = 2 & ['LOG_LEVEL']
+export const LOG_LEVEL_INFO: LOG_LEVEL_INFO;
+
+type LOG_LEVEL_DEBUG = 3 & ['LOG_LEVEL']
+export const LOG_LEVEL_DEBUG: LOG_LEVEL_DEBUG;
+
+type LOG_LEVEL_VERBOSE = 4 & ['LOG_LEVEL']
+export const LOG_LEVEL_VERBOSE: LOG_LEVEL_VERBOSE;
+
+type LOG_LEVEL_FATAL = 5 & ['LOG_LEVEL']
+export const LOG_LEVEL_FATAL: LOG_LEVEL_FATAL;
+
+
+type MEASURE_MODE_UNDEFINED = 0 & ['MEASURE_MODE']
+export const MEASURE_MODE_UNDEFINED: MEASURE_MODE_UNDEFINED;
+
+type MEASURE_MODE_EXACTLY = 1 & ['MEASURE_MODE']
+export const MEASURE_MODE_EXACTLY: MEASURE_MODE_EXACTLY;
+
+type MEASURE_MODE_AT_MOST = 2 & ['MEASURE_MODE']
+export const MEASURE_MODE_AT_MOST: MEASURE_MODE_AT_MOST;
+
+
+type NODE_TYPE_DEFAULT = 0 & ['NODE_TYPE']
+export const NODE_TYPE_DEFAULT: NODE_TYPE_DEFAULT;
+
+type NODE_TYPE_TEXT = 1 & ['NODE_TYPE']
+export const NODE_TYPE_TEXT: NODE_TYPE_TEXT;
+
+
+type OVERFLOW_VISIBLE = 0 & ['OVERFLOW']
+export const OVERFLOW_VISIBLE: OVERFLOW_VISIBLE;
+
+type OVERFLOW_HIDDEN = 1 & ['OVERFLOW']
+export const OVERFLOW_HIDDEN: OVERFLOW_HIDDEN;
+
+type OVERFLOW_SCROLL = 2 & ['OVERFLOW']
+export const OVERFLOW_SCROLL: OVERFLOW_SCROLL;
+
+
+type POSITION_TYPE_STATIC = 0 & ['POSITION_TYPE']
+export const POSITION_TYPE_STATIC: POSITION_TYPE_STATIC;
+
+type POSITION_TYPE_RELATIVE = 1 & ['POSITION_TYPE']
+export const POSITION_TYPE_RELATIVE: POSITION_TYPE_RELATIVE;
+
+type POSITION_TYPE_ABSOLUTE = 2 & ['POSITION_TYPE']
+export const POSITION_TYPE_ABSOLUTE: POSITION_TYPE_ABSOLUTE;
+
+
+type PRINT_OPTIONS_LAYOUT = 1 & ['PRINT_OPTIONS']
+export const PRINT_OPTIONS_LAYOUT: PRINT_OPTIONS_LAYOUT;
+
+type PRINT_OPTIONS_STYLE = 2 & ['PRINT_OPTIONS']
+export const PRINT_OPTIONS_STYLE: PRINT_OPTIONS_STYLE;
+
+type PRINT_OPTIONS_CHILDREN = 4 & ['PRINT_OPTIONS']
+export const PRINT_OPTIONS_CHILDREN: PRINT_OPTIONS_CHILDREN;
+
+
+type UNIT_UNDEFINED = 0 & ['UNIT']
+export const UNIT_UNDEFINED: UNIT_UNDEFINED;
+
+type UNIT_POINT = 1 & ['UNIT']
+export const UNIT_POINT: UNIT_POINT;
+
+type UNIT_PERCENT = 2 & ['UNIT']
+export const UNIT_PERCENT: UNIT_PERCENT;
+
+type UNIT_AUTO = 3 & ['UNIT']
+export const UNIT_AUTO: UNIT_AUTO;
+
+
+type WRAP_NO_WRAP = 0 & ['WRAP']
+export const WRAP_NO_WRAP: WRAP_NO_WRAP;
+
+type WRAP_WRAP = 1 & ['WRAP']
+export const WRAP_WRAP: WRAP_WRAP;
+
+type WRAP_WRAP_REVERSE = 2 & ['WRAP']
+export const WRAP_WRAP_REVERSE: WRAP_WRAP_REVERSE;
+
+
+export type Align =
+  | typeof ALIGN_AUTO
+  | typeof ALIGN_FLEX_START
+  | typeof ALIGN_CENTER
+  | typeof ALIGN_FLEX_END
+  | typeof ALIGN_STRETCH
+  | typeof ALIGN_BASELINE
+  | typeof ALIGN_SPACE_BETWEEN
+  | typeof ALIGN_SPACE_AROUND;
+
+export type Dimension =
+  | typeof DIMENSION_WIDTH
+  | typeof DIMENSION_HEIGHT;
+
+export type Direction =
+  | typeof DIRECTION_INHERIT
+  | typeof DIRECTION_LTR
+  | typeof DIRECTION_RTL;
+
+export type Display =
+  | typeof DISPLAY_FLEX
+  | typeof DISPLAY_NONE;
+
+export type Edge =
+  | typeof EDGE_LEFT
+  | typeof EDGE_TOP
+  | typeof EDGE_RIGHT
+  | typeof EDGE_BOTTOM
+  | typeof EDGE_START
+  | typeof EDGE_END
+  | typeof EDGE_HORIZONTAL
+  | typeof EDGE_VERTICAL
+  | typeof EDGE_ALL;
+
+export type ExperimentalFeature =
+  | typeof EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS;
+
+export type FlexDirection =
+  | typeof FLEX_DIRECTION_COLUMN
+  | typeof FLEX_DIRECTION_COLUMN_REVERSE
+  | typeof FLEX_DIRECTION_ROW
+  | typeof FLEX_DIRECTION_ROW_REVERSE;
+
+export type Gutter =
+  | typeof GUTTER_COLUMN
+  | typeof GUTTER_ROW
+  | typeof GUTTER_ALL;
+
+export type Justify =
+  | typeof JUSTIFY_FLEX_START
+  | typeof JUSTIFY_CENTER
+  | typeof JUSTIFY_FLEX_END
+  | typeof JUSTIFY_SPACE_BETWEEN
+  | typeof JUSTIFY_SPACE_AROUND
+  | typeof JUSTIFY_SPACE_EVENLY;
+
+export type LogLevel =
+  | typeof LOG_LEVEL_ERROR
+  | typeof LOG_LEVEL_WARN
+  | typeof LOG_LEVEL_INFO
+  | typeof LOG_LEVEL_DEBUG
+  | typeof LOG_LEVEL_VERBOSE
+  | typeof LOG_LEVEL_FATAL;
+
+export type MeasureMode =
+  | typeof MEASURE_MODE_UNDEFINED
+  | typeof MEASURE_MODE_EXACTLY
+  | typeof MEASURE_MODE_AT_MOST;
+
+export type NodeType =
+  | typeof NODE_TYPE_DEFAULT
+  | typeof NODE_TYPE_TEXT;
+
+export type Overflow =
+  | typeof OVERFLOW_VISIBLE
+  | typeof OVERFLOW_HIDDEN
+  | typeof OVERFLOW_SCROLL;
+
+export type PositionType =
+  | typeof POSITION_TYPE_STATIC
+  | typeof POSITION_TYPE_RELATIVE
+  | typeof POSITION_TYPE_ABSOLUTE;
+
+export type PrintOptions =
+  | typeof PRINT_OPTIONS_LAYOUT
+  | typeof PRINT_OPTIONS_STYLE
+  | typeof PRINT_OPTIONS_CHILDREN;
+
+export type Unit =
+  | typeof UNIT_UNDEFINED
+  | typeof UNIT_POINT
+  | typeof UNIT_PERCENT
+  | typeof UNIT_AUTO;
+
+export type Wrap =
+  | typeof WRAP_NO_WRAP
+  | typeof WRAP_WRAP
+  | typeof WRAP_WRAP_REVERSE;
+

javascript/src_js/generated/YGEnums.js

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ */
+
+// @generated by enums.py
+
+module.exports = {
+  ALIGN_AUTO: 0,
+  ALIGN_FLEX_START: 1,
+  ALIGN_CENTER: 2,
+  ALIGN_FLEX_END: 3,
+  ALIGN_STRETCH: 4,
+  ALIGN_BASELINE: 5,
+  ALIGN_SPACE_BETWEEN: 6,
+  ALIGN_SPACE_AROUND: 7,
+
+  DIMENSION_WIDTH: 0,
+  DIMENSION_HEIGHT: 1,
+
+  DIRECTION_INHERIT: 0,
+  DIRECTION_LTR: 1,
+  DIRECTION_RTL: 2,
+
+  DISPLAY_FLEX: 0,
+  DISPLAY_NONE: 1,
+
+  EDGE_LEFT: 0,
+  EDGE_TOP: 1,
+  EDGE_RIGHT: 2,
+  EDGE_BOTTOM: 3,
+  EDGE_START: 4,
+  EDGE_END: 5,
+  EDGE_HORIZONTAL: 6,
+  EDGE_VERTICAL: 7,
+  EDGE_ALL: 8,
+
+  EXPERIMENTAL_FEATURE_WEB_FLEX_BASIS: 0,
+
+  FLEX_DIRECTION_COLUMN: 0,
+  FLEX_DIRECTION_COLUMN_REVERSE: 1,
+  FLEX_DIRECTION_ROW: 2,
+  FLEX_DIRECTION_ROW_REVERSE: 3,
+
+  GUTTER_COLUMN: 0,
+  GUTTER_ROW: 1,
+  GUTTER_ALL: 2,
+
+  JUSTIFY_FLEX_START: 0,
+  JUSTIFY_CENTER: 1,
+  JUSTIFY_FLEX_END: 2,
+  JUSTIFY_SPACE_BETWEEN: 3,
+  JUSTIFY_SPACE_AROUND: 4,
+  JUSTIFY_SPACE_EVENLY: 5,
+
+  LOG_LEVEL_ERROR: 0,
+  LOG_LEVEL_WARN: 1,
+  LOG_LEVEL_INFO: 2,
+  LOG_LEVEL_DEBUG: 3,
+  LOG_LEVEL_VERBOSE: 4,
+  LOG_LEVEL_FATAL: 5,
+
+  MEASURE_MODE_UNDEFINED: 0,
+  MEASURE_MODE_EXACTLY: 1,
+  MEASURE_MODE_AT_MOST: 2,
+
+  NODE_TYPE_DEFAULT: 0,
+  NODE_TYPE_TEXT: 1,
+
+  OVERFLOW_VISIBLE: 0,
+  OVERFLOW_HIDDEN: 1,
+  OVERFLOW_SCROLL: 2,
+
+  POSITION_TYPE_STATIC: 0,
+  POSITION_TYPE_RELATIVE: 1,
+  POSITION_TYPE_ABSOLUTE: 2,
+
+  PRINT_OPTIONS_LAYOUT: 1,
+  PRINT_OPTIONS_STYLE: 2,
+  PRINT_OPTIONS_CHILDREN: 4,
+
+  UNIT_UNDEFINED: 0,
+  UNIT_POINT: 1,
+  UNIT_PERCENT: 2,
+  UNIT_AUTO: 3,
+
+  WRAP_NO_WRAP: 0,
+  WRAP_WRAP: 1,
+  WRAP_WRAP_REVERSE: 2,
+};

javascript/src_js/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type {Yoga} from './wrapAsm';
+
+export * from './generated/YGEnums';
+export * from './wrapAsm';
+
+export function loadYoga(): Promise<Yoga>;

javascript/src_js/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+// Fallback for when the export map is not followed
+module.exports = require("./entrypoint/asmjs-async");

javascript/src_js/sync.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type {Yoga} from './wrapAsm';
+
+export * from './generated/YGEnums';
+export * from './wrapAsm';
+
+declare const yoga: Yoga;
+export default yoga;

javascript/src_js/sync.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+// Fallback for when the export map is not followed
+module.exports = require("./entrypoint/asmjs-sync");

javascript/src_js/wrapAsm.d.ts

@@ -0,0 +1,174 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type {
+  Edge,
+  Wrap,
+  Align,
+  FlexDirection,
+  Gutter,
+  Direction,
+  PositionType,
+  Overflow,
+  Justify,
+  Display,
+  ExperimentalFeature,
+} from './generated/YGEnums';
+
+import type * as YGEnums from './generated/YGEnums';
+
+type Layout = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+type Size = {
+  width: number;
+  height: number;
+}
+
+type Value = {
+  unit: number;
+  value: number;
+}
+
+export type Config = {
+  free(): void;
+  isExperimentalFeatureEnabled(feature: ExperimentalFeature): boolean,
+  setExperimentalFeatureEnabled(
+    feature: ExperimentalFeature,
+    enabled: boolean,
+  ): void,
+  setPointScaleFactor(factor: number): void,
+  useLegacyStretchBehaviour(): boolean,
+  setUseLegacyStretchBehaviour(useLegacyStretchBehaviour: boolean): void,
+  useWebDefaults(): boolean,
+  setUseWebDefaults(useWebDefaults): void,
+};
+
+export type MeasureFunction = (
+  width: number,
+  widthMode: number,
+  height: number,
+  heightMode: number
+) => Size;
+
+export type Node = {
+  calculateLayout(
+    width?: number,
+    height?: number,
+    direction?: Direction,
+  ): void,
+  copyStyle(node: Node): void,
+  free(): void,
+  freeRecursive(): void,
+  getAlignContent(): Align,
+  getAlignItems(): Align,
+  getAlignSelf(): Align,
+  getAspectRatio(): number,
+  getBorder(edge: Edge): number,
+  getChild(index: number): Node,
+  getChildCount(): number,
+  getComputedBorder(edge: Edge): number,
+  getComputedBottom(): number,
+  getComputedHeight(): number,
+  getComputedLayout(): Layout,
+  getComputedLeft(): number,
+  getComputedMargin(edge: Edge): number,
+  getComputedPadding(edge: Edge): number,
+  getComputedRight(): number,
+  getComputedTop(): number,
+  getComputedWidth(): number,
+  getDisplay(): Display,
+  getFlexBasis(): number,
+  getFlexDirection(): FlexDirection,
+  getFlexGrow(): number,
+  getFlexShrink(): number,
+  getFlexWrap(): Wrap,
+  getHeight(): Value,
+  getJustifyContent(): Justify,
+  getGap(gutter: Gutter): Value,
+  getMargin(edge: Edge): Value,
+  getMaxHeight(): Value,
+  getMaxWidth(): Value,
+  getMinHeight(): Value,
+  getMinWidth(): Value,
+  getOverflow(): Overflow,
+  getPadding(edge: Edge): Value,
+  getParent(): Node | null,
+  getPosition(edge: Edge): Value,
+  getPositionType(): PositionType,
+  getWidth(): Value,
+  insertChild(child: Node, index: number): void,
+  isDirty(): boolean,
+  markDirty(): void,
+  removeChild(child: Node): void,
+  reset(): void,
+  setAlignContent(alignContent: Align): void,
+  setAlignItems(alignItems: Align): void,
+  setAlignSelf(alignSelf: Align): void,
+  setAspectRatio(aspectRatio: number): void,
+  setBorder(edge: Edge, borderWidth: number): void,
+  setDisplay(display: Display): void,
+  setFlex(flex: number): void,
+  setFlexBasis(flexBasis: number | string): void,
+  setFlexBasisPercent(flexBasis: number): void,
+  setFlexBasisAuto(): void,
+  setFlexDirection(flexDirection: FlexDirection): void,
+  setFlexGrow(flexGrow: number): void,
+  setFlexShrink(flexShrink: number): void,
+  setFlexWrap(flexWrap: Wrap): void,
+  setHeight(height: number | string): void,
+  setHeightAuto(): void,
+  setHeightPercent(height: number): void,
+  setJustifyContent(justifyContent: Justify): void,
+  setGap(gutter: Gutter, gapLength: number): Value,
+  setMargin(edge: Edge, margin: number): void,
+  setMarginAuto(edge: Edge): void,
+  setMarginPercent(edge: Edge, margin: number): void,
+  setMaxHeight(maxHeight: number | string): void,
+  setMaxHeightPercent(maxHeight: number): void,
+  setMaxWidth(maxWidth: number | string): void,
+  setMaxWidthPercent(maxWidth: number): void,
+  setMeasureFunc(measureFunc: MeasureFunction | null): void,
+  setMinHeight(minHeight: number | string): void,
+  setMinHeightPercent(minHeight: number): void,
+  setMinWidth(minWidth: number | string): void,
+  setMinWidthPercent(minWidth: number): void,
+  setOverflow(overflow: Overflow): void,
+  setPadding(edge: Edge, padding: number | string): void,
+  setPaddingPercent(edge: Edge, padding: number): void,
+  setPosition(edge: Edge, position: number | string): void,
+  setPositionPercent(edge: Edge, position: number): void,
+  setPositionType(positionType: PositionType): void,
+  setWidth(width: number | string): void,
+  setWidthAuto(): void,
+  setWidthPercent(width: number): void,
+  unsetMeasureFun(): void,
+};
+
+export type Yoga = {
+  Config: {
+    create(): Config,
+    destroy(config: Config): any,
+  },
+  Node: {
+    create(): Node,
+    createDefault(): Node,
+    createWithConfig(config: Config): Node,
+    destroy(node: Node): any,
+  },
+} & typeof YGEnums;
+
+declare const wrapAsm: () => Yoga;
+export default wrapAsm;

javascript/src_js/wrapAsm.js

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+const CONSTANTS = require("./generated/YGEnums");
+
+module.exports = (lib) => {
+  function patch(prototype, name, fn) {
+    const original = prototype[name];
+
+    prototype[name] = function (...args) {
+      return fn.call(this, original, ...args);
+    };
+  }
+
+  for (const fnName of [
+    "setPosition",
+    "setMargin",
+    "setFlexBasis",
+    "setWidth",
+    "setHeight",
+    "setMinWidth",
+    "setMinHeight",
+    "setMaxWidth",
+    "setMaxHeight",
+    "setPadding",
+  ]) {
+    const methods = {
+      [CONSTANTS.UNIT_POINT]: lib.Node.prototype[fnName],
+      [CONSTANTS.UNIT_PERCENT]: lib.Node.prototype[`${fnName}Percent`],
+      [CONSTANTS.UNIT_AUTO]: lib.Node.prototype[`${fnName}Auto`],
+    };
+
+    patch(lib.Node.prototype, fnName, function (original, ...args) {
+      // We patch all these functions to add support for the following calls:
+      // .setWidth(100) / .setWidth("100%") / .setWidth(.getWidth()) / .setWidth("auto")
+
+      const value = args.pop();
+      let unit, asNumber;
+
+      if (value === "auto") {
+        unit = CONSTANTS.UNIT_AUTO;
+        asNumber = undefined;
+      } else if (typeof value === "object") {
+        unit = value.unit;
+        asNumber = value.valueOf();
+      } else {
+        unit =
+          typeof value === "string" && value.endsWith("%")
+            ? CONSTANTS.UNIT_PERCENT
+            : CONSTANTS.UNIT_POINT;
+        asNumber = parseFloat(value);
+        if (!Number.isNaN(value) && Number.isNaN(asNumber)) {
+          throw new Error(`Invalid value ${value} for ${fnName}`);
+        }
+      }
+
+      if (!methods[unit])
+        throw new Error(
+          `Failed to execute "${fnName}": Unsupported unit '${value}'`
+        );
+
+      if (asNumber !== undefined) {
+        return methods[unit].call(this, ...args, asNumber);
+      } else {
+        return methods[unit].call(this, ...args);
+      }
+    });
+  }
+
+  function wrapMeasureFunction(measureFunction) {
+    return lib.MeasureCallback.implement({ measure: measureFunction });
+  }
+
+  patch(lib.Node.prototype, "setMeasureFunc", function (original, measureFunc) {
+    original.call(this, wrapMeasureFunction(measureFunc));
+  });
+
+  function wrapDirtiedFunc(dirtiedFunction) {
+    return lib.DirtiedCallback.implement({ dirtied: dirtiedFunction });
+  }
+
+  patch(lib.Node.prototype, "setDirtiedFunc", function (original, dirtiedFunc) {
+    original.call(this, wrapDirtiedFunc(dirtiedFunc));
+  });
+
+  patch(lib.Config.prototype, "free", function () {
+    // Since we handle the memory allocation ourselves (via lib.Config.create),
+    // we also need to handle the deallocation
+    lib.Config.destroy(this);
+  });
+
+  patch(lib.Node, "create", (_, config) => {
+    // We decide the constructor we want to call depending on the parameters
+    return config
+      ? lib.Node.createWithConfig(config)
+      : lib.Node.createDefault();
+  });
+
+  patch(lib.Node.prototype, "free", function () {
+    // Since we handle the memory allocation ourselves (via lib.Node.create),
+    // we also need to handle the deallocation
+    lib.Node.destroy(this);
+  });
+
+  patch(lib.Node.prototype, "freeRecursive", function () {
+    for (let t = 0, T = this.getChildCount(); t < T; ++t) {
+      this.getChild(0).freeRecursive();
+    }
+    this.free();
+  });
+
+  patch(lib.Node.prototype, "setMeasureFunc", function (original, measureFunc) {
+    // This patch is just a convenience patch, since it helps write more
+    // idiomatic source code (such as .setMeasureFunc(null))
+    if (measureFunc) {
+      return original.call(this, (...args) => measureFunc(...args));
+    } else {
+      return this.unsetMeasureFunc();
+    }
+  });
+
+  patch(
+    lib.Node.prototype,
+    "calculateLayout",
+    function (
+      original,
+      width = NaN,
+      height = NaN,
+      direction = CONSTANTS.DIRECTION_LTR
+    ) {
+      // Just a small patch to add support for the function default parameters
+      return original.call(this, width, height, direction);
+    }
+  );
+
+  return {
+    Config: lib.Config,
+    Node: lib.Node,
+    ...CONSTANTS,
+  };
+};