Replace yoga-layout-prebuilt with yoga-wasm-web (#550)

package.json

@@ -64,7 +64,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.3"
  },
  "devDependencies": {
  "@faker-js/faker": "^7.6.0",

src/dom.ts

@@ -1,4 +1,5 @@
-import Yoga, {type YogaNode} from 'yoga-layout-prebuilt';
+// 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';
@@ -7,7 +8,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,6 +1,7 @@
-import Yoga from 'yoga-layout-prebuilt';
+// eslint-disable-next-line n/file-extension-in-import
+import Yoga, {type Node as YogaNode} from 'yoga-wasm-web/auto';
 
-const getMaxWidth = (yogaNode: Yoga.YogaNode) => {
+const getMaxWidth = (yogaNode: YogaNode) => {
  return (
  yogaNode.getComputedWidth() -
  yogaNode.getComputedPadding(Yoga.EDGE_LEFT) -

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 Yoga from 'yoga-layout-prebuilt';
+// eslint-disable-next-line n/file-extension-in-import
+import Yoga, {type Node as YogaNode} from 'yoga-wasm-web/auto';
 import {
  createTextNode,
  appendChildNode,
@@ -42,7 +43,7 @@ $ npm install --save-dev react-devtools-core
  }
 }
 
-const cleanupYogaNode = (node?: Yoga.YogaNode): void => {
+const cleanupYogaNode = (node?: YogaNode): void => {
  node?.unsetMeasureFunc();
  node?.freeRecursive();
 };

src/render-node-to-output.ts

@@ -1,6 +1,7 @@
-import Yoga from 'yoga-layout-prebuilt';
 import widestLine from 'widest-line';
 import indentString from 'indent-string';
+// 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';

src/renderer.ts

@@ -1,4 +1,5 @@
-import Yoga from 'yoga-layout-prebuilt';
+// 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';

src/styles.ts

@@ -1,8 +1,9 @@
 /* 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';
+// 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?:
@@ -153,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'
@@ -163,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);
  }
@@ -181,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);
  }