@embedpdf/plugin-viewport 1.0.0

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/index.ts","../../src/react/components/viewport.tsx","../../src/react/hooks/use-viewport.ts","../../src/react/hooks/use-viewport-ref.ts"],"sourcesContent":["export * from './components';\nexport * from './hooks';\n","import React, { ReactNode, useEffect, useState } from 'react';\n\nimport { useViewportCapability } from '../hooks';\nimport { useViewportRef } from '../hooks/use-viewport-ref';\n\ntype ViewportProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nexport function Viewport({ children, ...props }: ViewportProps) {\n  const [viewportGap, setViewportGap] = useState(0);\n  const viewportRef = useViewportRef();\n  const { provides: viewportProvides } = useViewportCapability();\n\n  useEffect(() => {\n    if (viewportProvides) {\n      setViewportGap(viewportProvides.getViewportGap());\n    }\n  }, [viewportProvides]);\n\n  const { style, ...restProps } = props;\n  return (\n    <div\n      {...restProps}\n      ref={viewportRef}\n      style={{\n        ...(typeof style === 'object' ? style : {}),\n        padding: `${viewportGap}px`,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewport = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n","import { useLayoutEffect, useRef } from 'react';\n\nimport { useViewportCapability } from './use-viewport';\nimport { Rect } from '@embedpdf/models';\n\nexport function useViewportRef() {\n  const { provides: viewportProvides } = useViewportCapability();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!viewportProvides) return;\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    /* ---------- live rect provider --------------------------------- */\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    viewportProvides.registerBoundingRectProvider(provideRect);\n\n    // Example: On scroll, call setMetrics\n    const onScroll = () => {\n      viewportProvides.setViewportScrollMetrics({\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // Example: On resize, call setMetrics\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect();\n\n      viewportProvides.setViewportMetrics({\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    const unsubscribeScrollRequest = viewportProvides.onScrollRequest(\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Cleanup\n    return () => {\n      viewportProvides.registerBoundingRectProvider(null);\n      container.removeEventListener('scroll', onScroll);\n      resizeObserver.disconnect();\n      unsubscribeScrollRequest();\n    };\n  }, [viewportProvides]);\n\n  // Return the ref so your React code can attach it to a div\n  return containerRef;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAsD;;;ACAtD,mBAAyC;AACzC,6BAA+B;AAExB,IAAM,cAAc,UAAM,wBAA0B,sCAAe,EAAE;AACrE,IAAM,wBAAwB,UAAM,4BAA8B,sCAAe,EAAE;;;ACJ1F,IAAAC,gBAAwC;AAKjC,SAAS,iBAAiB;AAC/B,QAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AAC7D,QAAM,mBAAe,sBAAuB,IAAI;AAEhD,qCAAgB,MAAM;AACpB,QAAI,CAAC,iBAAkB;AAEvB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAGhB,UAAM,cAAc,MAAY;AAC9B,YAAM,IAAI,UAAU,sBAAsB;AAC1C,aAAO;AAAA,QACL,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,MAC3C;AAAA,IACF;AACA,qBAAiB,6BAA6B,WAAW;AAGzD,UAAM,WAAW,MAAM;AACrB,uBAAiB,yBAAyB;AAAA,QACxC,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AACA,cAAU,iBAAiB,UAAU,QAAQ;AAG7C,UAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,YAAM,OAAO,UAAU,sBAAsB;AAE7C,uBAAiB,mBAAmB;AAAA,QAClC,OAAO,UAAU;AAAA,QACjB,QAAQ,UAAU;AAAA,QAClB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,QACxB,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,QACtB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,MAC1B,CAAC;AAAA,IACH,CAAC;AACD,mBAAe,QAAQ,SAAS;AAEhC,UAAM,2BAA2B,iBAAiB;AAAA,MAChD,CAAC,EAAE,GAAG,GAAG,WAAW,OAAO,MAAM;AAC/B,8BAAsB,MAAM;AAC1B,oBAAU,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;AAAA,QAClD,CAAC;AAAA,MACH;AAAA,IACF;AAGA,WAAO,MAAM;AACX,uBAAiB,6BAA6B,IAAI;AAClD,gBAAU,oBAAoB,UAAU,QAAQ;AAChD,qBAAe,WAAW;AAC1B,+BAAyB;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAGrB,SAAO;AACT;;;AFhDI;AAbG,SAAS,SAAS,EAAE,UAAU,GAAG,MAAM,GAAkB;AAC9D,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAS,CAAC;AAChD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AAE7D,+BAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,qBAAe,iBAAiB,eAAe,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,EAAE,OAAO,GAAG,UAAU,IAAI;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,GAAI,OAAO,UAAU,WAAW,QAAQ,CAAC;AAAA,QACzC,SAAS,GAAG,WAAW;AAAA,MACzB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":["import_react","import_react"]}

package/dist/react/index.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as _embedpdf_plugin_viewport from '@embedpdf/plugin-viewport';
+import { ViewportPlugin } from '@embedpdf/plugin-viewport';
+
+type ViewportProps = React__default.HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+};
+declare function Viewport({ children, ...props }: ViewportProps): react_jsx_runtime.JSX.Element;
+
+declare const useViewport: () => {
+    plugin: ViewportPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+declare const useViewportCapability: () => {
+    provides: Readonly<_embedpdf_plugin_viewport.ViewportCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+
+declare function useViewportRef(): React.RefObject<HTMLDivElement>;
+
+export { Viewport, useViewport, useViewportCapability, useViewportRef };

package/dist/react/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
+import * as _embedpdf_plugin_viewport from '@embedpdf/plugin-viewport';
+import { ViewportPlugin } from '@embedpdf/plugin-viewport';
+
+type ViewportProps = React__default.HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+};
+declare function Viewport({ children, ...props }: ViewportProps): react_jsx_runtime.JSX.Element;
+
+declare const useViewport: () => {
+    plugin: ViewportPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+declare const useViewportCapability: () => {
+    provides: Readonly<_embedpdf_plugin_viewport.ViewportCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+
+declare function useViewportRef(): React.RefObject<HTMLDivElement>;
+
+export { Viewport, useViewport, useViewportCapability, useViewportRef };

package/dist/react/index.js

@@ -0,0 +1,96 @@
+// src/react/components/viewport.tsx
+import { useEffect, useState } from "react";
+
+// src/react/hooks/use-viewport.ts
+import { useCapability, usePlugin } from "@embedpdf/core/react";
+import { ViewportPlugin } from "@embedpdf/plugin-viewport";
+var useViewport = () => usePlugin(ViewportPlugin.id);
+var useViewportCapability = () => useCapability(ViewportPlugin.id);
+
+// src/react/hooks/use-viewport-ref.ts
+import { useLayoutEffect, useRef } from "react";
+function useViewportRef() {
+  const { provides: viewportProvides } = useViewportCapability();
+  const containerRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!viewportProvides) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const provideRect = () => {
+      const r = container.getBoundingClientRect();
+      return {
+        origin: { x: r.left, y: r.top },
+        size: { width: r.width, height: r.height }
+      };
+    };
+    viewportProvides.registerBoundingRectProvider(provideRect);
+    const onScroll = () => {
+      viewportProvides.setViewportScrollMetrics({
+        scrollTop: container.scrollTop,
+        scrollLeft: container.scrollLeft
+      });
+    };
+    container.addEventListener("scroll", onScroll);
+    const resizeObserver = new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect();
+      viewportProvides.setViewportMetrics({
+        width: container.offsetWidth,
+        height: container.offsetHeight,
+        clientWidth: container.clientWidth,
+        clientHeight: container.clientHeight,
+        scrollTop: container.scrollTop,
+        scrollLeft: container.scrollLeft,
+        scrollWidth: container.scrollWidth,
+        scrollHeight: container.scrollHeight
+      });
+    });
+    resizeObserver.observe(container);
+    const unsubscribeScrollRequest = viewportProvides.onScrollRequest(
+      ({ x, y, behavior = "auto" }) => {
+        requestAnimationFrame(() => {
+          container.scrollTo({ left: x, top: y, behavior });
+        });
+      }
+    );
+    return () => {
+      viewportProvides.registerBoundingRectProvider(null);
+      container.removeEventListener("scroll", onScroll);
+      resizeObserver.disconnect();
+      unsubscribeScrollRequest();
+    };
+  }, [viewportProvides]);
+  return containerRef;
+}
+
+// src/react/components/viewport.tsx
+import { jsx } from "react/jsx-runtime";
+function Viewport({ children, ...props }) {
+  const [viewportGap, setViewportGap] = useState(0);
+  const viewportRef = useViewportRef();
+  const { provides: viewportProvides } = useViewportCapability();
+  useEffect(() => {
+    if (viewportProvides) {
+      setViewportGap(viewportProvides.getViewportGap());
+    }
+  }, [viewportProvides]);
+  const { style, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      ref: viewportRef,
+      style: {
+        ...typeof style === "object" ? style : {},
+        padding: `${viewportGap}px`
+      },
+      children
+    }
+  );
+}
+export {
+  Viewport,
+  useViewport,
+  useViewportCapability,
+  useViewportRef
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/components/viewport.tsx","../../src/react/hooks/use-viewport.ts","../../src/react/hooks/use-viewport-ref.ts"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from 'react';\n\nimport { useViewportCapability } from '../hooks';\nimport { useViewportRef } from '../hooks/use-viewport-ref';\n\ntype ViewportProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nexport function Viewport({ children, ...props }: ViewportProps) {\n  const [viewportGap, setViewportGap] = useState(0);\n  const viewportRef = useViewportRef();\n  const { provides: viewportProvides } = useViewportCapability();\n\n  useEffect(() => {\n    if (viewportProvides) {\n      setViewportGap(viewportProvides.getViewportGap());\n    }\n  }, [viewportProvides]);\n\n  const { style, ...restProps } = props;\n  return (\n    <div\n      {...restProps}\n      ref={viewportRef}\n      style={{\n        ...(typeof style === 'object' ? style : {}),\n        padding: `${viewportGap}px`,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nexport const useViewport = () => usePlugin<ViewportPlugin>(ViewportPlugin.id);\nexport const useViewportCapability = () => useCapability<ViewportPlugin>(ViewportPlugin.id);\n","import { useLayoutEffect, useRef } from 'react';\n\nimport { useViewportCapability } from './use-viewport';\nimport { Rect } from '@embedpdf/models';\n\nexport function useViewportRef() {\n  const { provides: viewportProvides } = useViewportCapability();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    if (!viewportProvides) return;\n\n    const container = containerRef.current;\n    if (!container) return;\n\n    /* ---------- live rect provider --------------------------------- */\n    const provideRect = (): Rect => {\n      const r = container.getBoundingClientRect();\n      return {\n        origin: { x: r.left, y: r.top },\n        size: { width: r.width, height: r.height },\n      };\n    };\n    viewportProvides.registerBoundingRectProvider(provideRect);\n\n    // Example: On scroll, call setMetrics\n    const onScroll = () => {\n      viewportProvides.setViewportScrollMetrics({\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n      });\n    };\n    container.addEventListener('scroll', onScroll);\n\n    // Example: On resize, call setMetrics\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect();\n\n      viewportProvides.setViewportMetrics({\n        width: container.offsetWidth,\n        height: container.offsetHeight,\n        clientWidth: container.clientWidth,\n        clientHeight: container.clientHeight,\n        scrollTop: container.scrollTop,\n        scrollLeft: container.scrollLeft,\n        scrollWidth: container.scrollWidth,\n        scrollHeight: container.scrollHeight,\n      });\n    });\n    resizeObserver.observe(container);\n\n    const unsubscribeScrollRequest = viewportProvides.onScrollRequest(\n      ({ x, y, behavior = 'auto' }) => {\n        requestAnimationFrame(() => {\n          container.scrollTo({ left: x, top: y, behavior });\n        });\n      },\n    );\n\n    // Cleanup\n    return () => {\n      viewportProvides.registerBoundingRectProvider(null);\n      container.removeEventListener('scroll', onScroll);\n      resizeObserver.disconnect();\n      unsubscribeScrollRequest();\n    };\n  }, [viewportProvides]);\n\n  // Return the ref so your React code can attach it to a div\n  return containerRef;\n}\n"],"mappings":";AAAA,SAA2B,WAAW,gBAAgB;;;ACAtD,SAAS,eAAe,iBAAiB;AACzC,SAAS,sBAAsB;AAExB,IAAM,cAAc,MAAM,UAA0B,eAAe,EAAE;AACrE,IAAM,wBAAwB,MAAM,cAA8B,eAAe,EAAE;;;ACJ1F,SAAS,iBAAiB,cAAc;AAKjC,SAAS,iBAAiB;AAC/B,QAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AAC7D,QAAM,eAAe,OAAuB,IAAI;AAEhD,kBAAgB,MAAM;AACpB,QAAI,CAAC,iBAAkB;AAEvB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAGhB,UAAM,cAAc,MAAY;AAC9B,YAAM,IAAI,UAAU,sBAAsB;AAC1C,aAAO;AAAA,QACL,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,IAAI;AAAA,QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,MAC3C;AAAA,IACF;AACA,qBAAiB,6BAA6B,WAAW;AAGzD,UAAM,WAAW,MAAM;AACrB,uBAAiB,yBAAyB;AAAA,QACxC,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AACA,cAAU,iBAAiB,UAAU,QAAQ;AAG7C,UAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,YAAM,OAAO,UAAU,sBAAsB;AAE7C,uBAAiB,mBAAmB;AAAA,QAClC,OAAO,UAAU;AAAA,QACjB,QAAQ,UAAU;AAAA,QAClB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,QACxB,WAAW,UAAU;AAAA,QACrB,YAAY,UAAU;AAAA,QACtB,aAAa,UAAU;AAAA,QACvB,cAAc,UAAU;AAAA,MAC1B,CAAC;AAAA,IACH,CAAC;AACD,mBAAe,QAAQ,SAAS;AAEhC,UAAM,2BAA2B,iBAAiB;AAAA,MAChD,CAAC,EAAE,GAAG,GAAG,WAAW,OAAO,MAAM;AAC/B,8BAAsB,MAAM;AAC1B,oBAAU,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;AAAA,QAClD,CAAC;AAAA,MACH;AAAA,IACF;AAGA,WAAO,MAAM;AACX,uBAAiB,6BAA6B,IAAI;AAClD,gBAAU,oBAAoB,UAAU,QAAQ;AAChD,qBAAe,WAAW;AAC1B,+BAAyB;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAGrB,SAAO;AACT;;;AFhDI;AAbG,SAAS,SAAS,EAAE,UAAU,GAAG,MAAM,GAAkB;AAC9D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,UAAU,iBAAiB,IAAI,sBAAsB;AAE7D,YAAU,MAAM;AACd,QAAI,kBAAkB;AACpB,qBAAe,iBAAiB,eAAe,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,EAAE,OAAO,GAAG,UAAU,IAAI;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,GAAI,OAAO,UAAU,WAAW,QAAQ,CAAC;AAAA,QACzC,SAAS,GAAG,WAAW;AAAA,MACzB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@embedpdf/plugin-viewport",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./preact": {
+      "types": "./dist/preact/index.d.ts",
+      "import": "./dist/preact/index.js",
+      "require": "./dist/preact/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@embedpdf/models": "1.0.0",
+    "@embedpdf/core": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "preact": "^10.26.4",
+    "@embedpdf/core": "1.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/embedpdf/embed-pdf-viewer",
+    "directory": "packages/plugin-viewport"
+  },
+  "homepage": "https://www.embedpdf.com/docs",
+  "bugs": {
+    "url": "https://github.com/embedpdf/embed-pdf-viewer/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "PROJECT_CWD=$(pwd) pnpm -w p:build",
+    "build:watch": "PROJECT_CWD=$(pwd) pnpm -w p:build:watch",
+    "clean": "PROJECT_CWD=$(pwd) pnpm -w p:clean",
+    "lint": "PROJECT_CWD=$(pwd) pnpm -w p:lint",
+    "lint:fix": "PROJECT_CWD=$(pwd) pnpm -w p:lint:fix",
+    "typecheck": "PROJECT_CWD=$(pwd) pnpm -w p:typecheck"
+  }
+}