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
This commit is contained in:
Dmitry Ivakhnenko
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
8035456330
commit
1813748eaa
174
javascript/src_js/wrapAsm.d.ts
vendored
Normal file
174
javascript/src_js/wrapAsm.d.ts
vendored
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user