@silurus/ooxml 0.24.3 → 0.26.0

package/README.md

@@ -48,11 +48,13 @@ await docx.load('/document.docx');
 docx.nextPage();
 
 // XLSX — viewer manages its own <canvas> + tab bar
-const xlsx = new XlsxViewer(document.getElementById('xlsx-container')!);
+const container = document.getElementById('xlsx-container') as HTMLElement;
+const xlsx = new XlsxViewer(container);
 await xlsx.load('/workbook.xlsx');
 
-// PPTX — viewer manages its own <canvas>
-const pptx = new PptxViewer(document.getElementById('pptx-container')!);
+// PPTX — caller provides the <canvas>
+const canvas = document.getElementById('pptx-canvas') as HTMLCanvasElement;
+const pptx = new PptxViewer(canvas);
 await pptx.load('/deck.pptx');
 pptx.nextSlide();
 ```
@@ -137,15 +139,15 @@ import { useEffect, useRef, useState } from 'react';
 import { PptxViewer } from '@silurus/ooxml/pptx';
 
 export function PptxViewerComponent({ src }: { src: string }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const viewerRef   = useRef<PptxViewer | null>(null);
+  const canvasRef  = useRef<HTMLCanvasElement>(null);
+  const viewerRef  = useRef<PptxViewer | null>(null);
   const [slide, setSlide] = useState({ current: 0, total: 0 });
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
 
-    const viewer = new PptxViewer(container, {
+    const viewer = new PptxViewer(canvas, {
       onSlideChange: (i, total) => setSlide({ current: i, total }),
     });
     viewerRef.current = viewer;
@@ -154,7 +156,7 @@ export function PptxViewerComponent({ src }: { src: string }) {
 
   return (
     <div>
-      <div ref={containerRef} style={{ width: 800 }} />
+      <canvas ref={canvasRef} style={{ width: 800 }} />
       <button onClick={() => viewerRef.current?.prevSlide()}>‹ Prev</button>
       <span> {slide.current + 1} / {slide.total} </span>
       <button onClick={() => viewerRef.current?.nextSlide()}>Next ›</button>
@@ -176,13 +178,13 @@ import { PptxViewer } from '@silurus/ooxml/pptx';
 
 const props = defineProps<{ src: string }>();
 
-const container = useTemplateRef<HTMLDivElement>('container');
+const canvas  = useTemplateRef<HTMLCanvasElement>('canvas');
 let viewer: PptxViewer | null = null;
 const current = ref(0);
 const total   = ref(0);
 
 onMounted(async () => {
-  viewer = new PptxViewer(container.value!, {
+  viewer = new PptxViewer(canvas.value!, {
     onSlideChange: (i, t) => { current.value = i; total.value = t; },
   });
   await viewer.load(props.src);
@@ -191,7 +193,7 @@ onMounted(async () => {
 
 <template>
   <div>
-    <div ref="container" style="width: 800px" />
+    <canvas ref="canvas" style="width: 800px" />
     <button @click="viewer?.prevSlide()">‹ Prev</button>
     <span> {{ current + 1 }} / {{ total }} </span>
     <button @click="viewer?.nextSlide()">Next ›</button>
@@ -217,7 +219,7 @@ import { PptxViewer } from '@silurus/ooxml/pptx';
   standalone: true,
   template: `
     <div>
-      <div #container style="width: 800px"></div>
+      <canvas #canvas style="width: 800px"></canvas>
       <button (click)="prev()">‹ Prev</button>
       <span> {{ current() + 1 }} / {{ total() }} </span>
       <button (click)="next()">Next ›</button>
@@ -225,13 +227,13 @@ import { PptxViewer } from '@silurus/ooxml/pptx';
   `,
 })
 export class PptxViewerComponent implements AfterViewInit {
-  containerEl = viewChild.required<ElementRef<HTMLDivElement>>('container');
+  canvasEl = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
   current = signal(0);
   total   = signal(0);
   private viewer?: PptxViewer;
 
   ngAfterViewInit(): void {
-    this.viewer = new PptxViewer(this.containerEl().nativeElement, {
+    this.viewer = new PptxViewer(this.canvasEl().nativeElement, {
       onSlideChange: (i, t) => { this.current.set(i); this.total.set(t); },
     });
     this.viewer.load('/deck.pptx');
@@ -257,13 +259,13 @@ export class PptxViewerComponent implements AfterViewInit {
 
   let { src }: { src: string } = $props();
 
-  let container: HTMLDivElement;
+  let canvas: HTMLCanvasElement;
   let viewer: PptxViewer;
   let current = $state(0);
   let total   = $state(0);
 
   onMount(async () => {
-    viewer = new PptxViewer(container, {
+    viewer = new PptxViewer(canvas, {
       onSlideChange: (i, t) => { current = i; total = t; },
     });
     await viewer.load(src);
@@ -271,7 +273,7 @@ export class PptxViewerComponent implements AfterViewInit {
 </script>
 
 <div>
-  <div bind:this={container} style="width: 800px"></div>
+  <canvas bind:this={canvas} style="width: 800px"></canvas>
   <button onclick={() => viewer?.prevSlide()}>‹ Prev</button>
   <span> {current + 1} / {total} </span>
   <button onclick={() => viewer?.nextSlide()}>Next ›</button>
@@ -289,13 +291,13 @@ import { createSignal, onMount, onCleanup } from 'solid-js';
 import { PptxViewer } from '@silurus/ooxml/pptx';
 
 export function PptxViewerComponent(props: { src: string }) {
-  let containerEl!: HTMLDivElement;
+  let canvasEl!: HTMLCanvasElement;
   let viewer: PptxViewer | undefined;
   const [current, setCurrent] = createSignal(0);
   const [total,   setTotal  ] = createSignal(0);
 
   onMount(async () => {
-    viewer = new PptxViewer(containerEl, {
+    viewer = new PptxViewer(canvasEl, {
       onSlideChange: (i, t) => { setCurrent(i); setTotal(t); },
     });
     await viewer.load(props.src);
@@ -305,7 +307,7 @@ export function PptxViewerComponent(props: { src: string }) {
 
   return (
     <div>
-      <div ref={containerEl} style={{ width: '800px' }} />
+      <canvas ref={canvasEl} style={{ width: '800px' }} />
       <button onClick={() => viewer?.prevSlide()}>‹ Prev</button>
       <span> {current() + 1} / {total()} </span>
       <button onClick={() => viewer?.nextSlide()}>Next ›</button>
@@ -325,16 +327,16 @@ import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
 import type { PptxViewer as PptxViewerType } from '@silurus/ooxml/pptx';
 
 export const PptxViewerComponent = component$<{ src: string }>(({ src }) => {
-  const containerRef = useSignal<HTMLDivElement>();
+  const canvasRef = useSignal<HTMLCanvasElement>();
   const current = useSignal(0);
   const total   = useSignal(0);
   let viewer: PptxViewerType | undefined;
 
   // useVisibleTask$ runs only in the browser, never during SSR
   useVisibleTask$(async () => {
-    if (!containerRef.value) return;
+    if (!canvasRef.value) return;
     const { PptxViewer } = await import('@silurus/ooxml/pptx');
-    viewer = new PptxViewer(containerRef.value, {
+    viewer = new PptxViewer(canvasRef.value, {
       onSlideChange: (i, t) => { current.value = i; total.value = t; },
     });
     await viewer.load(src);
@@ -342,7 +344,7 @@ export const PptxViewerComponent = component$<{ src: string }>(({ src }) => {
 
   return (
     <div>
-      <div ref={containerRef} style={{ width: '800px' }} />
+      <canvas ref={canvasRef} style={{ width: '800px' }} />
       <button onClick$={() => viewer?.prevSlide()}>‹ Prev</button>
       <span> {current.value + 1} / {total.value} </span>
       <button onClick$={() => viewer?.nextSlide()}>Next ›</button>
@@ -522,8 +524,10 @@ pnpm storybook
 # Type-check all packages
 pnpm typecheck
 
-# Run visual regression tests
+# Run visual regression tests (local only — not run in CI)
 pnpm vrt
+# Adopt the current rendering as the new reference baseline
+UPDATE_REFS=1 pnpm vrt
 
 # Build the library
 pnpm build
@@ -541,7 +545,7 @@ cd packages/pptx/parser && wasm-pack build --target web && cp pkg/pptx_parser_bg
 
 - **Canvas-only rendering.** Documents are decoded and drawn to an `HTMLCanvasElement`. No script, link, form, or other active content from the source file is executed or injected into the DOM.
 - **ZIP decompression cap.** Each entry in the source archive is limited to 512 MiB of uncompressed output to block zip-bomb DoS.
-- **No network by default.** The library does not send telemetry or analytics, and does not contact third-party services unless you ask it to. In particular, PPTX theme webfonts are **not** loaded from Google Fonts unless you pass `useGoogleFonts: true` to `PptxPresentation.load()` / `new PptxViewer(...)`. Enabling that option causes the end-user's browser to send an HTTP request (IP and User-Agent) to `fonts.googleapis.com`, which may have GDPR implications for your application — consider self-hosting the required fonts via `@font-face` instead.
+- **No network by default.** The library does not send telemetry or analytics, and does not contact third-party services unless you ask it to. In particular, theme webfonts (and Office font metric substitutes for XLSX) are **not** loaded from Google Fonts unless you pass `useGoogleFonts: true` to the relevant `Viewer` / `load(...)` options — supported uniformly by `DocxViewer`, `PptxViewer`, and `XlsxViewer`. Enabling that option causes the end-user's browser to send an HTTP request (IP and User-Agent) to `fonts.googleapis.com`, which may have GDPR implications for your application — consider self-hosting the required fonts via `@font-face` instead.
 - **XML parsing.** Uses `roxmltree`, which does not resolve external entities (XXE-safe by default).
 
 ## License

package/dist/autoResize-C6N7p_Or.cjs

@@ -0,0 +1 @@
+var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r},n=3e3,r=20,i=25;async function a(e,t){if(typeof document>`u`)return;let a=new Set,o=new Set;for(let n of e){if(!n)continue;let e=n.toLowerCase();if(a.has(e))continue;a.add(e);let r=t[e];if(r){if(!document.querySelector(`link[href="${r.url}"]`))try{let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=r.url,document.head.appendChild(e)}catch{}o.add((r.loadFamily??n).toLowerCase())}}if(o.size===0)return;let s=[];for(let e=0;e<i&&(s=[...document.fonts].filter(e=>o.has(e.family.toLowerCase())),!(s.length>0));e++)await new Promise(e=>setTimeout(e,r));await Promise.race([Promise.allSettled(s.map(e=>e.load())).then(()=>document.fonts.ready),new Promise(e=>setTimeout(e,n))])}function o(e,t,n={}){let r=n.pauseWhenHidden??!0,i=null,a=0,o=0,s=null,c=!1,l=!1,u=()=>{if(!l&&!(r&&typeof document<`u`&&document.hidden)){if(s){c=!0;return}i===null&&(i=requestAnimationFrame(d))}},d=async()=>{if(i=null,l)return;let t=a,n=o;try{let r=e(t,n);s=r instanceof Promise?r:Promise.resolve(),await s}catch(e){console.error(`[autoResize] render failed:`,e)}finally{s=null,c&&!l&&(c=!1,u())}},f=new ResizeObserver(e=>{for(let t of e){let e=t.contentRect;a=e.width,o=e.height}u()});f.observe(t);let p=()=>{typeof document<`u`&&!document.hidden&&u()};return r&&typeof document<`u`&&document.addEventListener(`visibilitychange`,p),()=>{l=!0,f.disconnect(),i!==null&&(cancelAnimationFrame(i),i=null),r&&typeof document<`u`&&document.removeEventListener(`visibilitychange`,p)}}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});

package/dist/{autoResize-U2-IRmNE.js → autoResize-D-Yz7Izt.js}

@@ -6,10 +6,32 @@ var e = Object.defineProperty, t = (t, n) => {
 		enumerable: !0
 	});
 	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-};
+}, n = 3e3, r = 20, i = 25;
+async function a(e, t) {
+	if (typeof document > "u") return;
+	let a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set();
+	for (let n of e) {
+		if (!n) continue;
+		let e = n.toLowerCase();
+		if (a.has(e)) continue;
+		a.add(e);
+		let r = t[e];
+		if (r) {
+			if (!document.querySelector(`link[href="${r.url}"]`)) try {
+				let e = document.createElement("link");
+				e.rel = "stylesheet", e.href = r.url, document.head.appendChild(e);
+			} catch {}
+			o.add((r.loadFamily ?? n).toLowerCase());
+		}
+	}
+	if (o.size === 0) return;
+	let s = [];
+	for (let e = 0; e < i && (s = [...document.fonts].filter((e) => o.has(e.family.toLowerCase())), !(s.length > 0)); e++) await new Promise((e) => setTimeout(e, r));
+	await Promise.race([Promise.allSettled(s.map((e) => e.load())).then(() => document.fonts.ready), new Promise((e) => setTimeout(e, n))]);
+}
 //#endregion
 //#region packages/core/src/autoResize.ts
-function n(e, t, n = {}) {
+function o(e, t, n = {}) {
 	let r = n.pauseWhenHidden ?? !0, i = null, a = 0, o = 0, s = null, c = !1, l = !1, u = () => {
 		if (!l && !(r && typeof document < "u" && document.hidden)) {
 			if (s) {
@@ -45,4 +67,4 @@ function n(e, t, n = {}) {
 	};
 }
 //#endregion
-export { t as n, n as t };
+export { a as n, t as r, o as t };