@effing/canvas 0.25.0 → 0.26.0

package/dist/index.d.ts

@@ -61,8 +61,8 @@ type FontData = {
  * Options for {@link renderReactElement}.
  */
 type RenderReactElementOptions = {
-    /** Font data for text rendering */
-    fonts: FontData[];
+    /** Font data for text rendering. Defaults to `[]` (system fonts). */
+    fonts?: FontData[];
     /** Layout width override. Defaults to `ctx.canvas.width`. */
     width?: number;
     /** Layout height override. Defaults to `ctx.canvas.height`. */
@@ -110,7 +110,7 @@ type RenderReactElementOptions = {
  * });
  * ```
  */
-declare function renderReactElement(ctx: SKRSContext2D, element: ReactNode, options: RenderReactElementOptions): Promise<void>;
+declare function renderReactElement(ctx: SKRSContext2D, element: ReactNode, options?: RenderReactElementOptions): Promise<void>;
 
 /**
  * Register a font from a FontData buffer.

package/dist/index.js

@@ -34,6 +34,7 @@ function cachedLoadImage(cache, src) {
 
 // src/jsx/style/compute.ts
 var ROOT_FONT_SIZE = 16;
+var DEFAULT_FONT_FAMILY = "Helvetica, Arial, sans-serif";
 var DEFAULT_STYLE = {
   display: "flex",
   flexDirection: "row",
@@ -46,6 +47,7 @@ var DEFAULT_STYLE = {
   fontSize: ROOT_FONT_SIZE,
   fontWeight: 400,
   fontStyle: "normal",
+  fontFamily: DEFAULT_FONT_FAMILY,
   color: "black",
   lineHeight: "normal",
   textAlign: "left",
@@ -588,7 +590,7 @@ function emojiAwareMeasureWord(word, fontSize, fontFamily, fontWeight, fontStyle
 }
 function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
   const fontSize = style.fontSize ?? 16;
-  const fontFamily = style.fontFamily ?? "sans-serif";
+  const fontFamily = style.fontFamily ?? DEFAULT_FONT_FAMILY;
   const fontWeight = style.fontWeight ?? 400;
   const fontStyle = style.fontStyle ?? "normal";
   const color = style.color ?? "black";
@@ -3755,12 +3757,13 @@ function hasElementChildren(children) {
 }
 
 // src/jsx/index.ts
-async function renderReactElement(ctx, element, options) {
-  ensureFontsRegistered(options.fonts);
+async function renderReactElement(ctx, element, options = {}) {
+  const fonts = options.fonts ?? [];
+  ensureFontsRegistered(fonts);
   const width = options.width ?? ctx.canvas.width;
   const height = options.height ?? ctx.canvas.height;
   const emojiStyle = options.emoji === "none" ? void 0 : options.emoji ?? "twemoji";
-  const fontFamilies = [...new Set(options.fonts.map((f) => f.name))];
+  const fontFamilies = [...new Set(fonts.map((f) => f.name))];
   const { tree: layoutTree, imageCache } = await buildLayoutTree(
     element,
     width,