flipbookengine 0.1.3 → 0.1.4

package/README.md

@@ -157,7 +157,24 @@ FlipbookEngine features fully custom-property-based styling compatible with mode
 }
 ```
 
-## 🆚 FlipbookEngine vs. The Industry
+## 🚀 Performance & Bundle Metrics
+
+FlipbookEngine is engineered for high performance, utilizing hardware-accelerated CSS 3D transforms instead of heavy WebGL, ensuring a smooth **60 FPS** experience even on low-end mobile devices.
+
+### 📦 Bundle Size (Zero-Config PDF Engine)
+Unlike other libraries that require complex external PDF.js worker configurations, FlipbookEngine ships as an **"All-in-One"** package. It includes the Core Engine, UI layout, StPageFlip, and the full PDF.js rendering engine out of the box.
+
+*   **Core + PDF Engine (Gzipped):** `~788 KB` *(A single drop-in script, no external workers needed)*
+*   **Styles (CSS Gzipped):** `~2.9 KB`
+*   **React / Vue Wrappers (Gzipped):** `< 1 KB`
+
+### ⚡ Performance Highlights
+*   **Hardware Accelerated:** Uses purely CSS-based 3D transformations (`transform: rotateY`, `translateZ`) which offloads rendering to the GPU. No heavy WebGL overhead.
+*   **Smart Memory Management (Lazy Loading):** Automatically unloads hidden pages from the DOM and destroys unused PDF blobs to prevent memory leaks on large catalogs.
+*   **Zero-CLS Layouts:** Prevents Cumulative Layout Shift (CLS) by utilizing highly optimized `AbortController` bound resize event listeners and native CSS `aspect-ratio` calculations.
+*   **Eco-Friendly Standby:** Stops running layout calculations when the catalog is not actively being dragged or flipped.
+
+## 🥊 FlipbookEngine vs. The Industry
 
 When choosing a flipbook library, here is how we compare to other solutions:
 

package/dist/flipbook-engine.js

@@ -19236,11 +19236,11 @@ const Bl = class Bl {
     if (!this.pageViewport || !this.ui.bookWrapper || !this.ui.bookSizer) return;
     const I = this.ui.bookWrapper.clientWidth, g = this.ui.bookWrapper.clientHeight;
     if (I === 0 || g === 0) return;
-    const C = this.pageViewport.width, A = this.pageViewport.height, Z = !this.state.isSingle && this.state.orientation === "landscape" ? C * 2 / A : C / A;
-    let d = g * Z, s = g;
-    d > I && (d = I, s = I / Z);
-    let c = Math.ceil(d);
-    c % 2 !== 0 && (c += 1), this.ui.bookSizer.style.width = `${c}px`, this.ui.bookSizer.style.height = `${Math.floor(s)}px`, this.ui.bookSizer.style.aspectRatio = "";
+    const C = this.pageViewport.width, A = this.pageViewport.height, i = I < g, d = !this.state.isSingle && !i ? C * 2 / A : C / A;
+    let s = g * d, c = g;
+    s > I && (s = I, c = I / d);
+    let G = Math.ceil(s);
+    G % 2 !== 0 && (G += 1), this.ui.bookSizer.style.width = `${G}px`, this.ui.bookSizer.style.height = `${Math.floor(c)}px`, this.ui.bookSizer.style.aspectRatio = "";
   }
   playSound() {
     if (this.options.soundEnabled)
@@ -19263,10 +19263,14 @@ const Bl = class Bl {
   renderPagesIntoDOM() {
     const I = this.ui.book, g = this.ui.thumbs;
     this.pages.forEach((C, A) => {
-      const i = this.createPageImage(C, "low"), Z = A % 2 === 0 ? "bz-page--right" : "bz-page--left", s = A === 0 || A === this.pages.length - 1 ? "bz-page--cover" : "", c = U("div", { class: "page-shadow" }), G = U("div", { class: `bz-page ${Z} ${s}`, dataset: { idx: A.toString() } }, [i, c]);
-      I.appendChild(G);
-      const m = this.createThumbnailImage(C), W = U("span", null, [C.pageNumber.toString()]), a = U("div", { class: `thumb-item ${A === 0 ? "active" : ""}`, dataset: { pageIndex: A.toString() } }, [m, W]);
-      g.appendChild(a);
+      const i = A < 2, Z = this.createPageImage(C, "low", i), d = A % 2 === 0 ? "bz-page--right" : "bz-page--left", c = A === 0 || A === this.pages.length - 1 ? "bz-page--cover" : "", G = U("div", { class: "page-shadow" }), m = U("div", {
+        class: `bz-page ${d} ${c}`,
+        style: i ? "" : "display: none;",
+        dataset: { idx: A.toString() }
+      }, [Z, G]);
+      I.appendChild(m);
+      const W = this.createThumbnailImage(C, !1), a = U("span", null, [C.pageNumber.toString()]), t = U("div", { class: `thumb-item ${A === 0 ? "active" : ""}`, dataset: { pageIndex: A.toString() } }, [W, a]);
+      g.appendChild(t);
     });
   }
   initPageFlip() {
@@ -19295,19 +19299,21 @@ const Bl = class Bl {
       this.ui.book.querySelector(".empty-cover") !== null ? this.state.currentPage = A.data - 1 : this.state.currentPage = A.data, this.state.currentPage < 0 && (this.state.currentPage = 0), this.syncUI(), this.playSound(), this.emitPageChange();
     });
   }
-  createPageImage(I, g) {
-    const C = U("img", {
+  createPageImage(I, g, C = !1) {
+    const A = U("img", {
       class: this.getPageImageClassName(I.cropMode),
-      dataset: { cropMode: I.cropMode }
+      dataset: { cropMode: I.cropMode },
+      loading: C ? "eager" : "lazy"
     });
-    return this.ensurePageSrc(I, g, C), C;
+    return this.ensurePageSrc(I, g, A), A;
   }
-  createThumbnailImage(I) {
-    const g = U("img", {
+  createThumbnailImage(I, g = !1) {
+    const C = U("img", {
       class: this.getThumbnailImageClassName(I.cropMode),
-      dataset: { cropMode: I.cropMode }
+      dataset: { cropMode: I.cropMode },
+      loading: g ? "eager" : "lazy"
     });
-    return this.ensurePageSrc(I, "thumb", g), g;
+    return this.ensurePageSrc(I, "thumb", C), C;
   }
   async ensurePageSrc(I, g, C) {
     var d;
@@ -19322,7 +19328,7 @@ const Bl = class Bl {
       C.src = this.pdfPagesCache.get(Z);
       return;
     }
-    C.src = 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="141" viewBox="0 0 100 141"><rect width="100" height="141" fill="%231e293b"/><text x="50" y="75" fill="%2364748b" font-family="sans-serif" font-size="10" text-anchor="middle">Loading...</text></svg>';
+    C.src = 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 141" width="100%" height="100%"><rect width="100" height="141" fill="%231e293b"/><circle cx="50" cy="70" r="10" fill="none" stroke="%2364748b" stroke-width="2" stroke-dasharray="15 15"><animateTransform attributeName="transform" type="rotate" from="0 50 70" to="360 50 70" dur="1s" repeatCount="indefinite"/></circle></svg>';
     try {
       const s = await this.pdfDoc.getPage(i);
       let c = 1;