@broadpaper/forme 0.3.0 → 0.4.1

package/README.md

@@ -6,7 +6,7 @@
 
 Browserless PDF generation for BroadPaper, via the Forme WebAssembly engine. The recommended backend.
 
-Part of [**BroadPaper**](https://www.broadpaper.com/developers/) — an embeddable visual report designer and PDF renderer.
+Part of [**BroadPaper**](https://www.broadpaper.com/developers/?utm_source=npm&utm_medium=readme) — an embeddable visual report designer and PDF renderer.
 Your users design the report in your application; BroadPaper owns the layout, the branding,
 the pagination and the output.
 
@@ -43,7 +43,7 @@ production use. No seats, no activation, no machine binding, no telemetry, and n
 any point.
 
 - [How licensing works](https://www.broadpaper.com/docs/guide/licensing/)
-- [Pricing](https://www.broadpaper.com/developers/pricing/)
+- [Pricing](https://www.broadpaper.com/developers/pricing/?utm_source=npm&utm_medium=readme)
 - [Licence agreement](https://www.broadpaper.com/legal/terms/)
 
 ## Documentation
@@ -51,6 +51,8 @@ any point.
 - [Browserless PDF](https://www.broadpaper.com/docs/guide/browserless-pdf)
 - [Themes and branding](https://www.broadpaper.com/docs/guide/themes)
 - [Full documentation](https://www.broadpaper.com/docs/)
+- [Sample application](https://github.com/codingbadger/broadpaper-sample-application): the same app in React and Angular over one .NET back end
+- [How BroadPaper compares](https://www.broadpaper.com/developers/compare/?utm_source=npm&utm_medium=readme) with react-pdf, pdfmake, Puppeteer and embedded report designers
 
 ## Support
 

package/dist/{chunk-2C3MAW2U.js → chunk-FAKBQDQG.js}

@@ -38,6 +38,21 @@ function num(value) {
   const n = Number.parseFloat(value);
   return Number.isFinite(n) ? n : void 0;
 }
+function flexShorthand(value) {
+  const v = value.trim().toLowerCase();
+  if (v === "none") return { grow: 0, shrink: 0 };
+  if (v === "auto") return { grow: 1, shrink: 1 };
+  if (v === "initial") return { grow: 0, shrink: 1 };
+  const parts = v.split(/\s+/).filter(Boolean);
+  const isCount = (p) => /^-?(\d+\.?\d*|\.\d+)$/.test(p);
+  const [a, b, c] = parts;
+  if (!a) return {};
+  if (parts.length === 1) return isCount(a) ? { grow: num(a), shrink: 1, basis: 0 } : { grow: 1, shrink: 1, basis: length(a) };
+  if (parts.length === 2) {
+    return isCount(b) ? { grow: num(a), shrink: num(b), basis: 0 } : { grow: num(a), shrink: 1, basis: length(b) };
+  }
+  return { grow: num(a), shrink: num(b), basis: length(c) };
+}
 function colour(value) {
   const v = value.trim().toLowerCase();
   if (!v || v === "transparent" || v === "none" || v === "inherit" || v === "currentcolor") return void 0;
@@ -127,9 +142,13 @@ function translateStyle(css) {
       case "flex-wrap":
         set("flexWrap", value === "wrap" ? "wrap" : "nowrap");
         break;
-      case "flex":
-        set("flexGrow", num(value.split(/\s+/)[0] ?? "0"));
+      case "flex": {
+        const f = flexShorthand(value);
+        set("flexGrow", f.grow);
+        set("flexShrink", f.shrink);
+        set("flexBasis", f.basis);
         break;
+      }
       case "flex-grow":
         set("flexGrow", num(value));
         break;
@@ -701,7 +720,7 @@ function translate(v, ctx) {
     if (textual && (!blank2 || /bp-p--empty/.test(cls))) {
       const kind = heading ? { type: "Heading", level: Number(heading[1]), content } : { type: "Text", content };
       const node = { kind, style, children: [] };
-      if (v.tag === "a" && typeof v.props.href === "string") node.href = v.props.href;
+      if (v.tag === "a" && typeof v.props.href === "string") kind.href = v.props.href;
       result = leaf(node);
     } else {
       const inner = childNodes(v, ctx);
@@ -902,6 +921,146 @@ var FormeMeasurer = class {
   }
 };
 
+// src/fonts.ts
+var localReader = null;
+function setFontFileReader(reader) {
+  localReader = reader;
+}
+var MAX_FONT_BYTES = 32 * 1024 * 1024;
+var FETCH_TIMEOUT_MS = 15e3;
+var MAX_CACHED = 64;
+var cache = /* @__PURE__ */ new Map();
+async function resolveFonts(input) {
+  const fonts = [];
+  const warnings = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (font) => {
+    const weight = font.weight ?? 400;
+    const style = font.style ?? "normal";
+    const key = `${font.family.trim().toLowerCase()}|${weight}|${style}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    fonts.push({ family: font.family, src: font.src, weight, style });
+  };
+  for (const font of input.fonts ?? []) add(font);
+  const faces = await Promise.all((input.theme?.fonts ?? []).map((face) => themeFace(face, input.sources ?? {})));
+  for (const face of faces) {
+    warnings.push(...face.warnings);
+    if (face.font) add(face.font);
+  }
+  return { fonts, warnings };
+}
+async function themeFace(face, policy) {
+  const { weight, range } = weightOf(face.weight);
+  const style = face.style === "italic" ? "italic" : "normal";
+  const name = `"${face.family}" (${weight}${style === "italic" ? " italic" : ""})`;
+  const sources = (Array.isArray(face.src) ? face.src : [face.src]).filter((s) => typeof s === "string" && s.trim() !== "");
+  const reasons = [];
+  for (const src of sources) {
+    const loaded = await load(src.trim(), policy);
+    if ("reason" in loaded) {
+      reasons.push(loaded.reason);
+      continue;
+    }
+    const warnings = range ? [`The font "${face.family}" declares the weights ${String(face.weight)} from one file; the PDF engine is given it at ${weight} only. Declare a file per weight for the others to be embedded.`] : [];
+    return { font: { family: face.family, src: loaded.src, weight, style }, warnings };
+  }
+  return {
+    warnings: [
+      `The font ${name} has no TrueType or OpenType source the PDF engine can read, so the PDF draws that text in a standard face and breaks its lines differently from the screen. Add a .ttf or .otf to its src${reasons.length ? ` (${reasons.join("; ")})` : ""}.`
+    ]
+  };
+}
+function weightOf(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return { weight: Math.round(value), range: false };
+  const text = String(value ?? "").trim().toLowerCase();
+  if (text === "bold") return { weight: 700, range: false };
+  const numbers = text.split(/\s+/).map(Number).filter((n) => Number.isFinite(n) && n > 0);
+  if (!numbers.length) return { weight: 400, range: false };
+  return { weight: Math.round(numbers[0]), range: numbers.length > 1 && numbers[1] !== numbers[0] };
+}
+async function load(src, policy) {
+  if (/^data:(font|application)\/(x-)?woff2?[;,]/i.test(src) || /\.woff2?([?#]|$)/i.test(src.startsWith("data:") ? "" : src)) {
+    return { reason: `${describe(src)} is WOFF, which only a browser reads` };
+  }
+  if (src.startsWith("data:")) return fromDataUri(src);
+  const remote = /^https?:\/\//i.test(src);
+  if (remote) {
+    let host;
+    try {
+      host = new URL(src).hostname;
+    } catch {
+      return { reason: `${describe(src)} is not a valid address` };
+    }
+    const allowed = policy.allowedHosts;
+    if (allowed && !allowed.includes("*") && !allowed.includes(host)) return { reason: `${host} is not an allowed host` };
+  } else if (policy.local === false) {
+    return { reason: `${describe(src)} is neither a data: URI nor a web address, and files are not read here` };
+  } else if (!localReader) {
+    return { src };
+  }
+  const key = src;
+  const hit = cache.get(key);
+  if (hit) return hit;
+  const pending = (async () => {
+    const bytes = remote ? await download(src, Boolean(policy.allowedHosts && !policy.allowedHosts.includes("*"))) : await localReader(src);
+    if (bytes.byteLength > MAX_FONT_BYTES) return { reason: `${describe(src)} is larger than ${MAX_FONT_BYTES / 1024 / 1024} MB` };
+    const problem = notEmbeddable(bytes, src);
+    return problem ? { reason: problem } : { src: `data:font/ttf;base64,${toBase64(bytes)}` };
+  })().catch((e) => {
+    cache.delete(key);
+    return { reason: `${describe(src)} could not be read (${e.message || String(e)})` };
+  });
+  cache.set(key, pending);
+  while (cache.size > MAX_CACHED) cache.delete(cache.keys().next().value);
+  return pending;
+}
+async function download(src, restricted) {
+  const signal = typeof AbortSignal !== "undefined" && "timeout" in AbortSignal ? AbortSignal.timeout(FETCH_TIMEOUT_MS) : void 0;
+  const response = await fetch(src, { redirect: restricted ? "error" : "follow", ...signal ? { signal } : {} });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const length2 = Number(response.headers.get("content-length"));
+  if (length2 > MAX_FONT_BYTES) throw new Error(`larger than ${MAX_FONT_BYTES / 1024 / 1024} MB`);
+  return new Uint8Array(await response.arrayBuffer());
+}
+function fromDataUri(src) {
+  const match = /^data:([^,]*),(.*)$/s.exec(src);
+  if (!match) return { reason: "a data: URI with no data" };
+  const base64 = /;base64$/i.test(match[1]);
+  let head;
+  try {
+    head = base64 ? fromBase64(match[2].slice(0, 8)) : Uint8Array.from(decodeURIComponent(match[2].slice(0, 64)), (c) => c.charCodeAt(0) & 255);
+  } catch {
+    return { reason: "a data: URI that does not decode" };
+  }
+  const problem = notEmbeddable(head, "a data: URI");
+  if (problem) return { reason: problem };
+  if (base64) return { src };
+  const bytes = Uint8Array.from(decodeURIComponent(match[2]), (c) => c.charCodeAt(0) & 255);
+  return { src: `data:font/ttf;base64,${toBase64(bytes)}` };
+}
+function notEmbeddable(bytes, src) {
+  if (bytes.length < 4) return `${describe(src)} is not a font file`;
+  const tag = String.fromCharCode(bytes[0], bytes[1], bytes[2], bytes[3]);
+  if (bytes[0] === 0 && bytes[1] === 1 && bytes[2] === 0 && bytes[3] === 0 || tag === "OTTO" || tag === "true") return null;
+  if (tag === "wOFF" || tag === "wOF2") return `${describe(src)} is WOFF, which only a browser reads`;
+  if (tag === "ttcf") return `${describe(src)} is a font collection; give the single face instead`;
+  return `${describe(src)} is not a TrueType or OpenType file`;
+}
+function describe(src) {
+  return src.startsWith("data:") ? "a data: URI" : src.length > 80 ? `${src.slice(0, 77)}\u2026` : src;
+}
+function toBase64(bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 32768) binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
+  return btoa(binary);
+}
+function fromBase64(text) {
+  const clean = text.replace(/[^A-Za-z0-9+/]/g, "");
+  const binary = atob(clean.slice(0, clean.length - clean.length % 4));
+  return Uint8Array.from(binary, (c) => c.charCodeAt(0));
+}
+
 // src/editor.ts
 function hash(s) {
   let h = 2166136261;
@@ -928,8 +1087,8 @@ var FormeEditorMeasurer = class {
   destroy() {
     this.cache.clear();
   }
-  key(section, width, mode) {
-    return hash(JSON.stringify(section)) + ":" + Math.round(width * 100) + ":" + mode;
+  key(section, width, mode, faces) {
+    return hash(JSON.stringify(section)) + ":" + Math.round(width * 100) + ":" + mode + ":" + faces;
   }
   async measure(sections, width) {
     const opts = this.opts;
@@ -937,8 +1096,9 @@ var FormeEditorMeasurer = class {
     const out = {};
     const pending = [];
     const keys = /* @__PURE__ */ new Map();
+    const faces = facesKey(opts.theme.fonts);
     for (const section of sections) {
-      const k = this.key(section, width, opts.mode);
+      const k = this.key(section, width, opts.mode, faces);
       const hit = this.cache.get(k);
       if (hit) out[section.key] = hit;
       else {
@@ -947,7 +1107,9 @@ var FormeEditorMeasurer = class {
       }
     }
     if (!pending.length) return out;
-    const fonts = await this.config.fonts;
+    const given = await this.config.fonts;
+    const { fonts, warnings } = await resolveFonts({ fonts: given, theme: opts.theme });
+    for (const w of warnings) this.warn(w);
     const measurer = new FormeMeasurer({
       registry: opts.registry,
       theme: opts.theme,
@@ -965,14 +1127,21 @@ var FormeEditorMeasurer = class {
       const k = keys.get(sectionKey);
       if (k) this.cache.set(k, geometry);
     }
-    for (const w of measurer.warnings) {
-      if (this.seen.has(w)) continue;
-      this.seen.add(w);
-      this.config.onWarning?.(w);
-    }
+    for (const w of measurer.warnings) this.warn(w);
     return out;
   }
+  warn(message) {
+    if (this.seen.has(message)) return;
+    this.seen.add(message);
+    this.config.onWarning?.(message);
+  }
 };
+function facesKey(faces) {
+  if (!faces?.length) return "";
+  return hash(
+    faces.map((f) => [f.family, f.weight, f.style, ...(Array.isArray(f.src) ? f.src : [f.src]).map((s) => `${s.length}:${s.slice(0, 64)}${s.slice(-64)}`)].join("|")).join(";")
+  );
+}
 
 // src/api.ts
 import {
@@ -997,8 +1166,11 @@ function creditNode(spec, width, ctx) {
     });
   }
   children.push({
-    tag: "span",
-    props: { style: { "font-size": `${size}px`, color: spec.color, opacity: String(spec.opacity), "line-height": "1.2" } },
+    tag: spec.href ? "a" : "span",
+    props: {
+      ...spec.href ? { href: spec.href } : {},
+      style: { "font-size": `${size}px`, color: spec.color, opacity: String(spec.opacity), "line-height": "1.2" }
+    },
     children: [spec.text]
   });
   const line = {
@@ -1313,7 +1485,7 @@ function emitPages(input) {
   const width = page.contentWidth;
   const bleed = page.margins.right;
   const bodyDependsOnPage = isPageDependent(resolved.body);
-  const cache = /* @__PURE__ */ new Map();
+  const cache2 = /* @__PURE__ */ new Map();
   const rendered = /* @__PURE__ */ new Map();
   const treeOf = (section, opts) => {
     if (bodyDependsOnPage) return renderNode2(section, opts, width);
@@ -1322,7 +1494,7 @@ function emitPages(input) {
   };
   const translateSection = (section, opts, from, to) => {
     const cacheKey = `${section.key}|${from}|${to}`;
-    if (!bodyDependsOnPage && cache.has(cacheKey)) return cache.get(cacheKey);
+    if (!bodyDependsOnPage && cache2.has(cacheKey)) return cache2.get(cacheKey);
     const v = treeOf(section, opts);
     if (!v) return null;
     const geom = geometry[section.key];
@@ -1330,7 +1502,7 @@ function emitPages(input) {
     const t = translate(cropped.node, ctx);
     if (!t) return null;
     const out = { node: t.node, offset: cropped.offset };
-    if (!bodyDependsOnPage) cache.set(cacheKey, out);
+    if (!bodyDependsOnPage) cache2.set(cacheKey, out);
     return out;
   };
   const headers = /* @__PURE__ */ new Map();
@@ -1487,11 +1659,12 @@ async function buildFormeDocument(opts) {
     defaultPage: { size: "A4", margin: { top: 54, right: 54, bottom: 54, left: 54 }, wrap: true },
     defaultStyle: mapStyle4({ fontSize: pxToPt(theme.typography.baseFontSize ?? 11), fontFamily: theme.typography.bodyFont.split(",")[0].trim().replace(/^['"]|['"]$/g, "") })
   };
-  if (opts.fonts?.length) doc.fonts = opts.fonts.map((f) => ({ family: f.family, src: f.src, weight: f.weight ?? 400, style: f.style ?? "normal" }));
+  const fonts = await resolveFonts({ fonts: opts.fonts, theme, sources: opts.fontSources });
+  if (fonts.fonts.length) doc.fonts = fontEntries(fonts.fonts);
   if (opts.tagged) doc.tagged = true;
   if (opts.pdfUa) doc.pdfUa = true;
   if (opts.pdfA) doc.pdfa = opts.pdfA;
-  const warnings = [...ctx.warnings, ...resolved.warnings.map((w) => w.message)];
+  const warnings = [...ctx.warnings, ...resolved.warnings.map((w) => w.message), ...fonts.warnings];
   return { doc, warnings, license };
 }
 var engineLoader = null;
@@ -1572,6 +1745,7 @@ async function layoutPaginated(opts) {
   };
   const ctx = { warnings: /* @__PURE__ */ new Set(), suppressPageBreaks: true };
   const render = opts.renderer ?? defaultRenderer;
+  const fonts = await resolveFonts({ fonts: opts.fonts, theme, sources: opts.fontSources });
   const layoutSections = async (list) => {
     if (!list.length) return {};
     const measured = [];
@@ -1599,7 +1773,7 @@ async function layoutPaginated(opts) {
       defaultPage: { size: "A4", margin: { top: 54, right: 54, bottom: 54, left: 54 }, wrap: true },
       defaultStyle: baseStyle(theme)
     };
-    if (opts.fonts?.length) doc.fonts = fontEntries(opts.fonts);
+    if (fonts.fonts.length) doc.fonts = fontEntries(fonts.fonts);
     const result = await render(doc);
     const pages = result.layout?.pages ?? [];
     const scale2 = 1 / PX_TO_PT_LOCAL;
@@ -1663,7 +1837,7 @@ async function layoutPaginated(opts) {
         defaultPage: { size: "A4", margin: { top: 54, right: 54, bottom: 54, left: 54 }, wrap: true },
         defaultStyle: baseStyle(theme)
       };
-      if (opts.fonts?.length) doc.fonts = fontEntries(opts.fonts);
+      if (fonts.fonts.length) doc.fonts = fontEntries(fonts.fonts);
       if (opts.tagged) doc.tagged = true;
       if (opts.pdfUa) doc.pdfUa = true;
       if (opts.pdfA) doc.pdfa = opts.pdfA;
@@ -1673,7 +1847,7 @@ async function layoutPaginated(opts) {
         pdf: result.pdf,
         pages: layout?.pages.length ?? to - from,
         layout,
-        warnings: [...ctx.warnings, ...resolved.warnings.map((w) => w.message), ...paged.warnings.map((w) => w.message), ...result.warnings ?? []]
+        warnings: [...ctx.warnings, ...resolved.warnings.map((w) => w.message), ...paged.warnings.map((w) => w.message), ...fonts.warnings, ...result.warnings ?? []]
       };
     }
   };
@@ -1711,6 +1885,8 @@ export {
   UNBOUNDED_PAGE_HEIGHT,
   geometryFromLayout,
   FormeMeasurer,
+  setFontFileReader,
+  resolveFonts,
   FormeEditorMeasurer,
   buildFormeDocument,
   setEngineLoader,
@@ -1724,4 +1900,4 @@ export {
   verifyLicense,
   parseLicense
 };
-//# sourceMappingURL=chunk-2C3MAW2U.js.map
+//# sourceMappingURL=chunk-FAKBQDQG.js.map