@formepdf/cli 0.2.1 → 0.4.0

package/dist/dev.js

@@ -1,6 +1,6 @@
 import { createServer } from 'node:http';
 import { readFile, writeFile, unlink } from 'node:fs/promises';
-import { resolve, basename, join } from 'node:path';
+import { resolve, basename, dirname, join } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { watch } from 'chokidar';
 import { WebSocketServer } from 'ws';
@@ -165,6 +165,8 @@ export function startDevServer(inputPath, options) {
                     }
                 }
             }
+            // Resolve font file paths relative to the template directory
+            await resolveFontPaths(doc, absoluteInput);
             const { pdf, layout } = await renderPdfWithLayout(JSON.stringify(doc));
             // Skip if a newer build started
             if (buildId !== buildCounter)
@@ -305,3 +307,22 @@ function hasAnySourceLocation(doc) {
     }
     return children.some(check);
 }
+function uint8ArrayToBase64(bytes) {
+    return Buffer.from(bytes).toString('base64');
+}
+async function resolveFontPaths(doc, templatePath) {
+    const fonts = doc.fonts;
+    if (!fonts?.length)
+        return;
+    const templateDir = dirname(templatePath);
+    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(templateDir, font.src);
+            const bytes = await readFile(fontPath);
+            font.src = uint8ArrayToBase64(new Uint8Array(bytes));
+        }
+    }
+}

package/dist/index.js

@@ -4,6 +4,7 @@ import { parseArgs } from 'node:util';
 import { resolve } from 'node:path';
 import { startDevServer } from './dev.js';
 import { buildPdf } from './build.js';
+import { buildTemplate } from './template-build.js';
 const USAGE = `
 forme - Page-native PDF rendering engine
 
@@ -12,8 +13,9 @@ Usage:
   forme build <file.tsx>  Render PDF to disk
 
 Options:
-  -o, --output <path>     Output PDF path (build only, default: output.pdf)
+  -o, --output <path>     Output path (default: output.pdf, or <name>.template.json with -t)
   -d, --data <path>       JSON data file to pass to template function
+  -t, --template          Compile to template JSON instead of rendering PDF
   -p, --port <number>     Dev server port (default: 4242)
   -h, --help              Show this help message
 
@@ -37,8 +39,9 @@ function main() {
     const { values, positionals } = parseArgs({
         allowPositionals: true,
         options: {
-            output: { type: 'string', short: 'o', default: 'output.pdf' },
+            output: { type: 'string', short: 'o' },
             data: { type: 'string', short: 'd' },
+            template: { type: 'boolean', short: 't', default: false },
             port: { type: 'string', short: 'p', default: '4242' },
             help: { type: 'boolean', short: 'h', default: false },
         },
@@ -73,7 +76,12 @@ function main() {
             startDevServer(inputPath, { port: Number(values.port), dataPath });
             break;
         case 'build':
-            buildPdf(inputPath, { output: values.output, dataPath });
+            if (values.template) {
+                buildTemplate(inputPath, { output: values.output });
+            }
+            else {
+                buildPdf(inputPath, { output: values.output ?? 'output.pdf', dataPath });
+            }
             break;
         default:
             console.error(`Unknown command: ${command}\n`);

package/dist/preview/index.html

@@ -1226,6 +1226,17 @@
     // Computed styles
     let html = '';
 
+    const sizeProps = [];
+    if (s.width != null) sizeProps.push(['width', s.width + 'pt']);
+    if (s.height != null) sizeProps.push(['height', s.height + 'pt']);
+    if (s.minWidth != null) sizeProps.push(['min-width', fmt(s.minWidth) + 'pt']);
+    if (s.minHeight != null) sizeProps.push(['min-height', fmt(s.minHeight) + 'pt']);
+    if (s.maxWidth != null) sizeProps.push(['max-width', fmt(s.maxWidth) + 'pt']);
+    if (s.maxHeight != null) sizeProps.push(['max-height', fmt(s.maxHeight) + 'pt']);
+    if (sizeProps.length) {
+      html += renderStyleSection('Sizing', sizeProps);
+    }
+
     const posProps = [];
     if (s.position && s.position !== 'Relative') {
       posProps.push(['position', s.position.toLowerCase()]);
@@ -1242,8 +1253,14 @@
     if (s.flexDirection !== 'Column') layoutProps.push(['flex-direction', s.flexDirection]);
     if (s.justifyContent !== 'FlexStart') layoutProps.push(['justify-content', s.justifyContent]);
     if (s.alignItems !== 'Stretch') layoutProps.push(['align-items', s.alignItems]);
+    if (s.alignSelf) layoutProps.push(['align-self', s.alignSelf]);
     if (s.flexWrap !== 'NoWrap') layoutProps.push(['flex-wrap', s.flexWrap]);
+    if (s.flexGrow > 0) layoutProps.push(['flex-grow', String(s.flexGrow)]);
+    if (s.flexShrink !== 1) layoutProps.push(['flex-shrink', String(s.flexShrink)]);
+    if (s.flexBasis != null) layoutProps.push(['flex-basis', s.flexBasis + 'pt']);
     if (s.gap > 0) layoutProps.push(['gap', fmt(s.gap) + 'pt']);
+    if (s.rowGap > 0 && s.rowGap !== s.gap) layoutProps.push(['row-gap', fmt(s.rowGap) + 'pt']);
+    if (s.columnGap > 0 && s.columnGap !== s.gap) layoutProps.push(['column-gap', fmt(s.columnGap) + 'pt']);
     if (layoutProps.length) {
       html += renderStyleSection('Layout', layoutProps);
     }
@@ -1266,6 +1283,9 @@
     if (s.fontStyle !== 'Normal') typoProps.push(['font-style', s.fontStyle]);
     if (s.lineHeight !== 1.4) typoProps.push(['line-height', fmt(s.lineHeight)]);
     if (s.textAlign !== 'Left') typoProps.push(['text-align', s.textAlign]);
+    if (s.letterSpacing !== 0) typoProps.push(['letter-spacing', fmt(s.letterSpacing) + 'pt']);
+    if (s.textDecoration !== 'None') typoProps.push(['text-decoration', s.textDecoration.toLowerCase()]);
+    if (s.textTransform !== 'None') typoProps.push(['text-transform', s.textTransform.toLowerCase()]);
     html += renderStyleSection('Typography', typoProps);
 
     const visualProps = [];
@@ -1284,6 +1304,15 @@
       html += renderStyleSection('Link & Bookmark', linkProps);
     }
 
+    const pageProps = [];
+    if (s.breakable) pageProps.push(['breakable', 'true']);
+    if (s.breakBefore) pageProps.push(['break-before', 'true']);
+    if (s.minWidowLines !== 2) pageProps.push(['min-widow-lines', String(s.minWidowLines)]);
+    if (s.minOrphanLines !== 2) pageProps.push(['min-orphan-lines', String(s.minOrphanLines)]);
+    if (pageProps.length) {
+      html += renderStyleSection('Page Behavior', pageProps);
+    }
+
     inspectorStyles.innerHTML = html;
 
     // Copy Style button
@@ -1352,6 +1381,8 @@
       'NoWrap': 'nowrap', 'Wrap': 'wrap',
       'Normal': 'normal', 'Italic': 'italic',
       'Left': 'left', 'Right': 'right', 'Justify': 'justify',
+      'None': 'none', 'Underline': 'underline', 'LineThrough': 'line-through',
+      'Uppercase': 'uppercase', 'Lowercase': 'lowercase', 'Capitalize': 'capitalize',
     };
     function mapEnum(v) { return enumMap[v] || v; }
 
@@ -1375,11 +1406,23 @@
 
     const props = [];
 
+    if (s.width != null) props.push(`width: ${s.width}`);
+    if (s.height != null) props.push(`height: ${s.height}`);
+    if (s.minWidth != null) props.push(`minWidth: ${s.minWidth}`);
+    if (s.minHeight != null) props.push(`minHeight: ${s.minHeight}`);
+    if (s.maxWidth != null) props.push(`maxWidth: ${s.maxWidth}`);
+    if (s.maxHeight != null) props.push(`maxHeight: ${s.maxHeight}`);
     if (s.flexDirection !== 'Column') props.push(`flexDirection: '${mapEnum(s.flexDirection)}'`);
     if (s.justifyContent !== 'FlexStart') props.push(`justifyContent: '${mapEnum(s.justifyContent)}'`);
     if (s.alignItems !== 'Stretch') props.push(`alignItems: '${mapEnum(s.alignItems)}'`);
+    if (s.alignSelf) props.push(`alignSelf: '${mapEnum(s.alignSelf)}'`);
     if (s.flexWrap !== 'NoWrap') props.push(`flexWrap: '${mapEnum(s.flexWrap)}'`);
+    if (s.flexGrow > 0) props.push(`flexGrow: ${s.flexGrow}`);
+    if (s.flexShrink !== 1) props.push(`flexShrink: ${s.flexShrink}`);
+    if (s.flexBasis != null) props.push(`flexBasis: ${s.flexBasis}`);
     if (s.gap > 0) props.push(`gap: ${s.gap}`);
+    if (s.rowGap > 0) props.push(`rowGap: ${s.rowGap}`);
+    if (s.columnGap > 0) props.push(`columnGap: ${s.columnGap}`);
 
     if (!edgesAllZero(s.margin)) props.push(`margin: ${fmtEdges(s.margin)}`);
     if (!edgesAllZero(s.padding)) props.push(`padding: ${fmtEdges(s.padding)}`);
@@ -1391,6 +1434,9 @@
     if (s.fontStyle !== 'Normal') props.push(`fontStyle: '${mapEnum(s.fontStyle)}'`);
     if (s.lineHeight !== 1.4) props.push(`lineHeight: ${s.lineHeight}`);
     if (s.textAlign !== 'Left') props.push(`textAlign: '${mapEnum(s.textAlign)}'`);
+    if (s.letterSpacing !== 0) props.push(`letterSpacing: ${s.letterSpacing}`);
+    if (s.textDecoration !== 'None') props.push(`textDecoration: '${mapEnum(s.textDecoration)}'`);
+    if (s.textTransform !== 'None') props.push(`textTransform: '${mapEnum(s.textTransform)}'`);
 
     if (s.opacity < 1) props.push(`opacity: ${s.opacity}`);
     if (!colorEq(s.color, 0, 0, 0)) props.push(`color: '${colorToHex(s.color)}'`);

package/dist/template-build.d.ts

@@ -0,0 +1,4 @@
+export interface TemplateBuildOptions {
+    output?: string;
+}
+export declare function buildTemplate(inputPath: string, options: TemplateBuildOptions): Promise<void>;

package/dist/template-build.js

@@ -0,0 +1,81 @@
+import { writeFile } from 'node:fs/promises';
+import { resolve, join, basename } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { isValidElement } from 'react';
+import { bundleFile, BUNDLE_DIR } from './bundle.js';
+export async function buildTemplate(inputPath, options) {
+    const absoluteInput = resolve(inputPath);
+    console.log(`Building template from ${absoluteInput}...`);
+    try {
+        const code = await bundleFile(absoluteInput);
+        const tmpFile = join(BUNDLE_DIR, `.forme-template-${Date.now()}.mjs`);
+        await writeFile(tmpFile, code);
+        try {
+            const mod = await import(pathToFileURL(tmpFile).href);
+            const exported = mod.default;
+            if (exported === undefined) {
+                throw new Error(`No default export found.\n\n` +
+                    `  Your template file must export a function that takes data and returns JSX:\n\n` +
+                    `    export default function Invoice(data) {\n` +
+                    `      return <Document><Text>{data.title}</Text></Document>\n` +
+                    `    }`);
+            }
+            if (typeof exported !== 'function') {
+                throw new Error(`Default export must be a function for template compilation.\n` +
+                    `  Got: ${typeof exported}\n\n` +
+                    `  Export a function that takes data and returns a <Document>:\n\n` +
+                    `    export default function Template(data) {\n` +
+                    `      return <Document>...</Document>\n` +
+                    `    }`);
+            }
+            // Create a recording proxy and call the template function
+            const { createDataProxy, serializeTemplate } = await import('@formepdf/react');
+            const dataProxy = createDataProxy();
+            const element = exported(dataProxy);
+            if (!isValidElement(element)) {
+                throw new Error(`Template function did not return a valid Forme element.\n` +
+                    `  Got: ${typeof element}\n` +
+                    `  Make sure your function returns a <Document> element.`);
+            }
+            const templateJson = serializeTemplate(element);
+            // Resolve fonts to base64 for portability
+            await resolveFontPaths(templateJson, absoluteInput);
+            const outputPath = resolve(options.output ?? defaultTemplateName(inputPath));
+            const json = JSON.stringify(templateJson, null, 2);
+            await writeFile(outputPath, json);
+            console.log(`Written template (${json.length} bytes) to ${outputPath}`);
+        }
+        finally {
+            const { unlink } = await import('node:fs/promises');
+            await unlink(tmpFile).catch(() => { });
+        }
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        console.error(`\n  ${message.split('\n').join('\n  ')}\n`);
+        process.exit(1);
+    }
+}
+function defaultTemplateName(inputPath) {
+    const base = basename(inputPath).replace(/\.(tsx|jsx|ts|js)$/, '');
+    return `${base}.template.json`;
+}
+async function resolveFontPaths(doc, templatePath) {
+    const { dirname } = await import('node:path');
+    const { readFile } = await import('node:fs/promises');
+    const { resolve: resolvePath } = await import('node:path');
+    const templateDir = dirname(templatePath);
+    const fonts = doc.fonts;
+    if (!fonts?.length)
+        return;
+    for (const font of fonts) {
+        if (font.src instanceof Uint8Array) {
+            font.src = Buffer.from(font.src).toString('base64');
+        }
+        else if (typeof font.src === 'string' && !font.src.startsWith('data:')) {
+            const fontPath = resolvePath(templateDir, font.src);
+            const bytes = await readFile(fontPath);
+            font.src = Buffer.from(bytes).toString('base64');
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formepdf/cli",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "CLI for Forme PDF rendering engine — dev server with live preview and build command",
   "type": "module",
   "bin": {
@@ -14,8 +14,8 @@
     "dist"
   ],
   "dependencies": {
-    "@formepdf/core": "0.2.1",
-    "@formepdf/react": "0.2.1",
+    "@formepdf/core": "0.4.0",
+    "@formepdf/react": "0.4.0",
     "esbuild": "^0.24.0",
     "chokidar": "^4.0.0",
     "ws": "^8.18.0",