fix: Don’t use top-level await

delucis · Sep 30, 2022 · e8f3952 · e8f3952
1 parent 6e58b83
commit e8f3952
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/.changeset/perfect-bulldogs-love.md 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
@@ -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,15 +42,16 @@ export const loadFonts = async (fontUrls: string[]): Promise<ArrayBuffer[]> => {
     resolve();
   });
   await fonts.loading;
-  if (hasNew) logFontsLoaded(fontData);
+  if (hasNew) await logFontsLoaded(fontData);
   return fontData;
 };
 
 /**
  * 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
@@ -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<FontConfig>) => ({
-  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<FontConfig>) => ({
+    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();