@file-viewer/pptx - npm Package Compare versions

Comparing version 2.2.4 to 2.2.5

dist/chart.d.ts

@@ -1,1 +0,5 @@
-export declare const renderPptxPostProcessing: (charts: unknown, root: ParentNode) => Promise<void>;
+export type PptxPostProcessingHandle = {
+    destroy: () => void;
+};
+export declare const findPptxChartTarget: (root: ParentNode, chartID: string) => HTMLElement | null;
+export declare const renderPptxPostProcessing: (charts: unknown, root: ParentNode) => Promise<PptxPostProcessingHandle>;

dist/chart.js

 const asChartQueue = (charts) => {
     return Array.isArray(charts === null || charts === void 0 ? void 0 : charts.MsgQueue) ? charts.MsgQueue : [];
 };
+export const findPptxChartTarget = (root, chartID) => {
+    const rootElement = root;
+    if (rootElement.id === chartID) {
+        return rootElement;
+    }
+    return Array.from(root.querySelectorAll('[id]'))
+        .find(element => element.id === chartID) || null;
+};
 const getNumericBulletText = (type, index) => {
@@ -144,3 +152,3 @@ switch (type) {
 };
-const renderChart = async (message) => {
+const renderChart = async (message, root) => {
     var _a;
@@ -151,2 +159,6 @@ const payload = message.data;
     }
+    const chartTarget = findPptxChartTarget(root, payload.chartID);
+    if (!chartTarget) {
+        return;
+    }
     const billboard = await import('billboard.js');
@@ -157,3 +169,5 @@ const d3Format = await import('d3-format');
     const chart = {
-        bindto: `#${payload.chartID}`,
+        // A selector makes Billboard query the main document. That misses chart
+        // placeholders inside the viewer Shadow DOM and makes it fall back to body.
+        bindto: chartTarget,
     };
@@ -255,3 +269,3 @@ const chartData = payload.chartData;
     if (chart.data) {
-        bb.generate(chart);
+        return bb.generate(chart);
     }
@@ -263,11 +277,35 @@ };
     const queue = asChartQueue(charts);
-    if (!queue.length) {
-        return;
+    const chartInstances = [];
+    if (queue.length) {
+        const results = await Promise.allSettled(queue.map(message => renderChart(message, root)));
+        for (const result of results) {
+            if (result.status === 'fulfilled') {
+                if (result.value) {
+                    chartInstances.push(result.value);
+                }
+            }
+            else {
+                console.warn('PPTX chart rendering skipped:', result.reason);
+            }
+        }
     }
-    try {
-        await Promise.all(queue.map(renderChart));
-    }
-    catch (error) {
-        console.warn('PPTX chart rendering skipped:', error);
-    }
+    let destroyed = false;
+    return {
+        destroy() {
+            var _a;
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            for (const chart of chartInstances) {
+                try {
+                    (_a = chart.destroy) === null || _a === void 0 ? void 0 : _a.call(chart);
+                }
+                catch {
+                    // The DOM may already be detached during framework unmount.
+                }
+            }
+            chartInstances.length = 0;
+        },
+    };
 };

dist/viewer.d.ts

@@ -23,2 +23,3 @@ import type { PptxViewerOptions } from './types';
     private charts;
+    private readonly chartHandles;
     private readonly mediaRecords;
@@ -64,2 +65,5 @@ private disposed;
     private fail;
+    private trackChartHandle;
+    private releaseChartHandle;
+    private releaseCharts;
     private storeMedia;
@@ -66,0 +70,0 @@ private hydrateMedia;

dist/viewer.js

@@ -103,2 +103,3 @@ import { renderPptxPostProcessing } from './chart.js';
         this.charts = null;
+        this.chartHandles = new Set();
         this.mediaRecords = new Map();
@@ -144,2 +145,3 @@ this.disposed = false;
         this.previewThumbnailDataUrl = null;
+        this.releaseCharts();
         this.releaseMedia();
@@ -162,2 +164,3 @@ (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
         (_a = this.worker) === null || _a === void 0 ? void 0 : _a.terminate();
+        this.releaseCharts();
         this.releaseMedia();
@@ -333,2 +336,4 @@ this.completed = false;
             postProcessPromise: null,
+            postProcessVersion: 0,
+            chartHandle: null,
         };
@@ -351,2 +356,3 @@ }
         record.postProcessed = false;
+        record.postProcessVersion += 1;
         this.updateMeasuredSlideHeight(record);
@@ -367,2 +373,5 @@ if (!record.notified) {
         this.updateMeasuredSlideHeight(record);
+        this.releaseChartHandle(record.chartHandle);
+        record.chartHandle = null;
+        record.postProcessVersion += 1;
         record.slot.replaceChildren();
@@ -547,3 +556,4 @@ record.element = null;
         if (!this.shouldWindowSlides()) {
-            await renderPptxPostProcessing(charts, this.content);
+            const handle = await renderPptxPostProcessing(charts, this.content);
+            this.trackChartHandle(handle);
             return;
@@ -560,12 +570,20 @@ }
         if (!record.postProcessPromise) {
-            record.postProcessPromise = (async () => {
-                await renderPptxPostProcessing(this.charts, record.slot);
-                if (this.disposed) {
+            const version = record.postProcessVersion;
+            const postProcessPromise = (async () => {
+                const handle = await renderPptxPostProcessing(this.charts, record.slot);
+                if (this.disposed || !record.rendered || record.postProcessVersion !== version) {
+                    handle === null || handle === void 0 ? void 0 : handle.destroy();
                     return;
                 }
+                this.releaseChartHandle(record.chartHandle);
+                record.chartHandle = handle;
+                this.trackChartHandle(handle);
                 record.postProcessed = true;
                 this.updateMeasuredSlideHeight(record);
             })().finally(() => {
-                record.postProcessPromise = null;
+                if (record.postProcessPromise === postProcessPromise) {
+                    record.postProcessPromise = null;
+                }
             });
+            record.postProcessPromise = postProcessPromise;
         }
@@ -622,2 +640,3 @@ await record.postProcessPromise;
         this.worker = null;
+        this.releaseCharts();
         this.releaseMedia();
@@ -627,2 +646,28 @@ this.content.dataset.renderState = 'error';
     }
+    trackChartHandle(handle) {
+        if (!handle) {
+            return;
+        }
+        if (this.disposed) {
+            handle.destroy();
+            return;
+        }
+        this.chartHandles.add(handle);
+    }
+    releaseChartHandle(handle) {
+        if (!handle) {
+            return;
+        }
+        this.chartHandles.delete(handle);
+        handle.destroy();
+    }
+    releaseCharts() {
+        for (const handle of this.chartHandles) {
+            handle.destroy();
+        }
+        this.chartHandles.clear();
+        for (const record of this.slideRecords) {
+            record.chartHandle = null;
+        }
+    }
     storeMedia(data) {
@@ -629,0 +674,0 @@ if (!data || typeof data !== 'object') {

package.json

 {
   "name": "@file-viewer/pptx",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "private": false,
@@ -5,0 +5,0 @@ "type": "module",

Fixed alerts

AI-detected potential code anomaly

Supply chain risk

AI has identified unusual behaviors that may pose a security risk.

Improved metrics

Total package byte prevSize

653375

0.71%

Lines of code

3837

2.57%

Number of low supply chain risk alerts

3

-25%

No dependency changes