@cenk1cenk2/md-printer 2.21.0 → 3.0.0

package/dist/services/renderer/renderer.service.mjs

@@ -0,0 +1,198 @@
+import { PAGE_BREAK_CLASS } from "../../constants/template.constants.mjs";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.mjs";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.mjs";
+import { BrowserService } from "./browser.service.mjs";
+import { mimeType, resolveConfined } from "../template/assets.mjs";
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import { LoggerService } from "@cenk1cenk2/oclif-common";
+import { Injectable } from "@nestjs/common";
+import { fileURLToPath, pathToFileURL } from "url";
+//#region src/services/renderer/renderer.service.ts
+var _RendererService;
+let RendererService = class RendererService {
+	static {
+		_RendererService = this;
+	}
+	logger;
+	browser;
+	static ORIGIN = "http://md-printer.local";
+	static DOCUMENT = "/__document.html";
+	static SECTION = "data-md-printer-section";
+	constructor(logger, browser) {
+		this.logger = logger;
+		this.browser = browser;
+		this.logger.setup(this.constructor.name);
+	}
+	async render(rendered, options) {
+		const page = await (await this.browser.get()).newPage();
+		try {
+			const assets = await this.load(page, rendered, options);
+			const sections = await this.split(page);
+			const pdf = options.continuous ? await this.continuous(page, options, sections) : await this.paginated(page, rendered, options);
+			return {
+				pdf: Buffer.from(pdf),
+				assets
+			};
+		} finally {
+			await page.close();
+		}
+	}
+	async load(page, rendered, options) {
+		const assets = /* @__PURE__ */ new Set();
+		const base = resolve(options.directory);
+		await page.setRequestInterception(true);
+		page.on("request", (request) => {
+			this.intercept(request, rendered, base, assets).catch(async (err) => {
+				this.logger.debug("Request handling failed for %s: %s", request.url(), err);
+				await request.abort().catch(() => void 0);
+			});
+		});
+		await page.emulateMediaType(options.media);
+		await page.goto(_RendererService.ORIGIN + _RendererService.DOCUMENT, { waitUntil: "load" });
+		await page.evaluate(async () => {
+			for (const image of Array.from(document.images)) image.loading = "eager";
+			await document.fonts.ready;
+			await Promise.all(Array.from(document.images).map((image) => image.decode().catch(() => void 0)));
+		});
+		return [...assets];
+	}
+	async intercept(request, rendered, base, assets) {
+		const url = new URL(request.url());
+		if (url.origin !== _RendererService.ORIGIN) await request.continue();
+		else if (url.pathname === "/favicon.ico") await request.respond({
+			status: 204,
+			body: ""
+		});
+		else if (url.pathname === _RendererService.DOCUMENT) await request.respond({
+			status: 200,
+			contentType: "text/html; charset=utf-8",
+			body: rendered.html
+		});
+		else {
+			const path = fileURLToPath(new URL(`.${url.pathname}`, pathToFileURL(`${base}/`)));
+			const confined = await resolveConfined(path, base);
+			const body = confined && await readFile(confined).catch(() => void 0);
+			if (body) {
+				assets.add(path);
+				await request.respond({
+					status: 200,
+					contentType: mimeType(path),
+					body
+				});
+			} else {
+				this.logger.warn("Can not load asset: %s", path);
+				await request.respond({
+					status: 404,
+					body: ""
+				});
+			}
+		}
+	}
+	/**
+	* Cuts the body into top-level sections at every page break, cloning the containers a break sits in, so a break works anywhere: inside
+	* flex or grid layouts, where CSS fragmentation ignores it, and in continuous mode, where every section becomes a page of its own height.
+	*/
+	split(page) {
+		return page.evaluate((selector, attribute) => {
+			const markers = Array.from(document.body.querySelectorAll(selector));
+			if (!markers.length) return 1;
+			const sections = markers.map((marker) => {
+				const range = document.createRange();
+				const section = document.createElement("div");
+				range.setStart(document.body, 0);
+				range.setEndBefore(marker);
+				section.append(range.extractContents());
+				marker.remove();
+				return section;
+			});
+			sections.push(document.createElement("div"));
+			sections.at(-1).append(...Array.from(document.body.childNodes));
+			sections.forEach((section, index) => section.setAttribute(attribute, String(index)));
+			document.body.replaceChildren(...sections);
+			const style = document.createElement("style");
+			style.textContent = `[${attribute}]:not(:last-child) { break-after: page; }`;
+			document.head.append(style);
+			return sections.length;
+		}, `.${PAGE_BREAK_CLASS}`, _RendererService.SECTION);
+	}
+	paginated(page, rendered, options) {
+		return page.pdf({
+			...options.pdf,
+			displayHeaderFooter: options.pdf.displayHeaderFooter ?? Boolean(rendered.header || rendered.footer),
+			headerTemplate: rendered.header ?? "<span></span>",
+			footerTemplate: rendered.footer ?? "<span></span>"
+		});
+	}
+	/**
+	* Prints everything as one tall page. Chrome itself resolves the paper size (from a one page probe print) and the margins (as CSS lengths),
+	* so md-printer never has to know paper formats or length units.
+	*/
+	async continuous(page, options, sections) {
+		const [, points] = Buffer.from(await page.pdf({
+			...options.pdf,
+			displayHeaderFooter: false,
+			pageRanges: "1"
+		})).toString("latin1").match(/\/MediaBox\s*\[\s*[\d.]+\s+[\d.]+\s+([\d.]+)/);
+		const width = Math.round(Number(points) * 96 / 72);
+		const margin = await page.evaluate((lengths) => {
+			const probe = document.createElement("div");
+			probe.style.position = "absolute";
+			probe.style.visibility = "hidden";
+			Object.assign(probe.style, {
+				marginTop: lengths?.top,
+				marginRight: lengths?.right,
+				marginBottom: lengths?.bottom,
+				marginLeft: lengths?.left
+			});
+			document.body.append(probe);
+			const style = getComputedStyle(probe);
+			const resolved = {
+				top: parseFloat(style.marginTop),
+				right: parseFloat(style.marginRight),
+				bottom: parseFloat(style.marginBottom),
+				left: parseFloat(style.marginLeft)
+			};
+			probe.remove();
+			return resolved;
+		}, Object.fromEntries(Object.entries(options.pdf.margin ?? {}).map(([side, length]) => [side, typeof length === "number" ? `${length}px` : length])));
+		await page.setViewport({
+			width: Math.max(Math.round(width - margin.left - margin.right), 1),
+			height: 800
+		});
+		const totals = (await page.evaluate(async (attribute, single) => {
+			await document.fonts.ready;
+			return (single ? [document.body] : Array.from(document.body.querySelectorAll(`:scope > [${attribute}]`))).map((element) => {
+				const top = element.getBoundingClientRect().top;
+				return Math.max(element.scrollHeight, single ? document.documentElement.scrollHeight : 0, ...Array.from(element.querySelectorAll("*")).map((child) => child.getBoundingClientRect().bottom - top));
+			});
+		}, _RendererService.SECTION, sections === 1)).map((height) => Math.ceil(height + margin.top + margin.bottom + 96 / 2.54));
+		if (totals.some((total) => total * .75 > 65535)) {
+			this.logger.warn("Content is %dpx tall, which is more than a single PDF page can hold, falling back to paginated output.", Math.max(...totals));
+			return page.pdf({
+				...options.pdf,
+				displayHeaderFooter: false
+			});
+		}
+		const pdf = {
+			...options.pdf,
+			displayHeaderFooter: false
+		};
+		delete pdf.format;
+		delete pdf.landscape;
+		if (sections === 1) return page.pdf({
+			...pdf,
+			width: `${width}px`,
+			height: `${totals[0]}px`,
+			pageRanges: "1"
+		});
+		await page.addStyleTag({ content: totals.map((total, index) => `@page md-printer-${index} { size: ${width}px ${total}px; } [${_RendererService.SECTION}="${index}"] { page: md-printer-${index}; }`).join("\n") });
+		return page.pdf({
+			...pdf,
+			preferCSSPageSize: true
+		});
+	}
+};
+RendererService = _RendererService = __decorate([Injectable(), __decorateMetadata("design:paramtypes", [typeof LoggerService === "undefined" ? Object : LoggerService, typeof BrowserService === "undefined" ? Object : BrowserService])], RendererService);
+//#endregion
+export { RendererService };

package/dist/services/session/Preview.svelte

@@ -0,0 +1,238 @@
+<!--
+  @component
+  Shell page of the live preview: the HTML and the printed PDF side by side, updated over server-sent events.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>md-printer preview</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #f4f4f5;
+        --panel: #ffffff;
+        --text: #18181b;
+        --muted: #71717a;
+        --accent: #cd0043;
+        --border: #e4e4e7;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #17191e;
+          --panel: #22282f;
+          --text: #e4e4e7;
+          --muted: #979eab;
+          --border: #2c333d;
+        }
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        height: 100vh;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        font:
+          13px system-ui,
+          sans-serif;
+        background: var(--bg);
+        color: var(--text);
+      }
+      header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 16px;
+        background: var(--panel);
+        border-bottom: 1px solid var(--border);
+      }
+      header strong {
+        margin-right: auto;
+      }
+      nav button {
+        padding: 4px 12px;
+        border: 1px solid var(--border);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+      nav button:first-child {
+        border-radius: 6px 0 0 6px;
+      }
+      nav button:last-child {
+        border-radius: 0 6px 6px 0;
+      }
+      nav button[aria-pressed='true'] {
+        background: var(--text);
+        color: var(--bg);
+      }
+      #status {
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+      }
+      #badge {
+        display: none;
+        padding: 2px 8px;
+        border-radius: 999px;
+        background: var(--accent);
+        color: #fff;
+        font-weight: 600;
+      }
+      main {
+        display: grid;
+        gap: 1px;
+        background: var(--border);
+        min-height: 0;
+      }
+      main[data-view='html'] #pdf,
+      main[data-view='pdf'] #html {
+        display: none;
+      }
+      main[data-view='split'] {
+        grid-template-columns: 1fr 1fr;
+      }
+      section {
+        position: relative;
+        min-height: 0;
+        background: var(--panel);
+      }
+      iframe {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background: #fff;
+      }
+      iframe[hidden] {
+        visibility: hidden;
+      }
+      #overlay {
+        display: none;
+        position: fixed;
+        inset: 48px 16px auto;
+        max-height: 70vh;
+        overflow: auto;
+        padding: 16px;
+        border-left: 4px solid var(--accent);
+        border-radius: 8px;
+        background: var(--panel);
+        box-shadow: 0 8px 32px rgb(0 0 0 / 30%);
+        white-space: pre-wrap;
+        font:
+          12px ui-monospace,
+          monospace;
+      }
+      @media (max-width: 900px) {
+        main[data-view='split'] {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <strong>md-printer preview</strong>
+      <span id="badge">unsigned preview</span>
+      <span id="status">connecting</span>
+      <nav>
+        <button data-view="html">HTML</button><button data-view="split">Split</button><button data-view="pdf">PDF</button>
+      </nav>
+    </header>
+    <main data-view="split">
+      <section id="html"><iframe title="HTML"></iframe><iframe title="HTML" hidden></iframe></section>
+      <section id="pdf"><iframe title="PDF"></iframe></section>
+    </main>
+    <pre id="overlay"></pre>
+    <script>
+      const main = document.querySelector('main')
+      const status = document.getElementById('status')
+      const badge = document.getElementById('badge')
+      const overlay = document.getElementById('overlay')
+      const pdf = document.querySelector('#pdf iframe')
+      let [visible, buffer] = document.querySelectorAll('#html iframe')
+      let pdfOutput = true
+
+      const setView = (view) => {
+        main.dataset.view = pdfOutput ? view : 'html'
+        for (const button of document.querySelectorAll('nav button')) {
+          button.setAttribute('aria-pressed', String(button.dataset.view === main.dataset.view))
+        }
+        try {
+          localStorage.setItem('md-printer:view', view)
+        } catch {}
+      }
+
+      for (const button of document.querySelectorAll('nav button')) {
+        button.addEventListener('click', () => setView(button.dataset.view))
+      }
+
+      const currentPage = () => {
+        const doc = visible.contentDocument?.documentElement
+        const pages = Number(pdf.dataset.pages || 1)
+
+        if (!doc || doc.scrollHeight <= doc.clientHeight) {
+          return 1
+        }
+
+        return Math.min(pages, Math.floor((doc.scrollTop / doc.scrollHeight) * pages) + 1)
+      }
+
+      const reloadHtml = (version) => {
+        const scroll = visible.contentDocument?.documentElement.scrollTop ?? 0
+
+        buffer.onload = () => {
+          buffer.contentDocument.documentElement.scrollTop = scroll
+          buffer.hidden = false
+          visible.hidden = true
+          ;[visible, buffer] = [buffer, visible]
+        }
+        buffer.src = `/document.html?v=${version}`
+      }
+
+      const events = new EventSource('/__events')
+
+      events.addEventListener('building', () => {
+        status.textContent = 'building'
+      })
+
+      events.addEventListener('ready', ({ data }) => {
+        const build = JSON.parse(data)
+
+        overlay.style.display = 'none'
+        status.textContent = `v${build.version}, ${build.pages ? `${build.pages} pages, ` : ''}${build.ms}ms`
+        badge.style.display = build.signed ? 'inline' : 'none'
+        pdfOutput = build.pdf
+
+        reloadHtml(build.version)
+
+        if (build.pdf) {
+          pdf.dataset.pages = build.pages
+          pdf.src = `/document.pdf?v=${build.version}#page=${currentPage()}`
+        }
+
+        setView(main.dataset.view)
+      })
+
+      events.addEventListener('failed', ({ data }) => {
+        const error = JSON.parse(data)
+
+        status.textContent = 'failed'
+        overlay.textContent = [error.file, error.message, error.frame].filter(Boolean).join('\n\n')
+        overlay.style.display = 'block'
+      })
+
+      events.addEventListener('error', () => {
+        status.textContent = 'disconnected'
+      })
+
+      let stored
+      try {
+        stored = localStorage.getItem('md-printer:view')
+      } catch {}
+      setView(stored ?? (window.innerWidth > 900 ? 'split' : 'pdf'))
+    </script>
+  </body>
+</html>

package/dist/services/session/preview.service.mjs

@@ -0,0 +1,187 @@
+import "../../constants/file.constants.mjs";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorateMetadata.mjs";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.153.0/helpers/esm/decorate.mjs";
+import { resolveConfined } from "../template/assets.mjs";
+import { isLoopbackRequest } from "../loopback.mjs";
+import { TemplateService } from "../template/template.service.mjs";
+import { mkdtemp, rm } from "fs/promises";
+import { join } from "path";
+import { LoggerService } from "@cenk1cenk2/oclif-common";
+import { Injectable } from "@nestjs/common";
+import { fileURLToPath } from "url";
+import { tmpdir } from "os";
+import { spawn } from "child_process";
+import { once } from "events";
+import { createServer } from "http";
+import serveStatic from "serve-static";
+//#region src/services/session/preview.service.ts
+let PreviewService = class PreviewService {
+	logger;
+	template;
+	server;
+	clients = /* @__PURE__ */ new Set();
+	build;
+	error;
+	profile;
+	window;
+	constructor(logger, template) {
+		this.logger = logger;
+		this.template = template;
+		this.logger.setup(this.constructor.name);
+	}
+	async listen(options) {
+		const shell = await this.template.page(fileURLToPath(new URL("./Preview.svelte", import.meta.url)));
+		this.server = createServer((req, res) => {
+			this.handle(req, res, shell).catch((err) => {
+				this.logger.debug("Preview request failed: %s", err);
+				res.writeHead(500);
+				res.end();
+			});
+		});
+		this.server.listen(options.port, options.host);
+		await once(this.server, "listening");
+		const { port } = this.server.address();
+		return `http://${options.host.includes(":") ? `[${options.host}]` : options.host}:${port}/`;
+	}
+	building() {
+		this.send("building", {});
+	}
+	ready(build) {
+		this.build = build;
+		this.error = void 0;
+		this.send("ready", this.summary(build));
+	}
+	failed(err) {
+		this.error = {
+			message: err.message,
+			frame: err.frame,
+			file: err.filename
+		};
+		this.send("failed", this.error);
+	}
+	async open(executable, url) {
+		this.profile = await mkdtemp(join(tmpdir(), "md-printer-preview-"));
+		this.window = spawn(executable, [
+			`--app=${url}`,
+			`--user-data-dir=${this.profile}`,
+			"--no-first-run",
+			"--no-default-browser-check"
+		], { stdio: "ignore" });
+		await new Promise((done) => {
+			this.window.on("exit", () => done());
+			this.window.on("error", (err) => {
+				this.logger.warn("Can not open the preview window, open it manually: %s (%s)", url, err.message);
+			});
+		});
+	}
+	async onModuleDestroy() {
+		await this.close();
+	}
+	async close() {
+		const { server, window, profile } = this;
+		this.server = void 0;
+		this.window = void 0;
+		this.profile = void 0;
+		for (const client of this.clients) client.end();
+		this.clients.clear();
+		if (window && window.exitCode === null && window.signalCode === null && window.kill()) await once(window, "exit");
+		if (server?.listening) {
+			server.close();
+			await once(server, "close");
+		}
+		if (profile) await rm(profile, {
+			recursive: true,
+			force: true
+		});
+	}
+	async handle(req, res, shell) {
+		if (!isLoopbackRequest(req)) {
+			res.writeHead(403);
+			res.end();
+			return;
+		}
+		switch (new URL(req.url, "http://localhost").pathname) {
+			case "/":
+				res.writeHead(200, {
+					["content-type"]: "text/html; charset=utf-8",
+					["cache-control"]: "no-store"
+				});
+				res.end(shell);
+				return;
+			case "/__events":
+				res.writeHead(200, {
+					["content-type"]: "text/event-stream",
+					["cache-control"]: "no-store",
+					connection: "keep-alive"
+				});
+				res.write("retry: 1000\n\n");
+				this.clients.add(res);
+				req.on("close", () => this.clients.delete(res));
+				if (this.error) res.write(this.event("failed", this.error));
+				else if (this.build) res.write(this.event("ready", this.summary(this.build)));
+				return;
+			case "/document.html":
+				if (!this.build) {
+					res.writeHead(404);
+					res.end();
+					return;
+				}
+				res.writeHead(200, {
+					["content-type"]: "text/html; charset=utf-8",
+					["cache-control"]: "no-store"
+				});
+				res.end(this.build.document.html);
+				return;
+			case "/document.pdf":
+				if (this.build?.ctx.options.output !== "pdf") {
+					res.writeHead(404);
+					res.end();
+					return;
+				}
+				res.writeHead(200, {
+					["content-type"]: "application/pdf",
+					["cache-control"]: "no-store"
+				});
+				res.end(this.build.output);
+				return;
+			default: return this.asset(req, res);
+		}
+	}
+	async asset(req, res) {
+		const reject = (status = 404) => {
+			res.writeHead(status);
+			res.end();
+		};
+		if (!this.build) return reject();
+		const base = this.build.ctx.input.directory;
+		const url = URL.parse(req.url, "file:///");
+		const path = url && join(base, fileURLToPath(url));
+		if (!path || !await resolveConfined(path, base)) return reject();
+		serveStatic(base, {
+			dotfiles: "ignore",
+			index: false,
+			fallthrough: false,
+			cacheControl: false,
+			setHeaders: (response) => response.setHeader("cache-control", "no-store")
+		})(req, res, (err) => reject(err?.status));
+	}
+	summary(build) {
+		const pdf = build.ctx.options.output === "pdf";
+		return {
+			version: build.version,
+			ms: build.ms,
+			pdf,
+			pages: pdf ? (build.output.toString("latin1").match(/\/Type\s*\/Page[^s]/g) ?? []).length : 0,
+			signed: Boolean(build.ctx.signature)
+		};
+	}
+	send(event, data) {
+		for (const client of this.clients) client.write(this.event(event, data));
+	}
+	event(event, data) {
+		return `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+	}
+};
+PreviewService = __decorate([Injectable(), __decorateMetadata("design:paramtypes", [typeof LoggerService === "undefined" ? Object : LoggerService, typeof TemplateService === "undefined" ? Object : TemplateService])], PreviewService);
+//#endregion
+export { PreviewService };