fix: update yoga and types (#429)

Co-authored-by: Shu Ding <[email protected]>

Author: jeetiss

package.json

@@ -76,7 +76,6 @@
     "@types/node": "^16",
     "@types/opentype.js": "^1.3.3",
     "@types/react": "^17.0.38",
-    "@types/yoga-layout": "^1.9.4",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "@vitest/ui": "^0.7.6",
@@ -104,7 +103,7 @@
     "emoji-regex": "^10.2.1",
     "linebreak": "^1.1.0",
     "postcss-value-parser": "^4.2.0",
-    "yoga-wasm-web": "^0.3.1"
+    "yoga-wasm-web": "^0.3.3"
   },
   "packageManager": "[email protected]",
   "engines": {

pnpm-lock.yaml

@@ -4,7 +4,7 @@
  * also returns the inherited style for children of the element.
  */
 
-import type { YogaNode } from 'yoga-layout'
+import type { Node as YogaNode } from 'yoga-wasm-web'
 
 import getYoga from '../yoga/index.js'
 import presets from './presets.js'
@@ -274,35 +274,21 @@ export default async function handler(
     )
   )
 
-  // @TODO: fix types
-  if (
-    // @ts-ignore
-    typeof node.setGap !== 'undefined' &&
-    // @ts-ignore
-    typeof node.getGap !== 'undefined'
-  ) {
-    if (typeof style.gap !== 'undefined') {
-      // @ts-ignore
-      node.setGap(Yoga.GUTTER_ALL, style.gap)
-    }
+  if (typeof style.gap !== 'undefined') {
+    node.setGap(Yoga.GUTTER_ALL, style.gap as number)
+  }
 
-    if (typeof style.rowGap !== 'undefined') {
-      // @ts-ignore
-      node.setGap(Yoga.GUTTER_ROW, style.rowGap)
-    }
+  if (typeof style.rowGap !== 'undefined') {
+    node.setGap(Yoga.GUTTER_ROW, style.rowGap as number)
+  }
 
-    if (typeof style.columnGap !== 'undefined') {
-      // @ts-ignore
-      node.setGap(Yoga.GUTTER_COLUMN, style.columnGap)
-    }
+  if (typeof style.columnGap !== 'undefined') {
+    node.setGap(Yoga.GUTTER_COLUMN, style.columnGap as number)
   }
 
   // @TODO: node.setFlex
 
   if (typeof style.flexBasis !== 'undefined') {
-    // We can't use `auto` here due to this:
-    // https://github.com/facebook/yoga/pull/1112
-    // @TODO: We need a fork to add this API.
     node.setFlexBasis(style.flexBasis)
   }
   node.setFlexGrow(
@@ -337,10 +323,10 @@ export default async function handler(
     )
   )
 
-  node.setMargin(Yoga.EDGE_TOP, (style.marginTop as number) || 0)
-  node.setMargin(Yoga.EDGE_BOTTOM, (style.marginBottom as number) || 0)
-  node.setMargin(Yoga.EDGE_LEFT, (style.marginLeft as number) || 0)
-  node.setMargin(Yoga.EDGE_RIGHT, (style.marginRight as number) || 0)
+  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.setBorder(Yoga.EDGE_TOP, (style.borderTopWidth as number) || 0)
   node.setBorder(Yoga.EDGE_BOTTOM, (style.borderBottomWidth as number) || 0)

src/handler/index.ts

@@ -3,7 +3,7 @@
  */
 
 import type { ReactNode } from 'react'
-import type { YogaNode } from 'yoga-layout'
+import type { Node as YogaNode } from 'yoga-wasm-web'
 
 import getYoga from './yoga/index.js'
 import {

src/layout.ts

@@ -1,25 +1,27 @@
-let Yoga: typeof import('yoga-layout')
+import type { Yoga } from 'yoga-wasm-web'
 
-export function init(yoga: typeof Yoga) {
-  Yoga = yoga
+let yogaInstance: Yoga
+
+export function init(yoga: Yoga) {
+  yogaInstance = yoga
 }
 
 let initializationPromise = null
 
-export default async function getYoga(): Promise<typeof Yoga> {
-  if (Yoga) return Yoga
+export default async function getYoga(): Promise<Yoga> {
+  if (yogaInstance) return yogaInstance
 
   if (initializationPromise) {
     await initializationPromise
-    return Yoga
+    return yogaInstance
   }
 
   initializationPromise = import('@yoga')
     .then((mod) => mod.getYogaModule())
-    .then((yogaInstance) => (Yoga = yogaInstance))
+    .then((yoga) => (yogaInstance = yoga))
 
   await initializationPromise
   initializationPromise = null
 
-  return Yoga
+  return yogaInstance
 }

src/yoga/index.ts

@@ -1,7 +1,4 @@
 export async function getYogaModule() {
-  const initYoga = await import('yoga-wasm-web/asm')
-  if (initYoga.default) {
-    return initYoga.default()
-  }
+  const { default: initYoga } = await import('yoga-wasm-web/asm')
   return initYoga()
 }

src/yoga/yoga-prebuilt.ts

@@ -3,22 +3,12 @@ import { join } from 'path'
 import { Resvg } from '@resvg/resvg-js'
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
 import { readFile } from 'node:fs/promises'
-import initYoga from 'yoga-wasm-web'
+import yoga from 'yoga-wasm-web/auto'
 
 import { init, type SatoriOptions } from '../src/index.js'
 
 export function initYogaWasm() {
   beforeAll(async () => {
-    const yoga = await initYoga(
-      await readFile(
-        join(
-          require.resolve('yoga-wasm-web/package.json'),
-          '..',
-          'dist',
-          'yoga.wasm'
-        )
-      )
-    )
     init(yoga)
   })
 }