diff --git a/.changeset/perfect-bulldogs-love.md b/.changeset/perfect-bulldogs-love.md new file mode 100644 index 0000000..4c560ef --- /dev/null +++ b/.changeset/perfect-bulldogs-love.md @@ -0,0 +1,5 @@ +--- +'astro-og-canvas': patch +--- + +Avoid top-level `await` for better support in different environments diff --git a/packages/astro-og-canvas/src/assetLoaders.ts b/packages/astro-og-canvas/src/assetLoaders.ts index d9f8ed9..d1bc7e5 100644 --- a/packages/astro-og-canvas/src/assetLoaders.ts +++ b/packages/astro-og-canvas/src/assetLoaders.ts @@ -7,7 +7,7 @@ const debug = (...args: any[]) => console.debug('[astro-open-graph]', ...args); const error = (...args: any[]) => console.error('[astro-open-graph]', ...args); /** CanvasKit singleton. */ -export const CanvasKit = await init({ +export const CanvasKitPromise = init({ // TODO: Figure how to reliably resolve this without depending on Node. locateFile: (file) => resolve(`canvaskit-wasm/bin/${file}`), }); @@ -42,7 +42,7 @@ export const loadFonts = async (fontUrls: string[]): Promise => { resolve(); }); await fonts.loading; - if (hasNew) logFontsLoaded(fontData); + if (hasNew) await logFontsLoaded(fontData); return fontData; }; @@ -50,7 +50,8 @@ export const loadFonts = async (fontUrls: string[]): Promise => { * Log to the terminal which font families have been loaded. * Mostly useful so users can see the name of families as parsed by CanvasKit. */ -function logFontsLoaded(fonts: ArrayBuffer[]) { +async function logFontsLoaded(fonts: ArrayBuffer[]) { + const CanvasKit = await CanvasKitPromise; const fontMgr = CanvasKit.FontMgr.FromData(...fonts); if (fontMgr) { const fontCount = fontMgr.countFamilies(); diff --git a/packages/astro-og-canvas/src/generateOpenGraphImage.ts b/packages/astro-og-canvas/src/generateOpenGraphImage.ts index 61f2942..6ded5db 100644 --- a/packages/astro-og-canvas/src/generateOpenGraphImage.ts +++ b/packages/astro-og-canvas/src/generateOpenGraphImage.ts @@ -1,4 +1,4 @@ -import { CanvasKit, loadFonts, loadImage } from './assetLoaders'; +import { CanvasKitPromise, loadFonts, loadImage } from './assetLoaders'; import type { FontConfig, IllogicalSide, @@ -8,14 +8,6 @@ import type { XYWH, } from './types'; -const textStyle = (fontConfig: Required) => ({ - color: CanvasKit.Color(...fontConfig.color), - fontFamilies: fontConfig.families, - fontSize: fontConfig.size, - fontStyle: { weight: CanvasKit.FontWeight[fontConfig.weight] }, - heightMultiplier: fontConfig.lineHeight, -}); - export async function generateOpenGraphImage({ title, description = '', @@ -60,6 +52,16 @@ export async function generateOpenGraphImage({ const marginBlockStart = padding + (border.side === 'block-start' ? border.width : 0); const [width, height] = [1200, 630]; + const CanvasKit = await CanvasKitPromise; + + const textStyle = (fontConfig: Required) => ({ + color: CanvasKit.Color(...fontConfig.color), + fontFamilies: fontConfig.families, + fontSize: fontConfig.size, + fontStyle: { weight: CanvasKit.FontWeight[fontConfig.weight] }, + heightMultiplier: fontConfig.lineHeight, + }); + // Set up. const surface = CanvasKit.MakeSurface(width, height)!; const canvas = surface.getCanvas();