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
148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
/**
|
|
* 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,
|
|
};
|
|
};
|