@formepdf/renderer 0.7.0

package/dist/render.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from 'react';
+import { type LayoutInfo } from '@formepdf/core';
+export interface RenderOptions {
+    dataPath?: string;
+    data?: unknown;
+    pageSize?: {
+        width: number;
+        height: number;
+    };
+}
+export interface RenderResult {
+    pdf: Uint8Array;
+    layout: LayoutInfo;
+    renderTimeMs: number;
+}
+export declare function renderFromFile(filePath: string, options?: RenderOptions): Promise<RenderResult>;
+export declare function renderFromCode(code: string, options?: RenderOptions): Promise<RenderResult>;
+export declare function renderFromElement(element: ReactElement, options?: Pick<RenderOptions, 'pageSize'>): Promise<RenderResult>;

package/dist/render.js

@@ -0,0 +1,86 @@
+import { writeFile, unlink } from 'node:fs/promises';
+import { resolve, dirname, join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { renderPdfWithLayout } from '@formepdf/core';
+import { serialize as defaultSerialize } from '@formepdf/react';
+import { bundleFile } from './bundle.js';
+import { resolveElement } from './element.js';
+import { resolveAllSources } from './resolve.js';
+/// Full pipeline: bundle TSX file → resolve element → serialize → resolve assets → WASM render.
+export async function renderFromFile(filePath, options) {
+    const absolutePath = resolve(filePath);
+    const code = await bundleFile(absolutePath);
+    return renderFromCode(code, {
+        ...options,
+        _basePath: dirname(absolutePath),
+    });
+}
+/// Render from pre-bundled ESM code string.
+/// Handles the temp-file-and-import dance, then serializes and renders.
+export async function renderFromCode(code, options) {
+    const start = performance.now();
+    const basePath = options?._basePath;
+    // Wrap the bundled code with a serialize re-export so it uses the same
+    // @formepdf/react instance as the template (avoids dual-instance issues
+    // when the renderer is bundled into a VS Code extension)
+    const wrappedCode = code + `\nexport { serialize as __formeSerialize } from '@formepdf/react';\n`;
+    // Write temp file in the source directory so Node resolves @formepdf/* from the user's node_modules
+    const tmpDir = basePath ?? process.cwd();
+    const tmpFile = join(tmpDir, `.forme-render-${Date.now()}.mjs`);
+    await writeFile(tmpFile, wrappedCode);
+    let mod;
+    try {
+        mod = await import(pathToFileURL(tmpFile).href);
+    }
+    finally {
+        await unlink(tmpFile).catch(() => { });
+    }
+    // Use the user's serialize if available (same React instance as the template)
+    const serializeFn = (typeof mod.__formeSerialize === 'function'
+        ? mod.__formeSerialize
+        : defaultSerialize);
+    const elementOpts = {};
+    if (options?.data !== undefined) {
+        elementOpts.data = options.data;
+    }
+    else if (options?.dataPath) {
+        elementOpts.dataPath = options.dataPath;
+    }
+    const element = await resolveElement(mod, elementOpts);
+    return renderFromElement(element, {
+        pageSize: options?.pageSize,
+        _basePath: basePath,
+        _renderStart: start,
+        _serialize: serializeFn,
+    });
+}
+/// Render from an already-resolved React element. Skips bundling entirely.
+export async function renderFromElement(element, options) {
+    const start = options?._renderStart ?? performance.now();
+    const basePath = options?._basePath;
+    const serializeFn = options?._serialize ?? defaultSerialize;
+    const doc = serializeFn(element);
+    if (options?.pageSize) {
+        applyPageSizeOverride(doc, options.pageSize);
+    }
+    await resolveAllSources(doc, basePath);
+    const { pdf, layout } = await renderPdfWithLayout(JSON.stringify(doc));
+    const renderTimeMs = Math.round(performance.now() - start);
+    return { pdf, layout, renderTimeMs };
+}
+function applyPageSizeOverride(doc, size) {
+    const customSize = { Custom: { width: size.width, height: size.height } };
+    if (doc.defaultPage && typeof doc.defaultPage === 'object') {
+        doc.defaultPage.size = customSize;
+    }
+    if (Array.isArray(doc.children)) {
+        for (const child of doc.children) {
+            if (child && typeof child === 'object' && child.kind && typeof child.kind === 'object') {
+                const kind = child.kind;
+                if (kind.type === 'Page' && kind.config && typeof kind.config === 'object') {
+                    kind.config.size = customSize;
+                }
+            }
+        }
+    }
+}

package/dist/resolve.d.ts

@@ -0,0 +1,4 @@
+export declare function uint8ArrayToBase64(bytes: Uint8Array): string;
+export declare function resolveFontSources(doc: Record<string, unknown>, basePath?: string): Promise<void>;
+export declare function resolveImageSources(doc: Record<string, unknown>): Promise<void>;
+export declare function resolveAllSources(doc: Record<string, unknown>, basePath?: string): Promise<void>;

package/dist/resolve.js

@@ -0,0 +1,57 @@
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+export function uint8ArrayToBase64(bytes) {
+    return Buffer.from(bytes).toString('base64');
+}
+/// Resolve font sources to base64 strings for the WASM engine.
+/// File paths are resolved relative to `basePath` (defaults to cwd).
+/// Uint8Array values are base64-encoded. Data URIs pass through as-is.
+export async function resolveFontSources(doc, basePath) {
+    const fonts = doc.fonts;
+    if (!fonts?.length)
+        return;
+    const baseDir = basePath ?? process.cwd();
+    for (const font of fonts) {
+        if (font.src instanceof Uint8Array) {
+            font.src = uint8ArrayToBase64(font.src);
+        }
+        else if (typeof font.src === 'string' && !font.src.startsWith('data:')) {
+            const fontPath = resolve(baseDir, font.src);
+            const bytes = await readFile(fontPath);
+            font.src = uint8ArrayToBase64(new Uint8Array(bytes));
+        }
+    }
+}
+/// Resolve image sources — converts HTTP/HTTPS URLs to base64 data URIs.
+/// Walks the document tree recursively.
+export async function resolveImageSources(doc) {
+    const children = doc.children;
+    if (!children?.length)
+        return;
+    await Promise.all(children.map(resolveImageSourcesInNode));
+}
+async function resolveImageSourcesInNode(node) {
+    const kind = node.kind;
+    if (kind?.type === 'Image' && typeof kind.src === 'string') {
+        const src = kind.src;
+        if (src.startsWith('http://') || src.startsWith('https://')) {
+            const res = await fetch(src);
+            if (!res.ok)
+                throw new Error(`Failed to fetch image: ${src} (${res.status})`);
+            const contentType = res.headers.get('content-type') || 'image/png';
+            const buf = new Uint8Array(await res.arrayBuffer());
+            kind.src = `data:${contentType};base64,${uint8ArrayToBase64(buf)}`;
+        }
+    }
+    const children = node.children;
+    if (children?.length) {
+        await Promise.all(children.map(resolveImageSourcesInNode));
+    }
+}
+/// Resolve all asset sources (fonts + images) in parallel.
+export async function resolveAllSources(doc, basePath) {
+    await Promise.all([
+        resolveFontSources(doc, basePath),
+        resolveImageSources(doc),
+    ]);
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@formepdf/renderer",
+  "version": "0.7.0",
+  "description": "File-to-PDF rendering pipeline for Forme — bundles TSX, resolves assets, renders via WASM",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./preview": "./dist/preview/index.html"
+  },
+  "scripts": {
+    "build": "tsc && rm -rf dist/preview && cp -r src/preview dist/preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@formepdf/core": "0.7.0",
+    "@formepdf/react": "0.7.0",
+    "esbuild": "^0.24.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formepdf/forme",
+    "directory": "packages/renderer"
+  }
+}