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
175 lines
4.7 KiB
TypeScript
175 lines
4.7 KiB
TypeScript
/**
|
|
* 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;
|