refactor: yoga node name (diegomura#1911)

.changeset/friendly-steaks-impress.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': patch
+---
+
+refactor: yoga node prop name

packages/layout/src/node/getBorderWidth.js

@@ -10,7 +10,7 @@ const getComputedBorder = (yogaNode, edge) =>
  * @return {Object} border widths
  */
 const getBorderWidth = node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   return {
     borderTopWidth: getComputedBorder(yogaNode, Yoga.EDGE_TOP),

packages/layout/src/node/getDimension.js

@@ -10,13 +10,13 @@ const DEFAULT_DIMENSION = {
  * @return {Object} dimensions
  */
 const getDimension = node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (!yogaNode) return DEFAULT_DIMENSION;
 
   return {
     width: yogaNode.getComputedWidth(),
-    height: yogaNode.getComputedHeight(),
+    height: yogaNode.getComputedHeight() || 600,
   };
 };
 

packages/layout/src/node/getMargin.js

@@ -1,7 +1,7 @@
 import Yoga from '@react-pdf/yoga';
 
 const getComputedMargin = (node, edge) => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
   return yogaNode ? yogaNode.getComputedMargin(edge) : null;
 };
 

packages/layout/src/node/getPadding.js

@@ -1,7 +1,7 @@
 import Yoga from '@react-pdf/yoga';
 
 const getComputedPadding = (node, edge) => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
   return yogaNode ? yogaNode.getComputedPadding(edge) : null;
 };
 

packages/layout/src/node/getPosition.js

@@ -5,7 +5,7 @@
  * @return {Object} position
  */
 const getPosition = node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   return {
     top: yogaNode?.getComputedTop() || 0,

packages/layout/src/node/setAlign.js

@@ -20,7 +20,7 @@ const ALIGN = {
  * @return {Object} node instance
  */
 const setAlign = attr => value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
   const defaultValue = attr === 'items' ? Yoga.ALIGN_STRETCH : Yoga.ALIGN_AUTO;
 
   if (yogaNode) {

packages/layout/src/node/setAspectRatio.js

@@ -8,7 +8,7 @@ import { isNil } from '@react-pdf/fns';
  * @return {Object} node instance
  */
 const setAspectRatio = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
     yogaNode.setAspectRatio(value);

packages/layout/src/node/setDisplay.js

@@ -8,7 +8,7 @@ import Yoga from '@react-pdf/yoga';
  * @return {Object} node instance
  */
 const setDisplay = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (yogaNode) {
     yogaNode.setDisplay(

packages/layout/src/node/setFlexDirection.js

@@ -14,7 +14,7 @@ const FLEX_DIRECTIONS = {
  * @return {Object} node instance
  */
 const setFlexDirection = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (yogaNode) {
     const flexDirection = FLEX_DIRECTIONS[value] || Yoga.FLEX_DIRECTION_COLUMN;

packages/layout/src/node/setFlexWrap.js

@@ -13,7 +13,7 @@ const FLEX_WRAP = {
  * @return {Object} node instance
  */
 const setFlexWrap = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (yogaNode) {
     const flexWrap = FLEX_WRAP[value] || Yoga.WRAP_NO_WRAP;

packages/layout/src/node/setJustifyContent.js

@@ -17,7 +17,7 @@ const JUSTIFY_CONTENT = {
  * @return {Object} node instance
  */
 const setJustifyContent = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
     const justifyContent = JUSTIFY_CONTENT[value] || Yoga.JUSTIFY_FLEX_START;

packages/layout/src/node/setOverflow.js

@@ -14,7 +14,7 @@ const OVERFLOW = {
  * @return {Object} node instance
  */
 const setOverflow = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
     const overflow = OVERFLOW[value] || Yoga.OVERFLOW_VISIBLE;

packages/layout/src/node/setPositionType.js

@@ -9,7 +9,7 @@ import { isNil } from '@react-pdf/fns';
  * @return {Object} node instance
  */
 const setPositionType = value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
     yogaNode.setPositionType(

packages/layout/src/node/setYogaValue.js

@@ -12,7 +12,7 @@ import { isNil, upperFirst, matchPercent } from '@react-pdf/fns';
  * @return {Object} node instance
  */
 const setYogaValue = (attr, edge) => value => node => {
-  const yogaNode = node._yogaNode;
+  const { yogaNode } = node;
 
   if (!isNil(value) && yogaNode) {
     const hasEdge = !isNil(edge);

packages/layout/src/steps/resolveDimensions.js

@@ -57,7 +57,6 @@ import measureText from '../text/measureText';
 import measureImage from '../image/measureImage';
 import measureCanvas from '../canvas/measureCanvas';
 
-const YOGA_NODE = '_yogaNode';
 const YOGA_CONFIG = Yoga.Config.create();
 
 YOGA_CONFIG.setPointScaleFactor(0);
@@ -131,12 +130,12 @@ const setYogaValues = node => {
  * @param {Object} node
  */
 const insertYogaNodes = parent => child => {
-  parent.insertChild(child[YOGA_NODE], parent.getChildCount());
+  parent.insertChild(child.yogaNode, parent.getChildCount());
   return child;
 };
 
 const setMeasureFunc = (node, page, fontStore) => {
-  const yogaNode = node[YOGA_NODE];
+  const { yogaNode } = node;
 
   if (isText(node)) {
     yogaNode.setMeasureFunc(measureText(page, node, fontStore));
@@ -169,9 +168,7 @@ const isLayoutElement = node => !isText(node) && !isNote(node) && !isSvg(node);
 const createYogaNodes = (page, fontStore) => node => {
   const yogaNode = Yoga.Node.createWithConfig(YOGA_CONFIG);
 
-  const result = Object.assign({}, node);
-
-  result[YOGA_NODE] = yogaNode;
+  const result = Object.assign({}, node, { yogaNode });
 
   setYogaValues(result);
 
@@ -196,7 +193,7 @@ const createYogaNodes = (page, fontStore) => node => {
  * @returns {Object} node
  */
 const calculateLayout = page => {
-  page[YOGA_NODE].calculateLayout();
+  page.yogaNode.calculateLayout();
   return page;
 };
 
@@ -235,7 +232,7 @@ const persistDimensions = node => {
 const destroyYogaNodes = node => {
   const newNode = Object.assign({}, node);
 
-  delete newNode[YOGA_NODE];
+  delete newNode.yogaNode;
 
   if (!node.children) return newNode;
 
@@ -251,7 +248,7 @@ const destroyYogaNodes = node => {
  * @returns {Object} node without yoga node
  */
 const freeYogaNodes = node => {
-  if (node[YOGA_NODE]) node[YOGA_NODE].freeRecursive();
+  if (node.yogaNode) node.yogaNode.freeRecursive();
   return node;
 };
 

packages/layout/tests/node/getBorderWidth.test.js

@@ -20,8 +20,8 @@ describe('node getBorderWidth', () => {
   });
 
   test('Should return yoga values if node available', () => {
-    const _yogaNode = { getComputedBorder };
-    const result = getBorderWidth({ _yogaNode });
+    const yogaNode = { getComputedBorder };
+    const result = getBorderWidth({ yogaNode });
 
     expect(result).toHaveProperty('borderTopWidth', 1);
     expect(result).toHaveProperty('borderRightWidth', 2);

packages/layout/tests/node/getDimension.test.js

@@ -12,8 +12,8 @@ describe('node getDimension', () => {
   });
 
   test('Should return yoga values if node available', () => {
-    const _yogaNode = { getComputedWidth, getComputedHeight };
-    const result = getDimension({ _yogaNode });
+    const yogaNode = { getComputedWidth, getComputedHeight };
+    const result = getDimension({ yogaNode });
 
     expect(result).toHaveProperty('width', 10);
     expect(result).toHaveProperty('height', 20);

packages/layout/tests/node/getMargin.test.js

@@ -20,8 +20,8 @@ describe('node getMargin', () => {
   });
 
   test('Should return yoga values if node available', () => {
-    const _yogaNode = { getComputedMargin };
-    const result = getMargin({ _yogaNode });
+    const yogaNode = { getComputedMargin };
+    const result = getMargin({ yogaNode });
 
     expect(result).toHaveProperty('marginTop', 1);
     expect(result).toHaveProperty('marginRight', 2);

packages/layout/tests/node/getPadding.test.js

@@ -20,8 +20,8 @@ describe('node getPadding', () => {
   });
 
   test('Should return yoga values if node available', () => {
-    const _yogaNode = { getComputedPadding };
-    const result = getPadding({ _yogaNode });
+    const yogaNode = { getComputedPadding };
+    const result = getPadding({ yogaNode });
 
     expect(result).toHaveProperty('paddingTop', 1);
     expect(result).toHaveProperty('paddingRight', 2);

packages/layout/tests/node/getPosition.test.js

@@ -16,13 +16,13 @@ describe('node getPosition', () => {
   });
 
   test('Should return yoga values if node available', () => {
-    const _yogaNode = {
+    const yogaNode = {
       getComputedTop,
       getComputedRight,
       getComputedBottom,
       getComputedLeft,
     };
-    const result = getPosition({ _yogaNode });
+    const result = getPosition({ yogaNode });
 
     expect(result).toHaveProperty('top', 10);
     expect(result).toHaveProperty('right', 20);

packages/layout/tests/node/setAlignContent.test.js

@@ -4,7 +4,7 @@ import setAlignContent from '../../src/node/setAlignContent';
 
 describe('node setAlignContent', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setAlignContent: mock } };
+  const node = { yogaNode: { setAlignContent: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setAlignItems.test.js

@@ -4,7 +4,7 @@ import setAlignItems from '../../src/node/setAlignItems';
 
 describe('node setAlignItems', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setAlignItems: mock } };
+  const node = { yogaNode: { setAlignItems: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setAlignSelf.test.js

@@ -4,7 +4,7 @@ import setAlignSelf from '../../src/node/setAlignSelf';
 
 describe('node setAlignSelf', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setAlignSelf: mock } };
+  const node = { yogaNode: { setAlignSelf: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setAspectRatio.test.js

@@ -2,7 +2,7 @@ import setAspectRatio from '../../src/node/setAspectRatio';
 
 describe('node setAspectRatio', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setAspectRatio: mock } };
+  const node = { yogaNode: { setAspectRatio: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setBorderWidth.test.js

@@ -9,7 +9,7 @@ import setBorder, {
 
 describe('node setBorderWidth', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setBorder: mock } };
+  const node = { yogaNode: { setBorder: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setDimension.test.js

@@ -18,7 +18,7 @@ describe('node setDimension', () => {
   const mockSetMaxHeight = jest.fn();
 
   const node = {
-    _yogaNode: {
+    yogaNode: {
       setWidth: mockSetWidth,
       setWidthPercent: mockSetWidthPercent,
       setMinWidth: mockSetMinWidth,

packages/layout/tests/node/setDisplay.test.js

@@ -4,7 +4,7 @@ import setDisplay from '../../src/node/setDisplay';
 
 describe('node setDisplay', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setDisplay: mock } };
+  const node = { yogaNode: { setDisplay: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setFlexBasis.test.js

@@ -2,7 +2,7 @@ import setFlexBasis from '../../src/node/setFlexBasis';
 
 describe('node setFlexBasis', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setFlexBasis: mock } };
+  const node = { yogaNode: { setFlexBasis: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setFlexDirection.test.js

@@ -4,7 +4,7 @@ import setFlexDirection from '../../src/node/setFlexDirection';
 
 describe('node setFlexDirection', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setFlexDirection: mock } };
+  const node = { yogaNode: { setFlexDirection: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setFlexGrow.test.js

@@ -2,7 +2,7 @@ import setFlexGrow from '../../src/node/setFlexGrow';
 
 describe('node setFlexGrow', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setFlexGrow: mock } };
+  const node = { yogaNode: { setFlexGrow: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setFlexShrink.test.js

@@ -2,7 +2,7 @@ import setFlexShrink from '../../src/node/setFlexShrink';
 
 describe('node setFlexShrink', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setFlexShrink: mock } };
+  const node = { yogaNode: { setFlexShrink: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setFlexWrap.test.js

@@ -4,7 +4,7 @@ import setFlexWrap from '../../src/node/setFlexWrap';
 
 describe('node setFlexWrap', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setFlexWrap: mock } };
+  const node = { yogaNode: { setFlexWrap: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setJustifyContent.test.js

@@ -4,7 +4,7 @@ import setJustifyContent from '../../src/node/setJustifyContent';
 
 describe('node setJustifyContent', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setJustifyContent: mock } };
+  const node = { yogaNode: { setJustifyContent: mock } };
 
   beforeEach(() => {
     mock.mockReset();

packages/layout/tests/node/setMargin.test.js

@@ -13,7 +13,7 @@ describe('node setMargin', () => {
   const mockPercent = jest.fn();
 
   const node = {
-    _yogaNode: {
+    yogaNode: {
       setMargin: mock,
       setMarginAuto: mockAuto,
       setMarginPercent: mockPercent,

packages/layout/tests/node/setOverflow.test.js

@@ -4,7 +4,7 @@ import setOverflow from '../../src/node/setOverflow';
 
 describe('node setOverflow', () => {
   const mock = jest.fn();
-  const node = { _yogaNode: { setOverflow: mock } };
+  const node = { yogaNode: { setOverflow: mock } };
 
   beforeEach(() => {
     mock.mockReset();