From 9c75408307f85f256172dfdf8863389086effdbb Mon Sep 17 00:00:00 2001 From: Amit Dahan Date: Wed, 1 Mar 2023 10:45:32 +0200 Subject: [PATCH 1/4] Replace `yoga-layout-prebuilt` with `yoga-wasm-web` --- package.json | 2 +- src/dom.ts | 4 +- src/get-max-width.ts | 12 ++--- src/reconciler.ts | 8 +-- src/render-node-to-output.ts | 4 +- src/renderer.ts | 4 +- src/styles.ts | 100 ++++++++++++++++++++++------------- src/yoga.ts | 20 +++++++ 8 files changed, 99 insertions(+), 55 deletions(-) create mode 100644 src/yoga.ts diff --git a/package.json b/package.json index c2bcec0af..cac2bd864 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "widest-line": "^4.0.1", "wrap-ansi": "^8.1.0", "ws": "^8.12.0", - "yoga-layout-prebuilt": "^1.9.6" + "yoga-wasm-web": "~0.3.2" }, "devDependencies": { "@faker-js/faker": "^7.6.0", diff --git a/src/dom.ts b/src/dom.ts index 3db2c1279..345cb1a92 100644 --- a/src/dom.ts +++ b/src/dom.ts @@ -1,4 +1,4 @@ -import Yoga, {type YogaNode} from 'yoga-layout-prebuilt'; +import Yoga, {type YogaNode} from './yoga.js'; import measureText from './measure-text.js'; import applyStyles, {type Styles} from './styles.js'; import wrapText from './wrap-text.js'; @@ -7,7 +7,7 @@ import {type OutputTransformer} from './render-node-to-output.js'; type InkNode = { parentNode: DOMElement | undefined; - yogaNode?: Yoga.YogaNode; + yogaNode?: YogaNode; internal_static?: boolean; style: Styles; }; diff --git a/src/get-max-width.ts b/src/get-max-width.ts index 1dc4903cd..8c5bff249 100644 --- a/src/get-max-width.ts +++ b/src/get-max-width.ts @@ -1,12 +1,12 @@ -import Yoga from 'yoga-layout-prebuilt'; +import {EDGE_LEFT, EDGE_RIGHT, type YogaNode} from './yoga.js'; -const getMaxWidth = (yogaNode: Yoga.YogaNode) => { +const getMaxWidth = (yogaNode: YogaNode) => { return ( yogaNode.getComputedWidth() - - yogaNode.getComputedPadding(Yoga.EDGE_LEFT) - - yogaNode.getComputedPadding(Yoga.EDGE_RIGHT) - - yogaNode.getComputedBorder(Yoga.EDGE_LEFT) - - yogaNode.getComputedBorder(Yoga.EDGE_RIGHT) + yogaNode.getComputedPadding(EDGE_LEFT) - + yogaNode.getComputedPadding(EDGE_RIGHT) - + yogaNode.getComputedBorder(EDGE_LEFT) - + yogaNode.getComputedBorder(EDGE_RIGHT) ); }; diff --git a/src/reconciler.ts b/src/reconciler.ts index 4bde433b5..8ed2ad754 100644 --- a/src/reconciler.ts +++ b/src/reconciler.ts @@ -1,7 +1,7 @@ import process from 'node:process'; import createReconciler from 'react-reconciler'; import {DefaultEventPriority} from 'react-reconciler/constants.js'; -import Yoga from 'yoga-layout-prebuilt'; +import {DISPLAY_FLEX, DISPLAY_NONE, type YogaNode} from './yoga.js'; import { createTextNode, appendChildNode, @@ -42,7 +42,7 @@ $ npm install --save-dev react-devtools-core } } -const cleanupYogaNode = (node?: Yoga.YogaNode): void => { +const cleanupYogaNode = (node?: YogaNode): void => { node?.unsetMeasureFunc(); node?.freeRecursive(); }; @@ -157,10 +157,10 @@ export default createReconciler< }, getPublicInstance: instance => instance, hideInstance(node) { - node.yogaNode?.setDisplay(Yoga.DISPLAY_NONE); + node.yogaNode?.setDisplay(DISPLAY_NONE); }, unhideInstance(node) { - node.yogaNode?.setDisplay(Yoga.DISPLAY_FLEX); + node.yogaNode?.setDisplay(DISPLAY_FLEX); }, appendInitialChild: appendChildNode, appendChild: appendChildNode, diff --git a/src/render-node-to-output.ts b/src/render-node-to-output.ts index fbba15c19..834f74f4d 100644 --- a/src/render-node-to-output.ts +++ b/src/render-node-to-output.ts @@ -1,6 +1,6 @@ -import Yoga from 'yoga-layout-prebuilt'; import widestLine from 'widest-line'; import indentString from 'indent-string'; +import {DISPLAY_NONE} from './yoga.js'; import wrapText from './wrap-text.js'; import getMaxWidth from './get-max-width.js'; import squashTextNodes from './squash-text-nodes.js'; @@ -53,7 +53,7 @@ const renderNodeToOutput = ( const {yogaNode} = node; if (yogaNode) { - if (yogaNode.getDisplay() === Yoga.DISPLAY_NONE) { + if (yogaNode.getDisplay() === DISPLAY_NONE) { return; } diff --git a/src/renderer.ts b/src/renderer.ts index f9bceb957..1c1ec5527 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,4 +1,4 @@ -import Yoga from 'yoga-layout-prebuilt'; +import {DIRECTION_LTR} from './yoga.js'; import renderNodeToOutput from './render-node-to-output.js'; import Output from './output.js'; import {type DOMElement} from './dom.js'; @@ -13,7 +13,7 @@ const renderer = (node: DOMElement, terminalWidth: number): Result => { node.yogaNode!.setWidth(terminalWidth); if (node.yogaNode) { - node.yogaNode.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR); + node.yogaNode.calculateLayout(undefined, undefined, DIRECTION_LTR); const output = new Output({ width: node.yogaNode.getComputedWidth(), diff --git a/src/styles.ts b/src/styles.ts index 81d95b2ad..9cfa26fee 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -1,8 +1,34 @@ /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */ -import Yoga, {type YogaNode} from 'yoga-layout-prebuilt'; import {type Boxes} from 'cli-boxes'; import {type LiteralUnion} from 'type-fest'; import {type ForegroundColorName} from 'chalk'; +import { + ALIGN_AUTO, + ALIGN_CENTER, + ALIGN_FLEX_END, + ALIGN_FLEX_START, + ALIGN_STRETCH, + DISPLAY_FLEX, + DISPLAY_NONE, + EDGE_BOTTOM, + EDGE_END, + EDGE_LEFT, + EDGE_RIGHT, + EDGE_TOP, + FLEX_DIRECTION_COLUMN, + FLEX_DIRECTION_COLUMN_REVERSE, + FLEX_DIRECTION_ROW, + FLEX_DIRECTION_ROW_REVERSE, + JUSTIFY_CENTER, + JUSTIFY_FLEX_END, + JUSTIFY_FLEX_START, + JUSTIFY_SPACE_AROUND, + JUSTIFY_SPACE_BETWEEN, + POSITION_TYPE_ABSOLUTE, + POSITION_TYPE_RELATIVE, + EDGE_START, + type YogaNode +} from './yoga.js'; export type Styles = { readonly textWrap?: @@ -143,49 +169,49 @@ export type Styles = { readonly borderColor?: LiteralUnion; }; -const applyPositionStyles = (node: Yoga.YogaNode, style: Styles): void => { +const applyPositionStyles = (node: YogaNode, style: Styles): void => { if ('position' in style) { node.setPositionType( style.position === 'absolute' - ? Yoga.POSITION_TYPE_ABSOLUTE - : Yoga.POSITION_TYPE_RELATIVE + ? POSITION_TYPE_ABSOLUTE + : POSITION_TYPE_RELATIVE ); } }; -const applyMarginStyles = (node: Yoga.YogaNode, style: Styles): void => { +const applyMarginStyles = (node: YogaNode, style: Styles): void => { if ('marginLeft' in style) { - node.setMargin(Yoga.EDGE_START, style.marginLeft || 0); + node.setMargin(EDGE_START, style.marginLeft || 0); } if ('marginRight' in style) { - node.setMargin(Yoga.EDGE_END, style.marginRight || 0); + node.setMargin(EDGE_END, style.marginRight || 0); } if ('marginTop' in style) { - node.setMargin(Yoga.EDGE_TOP, style.marginTop || 0); + node.setMargin(EDGE_TOP, style.marginTop || 0); } if ('marginBottom' in style) { - node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom || 0); + node.setMargin(EDGE_BOTTOM, style.marginBottom || 0); } }; -const applyPaddingStyles = (node: Yoga.YogaNode, style: Styles): void => { +const applyPaddingStyles = (node: YogaNode, style: Styles): void => { if ('paddingLeft' in style) { - node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0); + node.setPadding(EDGE_LEFT, style.paddingLeft || 0); } if ('paddingRight' in style) { - node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight || 0); + node.setPadding(EDGE_RIGHT, style.paddingRight || 0); } if ('paddingTop' in style) { - node.setPadding(Yoga.EDGE_TOP, style.paddingTop || 0); + node.setPadding(EDGE_TOP, style.paddingTop || 0); } if ('paddingBottom' in style) { - node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom || 0); + node.setPadding(EDGE_BOTTOM, style.paddingBottom || 0); } }; @@ -202,19 +228,19 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => { if ('flexDirection' in style) { if (style.flexDirection === 'row') { - node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW); + node.setFlexDirection(FLEX_DIRECTION_ROW); } if (style.flexDirection === 'row-reverse') { - node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW_REVERSE); + node.setFlexDirection(FLEX_DIRECTION_ROW_REVERSE); } if (style.flexDirection === 'column') { - node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN); + node.setFlexDirection(FLEX_DIRECTION_COLUMN); } if (style.flexDirection === 'column-reverse') { - node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN_REVERSE); + node.setFlexDirection(FLEX_DIRECTION_COLUMN_REVERSE); } } @@ -231,59 +257,59 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => { if ('alignItems' in style) { if (style.alignItems === 'stretch' || !style.alignItems) { - node.setAlignItems(Yoga.ALIGN_STRETCH); + node.setAlignItems(ALIGN_STRETCH); } if (style.alignItems === 'flex-start') { - node.setAlignItems(Yoga.ALIGN_FLEX_START); + node.setAlignItems(ALIGN_FLEX_START); } if (style.alignItems === 'center') { - node.setAlignItems(Yoga.ALIGN_CENTER); + node.setAlignItems(ALIGN_CENTER); } if (style.alignItems === 'flex-end') { - node.setAlignItems(Yoga.ALIGN_FLEX_END); + node.setAlignItems(ALIGN_FLEX_END); } } if ('alignSelf' in style) { if (style.alignSelf === 'auto' || !style.alignSelf) { - node.setAlignSelf(Yoga.ALIGN_AUTO); + node.setAlignSelf(ALIGN_AUTO); } if (style.alignSelf === 'flex-start') { - node.setAlignSelf(Yoga.ALIGN_FLEX_START); + node.setAlignSelf(ALIGN_FLEX_START); } if (style.alignSelf === 'center') { - node.setAlignSelf(Yoga.ALIGN_CENTER); + node.setAlignSelf(ALIGN_CENTER); } if (style.alignSelf === 'flex-end') { - node.setAlignSelf(Yoga.ALIGN_FLEX_END); + node.setAlignSelf(ALIGN_FLEX_END); } } if ('justifyContent' in style) { if (style.justifyContent === 'flex-start' || !style.justifyContent) { - node.setJustifyContent(Yoga.JUSTIFY_FLEX_START); + node.setJustifyContent(JUSTIFY_FLEX_START); } if (style.justifyContent === 'center') { - node.setJustifyContent(Yoga.JUSTIFY_CENTER); + node.setJustifyContent(JUSTIFY_CENTER); } if (style.justifyContent === 'flex-end') { - node.setJustifyContent(Yoga.JUSTIFY_FLEX_END); + node.setJustifyContent(JUSTIFY_FLEX_END); } if (style.justifyContent === 'space-between') { - node.setJustifyContent(Yoga.JUSTIFY_SPACE_BETWEEN); + node.setJustifyContent(JUSTIFY_SPACE_BETWEEN); } if (style.justifyContent === 'space-around') { - node.setJustifyContent(Yoga.JUSTIFY_SPACE_AROUND); + node.setJustifyContent(JUSTIFY_SPACE_AROUND); } } }; @@ -328,9 +354,7 @@ const applyDimensionStyles = (node: YogaNode, style: Styles): void => { const applyDisplayStyles = (node: YogaNode, style: Styles): void => { if ('display' in style) { - node.setDisplay( - style.display === 'flex' ? Yoga.DISPLAY_FLEX : Yoga.DISPLAY_NONE - ); + node.setDisplay(style.display === 'flex' ? DISPLAY_FLEX : DISPLAY_NONE); } }; @@ -338,10 +362,10 @@ const applyBorderStyles = (node: YogaNode, style: Styles): void => { if ('borderStyle' in style) { const borderWidth = typeof style.borderStyle === 'string' ? 1 : 0; - node.setBorder(Yoga.EDGE_TOP, borderWidth); - node.setBorder(Yoga.EDGE_BOTTOM, borderWidth); - node.setBorder(Yoga.EDGE_LEFT, borderWidth); - node.setBorder(Yoga.EDGE_RIGHT, borderWidth); + node.setBorder(EDGE_TOP, borderWidth); + node.setBorder(EDGE_BOTTOM, borderWidth); + node.setBorder(EDGE_LEFT, borderWidth); + node.setBorder(EDGE_RIGHT, borderWidth); } }; diff --git a/src/yoga.ts b/src/yoga.ts new file mode 100644 index 000000000..3cf93644d --- /dev/null +++ b/src/yoga.ts @@ -0,0 +1,20 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +import fs from 'node:fs'; +import {createRequire} from 'node:module'; +import {dirname, join} from 'node:path'; +import initYoga from 'yoga-wasm-web'; + +const Yoga = await initYoga( + fs.readFileSync( + join( + dirname( + createRequire(import.meta.url).resolve('yoga-wasm-web/package.json') + ), + 'dist/yoga.wasm' + ) + ) +); + +export default Yoga; +export * from 'yoga-wasm-web'; +export type {Node as YogaNode} from 'yoga-wasm-web'; From 152f584cb9a88aeffc31cb0cc812b44f67cfcd31 Mon Sep 17 00:00:00 2001 From: Amit Dahan Date: Mon, 13 Mar 2023 12:13:23 +0200 Subject: [PATCH 2/4] Simplify style imports from yoga --- src/styles.ts | 101 +++++++++++++++++++------------------------------- 1 file changed, 39 insertions(+), 62 deletions(-) diff --git a/src/styles.ts b/src/styles.ts index e1a1ff1c7..abd5bee67 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -2,33 +2,8 @@ import {type Boxes} from 'cli-boxes'; import {type LiteralUnion} from 'type-fest'; import {type ForegroundColorName} from 'chalk'; -import { - ALIGN_AUTO, - ALIGN_CENTER, - ALIGN_FLEX_END, - ALIGN_FLEX_START, - ALIGN_STRETCH, - DISPLAY_FLEX, - DISPLAY_NONE, - EDGE_BOTTOM, - EDGE_END, - EDGE_LEFT, - EDGE_RIGHT, - EDGE_TOP, - FLEX_DIRECTION_COLUMN, - FLEX_DIRECTION_COLUMN_REVERSE, - FLEX_DIRECTION_ROW, - FLEX_DIRECTION_ROW_REVERSE, - JUSTIFY_CENTER, - JUSTIFY_FLEX_END, - JUSTIFY_FLEX_START, - JUSTIFY_SPACE_AROUND, - JUSTIFY_SPACE_BETWEEN, - POSITION_TYPE_ABSOLUTE, - POSITION_TYPE_RELATIVE, - EDGE_START, - type YogaNode -} from './yoga.js'; +import type {YogaNode} from './yoga.js'; +import * as Yoga from './yoga.js'; export type Styles = { readonly textWrap?: @@ -179,49 +154,49 @@ export type Styles = { readonly overflowY?: 'visible' | 'hidden'; }; -const applyPositionStyles = (node: YogaNode, style: Styles): void => { +const applyPositionStyles = (node: Yoga.YogaNode, style: Styles): void => { if ('position' in style) { node.setPositionType( style.position === 'absolute' - ? POSITION_TYPE_ABSOLUTE - : POSITION_TYPE_RELATIVE + ? Yoga.POSITION_TYPE_ABSOLUTE + : Yoga.POSITION_TYPE_RELATIVE ); } }; -const applyMarginStyles = (node: YogaNode, style: Styles): void => { +const applyMarginStyles = (node: Yoga.YogaNode, style: Styles): void => { if ('marginLeft' in style) { - node.setMargin(EDGE_START, style.marginLeft || 0); + node.setMargin(Yoga.EDGE_START, style.marginLeft || 0); } if ('marginRight' in style) { - node.setMargin(EDGE_END, style.marginRight || 0); + node.setMargin(Yoga.EDGE_END, style.marginRight || 0); } if ('marginTop' in style) { - node.setMargin(EDGE_TOP, style.marginTop || 0); + node.setMargin(Yoga.EDGE_TOP, style.marginTop || 0); } if ('marginBottom' in style) { - node.setMargin(EDGE_BOTTOM, style.marginBottom || 0); + node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom || 0); } }; -const applyPaddingStyles = (node: YogaNode, style: Styles): void => { +const applyPaddingStyles = (node: Yoga.YogaNode, style: Styles): void => { if ('paddingLeft' in style) { - node.setPadding(EDGE_LEFT, style.paddingLeft || 0); + node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0); } if ('paddingRight' in style) { - node.setPadding(EDGE_RIGHT, style.paddingRight || 0); + node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight || 0); } if ('paddingTop' in style) { - node.setPadding(EDGE_TOP, style.paddingTop || 0); + node.setPadding(Yoga.EDGE_TOP, style.paddingTop || 0); } if ('paddingBottom' in style) { - node.setPadding(EDGE_BOTTOM, style.paddingBottom || 0); + node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom || 0); } }; @@ -238,19 +213,19 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => { if ('flexDirection' in style) { if (style.flexDirection === 'row') { - node.setFlexDirection(FLEX_DIRECTION_ROW); + node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW); } if (style.flexDirection === 'row-reverse') { - node.setFlexDirection(FLEX_DIRECTION_ROW_REVERSE); + node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW_REVERSE); } if (style.flexDirection === 'column') { - node.setFlexDirection(FLEX_DIRECTION_COLUMN); + node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN); } if (style.flexDirection === 'column-reverse') { - node.setFlexDirection(FLEX_DIRECTION_COLUMN_REVERSE); + node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN_REVERSE); } } @@ -267,59 +242,59 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => { if ('alignItems' in style) { if (style.alignItems === 'stretch' || !style.alignItems) { - node.setAlignItems(ALIGN_STRETCH); + node.setAlignItems(Yoga.ALIGN_STRETCH); } if (style.alignItems === 'flex-start') { - node.setAlignItems(ALIGN_FLEX_START); + node.setAlignItems(Yoga.ALIGN_FLEX_START); } if (style.alignItems === 'center') { - node.setAlignItems(ALIGN_CENTER); + node.setAlignItems(Yoga.ALIGN_CENTER); } if (style.alignItems === 'flex-end') { - node.setAlignItems(ALIGN_FLEX_END); + node.setAlignItems(Yoga.ALIGN_FLEX_END); } } if ('alignSelf' in style) { if (style.alignSelf === 'auto' || !style.alignSelf) { - node.setAlignSelf(ALIGN_AUTO); + node.setAlignSelf(Yoga.ALIGN_AUTO); } if (style.alignSelf === 'flex-start') { - node.setAlignSelf(ALIGN_FLEX_START); + node.setAlignSelf(Yoga.ALIGN_FLEX_START); } if (style.alignSelf === 'center') { - node.setAlignSelf(ALIGN_CENTER); + node.setAlignSelf(Yoga.ALIGN_CENTER); } if (style.alignSelf === 'flex-end') { - node.setAlignSelf(ALIGN_FLEX_END); + node.setAlignSelf(Yoga.ALIGN_FLEX_END); } } if ('justifyContent' in style) { if (style.justifyContent === 'flex-start' || !style.justifyContent) { - node.setJustifyContent(JUSTIFY_FLEX_START); + node.setJustifyContent(Yoga.JUSTIFY_FLEX_START); } if (style.justifyContent === 'center') { - node.setJustifyContent(JUSTIFY_CENTER); + node.setJustifyContent(Yoga.JUSTIFY_CENTER); } if (style.justifyContent === 'flex-end') { - node.setJustifyContent(JUSTIFY_FLEX_END); + node.setJustifyContent(Yoga.JUSTIFY_FLEX_END); } if (style.justifyContent === 'space-between') { - node.setJustifyContent(JUSTIFY_SPACE_BETWEEN); + node.setJustifyContent(Yoga.JUSTIFY_SPACE_BETWEEN); } if (style.justifyContent === 'space-around') { - node.setJustifyContent(JUSTIFY_SPACE_AROUND); + node.setJustifyContent(Yoga.JUSTIFY_SPACE_AROUND); } } }; @@ -364,7 +339,9 @@ const applyDimensionStyles = (node: YogaNode, style: Styles): void => { const applyDisplayStyles = (node: YogaNode, style: Styles): void => { if ('display' in style) { - node.setDisplay(style.display === 'flex' ? DISPLAY_FLEX : DISPLAY_NONE); + node.setDisplay( + style.display === 'flex' ? Yoga.DISPLAY_FLEX : Yoga.DISPLAY_NONE + ); } }; @@ -372,10 +349,10 @@ const applyBorderStyles = (node: YogaNode, style: Styles): void => { if ('borderStyle' in style) { const borderWidth = typeof style.borderStyle === 'string' ? 1 : 0; - node.setBorder(EDGE_TOP, borderWidth); - node.setBorder(EDGE_BOTTOM, borderWidth); - node.setBorder(EDGE_LEFT, borderWidth); - node.setBorder(EDGE_RIGHT, borderWidth); + node.setBorder(Yoga.EDGE_TOP, borderWidth); + node.setBorder(Yoga.EDGE_BOTTOM, borderWidth); + node.setBorder(Yoga.EDGE_LEFT, borderWidth); + node.setBorder(Yoga.EDGE_RIGHT, borderWidth); } }; From b438407ec0ab96d7b14747163f94ceb89392cc90 Mon Sep 17 00:00:00 2001 From: Amit Dahan Date: Wed, 15 Mar 2023 13:38:14 +0200 Subject: [PATCH 3/4] Fix render-node-to-output --- src/render-node-to-output.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/render-node-to-output.ts b/src/render-node-to-output.ts index ab2e3de19..c7f970cc7 100644 --- a/src/render-node-to-output.ts +++ b/src/render-node-to-output.ts @@ -1,6 +1,6 @@ import widestLine from 'widest-line'; import indentString from 'indent-string'; -import {DISPLAY_NONE} from './yoga.js'; +import * as Yoga from './yoga.js'; import wrapText from './wrap-text.js'; import getMaxWidth from './get-max-width.js'; import squashTextNodes from './squash-text-nodes.js'; @@ -53,7 +53,7 @@ const renderNodeToOutput = ( const {yogaNode} = node; if (yogaNode) { - if (yogaNode.getDisplay() === DISPLAY_NONE) { + if (yogaNode.getDisplay() === Yoga.DISPLAY_NONE) { return; } From eae03b79ac0f69b36a0bba5014f9e8887c261033 Mon Sep 17 00:00:00 2001 From: Amit Dahan Date: Wed, 15 Mar 2023 13:48:22 +0200 Subject: [PATCH 4/4] Bump yoga-wasm-web and consume /auto directly --- package.json | 2 +- src/dom.ts | 3 ++- src/get-max-width.ts | 11 ++++++----- src/reconciler.ts | 7 ++++--- src/render-node-to-output.ts | 3 ++- src/renderer.ts | 5 +++-- src/styles.ts | 10 +++++----- src/yoga.ts | 20 -------------------- 8 files changed, 23 insertions(+), 38 deletions(-) delete mode 100644 src/yoga.ts diff --git a/package.json b/package.json index d58a3d965..b459e0058 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "widest-line": "^4.0.1", "wrap-ansi": "^8.1.0", "ws": "^8.12.0", - "yoga-wasm-web": "~0.3.2" + "yoga-wasm-web": "~0.3.3" }, "devDependencies": { "@faker-js/faker": "^7.6.0", diff --git a/src/dom.ts b/src/dom.ts index 345cb1a92..e5a891da1 100644 --- a/src/dom.ts +++ b/src/dom.ts @@ -1,4 +1,5 @@ -import Yoga, {type YogaNode} from './yoga.js'; +// eslint-disable-next-line n/file-extension-in-import +import Yoga, {type Node as YogaNode} from 'yoga-wasm-web/auto'; import measureText from './measure-text.js'; import applyStyles, {type Styles} from './styles.js'; import wrapText from './wrap-text.js'; diff --git a/src/get-max-width.ts b/src/get-max-width.ts index 8c5bff249..a5d8e04d4 100644 --- a/src/get-max-width.ts +++ b/src/get-max-width.ts @@ -1,12 +1,13 @@ -import {EDGE_LEFT, EDGE_RIGHT, type YogaNode} from './yoga.js'; +// eslint-disable-next-line n/file-extension-in-import +import Yoga, {type Node as YogaNode} from 'yoga-wasm-web/auto'; const getMaxWidth = (yogaNode: YogaNode) => { return ( yogaNode.getComputedWidth() - - yogaNode.getComputedPadding(EDGE_LEFT) - - yogaNode.getComputedPadding(EDGE_RIGHT) - - yogaNode.getComputedBorder(EDGE_LEFT) - - yogaNode.getComputedBorder(EDGE_RIGHT) + yogaNode.getComputedPadding(Yoga.EDGE_LEFT) - + yogaNode.getComputedPadding(Yoga.EDGE_RIGHT) - + yogaNode.getComputedBorder(Yoga.EDGE_LEFT) - + yogaNode.getComputedBorder(Yoga.EDGE_RIGHT) ); }; diff --git a/src/reconciler.ts b/src/reconciler.ts index 80b377fb2..316dc0006 100644 --- a/src/reconciler.ts +++ b/src/reconciler.ts @@ -1,7 +1,8 @@ import process from 'node:process'; import createReconciler from 'react-reconciler'; import {DefaultEventPriority} from 'react-reconciler/constants.js'; -import {DISPLAY_FLEX, DISPLAY_NONE, type YogaNode} from './yoga.js'; +// eslint-disable-next-line n/file-extension-in-import +import Yoga, {type Node as YogaNode} from 'yoga-wasm-web/auto'; import { createTextNode, appendChildNode, @@ -157,10 +158,10 @@ export default createReconciler< }, getPublicInstance: instance => instance, hideInstance(node) { - node.yogaNode?.setDisplay(DISPLAY_NONE); + node.yogaNode?.setDisplay(Yoga.DISPLAY_NONE); }, unhideInstance(node) { - node.yogaNode?.setDisplay(DISPLAY_FLEX); + node.yogaNode?.setDisplay(Yoga.DISPLAY_FLEX); }, appendInitialChild: appendChildNode, appendChild: appendChildNode, diff --git a/src/render-node-to-output.ts b/src/render-node-to-output.ts index c7f970cc7..48720abff 100644 --- a/src/render-node-to-output.ts +++ b/src/render-node-to-output.ts @@ -1,6 +1,7 @@ import widestLine from 'widest-line'; import indentString from 'indent-string'; -import * as Yoga from './yoga.js'; +// eslint-disable-next-line n/file-extension-in-import +import Yoga from 'yoga-wasm-web/auto'; import wrapText from './wrap-text.js'; import getMaxWidth from './get-max-width.js'; import squashTextNodes from './squash-text-nodes.js'; diff --git a/src/renderer.ts b/src/renderer.ts index 1c1ec5527..7de314682 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,4 +1,5 @@ -import {DIRECTION_LTR} from './yoga.js'; +// eslint-disable-next-line n/file-extension-in-import +import Yoga from 'yoga-wasm-web/auto'; import renderNodeToOutput from './render-node-to-output.js'; import Output from './output.js'; import {type DOMElement} from './dom.js'; @@ -13,7 +14,7 @@ const renderer = (node: DOMElement, terminalWidth: number): Result => { node.yogaNode!.setWidth(terminalWidth); if (node.yogaNode) { - node.yogaNode.calculateLayout(undefined, undefined, DIRECTION_LTR); + node.yogaNode.calculateLayout(undefined, undefined, Yoga.DIRECTION_LTR); const output = new Output({ width: node.yogaNode.getComputedWidth(), diff --git a/src/styles.ts b/src/styles.ts index abd5bee67..f1eaf1d9f 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -2,8 +2,8 @@ import {type Boxes} from 'cli-boxes'; import {type LiteralUnion} from 'type-fest'; import {type ForegroundColorName} from 'chalk'; -import type {YogaNode} from './yoga.js'; -import * as Yoga from './yoga.js'; +// eslint-disable-next-line n/file-extension-in-import +import Yoga, {type Node as YogaNode} from 'yoga-wasm-web/auto'; export type Styles = { readonly textWrap?: @@ -154,7 +154,7 @@ export type Styles = { readonly overflowY?: 'visible' | 'hidden'; }; -const applyPositionStyles = (node: Yoga.YogaNode, style: Styles): void => { +const applyPositionStyles = (node: YogaNode, style: Styles): void => { if ('position' in style) { node.setPositionType( style.position === 'absolute' @@ -164,7 +164,7 @@ const applyPositionStyles = (node: Yoga.YogaNode, style: Styles): void => { } }; -const applyMarginStyles = (node: Yoga.YogaNode, style: Styles): void => { +const applyMarginStyles = (node: YogaNode, style: Styles): void => { if ('marginLeft' in style) { node.setMargin(Yoga.EDGE_START, style.marginLeft || 0); } @@ -182,7 +182,7 @@ const applyMarginStyles = (node: Yoga.YogaNode, style: Styles): void => { } }; -const applyPaddingStyles = (node: Yoga.YogaNode, style: Styles): void => { +const applyPaddingStyles = (node: YogaNode, style: Styles): void => { if ('paddingLeft' in style) { node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0); } diff --git a/src/yoga.ts b/src/yoga.ts deleted file mode 100644 index 3cf93644d..000000000 --- a/src/yoga.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable @typescript-eslint/naming-convention */ -import fs from 'node:fs'; -import {createRequire} from 'node:module'; -import {dirname, join} from 'node:path'; -import initYoga from 'yoga-wasm-web'; - -const Yoga = await initYoga( - fs.readFileSync( - join( - dirname( - createRequire(import.meta.url).resolve('yoga-wasm-web/package.json') - ), - 'dist/yoga.wasm' - ) - ) -); - -export default Yoga; -export * from 'yoga-wasm-web'; -export type {Node as YogaNode} from 'yoga-wasm-web';