@nu-art/ts-pdf-frontend 0.400.7

package/modules/ModuleFE_PDF.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties } from 'react';
+import { Module } from '@nu-art/ts-common';
+import { PDFDocumentProxy } from 'pdfjs-dist';
+export interface PDFEngine {
+    loadFromBuffer(buffer: ArrayBuffer): Promise<PDFDocumentProxy>;
+}
+export declare class ModuleFE_PDF_Class extends Module {
+    private readonly engine;
+    constructor(engine?: PDFEngine);
+    protected init(): void;
+    appendCanvas(parent: HTMLElement, style?: CSSProperties): CanvasRenderingContext2D;
+    appendTextLayer(parent: HTMLElement, style?: CSSProperties): HTMLDivElement;
+    /** Render a 1-based page index. Returns the viewport used. */
+    renderPage(canvasContext: CanvasRenderingContext2D, pdfFile: PDFDocumentProxy, pageNumber: number, textLayerDiv?: HTMLDivElement, scale?: number): Promise<import("pdfjs-dist/types/src/display/display_utils.js").PageViewport>;
+    loadFromFile(file: File): Promise<PDFDocumentProxy>;
+    loadFromUrl(url: string, useFetch?: boolean): Promise<PDFDocumentProxy>;
+    loadFromBuffer(buffer: ArrayBuffer): Promise<import("pdfjs-dist/types/src/display/api.js").PDFDocumentProxy>;
+    private _fetchAsArrayBuffer;
+    private _xhrArrayBuffer;
+}
+export declare const ModuleFE_PDF: ModuleFE_PDF_Class;

package/modules/ModuleFE_PDF.js

@@ -0,0 +1,124 @@
+/*
+ * ModuleFE_PDF (ESM-compatible) – PDF.js v4
+ * - Directly uses official PDF.js v4 types (no redundant aliases)
+ * - Worker configured once at init
+ * - Optional TextLayer overlay using v4 `TextLayer` helper
+ */
+import { _keys, Module } from '@nu-art/ts-common';
+// ---- PDF.js v4 imports ----
+// NOTE: The worker import with `?url` works in Vite/Webpack/Rspack. Adjust if your bundler differs.
+import * as pdfjsLib from 'pdfjs-dist';
+const workerUrl = new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;
+class PDFJSEngine {
+    _workerSet = false;
+    constructor() {
+        this.ensureWorker();
+    }
+    ensureWorker() {
+        if (this._workerSet)
+            return;
+        pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;
+        this._workerSet = true;
+    }
+    async loadFromBuffer(buffer) {
+        this.ensureWorker();
+        const task = pdfjsLib.getDocument({ data: buffer });
+        return (await task.promise);
+    }
+}
+// ---- Module implementation ----
+export class ModuleFE_PDF_Class extends Module {
+    engine;
+    constructor(engine = new PDFJSEngine()) {
+        super();
+        this.engine = engine;
+    }
+    init() {
+    }
+    appendCanvas(parent, style) {
+        const canvas = document.createElement('canvas');
+        const _style = { height: '100%', width: '100%', ...style };
+        // @ts-ignore
+        _keys(_style).forEach(key => (canvas.style[key] = _style[key]));
+        parent.appendChild(canvas);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Failed to get 2D context for PDF canvas');
+        return ctx;
+    }
+    appendTextLayer(parent, style) {
+        const textLayer = document.createElement('div');
+        const _style = { height: '100%', width: '100%', position: 'absolute', inset: 0, ...style };
+        // @ts-ignore
+        _keys(_style).forEach(key => (textLayer.style[key] = _style[key]));
+        textLayer.classList.add('pdf-text-layer');
+        parent.appendChild(textLayer);
+        return textLayer;
+    }
+    /** Render a 1-based page index. Returns the viewport used. */
+    async renderPage(canvasContext, pdfFile, pageNumber, textLayerDiv, scale = 1) {
+        if (pageNumber < 1 || pageNumber > pdfFile.numPages)
+            throw new Error(`Page ${pageNumber} out of bounds (1..${pdfFile.numPages})`);
+        const page = await pdfFile.getPage(pageNumber);
+        if (!page) {
+            this.logError('PDF page is undefined');
+            return { width: 0, height: 0 };
+        }
+        const viewport = page.getViewport({ scale });
+        canvasContext.canvas.width = viewport.width;
+        canvasContext.canvas.height = viewport.height;
+        const renderTask = page.render({
+            canvasContext,
+            canvas: canvasContext.canvas, // <-- required in v4 types
+            viewport
+        });
+        await renderTask.promise;
+        if (textLayerDiv) {
+            const textContentStream = await page.streamTextContent();
+            const layer = new pdfjsLib.TextLayer({
+                textContentSource: textContentStream,
+                container: textLayerDiv,
+                viewport,
+            });
+            await Promise.resolve(layer.render());
+        }
+        return viewport;
+    }
+    async loadFromFile(file) {
+        this.logDebug(`loading pdf from file: ${file.name}`);
+        const buffer = await file.arrayBuffer();
+        return this.engine.loadFromBuffer(buffer);
+    }
+    async loadFromUrl(url, useFetch = true) {
+        this.logDebug(`loading pdf from url: ${url}`);
+        const buffer = useFetch ? await this._fetchAsArrayBuffer(url) : await this._xhrArrayBuffer(url);
+        return this.engine.loadFromBuffer(buffer);
+    }
+    async loadFromBuffer(buffer) {
+        this.logDebug('loading pdf from ArrayBuffer');
+        return this.engine.loadFromBuffer(buffer);
+    }
+    async _fetchAsArrayBuffer(url) {
+        const res = await fetch(url);
+        if (!res.ok)
+            throw new Error(`Failed to fetch PDF: ${res.status} ${res.statusText}`);
+        return await res.arrayBuffer();
+    }
+    async _xhrArrayBuffer(url) {
+        return await new Promise((resolve, reject) => {
+            const request = new XMLHttpRequest();
+            request.open('GET', url);
+            request.responseType = 'arraybuffer';
+            request.onerror = () => reject(new Error('XHR network error while fetching PDF'));
+            request.onload = () => {
+                if (request.status >= 200 && request.status < 300)
+                    resolve(request.response);
+                else
+                    reject(new Error(`XHR failed: ${request.status}`));
+            };
+            request.send();
+        });
+    }
+}
+export const ModuleFE_PDF = new ModuleFE_PDF_Class();

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@nu-art/ts-pdf-frontend",
+  "version": "0.400.7",
+  "description": "ts-pdf - Express & Typescript based backend framework Frontend",
+  "keywords": [
+    "TacB0sS",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript",
+    "ts-pdf"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "files": [
+    "**/*"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@nu-art/ts-common": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "react": "^18.0.0",
+    "pdf.js": "^0.1.0",
+    "pdfjs-dist": "5.4.149"
+  },
+  "devDependencies": {
+    "@types/pdfjs-dist": "2.10.378",
+    "@types/react": "^18.0.0",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}

package/ui/PDF_Renderer.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './PDF_Renderer.scss';
+import { ComponentAsync } from '@nu-art/thunderstorm-frontend/index';
+import { PDFDocumentProxy } from 'pdfjs-dist';
+type State = {
+    index: number;
+    pdfFile?: PDFDocumentProxy;
+    width: number;
+    height: number;
+};
+type Props = {
+    pageIndex?: number;
+    src: string;
+};
+export declare class PDF_Renderer extends ComponentAsync<Props, State> {
+    private ctx;
+    private textLayer;
+    constructor(props: Props);
+    protected deriveStateFromProps(nextProps: Props): Promise<{
+        index: number;
+        isLoading: boolean;
+        width: number;
+        height: number;
+    }>;
+    private loadPdf;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): Promise<void>;
+    render(): import("react/jsx-runtime").JSX.Element;
+    renderState(): React.ReactNode;
+    private renderPage;
+}
+export {};

package/ui/PDF_Renderer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './PDF_Renderer.scss';
+import { ModuleFE_PDF } from '../modules/ModuleFE_PDF.js';
+import { ComponentAsync, TS_Loader } from '@nu-art/thunderstorm-frontend/index';
+import { _logger_logException } from '@nu-art/ts-common';
+export class PDF_Renderer extends ComponentAsync {
+    ctx;
+    textLayer;
+    constructor(props) {
+        super(props);
+    }
+    async deriveStateFromProps(nextProps) {
+        const state = {
+            index: nextProps.pageIndex || 1,
+            isLoading: false,
+            width: 500,
+            height: 500
+        };
+        return state;
+    }
+    async loadPdf(pdfSrc) {
+        this.setState({ isLoading: true });
+        try {
+            const pdfFile = await ModuleFE_PDF.loadFromUrl(pdfSrc);
+            this.setState({ pdfFile });
+            await this.renderPage(this.state.index);
+            this.setState({ isLoading: false });
+        }
+        catch (err) {
+            this.setState({ error: err.message, isLoading: false });
+        }
+    }
+    async componentDidMount() {
+        return this.loadPdf(this.props.src);
+    }
+    async componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.props.src !== prevProps.src) {
+            return this.loadPdf(this.props.src);
+        }
+    }
+    render() {
+        return _jsxs(_Fragment, { children: [_jsx("div", { className: 'pdf-renderer', ref: instance => {
+                        if (!instance)
+                            return;
+                        if (!this.ctx)
+                            this.ctx = ModuleFE_PDF.appendCanvas(instance, { position: 'absolute' });
+                    }, children: this.renderState() }), _jsx("div", { ref: instance => {
+                        if (!instance)
+                            return;
+                        if (!this.textLayer)
+                            this.textLayer = instance;
+                    } })] });
+        // new Array(this.state.pdfFile?._pdfInfo.numPages || 0)
+        // 	.fill(0)
+        // 	.map((val, index) => <div key={index} className="clickable" style={{margin: "5px", padding: "3px"}}
+        // 	                          onClick={async () => {
+        // 		                          await this.renderPage(index + 1);
+        // 	                          }}>{index + 1}</div>);
+    }
+    renderState() {
+        if (this.state.isLoading)
+            return _jsx(TS_Loader, {});
+        if (this.state.error)
+            return _jsx("div", { children: _logger_logException(this.state.error) });
+    }
+    async renderPage(index) {
+        const pdfFile = this.state.pdfFile;
+        if (!pdfFile) {
+            this.logError('cannot render pdfFile - undefined');
+            return;
+        }
+        this.logInfo(`isLoading page ${index}`);
+        const viewport = await ModuleFE_PDF.renderPage(this.ctx, pdfFile, index, this.textLayer);
+        this.logInfo(`loaded page ${index}`);
+        this.setState({ index, width: viewport.width, height: viewport.height });
+    }
+}

package/ui/PDF_Renderer.scss

@@ -0,0 +1,5 @@
+.pdf-renderer {
+  position: relative;
+  width: 500px;
+  height: 500px;
+}