fix: yoga import for cjs (#384)

- Fixes #369

---------

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

package.json

@@ -30,8 +30,8 @@
  "build": "NODE_ENV=production pnpm run build:default && pnpm run build:wasm",
  "build:default": "tsup",
  "build:wasm": "WASM=1 tsup",
- "test": "NODE_ENV=test vitest run --outputTruncateLength=9999999",
- "dev:test": "NODE_ENV=test vitest --update --outputTruncateLength=9999999",
+ "test": "NODE_ENV=test vitest run --outputTruncateLength=999999999999",
+ "dev:test": "NODE_ENV=test vitest --update --outputTruncateLength=999999999999",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet --cache",
  "lint:fix": "pnpm lint --fix",
  "prettier-check": "prettier --check .",
@@ -70,11 +70,11 @@
  "jest-image-snapshot": "^5.2.0",
  "prettier": "^2.7.1",
  "react": "^17.0.2",
- "tsup": "^5.11.13",
+ "tsup": "^5.12.9",
  "turbo": "^1.6.3",
  "twrnc": "^3.4.0",
- "typescript": "^4.5.5",
- "vitest": "0.28.3"
+ "typescript": "^4.8.3",
+ "vitest": "0.28.4"
  },
  "dependencies": {
  "@shuding/opentype.js": "1.4.0-beta.0",

src/builder/background-image.ts

@@ -1,8 +1,8 @@
 import CssDimension from '../vendor/parse-css-dimension'
-import { buildXMLString } from '../utils'
+import { buildXMLString } from '../utils.js'
 
 import gradient from '../vendor/gradient-parser'
-import { resolveImageData } from '../handler/image'
+import { resolveImageData } from '../handler/image.js'
 
 interface Background {
  attachment: string

src/builder/border-radius.ts

@@ -5,7 +5,7 @@
 // TODO: Support the `border-radius: 10px / 20px` syntax.
 // https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
 
-import { lengthToNumber } from '../utils'
+import { lengthToNumber } from '../utils.js'
 
 // Getting the intersection of a 45deg ray with the elliptical arc x^2/rx^2 + y^2/ry^2 = 1.
 // Reference:

src/builder/border.ts

@@ -1,5 +1,5 @@
-import { buildXMLString } from '../utils'
-import radius from './border-radius'
+import { buildXMLString } from '../utils.js'
+import radius from './border-radius.js'
 
 function compareBorderDirections(a: string, b: string, style: any) {
  return (

src/builder/content-mask.ts

@@ -4,8 +4,8 @@
  * child element inside a `overflow: hidden` container.
  */
 
-import { buildXMLString } from '../utils'
-import border from './border'
+import { buildXMLString } from '../utils.js'
+import border from './border.js'
 
 export default function contentMask(
  {

src/builder/overflow.ts

@@ -2,8 +2,8 @@
  * Generate clip path for the given element.
  */
 
-import { buildXMLString } from '../utils'
-import mask from './content-mask'
+import { buildXMLString } from '../utils.js'
+import mask from './content-mask.js'
 
 export default function overflow(
  {

src/builder/rect.ts

@@ -1,12 +1,12 @@
-import type { ParsedTransformOrigin } from '../transform-origin'
+import type { ParsedTransformOrigin } from '../transform-origin.js'
 
-import backgroundImage from './background-image'
-import radius from './border-radius'
-import { boxShadow } from './shadow'
-import transform from './transform'
-import overflow from './overflow'
-import { buildXMLString } from '../utils'
-import border, { getBorderClipPath } from './border'
+import backgroundImage from './background-image.js'
+import radius from './border-radius.js'
+import { boxShadow } from './shadow.js'
+import transform from './transform.js'
+import overflow from './overflow.js'
+import { buildXMLString } from '../utils.js'
+import border, { getBorderClipPath } from './border.js'
 
 export default async function rect(
  {

src/builder/shadow.ts

@@ -2,7 +2,7 @@
 // generation time 10x'd when adding this filter (WASM in browser).
 // https://drafts.fxtf.org/filter-effects/#feGaussianBlurElement
 
-import { buildXMLString } from '../utils'
+import { buildXMLString } from '../utils.js'
 
 function shiftPath(path: string, dx: number, dy: number) {
  return path.replace(

src/builder/svg.ts

@@ -1,4 +1,4 @@
-import { buildXMLString } from '../utils'
+import { buildXMLString } from '../utils.js'
 
 export default function svg({
  width,

src/builder/text-decoration.ts

@@ -1,4 +1,4 @@
-import { buildXMLString } from '../utils'
+import { buildXMLString } from '../utils.js'
 
 export default function decoration(
  {

src/builder/text.ts

@@ -1,6 +1,6 @@
-import type { ParsedTransformOrigin } from '../transform-origin'
-import transform from './transform'
-import { buildXMLString } from '../utils'
+import type { ParsedTransformOrigin } from '../transform-origin.js'
+import transform from './transform.js'
+import { buildXMLString } from '../utils.js'
 
 export function container(
  {

src/builder/transform.ts

@@ -1,5 +1,5 @@
-import { multiply } from '../utils'
-import type { ParsedTransformOrigin } from '../transform-origin'
+import { multiply } from '../utils.js'
+import type { ParsedTransformOrigin } from '../transform-origin.js'
 
 const baseMatrix = [1, 0, 0, 1, 0, 0]
 

src/font.ts

@@ -2,7 +2,7 @@
  * This class handles everything related to fonts.
  */
 import opentype from '@shuding/opentype.js'
-import { Locale, locales, isValidLocale } from './language'
+import { Locale, locales, isValidLocale } from './language.js'
 
 export type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 type WeightName = 'normal' | 'bold'

src/handler/expand.ts

@@ -8,8 +8,8 @@ import { parseElementStyle } from 'css-background-parser'
 import { parse as parseBoxShadow } from 'css-box-shadow'
 
 import CssDimension from '../vendor/parse-css-dimension'
-import parseTransformOrigin from '../transform-origin'
-import {isString, lengthToNumber, v} from '../utils'
+import parseTransformOrigin from '../transform-origin.js'
+import {isString, lengthToNumber, v} from '../utils.js'
 
 // https://react-cn.github.io/react/tips/style-props-value-px.html
 const optOutPx = new Set([

src/handler/image.ts

@@ -57,7 +57,7 @@ function parsePNG(buf: ArrayBuffer) {
  return [v.getUint16(18, false), v.getUint16(22, false)] as [number, number]
 }
 
-import { createLRU, parseViewBox } from '../utils'
+import { createLRU, parseViewBox } from '../utils.js'
 
 type ResolvedImageData = [string, number?, number?]
 const cache = createLRU<ResolvedImageData>(100)

src/handler/index.ts

@@ -6,12 +6,12 @@
 
 import type { YogaNode } from 'yoga-layout'
 
-import getYoga from '../yoga'
-import presets from './presets'
-import inheritable from './inheritable'
-import expand from './expand'
-import { lengthToNumber, parseViewBox, v } from '../utils'
-import { resolveImageData } from './image'
+import getYoga from '../yoga/index.js'
+import presets from './presets.js'
+import inheritable from './inheritable.js'
+import expand from './expand.js'
+import { lengthToNumber, parseViewBox, v } from '../utils.js'
+import { resolveImageData } from './image.js'
 
 type SatoriElement = keyof typeof presets
 
@@ -22,7 +22,7 @@ export default async function handler(
  definedStyle: Record<string, string | number>,
  props: Record<string, any>
 ): Promise<[Record<string, string | number>, Record<string, string | number>]> {
- const Yoga = getYoga()
+ const Yoga = await getYoga()
 
  // Extend the default style with defined and inherited styles.
  const style = {

src/index.ts

@@ -2,8 +2,8 @@ export type {
  FontOptions as Font,
  Weight as FontWeight,
  Style as FontStyle,
-} from './font'
-export type { Locale } from './language'
+} from './font.js'
+export type { Locale } from './language.js'
 
-export * from './satori'
-export { default } from './satori'
+export * from './satori.js'
+export { default } from './satori.js'

src/layout.ts

@@ -5,20 +5,20 @@
 import type { ReactNode } from 'react'
 import type { YogaNode } from 'yoga-layout'
 
-import getYoga from './yoga'
+import getYoga from './yoga/index.js'
 import {
  isReactElement,
  isClass,
  buildXMLString,
  SVGNodeToImage,
  normalizeChildren,
  hasDangerouslySetInnerHTMLProp,
-} from './utils'
-import handler from './handler'
-import FontLoader from './font'
-import layoutText from './text'
-import rect from './builder/rect'
-import {Locale, normalizeLocale} from "./language";
+} from './utils.js'
+import handler from './handler/index.js'
+import FontLoader from './font.js'
+import layoutText from './text.js'
+import rect from './builder/rect.js'
+import {Locale, normalizeLocale} from './language.js';
 
 export interface LayoutContext {
  id: string
@@ -39,7 +39,7 @@ export default async function* layout(
  element: ReactNode,
  context: LayoutContext
 ): AsyncGenerator<{ word: string; locale?: string; }[], string, [number, number]> {
- const Yoga = getYoga()
+ const Yoga = await getYoga()
  const {
  id,
  inheritedStyle,