feat: Switch to yoga-layout (#689)

## Summary
Replace yoga-wasm-web with yoga-layout for better performance and
maintainability.

## Test Plan
- [x] All tests run
- [x] Lint fixes applied
- [x] Prettier formatting applied
- [x] Playground tested and working

## Known Issues
- Some snapshot tests have mismatches
- Type errors present for "auto" and percentage string support in
flexBasis and (max|min)(Height|Width) properties

These will be addressed in follow-up commits.

---------

Co-authored-by: Shu Ding <g@shud.in>

Author: pavi2410

.eslintrc.json

@@ -25,13 +25,6 @@
     }
   ],
   "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": [
-      "./tsconfig.json",
-      "./playground/tsconfig.json",
-      "./tsconfig.wasm.json"
-    ]
-  },
   "plugins": ["react", "react-hooks", "@typescript-eslint"],
   "rules": {
     "no-inner-declarations": 0,

README.md

@@ -118,13 +118,13 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 
 <tr>
 <td colspan="2"><code>display</code></td>
-<td><code>none</code> and <code>flex</code>, default to <code>flex</code></td>
+<td><code>flex</code>, <code>contents</code>, <code>none</code>, default to <code>flex</code></td>
 <td></td>
 </tr>
 
 <tr>
 <td colspan="2"><code>position</code></td>
-<td><code>relative</code> and <code>absolute</code>, default to <code>relative</code></td>
+<td><code>relative</code>, <code>static</code> and <code>absolute</code>, default to <code>relative</code></td>
 <td></td>
 </tr>
 
@@ -234,6 +234,12 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 <td></td>
 </tr>
 
+<tr>
+<td colspan="2"><code>boxSizing</code></td>
+<td>Supported</td>
+<td></td>
+</tr>
+
 <tr>
 <td colspan="2"><code>boxShadow</code></td>
 <td>Supported</td>
@@ -289,9 +295,8 @@ Note:
 
 1. Three-dimensional transforms are not supported.
 2. There is no `z-index` support in SVG. Elements that come later in the document will be painted on top.
-3. `box-sizing` is set to `border-box` for all elements.
-4. `calc` isn't supported.
-5. `currentcolor` support is only available for the `color` property.
+3. `calc` isn't supported.
+4. `currentColor` support is only available for the `color` property.
 
 ### Language and Typography
 
@@ -389,30 +394,10 @@ await satori(
 )
 ```
 
-### Runtime and WASM
+### Runtime Support
 
 Satori can be used in browser, Node.js (>= 16), and Web Workers.
 
-By default, Satori depends on asm.js for the browser runtime, and native module in Node.js. However, you can optionally load WASM instead by importing `satori/wasm` and provide the initialized WASM module instance of Yoga to Satori:
-
-```js
-import satori, { init } from 'satori/wasm'
-import initYoga from 'yoga-wasm-web'
-
-const yoga = initYoga(await fetch('/yoga.wasm').then(res => res.arrayBuffer()))
-init(yoga)
-
-await satori(...)
-```
-
-When running in the browser or in the Node.js environment, WASM files need to be hosted and fetched before initializing. asm.js can be bundled together with the lib. In this case WASM should be faster.
-
-When running on the Node.js server, native modules should be faster. However there are Node.js environments where native modules are not supported (e.g. StackBlitz's WebContainers), or other JS runtimes that support WASM (e.g. Vercel's Edge Runtime, Cloudflare Workers, or Deno).
-
-Additionally, there are other difference between asm.js, native and WASM, such as security and compatibility.
-
-Overall there are many trade-offs between each choice, and it's better to pick the one that works the best for your use case.
-
 ### Font Embedding
 
 By default, Satori renders the text as `<path>` in SVG, instead of `<text>`. That means it embeds the font path data as inlined information, so succeeding processes (e.g. render the SVG on another platform) don’t need to deal with font files anymore.

package.json

@@ -27,23 +27,21 @@
     "./wasm": {
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/index.wasm.js"
+        "default": "./dist/index.js"
       },
       "require": {
         "types": "./dist/index.d.cts",
-        "default": "./dist/index.wasm.cjs"
+        "default": "./dist/index.cjs"
       }
     }
   },
   "scripts": {
     "prepare": "husky install",
-    "dev": "concurrently \"pnpm dev:default\" \"pnpm dev:wasm\"",
+    "dev": "pnpm run dev:default",
     "dev:default": "NODE_ENV=development tsup src/index.ts --watch --ignore-watch playground",
-    "dev:wasm": "WASM=1 NODE_ENV=development tsup src/index.ts --watch --ignore-watch playground",
     "dev:playground": "turbo dev --filter=satori-playground...",
-    "build": "NODE_ENV=production pnpm run build:default && pnpm run build:wasm",
+    "build": "NODE_ENV=production pnpm run build:default",
     "build:default": "tsup",
-    "build:wasm": "WASM=1 tsup",
     "test": "NODE_ENV=test vitest run",
     "test:ui": "NODE_ENV=test vitest --ui --coverage.enabled",
     "test-type": "tsc -p tsconfig.json --noEmit && tsc -p playground/tsconfig.json --noEmit",
@@ -112,7 +110,7 @@
     "linebreak": "^1.1.0",
     "parse-css-color": "^0.2.1",
     "postcss-value-parser": "^4.2.0",
-    "yoga-wasm-web": "^0.3.3"
+    "yoga-layout": "^3.2.1"
   },
   "packageManager": "pnpm@8.7.0",
   "engines": {

pnpm-lock.yaml

@@ -4,13 +4,18 @@
  * also returns the inherited style for children of the element.
  */
 
-import type { Node as YogaNode } from 'yoga-wasm-web'
-
-import getYoga from '../yoga/index.js'
 import presets from './presets.js'
 import inheritable from './inheritable.js'
 import expand, { SerializedStyle } from './expand.js'
-import { lengthToNumber, parseViewBox, v } from '../utils.js'
+import {
+  asPointAutoPercentageLength,
+  asPointPercentageLength,
+  getYoga,
+  lengthToNumber,
+  parseViewBox,
+  v,
+  YogaNode,
+} from '../utils.js'
 import { resolveImageData } from './image.js'
 
 type SatoriElement = keyof typeof presets
@@ -168,6 +173,7 @@ export default async function compute(
       {
         flex: Yoga.DISPLAY_FLEX,
         block: Yoga.DISPLAY_FLEX,
+        contents: Yoga.DISPLAY_CONTENTS,
         none: Yoga.DISPLAY_NONE,
         '-webkit-box': Yoga.DISPLAY_FLEX,
       },
@@ -281,24 +287,24 @@ export default async function compute(
   // @TODO: node.setFlex
 
   if (typeof style.flexBasis !== 'undefined') {
-    node.setFlexBasis(style.flexBasis)
+    node.setFlexBasis(asPointAutoPercentageLength(style.flexBasis, 'flexBasis'))
   }
   node.setFlexGrow(typeof style.flexGrow === 'undefined' ? 0 : style.flexGrow)
   node.setFlexShrink(
     typeof style.flexShrink === 'undefined' ? 0 : style.flexShrink
   )
 
   if (typeof style.maxHeight !== 'undefined') {
-    node.setMaxHeight(style.maxHeight)
+    node.setMaxHeight(asPointPercentageLength(style.maxHeight, 'maxHeight'))
   }
   if (typeof style.maxWidth !== 'undefined') {
-    node.setMaxWidth(style.maxWidth)
+    node.setMaxWidth(asPointPercentageLength(style.maxWidth, 'maxWidth'))
   }
   if (typeof style.minHeight !== 'undefined') {
-    node.setMinHeight(style.minHeight)
+    node.setMinHeight(asPointPercentageLength(style.minHeight, 'minHeight'))
   }
   if (typeof style.minWidth !== 'undefined') {
-    node.setMinWidth(style.minWidth)
+    node.setMinWidth(asPointPercentageLength(style.minWidth, 'minWidth'))
   }
 
   node.setOverflow(
@@ -313,10 +319,22 @@ export default async function compute(
     )
   )
 
-  node.setMargin(Yoga.EDGE_TOP, style.marginTop || 0)
-  node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom || 0)
-  node.setMargin(Yoga.EDGE_LEFT, style.marginLeft || 0)
-  node.setMargin(Yoga.EDGE_RIGHT, style.marginRight || 0)
+  node.setMargin(
+    Yoga.EDGE_TOP,
+    asPointAutoPercentageLength(style.marginTop || 0)
+  )
+  node.setMargin(
+    Yoga.EDGE_BOTTOM,
+    asPointAutoPercentageLength(style.marginBottom || 0)
+  )
+  node.setMargin(
+    Yoga.EDGE_LEFT,
+    asPointAutoPercentageLength(style.marginLeft || 0)
+  )
+  node.setMargin(
+    Yoga.EDGE_RIGHT,
+    asPointAutoPercentageLength(style.marginRight || 0)
+  )
 
   node.setBorder(Yoga.EDGE_TOP, style.borderTopWidth || 0)
   node.setBorder(Yoga.EDGE_BOTTOM, style.borderBottomWidth || 0)
@@ -328,38 +346,60 @@ export default async function compute(
   node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0)
   node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight || 0)
 
+  node.setBoxSizing(
+    v(
+      style.boxSizing,
+      {
+        'border-box': Yoga.BOX_SIZING_BORDER_BOX,
+        'content-box': Yoga.BOX_SIZING_CONTENT_BOX,
+      },
+      Yoga.BOX_SIZING_BORDER_BOX,
+      'boxSizing'
+    )
+  )
+
   node.setPositionType(
     v(
       style.position,
       {
         absolute: Yoga.POSITION_TYPE_ABSOLUTE,
         relative: Yoga.POSITION_TYPE_RELATIVE,
+        static: Yoga.POSITION_TYPE_STATIC,
       },
       Yoga.POSITION_TYPE_RELATIVE,
       'position'
     )
   )
 
   if (typeof style.top !== 'undefined') {
-    node.setPosition(Yoga.EDGE_TOP, style.top)
+    node.setPosition(Yoga.EDGE_TOP, asPointPercentageLength(style.top, 'top'))
   }
   if (typeof style.bottom !== 'undefined') {
-    node.setPosition(Yoga.EDGE_BOTTOM, style.bottom)
+    node.setPosition(
+      Yoga.EDGE_BOTTOM,
+      asPointPercentageLength(style.bottom, 'bottom')
+    )
   }
   if (typeof style.left !== 'undefined') {
-    node.setPosition(Yoga.EDGE_LEFT, style.left)
+    node.setPosition(
+      Yoga.EDGE_LEFT,
+      asPointPercentageLength(style.left, 'left')
+    )
   }
   if (typeof style.right !== 'undefined') {
-    node.setPosition(Yoga.EDGE_RIGHT, style.right)
+    node.setPosition(
+      Yoga.EDGE_RIGHT,
+      asPointPercentageLength(style.right, 'right')
+    )
   }
 
   if (typeof style.height !== 'undefined') {
-    node.setHeight(style.height)
+    node.setHeight(asPointAutoPercentageLength(style.height, 'height'))
   } else {
     node.setHeightAuto()
   }
   if (typeof style.width !== 'undefined') {
-    node.setWidth(style.width)
+    node.setWidth(asPointAutoPercentageLength(style.width, 'width'))
   } else {
     node.setWidthAuto()
   }

src/handler/compute.ts

@@ -3,15 +3,14 @@
  */
 
 import type { ReactNode } from 'react'
-import type { Node as YogaNode } from 'yoga-wasm-web'
-
-import getYoga from './yoga/index.js'
 import {
   isReactElement,
   isClass,
   buildXMLString,
   normalizeChildren,
   hasDangerouslySetInnerHTMLProp,
+  getYoga,
+  YogaNode,
 } from './utils.js'
 import { SVGNodeToImage } from './handler/preprocess.js'
 import computeStyle from './handler/compute.js'
@@ -262,10 +261,11 @@ export default async function* layout(
       children &&
       typeof children !== 'string' &&
       display !== 'flex' &&
-      display !== 'none'
+      display !== 'none' &&
+      display !== 'contents'
     ) {
       throw new Error(
-        `Expected <div> to have explicit "display: flex" or "display: none" if it has more than one child node.`
+        `Expected <div> to have explicit "display: flex", "display: contents", or "display: none" if it has more than one child node.`
       )
     }
     baseRenderResult = await rect(

src/layout.ts

@@ -2,16 +2,14 @@ import type { ReactNode } from 'react'
 import type { TwConfig } from 'twrnc'
 import type { SatoriNode } from './layout.js'
 
-import getYoga, { init } from './yoga/index.js'
 import layout from './layout.js'
 import FontLoader, { FontOptions } from './font.js'
 import svg from './builder/svg.js'
-import { segment } from './utils.js'
+import { getYoga, segment, TYoga } from './utils.js'
 import { detectLanguageCode, LangCode, Locale } from './language.js'
 import getTw from './handler/tailwind.js'
 import { preProcessNode } from './handler/preprocess.js'
 import { cache, inflightRequests } from './handler/image.js'
-import type { Yoga } from 'yoga-wasm-web'
 
 // We don't need to initialize the opentype instances every time.
 const fontCache = new WeakMap()
@@ -42,8 +40,6 @@ export type SatoriOptions = (
 }
 export type { SatoriNode }
 
-export { init }
-
 export default async function satori(
   element: ReactNode,
   options: SatoriOptions
@@ -197,7 +193,7 @@ export default async function satori(
 }
 
 function getRootNode(
-  Yoga: Yoga,
+  Yoga: TYoga,
   pointScaleFactor?: SatoriOptions['pointScaleFactor']
 ) {
   if (!pointScaleFactor) {

src/satori.ts

@@ -3,8 +3,6 @@
  * supported inline node is text. All other nodes are using block layout.
  */
 import type { LayoutContext } from '../layout.js'
-import type { Yoga } from 'yoga-wasm-web'
-import getYoga from '../yoga/index.js'
 import {
   v,
   segment,
@@ -13,6 +11,9 @@ import {
   isUndefined,
   isString,
   lengthToNumber,
+  getYoga,
+  TYoga,
+  YogaNode,
 } from '../utils.js'
 import buildText, { container } from '../builder/text.js'
 import { buildDropShadow } from '../builder/shadow.js'
@@ -810,10 +811,7 @@ export default async function* buildTextNodes(
   return result
 }
 
-function createTextContainerNode(
-  Yoga: Yoga,
-  textAlign: string
-): ReturnType<Yoga['Node']['create']> {
+function createTextContainerNode(Yoga: TYoga, textAlign: string): YogaNode {
   // Create a container node for this text fragment.
   const textContainer = Yoga.Node.create()
   textContainer.setAlignItems(Yoga.ALIGN_BASELINE)