Replace yoga-layout-prebuilt with yoga-wasm-web

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",

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;
 };

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)
  );
 };
 

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,

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;
  }
 

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(),

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<ForegroundColorName, string>;
 };
 
-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,20 +354,18 @@ 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);
  }
 };
 
 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);
  }
 };
 

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';