fix: replace Yoga build flag for browsers (#774)

## Summary

- replace SATORI_STANDALONE at build time in both default and standalone
builds
- prevent the default browser bundle from reading the Node-only process
global
- verify all ESM and CJS artifacts eliminate the runtime build flag

## Why

The Yoga loader branches on process.env.SATORI_STANDALONE, but tsup only
replaced that expression for the standalone build. The unresolved
expression leaked into the default browser bundle and threw
ReferenceError: process is not defined.

Defining the flag as 0 or 1 for every build keeps the runtime branch
correct without adding browser guards that would change standalone init
behavior.

This is a focused alternative to #749 and leaves the broader browser
test framework upgrade separate.

Closes #738. Closes #749.

## Validation

- pnpm build
- pnpm test
- pnpm ci-check

Author: shuding

package.json

@@ -60,10 +60,11 @@
     "dev": "pnpm run dev:default",
     "dev:default": "NODE_ENV=development tsup src/index.ts --watch --ignore-watch playground",
     "dev:playground": "turbo dev --filter=satori-playground...",
-    "build": "pnpm run build:default && pnpm run build:standalone",
+    "build": "pnpm run build:default && pnpm run build:standalone && pnpm run test:browser-build",
     "build:default": "NODE_ENV=production tsup",
     "build:standalone": "NODE_ENV=production SATORI_STANDALONE=1 tsup",
     "test": "NODE_ENV=test vitest run",
+    "test:browser-build": "node test/browser-build.mjs",
     "test:ui": "NODE_ENV=test vitest --ui --coverage.enabled",
     "test-type": "tsc -p tsconfig.json --noEmit && tsc -p playground/tsconfig.json --noEmit",
     "dev:test": "NODE_ENV=test vitest --update",

src/satori.ts

@@ -76,7 +76,10 @@ export default async function satori(
   // Use a null-prototype object so that text matching Object.prototype property
   // names (e.g. "constructor", "toString") doesn't inherit truthy values from
   // the prototype chain when we look it up via `graphemeImages[text]`.
-  const graphemeImages = Object.assign(Object.create(null), options.graphemeImages)
+  const graphemeImages = Object.assign(
+    Object.create(null),
+    options.graphemeImages
+  )
   // Some Chinese characters have different glyphs in Chinese and
   // Japanese, but their Unicode is the same. If the user needs to display
   // the Chinese and Japanese characters simultaneously correctly, the user

test/browser-build.mjs

@@ -0,0 +1,20 @@
+import { readFileSync } from 'node:fs'
+
+for (const entry of [
+  'index.js',
+  'index.cjs',
+  'standalone.js',
+  'standalone.cjs',
+]) {
+  const source = readFileSync(
+    new URL(`../dist/${entry}`, import.meta.url),
+    'utf8'
+  )
+
+  if (source.includes('process.env.SATORI_STANDALONE')) {
+    throw new Error(
+      `${entry} reads process.env.SATORI_STANDALONE at runtime; ` +
+        'the browser build must replace this flag at build time.'
+    )
+  }
+}

tsup.config.ts

@@ -23,11 +23,12 @@ export default defineConfig({
     options.tsconfig = 'tsconfig.json'
     options.legalComments = 'external'
   },
-  env: isStandaloneBuild
-    ? {
-        SATORI_STANDALONE: '1',
-      }
-    : {},
+  // Always replace this flag at build time. Leaving it unresolved in the
+  // default build makes the browser bundle access the Node-only `process`
+  // global while selecting the Yoga loader.
+  env: {
+    SATORI_STANDALONE: isStandaloneBuild ? '1' : '0',
+  },
   esbuildPlugins: [
     {
       name: 'optimize tailwind',