@edgepdf/viewer-js 0.0.29 → 0.0.30

package/README.md

@@ -10,7 +10,9 @@ npm install @edgepdf/viewer-js
 pnpm add @edgepdf/viewer-js
 ```
 
-**Note:** Leaflet is bundled with this library, so you don't need to install it separately. **CSS styles are automatically injected** when you import the library - no manual CSS import needed!
+**Note:** Leaflet is bundled with this library, so you don't need to install it separately.
+
+**For SSR frameworks (Next.js, Remix, etc.):** This library requires a browser environment. Use dynamic imports or the React component (`@edgepdf/viewer-react`) which handles SSR automatically. See [SSR Support](#ssr-support) section below.
 
 ## Usage
 
@@ -78,6 +80,93 @@ const viewer = new EdgePdfViewer({
 viewer.initialize();
 ```
 
+## SSR Support
+
+This library uses Leaflet, which requires a browser environment. For SSR frameworks like Next.js, Remix, or other React frameworks, you have two options:
+
+### Option 1: Use the React Component (Recommended)
+
+The `@edgepdf/viewer-react` package handles SSR automatically with dynamic imports:
+
+```tsx
+import { EdgePDFViewer } from '@edgepdf/viewer-react';
+import { ViewerProvider } from '@edgepdf/viewer-react';
+
+// In your component
+<ViewerProvider>
+  <EdgePDFViewer config={config} />
+</ViewerProvider>;
+```
+
+### Option 2: Use Dynamic Imports (Next.js)
+
+If you need to use `@edgepdf/viewer-js` directly in Next.js, use dynamic imports with `ssr: false`:
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const EdgePdfViewer = dynamic(
+  () => import('@edgepdf/viewer-js').then((mod) => mod.EdgePdfViewer),
+  { ssr: false }
+);
+
+// Or use it in a client component
+('use client');
+
+import { useEffect, useRef } from 'react';
+import dynamic from 'next/dynamic';
+
+const EdgePdfViewer = dynamic(
+  () => import('@edgepdf/viewer-js').then((mod) => mod.EdgePdfViewer),
+  { ssr: false }
+);
+
+export default function MyComponent() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const { EdgePdfViewer } = require('@edgepdf/viewer-js');
+    const viewer = new EdgePdfViewer({
+      container: containerRef.current,
+      config: yourConfig,
+    });
+    viewer.initialize();
+
+    return () => viewer.dispose();
+  }, []);
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+}
+```
+
+### Next.js Configuration
+
+If you're still getting build errors, add this to your `next.config.js`:
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      // Exclude @edgepdf/viewer-js from server-side bundle
+      config.externals = config.externals || [];
+      config.externals.push('@edgepdf/viewer-js');
+    }
+    return config;
+  },
+};
+
+module.exports = nextConfig;
+```
+
+**Note:** You'll also need to import the CSS manually when using dynamic imports:
+
+```tsx
+import '@edgepdf/viewer-js/dist/styles.css';
+```
+
 ## API Reference
 
 ### EdgePdfViewer

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import './styles.css';
+import './lib/inject-styles.js';
 export * from './lib/viewer.js';
 export { EdgePdfViewer } from './lib/viewer.js';
 export { TileLayerManager } from './lib/tile-layer-manager.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,YAAY,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,YAAY,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}

package/dist/lib/inject-styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Injects CSS styles into the document head
+ * This function is safe to call in SSR environments (no-op if window/document not available)
+ *
+ * The CSS file is bundled separately and injected via a link tag.
+ * This ensures styles are included in the build while remaining SSR-safe.
+ */
+/**
+ * Injects the EdgePDF viewer styles into the document head
+ * Safe to call in SSR environments (will be a no-op)
+ *
+ * Note: For best results, import the CSS directly in your app:
+ * import '@edgepdf/viewer-js/dist/styles.css'
+ * This function is a convenience fallback.
+ */
+export declare function injectStyles(): void;
+//# sourceMappingURL=inject-styles.d.ts.map

package/dist/lib/inject-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject-styles.d.ts","sourceRoot":"","sources":["../../src/lib/inject-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH;;;;;;;GAOG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAyCnC"}