pdfjs-viewer-element 2.6.3 → 2.6.5

package/README.md

@@ -10,20 +10,17 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 See [demo pages](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo) for various usecases.
 See [live examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage with frameworks.
 
-⚠️ `pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer.
+## How it works
 
-The prebuilt comes with each PDF.js release. Supported releases:
+**⚠️ This is an important part !!!**
 
-✅ [v4.0.379](https://github.com/mozilla/pdf.js/releases/tag/v4.0.379)
+ **You should download and place the PDF.js prebuilt files in the project.**
 
-✅ [v4.0.269](https://github.com/mozilla/pdf.js/releases/tag/v4.0.269)
+`pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer.
 
-✅ [v4.0.189](https://github.com/mozilla/pdf.js/releases/tag/v4.0.189)
+The prebuilt comes with each PDF.js release. Supported all v4 and v3 [releases](https://github.com/mozilla/pdf.js/releases).
 
-
-To use the package you should download and **place the prebuilt** files in the project.
-
-Then specify the path to the directory with the `viewer-path` property (`/pdfjs` by default).
+Then specify the path to the directory with the `viewer-path` property (`/pdfjs` by default) and PDF file URL with `src` property (should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request)).
 
 ## Status
 
@@ -67,7 +64,7 @@ Using browser:
 ## Usage
 
 ```html
-<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
+<pdfjs-viewer-element src="/file.pdf" viewer-path="/pdfjs-4.5.136-dist"></pdfjs-viewer-element>
 ```
 
 ## Attributes
@@ -107,7 +104,7 @@ Use `viewer-css-theme` attribute to set light or dark theme manually:
 ```html
 <pdfjs-viewer-element 
   src="/file.pdf" 
-  viewer-path="/pdfjs-4.0.379-dist"
+  viewer-path="/pdfjs-4.5.136-dist"
   viewer-css-theme="DARK">
 </pdfjs-viewer-element>
 ```
@@ -119,7 +116,7 @@ You can add your own CSS rules to the viewer application using `viewer-extra-sty
 ```html
 <pdfjs-viewer-element 
   src="/file.pdf" 
-  viewer-path="/pdfjs-4.0.379-dist"
+  viewer-path="/pdfjs-4.5.136-dist"
   viewer-extra-styles="#toolbarViewerMiddle { display: none; }"
   viewer-extra-styles-urls="['/demo/viewer-custom-theme.css']">
 </pdfjs-viewer-element>
@@ -152,7 +149,7 @@ Build your own theme with viewer's custom variables and `viewer-extra-styles-url
 `initialize` - using this method you can access PDFViewerApplication and use methods and events of PDF.js default viewer
 
 ```html
-<pdfjs-viewer-element viewer-path="/pdfjs-4.0.379-dist"></pdfjs-viewer-element>
+<pdfjs-viewer-element viewer-path="/pdfjs-4.5.136-dist"></pdfjs-viewer-element>
 ```
 
 ```javascript
@@ -163,5 +160,31 @@ const viewerApp = await viewer.initialize()
 viewerApp.open({ data: pdfData })
 ```
 
+## Server configuration
+
+Since v4 PDF.js requires `.mjs` files support, make sure your server has it.
+
+In case of `nginx` this may causes to errors, see https://github.com/mozilla/pdf.js/issues/17296
+
+Add `.mjs` files support for `nginx` example:
+
+```bash
+server {
+    # ...
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+
+        location ~* \.mjs$ {
+            types {
+                text/javascript mjs;
+            }
+        }
+    }
+}
+```
+
+
 ## License
 [MIT](http://opensource.org/licenses/MIT)

package/dist/pdfjs-viewer-element.js

@@ -30,9 +30,9 @@ function v(m, e = 25, s = {}) {
       const u = !n && s.leading;
       clearTimeout(n), n = setTimeout(() => {
         n = null;
-        const w = s.leading ? r : o(this, l);
+        const d = s.leading ? r : o(this, l);
         for (const y of t)
-          y(w);
+          y(d);
         t = [];
       }, e), u ? (r = o(this, l), h(r)) : t.push(h);
     });
@@ -56,7 +56,7 @@ const c = {
   viewerExtraStyles: "",
   viewerExtraStylesUrls: "",
   nameddest: ""
-}, d = {
+}, w = {
   AUTOMATIC: 0,
   // Default value.
   LIGHT: 1,
@@ -118,8 +118,8 @@ class p extends HTMLElement {
     this.onIframeReady(() => this.mountViewer(this.getIframeSrc()));
   }
   getIframeSrc() {
-    const e = this.getFullPath(this.getAttribute("src") || c.src), s = this.getFullPath(this.getAttribute("viewer-path") || c.viewerPath), r = this.getAttribute("page") || c.page, n = this.getAttribute("search") || c.search, t = this.getAttribute("phrase") || c.phrase, i = this.getAttribute("zoom") || c.zoom, a = this.getAttribute("pagemode") || c.pagemode, o = this.getAttribute("locale") || c.locale, l = this.getAttribute("text-layer") || c.textLayer, h = this.getAttribute("viewer-css-theme") || c.viewerCssTheme, u = !!(this.getAttribute("viewer-extra-styles") || c.viewerExtraStyles), w = this.getAttribute("nameddest") || c.nameddest;
-    return `${s}${c.viewerEntry}?file=${encodeURIComponent(e)}#page=${r}&zoom=${i}&pagemode=${a}&search=${n}&phrase=${t}&textLayer=${l}${o ? "&locale=" + o : ""}&viewerCssTheme=${h}&viewerExtraStyles=${u}&nameddest=${w}`;
+    const e = this.getFullPath(this.getAttribute("src") || c.src), s = this.getFullPath(this.getAttribute("viewer-path") || c.viewerPath), r = this.getAttribute("page") || c.page, n = this.getAttribute("search") || c.search, t = this.getAttribute("phrase") || c.phrase, i = this.getAttribute("zoom") || c.zoom, a = this.getAttribute("pagemode") || c.pagemode, o = this.getAttribute("locale") || c.locale, l = this.getAttribute("text-layer") || c.textLayer, h = this.getAttribute("viewer-css-theme") || c.viewerCssTheme, u = !!(this.getAttribute("viewer-extra-styles") || c.viewerExtraStyles), d = this.getAttribute("nameddest") || c.nameddest;
+    return `${s}${c.viewerEntry}?file=${encodeURIComponent(e)}#page=${r}&zoom=${i}&pagemode=${a}&search=${n}&phrase=${t}&textLayer=${l}${o ? "&locale=" + o : ""}&viewerCssTheme=${h}&viewerExtraStyles=${u}${d ? "&nameddest=" + d : ""}`;
   }
   mountViewer(e) {
     !e || !this.iframe || (this.shadowRoot.replaceChild(this.iframe.cloneNode(), this.iframe), this.iframe = this.shadowRoot.querySelector("iframe"), this.iframe.src = e);
@@ -129,11 +129,11 @@ class p extends HTMLElement {
   }
   getCssThemeOption() {
     const e = this.getAttribute("viewer-css-theme");
-    return Object.keys(d).includes(e) ? d[e] : d[c.viewerCssTheme];
+    return Object.keys(w).includes(e) ? w[e] : w[c.viewerCssTheme];
   }
   setCssTheme(e) {
     var s, r, n;
-    if (e === d.DARK) {
+    if (e === w.DARK) {
       const t = (s = this.iframe.contentDocument) == null ? void 0 : s.styleSheets[0], i = (t == null ? void 0 : t.cssRules) || [], a = Object.keys(i).filter((o) => {
         var l;
         return ((l = i[Number(o)]) == null ? void 0 : l.conditionText) === "(prefers-color-scheme: dark)";
@@ -148,7 +148,7 @@ class p extends HTMLElement {
 window.customElements.get("pdfjs-viewer-element") || (window.PdfjsViewerElement = p, window.customElements.define("pdfjs-viewer-element", p));
 export {
   p as PdfjsViewerElement,
-  d as ViewerCssTheme,
+  w as ViewerCssTheme,
   p as default,
   A as hardRefreshAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",
@@ -30,14 +30,15 @@
     "types"
   ],
   "devDependencies": {
-    "@types/node": "^18.7.1",
-    "@vitest/browser": "^1.2.1",
+    "@awlsn/pdfjs-full": "^4.2.392",
+    "@types/node": "^18.19.31",
+    "@vitest/browser": "^1.5.0",
     "jsdom": "^22.1.0",
     "perfect-debounce": "^1.0.0",
-    "typescript": "^4.6.4",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.1",
-    "webdriverio": "^8.28.8"
+    "typescript": "^4.9.5",
+    "vite": "^5.2.9",
+    "vitest": "^1.5.0",
+    "webdriverio": "^8.36.1"
   },
   "scripts": {
     "dev": "vite",