feat: wasm yoga (#2505)

diegomura · Jan 19, 2024 · 0f5c43f · 0f5c43f
1 parent 7563ee8
commit 0f5c43f
Show file tree

Hide file tree

Showing 42 changed files with 311 additions and 261 deletions.
diff --git a/.changeset/slimy-kiwis-cry.md b/.changeset/slimy-kiwis-cry.md
@@ -0,0 +1,6 @@
+---
+'@react-pdf/renderer': minor
+'@react-pdf/layout': minor
+---
+
+feat: wasm yoga
diff --git a/packages/layout/src/image/measureImage.js b/packages/layout/src/image/measureImage.js
@@ -1,4 +1,4 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 import getRatio from './getRatio';
 import getMargin from '../node/getMargin';
@@ -40,32 +40,32 @@ const measureImage = (page, node) => (width, widthMode, height, heightMode) => {
   if (!node.image) return { width: 0, height: 0 };
 
   if (
-    widthMode === Yoga.MEASURE_MODE_EXACTLY &&
-    heightMode === Yoga.MEASURE_MODE_UNDEFINED
+    widthMode === Yoga.MeasureMode.Exactly &&
+    heightMode === Yoga.MeasureMode.Undefined
   ) {
     const scaledHeight = width / imageRatio;
     return { height: Math.min(pageArea, scaledHeight) };
   }
 
   if (
-    heightMode === Yoga.MEASURE_MODE_EXACTLY &&
-    (widthMode === Yoga.MEASURE_MODE_AT_MOST ||
-      widthMode === Yoga.MEASURE_MODE_UNDEFINED)
+    heightMode === Yoga.MeasureMode.Exactly &&
+    (widthMode === Yoga.MeasureMode.AtMost ||
+      widthMode === Yoga.MeasureMode.Undefined)
   ) {
     return { width: Math.min(height * imageRatio, width) };
   }
 
   if (
-    widthMode === Yoga.MEASURE_MODE_EXACTLY &&
-    heightMode === Yoga.MEASURE_MODE_AT_MOST
+    widthMode === Yoga.MeasureMode.Exactly &&
+    heightMode === Yoga.MeasureMode.AtMost
   ) {
     const scaledHeight = width / imageRatio;
     return { height: Math.min(height, pageArea, scaledHeight) };
   }
 
   if (
-    widthMode === Yoga.MEASURE_MODE_AT_MOST &&
-    heightMode === Yoga.MEASURE_MODE_AT_MOST
+    widthMode === Yoga.MeasureMode.AtMost &&
+    heightMode === Yoga.MeasureMode.AtMost
   ) {
     if (imageRatio > 1) {
       return {

diff --git a/packages/layout/src/index.js b/packages/layout/src/index.js
@@ -1,6 +1,7 @@
 import { asyncCompose } from '@react-pdf/fns';
 
 import resolveSvg from './steps/resolveSvg';
+import resolveYoga from './steps/resolveYoga';
 import resolveZIndex from './steps/resolveZIndex';
 import resolveAssets from './steps/resolveAssets';
 import resolveStyles from './steps/resolveStyles';
@@ -32,6 +33,7 @@ const layout = asyncCompose(
   resolveLinkSubstitution,
   resolveBookmarks,
   resolvePageSizes,
+  resolveYoga,
 );
 
 export default layout;
diff --git a/packages/layout/src/node/getBorderWidth.js b/packages/layout/src/node/getBorderWidth.js
@@ -1,4 +1,4 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 const getComputedBorder = (yogaNode, edge) =>
   yogaNode ? yogaNode.getComputedBorder(edge) : 0;
@@ -13,10 +13,10 @@ const getBorderWidth = (node) => {
   const { yogaNode } = node;
 
   return {
-    borderTopWidth: getComputedBorder(yogaNode, Yoga.EDGE_TOP),
-    borderRightWidth: getComputedBorder(yogaNode, Yoga.EDGE_RIGHT),
-    borderBottomWidth: getComputedBorder(yogaNode, Yoga.EDGE_BOTTOM),
-    borderLeftWidth: getComputedBorder(yogaNode, Yoga.EDGE_LEFT),
+    borderTopWidth: getComputedBorder(yogaNode, Yoga.Edge.Top),
+    borderRightWidth: getComputedBorder(yogaNode, Yoga.Edge.Right),
+    borderBottomWidth: getComputedBorder(yogaNode, Yoga.Edge.Bottom),
+    borderLeftWidth: getComputedBorder(yogaNode, Yoga.Edge.Left),
   };
 };
 

diff --git a/packages/layout/src/node/getMargin.js b/packages/layout/src/node/getMargin.js
@@ -1,4 +1,4 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 const getComputedMargin = (node, edge) => {
   const { yogaNode } = node;
@@ -15,31 +15,31 @@ const getMargin = (node) => {
   const { style, box } = node;
 
   const marginTop =
-    getComputedMargin(node, Yoga.EDGE_TOP) ||
+    getComputedMargin(node, Yoga.Edge.Top) ||
     box?.marginTop ||
     style?.marginTop ||
     style?.marginVertical ||
     style?.margin ||
     0;
 
   const marginRight =
-    getComputedMargin(node, Yoga.EDGE_RIGHT) ||
+    getComputedMargin(node, Yoga.Edge.Right) ||
     box?.marginRight ||
     style?.marginRight ||
     style?.marginHorizontal ||
     style?.margin ||
     0;
 
   const marginBottom =
-    getComputedMargin(node, Yoga.EDGE_BOTTOM) ||
+    getComputedMargin(node, Yoga.Edge.Bottom) ||
     box?.marginBottom ||
     style?.marginBottom ||
     style?.marginVertical ||
     style?.margin ||
     0;
 
   const marginLeft =
-    getComputedMargin(node, Yoga.EDGE_LEFT) ||
+    getComputedMargin(node, Yoga.Edge.Left) ||
     box?.marginLeft ||
     style?.marginLeft ||
     style?.marginHorizontal ||

diff --git a/packages/layout/src/node/getPadding.js b/packages/layout/src/node/getPadding.js
@@ -1,4 +1,4 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 const getComputedPadding = (node, edge) => {
   const { yogaNode } = node;
@@ -15,31 +15,31 @@ const getPadding = (node) => {
   const { style, box } = node;
 
   const paddingTop =
-    getComputedPadding(node, Yoga.EDGE_TOP) ||
+    getComputedPadding(node, Yoga.Edge.Top) ||
     box?.paddingTop ||
     style?.paddingTop ||
     style?.paddingVertical ||
     style?.padding ||
     0;
 
   const paddingRight =
-    getComputedPadding(node, Yoga.EDGE_RIGHT) ||
+    getComputedPadding(node, Yoga.Edge.Right) ||
     box?.paddingRight ||
     style?.paddingRight ||
     style?.paddingHorizontal ||
     style?.padding ||
     0;
 
   const paddingBottom =
-    getComputedPadding(node, Yoga.EDGE_BOTTOM) ||
+    getComputedPadding(node, Yoga.Edge.Bottom) ||
     box?.paddingBottom ||
     style?.paddingBottom ||
     style?.paddingVertical ||
     style?.padding ||
     0;
 
   const paddingLeft =
-    getComputedPadding(node, Yoga.EDGE_LEFT) ||
+    getComputedPadding(node, Yoga.Edge.Left) ||
     box?.paddingLeft ||
     style?.paddingLeft ||
     style?.paddingHorizontal ||

diff --git a/packages/layout/src/node/setAlign.js b/packages/layout/src/node/setAlign.js
@@ -1,14 +1,14 @@
+import * as Yoga from 'yoga-layout';
 import { upperFirst } from '@react-pdf/fns';
-import Yoga from '../../yoga';
 
 const ALIGN = {
-  'flex-start': Yoga.ALIGN_FLEX_START,
-  center: Yoga.ALIGN_CENTER,
-  'flex-end': Yoga.ALIGN_FLEX_END,
-  stretch: Yoga.ALIGN_STRETCH,
-  baseline: Yoga.ALIGN_BASELINE,
-  'space-between': Yoga.ALIGN_SPACE_BETWEEN,
-  'space-around': Yoga.ALIGN_SPACE_AROUND,
+  'flex-start': Yoga.Align.FlexStart,
+  center: Yoga.Align.Center,
+  'flex-end': Yoga.Align.FlexEnd,
+  stretch: Yoga.Align.Stretch,
+  baseline: Yoga.Align.Baseline,
+  'space-between': Yoga.Align.SpaceBetween,
+  'space-around': Yoga.Align.SpaceAround,
 };
 
 /**
@@ -31,7 +31,7 @@ const ALIGN = {
  */
 const setAlign = attr => value => node => {
   const { yogaNode } = node;
-  const defaultValue = attr === 'items' ? Yoga.ALIGN_STRETCH : Yoga.ALIGN_AUTO;
+  const defaultValue = attr === 'items' ? Yoga.Align.Stretch : Yoga.Align.Auto;
 
   if (yogaNode) {
     const align = ALIGN[value] || defaultValue;

diff --git a/packages/layout/src/node/setBorderWidth.js b/packages/layout/src/node/setBorderWidth.js
@@ -1,4 +1,4 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 import setYogaValue from './setYogaValue';
 
@@ -15,7 +15,7 @@ import setYogaValue from './setYogaValue';
  * @param {Object} node node instance
  * @returns {Object} node instance
  */
-export const setBorderTop = setYogaValue('border', Yoga.EDGE_TOP);
+export const setBorderTop = setYogaValue('border', Yoga.Edge.Top);
 
 /**
  * Set border right attribute to node's Yoga instance
@@ -24,7 +24,7 @@ export const setBorderTop = setYogaValue('border', Yoga.EDGE_TOP);
  * @param {Object} node node instance
  * @returns {Object} node instance
  */
-export const setBorderRight = setYogaValue('border', Yoga.EDGE_RIGHT);
+export const setBorderRight = setYogaValue('border', Yoga.Edge.Right);
 
 /**
  * Set border bottom attribute to node's Yoga instance
@@ -33,7 +33,7 @@ export const setBorderRight = setYogaValue('border', Yoga.EDGE_RIGHT);
  * @param {Object} node node instance
  * @returns {Object} node instance
  */
-export const setBorderBottom = setYogaValue('border', Yoga.EDGE_BOTTOM);
+export const setBorderBottom = setYogaValue('border', Yoga.Edge.Bottom);
 
 /**
  * Set border left attribute to node's Yoga instance
@@ -42,7 +42,7 @@ export const setBorderBottom = setYogaValue('border', Yoga.EDGE_BOTTOM);
  * @param {Object} node node instance
  * @returns {Object} node instance
  */
-export const setBorderLeft = setYogaValue('border', Yoga.EDGE_LEFT);
+export const setBorderLeft = setYogaValue('border', Yoga.Edge.Left);
 
 /**
  * Set all border widths at once

diff --git a/packages/layout/src/node/setDisplay.js b/packages/layout/src/node/setDisplay.js
@@ -1,4 +1,4 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 /**
  * @typedef {Function} NodeInstanceWrapper
@@ -17,7 +17,7 @@ const setDisplay = value => node => {
 
   if (yogaNode) {
     yogaNode.setDisplay(
-      value === 'none' ? Yoga.DISPLAY_NONE : Yoga.DISPLAY_FLEX,
+      value === 'none' ? Yoga.Display.None : Yoga.Display.Flex,
     );
   }
 

diff --git a/packages/layout/src/node/setFlexDirection.js b/packages/layout/src/node/setFlexDirection.js
@@ -1,9 +1,9 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 const FLEX_DIRECTIONS = {
-  row: Yoga.FLEX_DIRECTION_ROW,
-  'row-reverse': Yoga.FLEX_DIRECTION_ROW_REVERSE,
-  'column-reverse': Yoga.FLEX_DIRECTION_COLUMN_REVERSE,
+  row: Yoga.FlexDirection.Row,
+  'row-reverse': Yoga.FlexDirection.RowReverse,
+  'column-reverse': Yoga.FlexDirection.ColumnReverse,
 };
 
 /**
@@ -22,7 +22,7 @@ const setFlexDirection = value => node => {
   const { yogaNode } = node;
 
   if (yogaNode) {
-    const flexDirection = FLEX_DIRECTIONS[value] || Yoga.FLEX_DIRECTION_COLUMN;
+    const flexDirection = FLEX_DIRECTIONS[value] || Yoga.FlexDirection.Column;
     yogaNode.setFlexDirection(flexDirection);
   }
 

diff --git a/packages/layout/src/node/setFlexWrap.js b/packages/layout/src/node/setFlexWrap.js
@@ -1,8 +1,8 @@
-import Yoga from '../../yoga';
+import * as Yoga from 'yoga-layout';
 
 const FLEX_WRAP = {
-  wrap: Yoga.WRAP_WRAP,
-  'wrap-reverse': Yoga.WRAP_WRAP_REVERSE,
+  wrap: Yoga.Wrap.Wrap,
+  'wrap-reverse': Yoga.Wrap.WrapReverse,
 };
 
 /**
@@ -21,7 +21,7 @@ const setFlexWrap = value => node => {
   const { yogaNode } = node;
 
   if (yogaNode) {
-    const flexWrap = FLEX_WRAP[value] || Yoga.WRAP_NO_WRAP;
+    const flexWrap = FLEX_WRAP[value] || Yoga.Wrap.NoWrap;
     yogaNode.setFlexWrap(flexWrap);
   }
 

diff --git a/packages/layout/src/node/setGap.js b/packages/layout/src/node/setGap.js
@@ -1,5 +1,5 @@
+import * as Yoga from 'yoga-layout';
 import { isNil, matchPercent } from '@react-pdf/fns';
-import Yoga from '../../yoga';
 
 /**
  * @typedef {Function} NodeInstanceWrapper
@@ -33,7 +33,7 @@ export const setRowGap = value => node => {
 
   if (!isNil(value) && yogaNode) {
     checkPercents('rowGap', value);
-    yogaNode.setGap(Yoga.GUTTER_ROW, value);
+    yogaNode.setGap(Yoga.Gutter.Row, value);
   }
 
   return node;
@@ -50,7 +50,7 @@ export const setColumnGap = value => node => {
 
   if (!isNil(value) && yogaNode) {
     checkPercents('columnGap', value);
-    yogaNode.setGap(Yoga.GUTTER_COLUMN, value);
+    yogaNode.setGap(Yoga.Gutter.Column, value);
   }
 
   return node;

diff --git a/packages/layout/src/node/setJustifyContent.js b/packages/layout/src/node/setJustifyContent.js
@@ -1,12 +1,12 @@
+import * as Yoga from 'yoga-layout';
 import { isNil } from '@react-pdf/fns';
-import Yoga from '../../yoga';
 
 const JUSTIFY_CONTENT = {
-  center: Yoga.JUSTIFY_CENTER,
-  'flex-end': Yoga.JUSTIFY_FLEX_END,
-  'space-between': Yoga.JUSTIFY_SPACE_BETWEEN,
-  'space-around': Yoga.JUSTIFY_SPACE_AROUND,
-  'space-evenly': Yoga.JUSTIFY_SPACE_EVENLY,
+  center: Yoga.Justify.Center,
+  'flex-end': Yoga.Justify.FlexEnd,
+  'space-between': Yoga.Justify.SpaceBetween,
+  'space-around': Yoga.Justify.SpaceAround,
+  'space-evenly': Yoga.Justify.SpaceEvenly,
 };
 
 /**
@@ -25,7 +25,7 @@ const setJustifyContent = value => node => {
   const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
-    const justifyContent = JUSTIFY_CONTENT[value] || Yoga.JUSTIFY_FLEX_START;
+    const justifyContent = JUSTIFY_CONTENT[value] || Yoga.Justify.FlexStart;
     yogaNode.setJustifyContent(justifyContent);
   }