@pdfslick/solid 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PDFSlickThumbnails.d.ts +22 -0
- package/dist/PDFSlickThumbnails.d.ts.map +1 -0
- package/dist/PDFSlickViewer.d.ts +9 -0
- package/dist/PDFSlickViewer.d.ts.map +1 -0
- package/dist/README.md +119 -0
- package/dist/esm/index.js +145 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/pdf_viewer.css +2762 -0
- package/dist/rollup.config.d.mts +3 -0
- package/dist/rollup.config.d.mts.map +1 -0
- package/dist/source/PDFSlickThumbnails.jsx +35 -0
- package/dist/source/PDFSlickViewer.jsx +27 -0
- package/dist/source/index.jsx +3 -0
- package/dist/source/usePDFSlick.jsx +62 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/PDFSlickThumbnails.d.ts +20 -0
- package/dist/types/PDFSlickViewer.d.ts +7 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/usePDFSlick.d.ts +16 -0
- package/dist/usePDFSlick.d.ts +19 -0
- package/dist/usePDFSlick.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { JSXElement } from "solid-js";
|
|
3
|
+
import type { PDFSlickState } from "@pdfslick/solid";
|
|
4
|
+
export type PDFSlickThumbProps = {
|
|
5
|
+
pageNumber: number;
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
scale: number;
|
|
9
|
+
rotation: number;
|
|
10
|
+
loaded: boolean;
|
|
11
|
+
pageLabel: string | null;
|
|
12
|
+
src: string | null;
|
|
13
|
+
};
|
|
14
|
+
export type PDFSlickThumbnailsContainerProps = {
|
|
15
|
+
children: ({ pageNumber, src, width, height, scale, rotation, pageLabel, loaded, }: PDFSlickThumbProps) => JSXElement;
|
|
16
|
+
thumbsRef: (instance: HTMLElement) => void;
|
|
17
|
+
store: PDFSlickState;
|
|
18
|
+
class?: string;
|
|
19
|
+
classList?: Record<string, boolean>;
|
|
20
|
+
};
|
|
21
|
+
export declare function PDFSlickThumbnails(props: PDFSlickThumbnailsContainerProps): any;
|
|
22
|
+
//# sourceMappingURL=PDFSlickThumbnails.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PDFSlickThumbnails.d.ts","sourceRoot":"","sources":["../PDFSlickThumbnails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmC,MAAM,UAAU,CAAC;AAGvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,QAAQ,EAAE,CAAC,EACT,UAAU,EACV,GAAG,EACH,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,GACP,EAAE,kBAAkB,KAAK,UAAU,CAAC;IACrC,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACpC,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gCAAgC,OA0CzE"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { PDFSlickState } from "@pdfslick/core";
|
|
3
|
+
export type PDFSlickViewerProps = {
|
|
4
|
+
viewerRef: (instance: HTMLElement) => void;
|
|
5
|
+
store: PDFSlickState;
|
|
6
|
+
class?: string;
|
|
7
|
+
};
|
|
8
|
+
export default function PDFSlickViewer(props: PDFSlickViewerProps): any;
|
|
9
|
+
//# sourceMappingURL=PDFSlickViewer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PDFSlickViewer.d.ts","sourceRoot":"","sources":["../PDFSlickViewer.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,CAAC,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,OAkChE"}
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<br><br>
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+
|
|
5
|
+
<br><br>
|
|
6
|
+
<div align="center">
|
|
7
|
+
View and Interact with PDFs in React and SolidJS apps
|
|
8
|
+
<br><br>
|
|
9
|
+
|
|
10
|
+
[Getting Started](https://pdfslick.dev/docs) | [Examples](https://pdfslick.dev/examples)
|
|
11
|
+
|
|
12
|
+
<br><br>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
<br>
|
|
17
|
+
|
|
18
|
+
PDFSlick is a library that enables viewing of and interaction with PDF documents in React and SolidJS apps.
|
|
19
|
+
It's build on top of Mozilla's [PDF.js](https://github.com/mozilla/pdf.js), and utilises [Zustand](https://github.com/pmndrs/zustand) to provide a reactive store for the loaded documents.
|
|
20
|
+
|
|
21
|
+
## Motivation
|
|
22
|
+
|
|
23
|
+
[PDF.js](https://github.com/mozilla/pdf.js) is an amazing piece of software. It is also a very stable and mature one — it powers the PDF viewer in Mozilla Firefox and it's been around since 2011. However, it's all Vanilla JavaScript, and when it comes to using it with libraries like React and SolidJS (although possible) it's a litte bit hard in terms of integrating it in these Component- and reactive-like environments. PDFSlick attempts to wrap all of that fascinating functionality into one that is easier to fit in React and SolidJS worlds — as components and a reactive store.
|
|
24
|
+
|
|
25
|
+
## Core Concepts
|
|
26
|
+
|
|
27
|
+
The core of PDFSlick is within the `@pdfslick/core` package. It wraps `PDF.js`'s functionality and links it to the store. This `@pdfslick/core` package is the basis for the React and SolidJS packages, which additionally transform the store and make it suitable for the adequate library, as well as providing components for the PDF viewer and thumbnails.
|
|
28
|
+
|
|
29
|
+
Depending on your needs, at this you might find it useful to continue with learning more about using PDFSlick with React and SolidJS respsectivelly. However, if really interested you can learn more about using PDFSlick's `@pdfslick/core` package with Vanilla JS apps and with libraries other than React and SolidJS in the sections below.
|
|
30
|
+
|
|
31
|
+
## Getting Started with React
|
|
32
|
+
|
|
33
|
+
To get started with React run:
|
|
34
|
+
```shell
|
|
35
|
+
npm install @pdfslick/react
|
|
36
|
+
# yarn add @pdfslick/react
|
|
37
|
+
# pnpm add @pdfslick/react
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
You can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:
|
|
41
|
+
```jsx
|
|
42
|
+
import { usePDFSlick } from "@pdfslick/react";
|
|
43
|
+
import PDFNavigation from "./PDFNavigation";
|
|
44
|
+
|
|
45
|
+
import "@pdfslick/react/dist/pdf_viewer.css";
|
|
46
|
+
|
|
47
|
+
type PDFViewerAppProps = {
|
|
48
|
+
pdfFilePath: string;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const SimplePDFViewer = ({ pdfFilePath }: PDFViewerAppProps) => {
|
|
52
|
+
const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(pdfFilePath, {
|
|
53
|
+
singlePageViewer: true,
|
|
54
|
+
scaleValue: "page-fit"
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<div className="absolute inset-0 bg-slate-200/70 pdfSlick">
|
|
59
|
+
<div className="flex-1 relative h-full">
|
|
60
|
+
<PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />
|
|
61
|
+
<PDFNavigation {...{ usePDFSlickStore }} />
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export default SimplePDFViewer;
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Provided with the PDF Document path and options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
|
|
71
|
+
- `PDFSlickViewer` — the PDF Viewer component used for viewing the PDF document
|
|
72
|
+
- `viewerRef` — a `RefCallback` that is provided as a prop to the `<PDFSlickViewer />` component
|
|
73
|
+
- `usePDFSlickStore` — a hook to the PDFSlick store
|
|
74
|
+
|
|
75
|
+
<br><br>
|
|
76
|
+
[Read more about using PDFSlick with React](https://pdfslick.dev/docs/react) | [Checkout the React Examples](./apps/web/examples)
|
|
77
|
+
|
|
78
|
+
## SolidJS
|
|
79
|
+
|
|
80
|
+
To get started with PDFSlick for SolidJS React run:
|
|
81
|
+
```shell
|
|
82
|
+
npm install @pdfslick/solid
|
|
83
|
+
# yarn add @pdfslick/solid
|
|
84
|
+
# pnpm add @pdfslick/solid
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
You can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:
|
|
88
|
+
```jsx
|
|
89
|
+
import { Component, createSignal } from "solid-js";
|
|
90
|
+
import { usePDFSlick } from "@pdfslick/solid";
|
|
91
|
+
|
|
92
|
+
type PDFViewerAppProps = {
|
|
93
|
+
pdfFilePath: string;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const PDFViewerApp: Component<PDFViewerAppProps> = ({ pdfFilePath }) => {
|
|
97
|
+
const { viewerRef, pdfSlickStore: store, PDFSlickViewer } =
|
|
98
|
+
usePDFSlick(pdfFilePath);
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<div class="absolute inset-0 bg-slate-200/70 flex flex-col pdfSlick">
|
|
102
|
+
<div class="flex-1 relative h-full">
|
|
103
|
+
<PDFSlickViewer {...{ store, viewerRef }} />
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export default PDFViewerApp;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Provided with the PDF Document path and options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
|
|
113
|
+
- `PDFSlickViewer` — the PDF Viewer component used for viewing the PDF document
|
|
114
|
+
- `viewerRef` — a `RefCallback` that is provided as a prop to the `<PDFSlickViewer />` component
|
|
115
|
+
- `pdfSlickStore` — the PDFSlick store
|
|
116
|
+
|
|
117
|
+
<br><br>
|
|
118
|
+
[Read more about using PDFSlick with SolidJS](https://pdfslick.dev/docs/solid) | [Checkout the SolidJS Examples](./apps/solidweb/src/examples)
|
|
119
|
+
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { createStore, reconcile } from 'solid-js/store';
|
|
2
|
+
import { createSignal, createEffect, For, onCleanup } from 'solid-js';
|
|
3
|
+
import { create, PDFSlick } from '@pdfslick/core';
|
|
4
|
+
export * from '@pdfslick/core';
|
|
5
|
+
import { use, effect, className, template, insert, createComponent, Portal, classList } from 'solid-js/web';
|
|
6
|
+
import { createElementSize } from '@solid-primitives/resize-observer';
|
|
7
|
+
|
|
8
|
+
const _tmpl$$1 = /*#__PURE__*/template(`<div id="viewerContainer"><div id="viewer" class="pdfSlickViewer pdfViewer">`);
|
|
9
|
+
function PDFSlickViewer(props) {
|
|
10
|
+
const [resizeRef, setResizeRef] = createSignal();
|
|
11
|
+
const size = createElementSize(resizeRef);
|
|
12
|
+
createEffect(() => {
|
|
13
|
+
if (size.width && size.height) {
|
|
14
|
+
if (props.store.pdfSlick && (props.store.scaleValue === "auto" || props.store.scaleValue === "page-fit" || props.store.scaleValue === "page-width")) {
|
|
15
|
+
props.store.pdfSlick.viewer.currentScaleValue = props.store.scaleValue;
|
|
16
|
+
}
|
|
17
|
+
props.store.pdfSlick?.viewer.update();
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
return (() => {
|
|
21
|
+
const _el$ = _tmpl$$1();
|
|
22
|
+
use(el => {
|
|
23
|
+
props.viewerRef(el);
|
|
24
|
+
setResizeRef(el);
|
|
25
|
+
}, _el$);
|
|
26
|
+
_el$.style.setProperty("position", "absolute");
|
|
27
|
+
_el$.style.setProperty("inset", "0");
|
|
28
|
+
effect(() => className(_el$, `pdfSlickContainer ${props.class ?? ""}`));
|
|
29
|
+
return _el$;
|
|
30
|
+
})();
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
const _tmpl$ = /*#__PURE__*/template(`<div>`);
|
|
34
|
+
function PDFSlickThumbnails(props) {
|
|
35
|
+
const [resizeRef, setResizeRef] = createSignal();
|
|
36
|
+
const size = createElementSize(resizeRef);
|
|
37
|
+
createEffect(() => {
|
|
38
|
+
if (size.width && size.height) {
|
|
39
|
+
props.store.pdfSlick?.forceRendering();
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return (() => {
|
|
43
|
+
const _el$ = _tmpl$();
|
|
44
|
+
use(el => {
|
|
45
|
+
props.thumbsRef(el);
|
|
46
|
+
setResizeRef(el);
|
|
47
|
+
}, _el$);
|
|
48
|
+
_el$.style.setProperty("position", "absolute");
|
|
49
|
+
_el$.style.setProperty("overflow", "auto");
|
|
50
|
+
_el$.style.setProperty("inset", "0");
|
|
51
|
+
insert(_el$, createComponent(For, {
|
|
52
|
+
get each() {
|
|
53
|
+
return Array.from(props.store.thumbnailViews);
|
|
54
|
+
},
|
|
55
|
+
children: ([pageNumber, view]) => createComponent(Portal, {
|
|
56
|
+
get mount() {
|
|
57
|
+
return view.div;
|
|
58
|
+
},
|
|
59
|
+
get children() {
|
|
60
|
+
return props.children({
|
|
61
|
+
pageNumber,
|
|
62
|
+
width: view.canvasWidth,
|
|
63
|
+
height: view.canvasHeight,
|
|
64
|
+
scale: view.scale,
|
|
65
|
+
src: view?.src ?? null,
|
|
66
|
+
rotation: view.rotation,
|
|
67
|
+
pageLabel: view.pageLabel,
|
|
68
|
+
loaded: view.loaded
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
})
|
|
72
|
+
}));
|
|
73
|
+
effect(_p$ => {
|
|
74
|
+
const _v$ = props.class ?? "",
|
|
75
|
+
_v$2 = props.classList ?? {};
|
|
76
|
+
_v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
|
|
77
|
+
_p$._v$2 = classList(_el$, _v$2, _p$._v$2);
|
|
78
|
+
return _p$;
|
|
79
|
+
}, {
|
|
80
|
+
_v$: undefined,
|
|
81
|
+
_v$2: undefined
|
|
82
|
+
});
|
|
83
|
+
return _el$;
|
|
84
|
+
})();
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function useStore(api, selector = api.getState, equalityFn) {
|
|
88
|
+
const initialValue = selector(api.getState());
|
|
89
|
+
const [state, setState] = createStore(initialValue);
|
|
90
|
+
const listener = (nextState, previousState) => {
|
|
91
|
+
const prevStateSlice = selector(previousState);
|
|
92
|
+
const nextStateSlice = selector(nextState);
|
|
93
|
+
if (equalityFn !== undefined) {
|
|
94
|
+
if (!equalityFn(prevStateSlice, nextStateSlice)) setState(reconcile(nextStateSlice));
|
|
95
|
+
} else {
|
|
96
|
+
setState(reconcile(nextStateSlice));
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const unsubscribe = api.subscribe(listener);
|
|
100
|
+
onCleanup(() => unsubscribe());
|
|
101
|
+
return state;
|
|
102
|
+
}
|
|
103
|
+
const usePDFSlick = (url, options) => {
|
|
104
|
+
const [isDocumentLoaded, setIsDocumentLoaded] = createSignal(false);
|
|
105
|
+
const [areContainersMounted, setContainersMounted] = createSignal(false);
|
|
106
|
+
const [container, setContainer] = createSignal(null);
|
|
107
|
+
const [thumbs, setThumbs] = createSignal(null);
|
|
108
|
+
const [pdfSlick, setPdfSlick] = createSignal(null);
|
|
109
|
+
const zustandStore = create();
|
|
110
|
+
const pdfSlickStore = useStore(zustandStore);
|
|
111
|
+
const viewerRef = node => {
|
|
112
|
+
setContainer(node);
|
|
113
|
+
setContainersMounted(true);
|
|
114
|
+
};
|
|
115
|
+
const thumbsRef = node => {
|
|
116
|
+
setThumbs(node);
|
|
117
|
+
};
|
|
118
|
+
createEffect(() => {
|
|
119
|
+
if (url && areContainersMounted()) {
|
|
120
|
+
const pdfSlick = new PDFSlick({
|
|
121
|
+
container: container(),
|
|
122
|
+
thumbs: thumbs(),
|
|
123
|
+
store: zustandStore,
|
|
124
|
+
options
|
|
125
|
+
});
|
|
126
|
+
setPdfSlick(pdfSlick);
|
|
127
|
+
zustandStore.setState({
|
|
128
|
+
pdfSlick
|
|
129
|
+
});
|
|
130
|
+
pdfSlick.loadDocument(url, options).then(() => setIsDocumentLoaded(true));
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
return {
|
|
134
|
+
isDocumentLoaded,
|
|
135
|
+
viewerRef,
|
|
136
|
+
thumbsRef,
|
|
137
|
+
pdfSlick,
|
|
138
|
+
pdfSlickStore,
|
|
139
|
+
PDFSlickViewer,
|
|
140
|
+
PDFSlickThumbnails
|
|
141
|
+
};
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export { PDFSlickThumbnails, usePDFSlick };
|
|
145
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../PDFSlickViewer.tsx","../../PDFSlickThumbnails.tsx","../../usePDFSlick.tsx"],"sourcesContent":["/** @jsxImportSource solid-js */\nimport { createEffect, createSignal } from \"solid-js\";\nimport { createElementSize } from \"@solid-primitives/resize-observer\";\nimport type { PDFSlickState } from \"@pdfslick/core\";\n\nexport type PDFSlickViewerProps = {\n viewerRef: (instance: HTMLElement) => void;\n store: PDFSlickState;\n class?: string;\n};\n\nexport default function PDFSlickViewer(props: PDFSlickViewerProps) {\n const [resizeRef, setResizeRef] = createSignal<HTMLElement>();\n\n const size = createElementSize(resizeRef);\n createEffect(() => {\n if (size.width && size.height) {\n if (\n props.store.pdfSlick &&\n (props.store.scaleValue === \"auto\" ||\n props.store.scaleValue === \"page-fit\" ||\n props.store.scaleValue === \"page-width\")\n ) {\n props.store.pdfSlick.viewer.currentScaleValue = props.store.scaleValue;\n }\n props.store.pdfSlick?.viewer.update();\n }\n });\n\n return (\n <div\n ref={(el) => {\n props.viewerRef(el);\n setResizeRef(el);\n }}\n id=\"viewerContainer\"\n class={`pdfSlickContainer ${props.class ?? \"\"}`}\n style={{\n position: \"absolute\",\n inset: 0,\n }}\n >\n <div id=\"viewer\" class=\"pdfSlickViewer pdfViewer\" />\n </div>\n );\n}\n","import { JSXElement, For, createSignal, createEffect } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { createElementSize } from \"@solid-primitives/resize-observer\";\nimport type { PDFSlickState } from \"@pdfslick/solid\";\n\nexport type PDFSlickThumbProps = {\n pageNumber: number;\n width: number;\n height: number;\n scale: number;\n rotation: number;\n loaded: boolean;\n pageLabel: string | null;\n src: string | null;\n};\n\nexport type PDFSlickThumbnailsContainerProps = {\n children: ({\n pageNumber,\n src,\n width,\n height,\n scale,\n rotation,\n pageLabel,\n loaded,\n }: PDFSlickThumbProps) => JSXElement;\n thumbsRef: (instance: HTMLElement) => void;\n store: PDFSlickState;\n class?: string;\n classList?: Record<string, boolean>\n};\n\nexport function PDFSlickThumbnails(props: PDFSlickThumbnailsContainerProps) {\n const [resizeRef, setResizeRef] = createSignal<HTMLElement>();\n const size = createElementSize(resizeRef);\n\n createEffect(() => {\n if (size.width && size.height) {\n props.store.pdfSlick?.forceRendering();\n }\n });\n\n return (\n <div\n ref={(el) => {\n props.thumbsRef(el);\n setResizeRef(el);\n }}\n class={props.class ?? \"\"}\n classList={props.classList ?? {}}\n style={{\n position: \"absolute\",\n overflow: \"auto\",\n inset: 0,\n }}\n >\n <For each={Array.from(props.store.thumbnailViews)}>\n {([pageNumber, view]) => (\n <Portal mount={view.div}>\n {props.children({\n pageNumber,\n width: view.canvasWidth,\n height: view.canvasHeight,\n scale: view.scale,\n src: view?.src ?? null,\n rotation: view.rotation,\n pageLabel: view.pageLabel,\n loaded: view.loaded,\n })}\n </Portal>\n )}\n </For>\n </div>\n );\n}\n","import { createStore, reconcile } from \"solid-js/store\";\nimport { createEffect, createSignal, type Accessor } from \"solid-js\";\nimport { onCleanup } from \"solid-js\";\nimport { create, PDFSlick } from \"@pdfslick/core\";\nimport type { PDFSlickOptions, PDFSlickState } from \"@pdfslick/core\";\nimport { StoreApi } from \"zustand\";\nimport PDFSlickViewer from \"./PDFSlickViewer\";\nimport { PDFSlickThumbnails } from \"./PDFSlickThumbnails\";\n\ntype TUsePDFSlick = (\n url: string | URL | undefined,\n options?: PDFSlickOptions\n) => {\n isDocumentLoaded: Accessor<boolean>;\n viewerRef: (node: HTMLElement) => void;\n thumbsRef: (node: HTMLElement) => void;\n pdfSlick: Accessor<PDFSlick | null>;\n pdfSlickStore: PDFSlickState;\n PDFSlickViewer: typeof PDFSlickViewer;\n PDFSlickThumbnails: typeof PDFSlickThumbnails;\n};\n\ntype ExtractState<S> = S extends { getState: () => infer T } ? T : never;\nfunction useStore<S extends StoreApi<unknown>>(api: S): ExtractState<S>;\nfunction useStore<S extends StoreApi<unknown>, U>(\n api: S,\n selector: (state: ExtractState<S>) => U,\n equalityFn?: (a: U, b: U) => boolean\n): U;\n\nfunction useStore<TState extends object, StateSlice>(\n api: StoreApi<TState>,\n selector: (state: TState) => StateSlice = api.getState as any,\n equalityFn?: (a: StateSlice, b: StateSlice) => boolean\n) {\n const initialValue = selector(api.getState()) as any;\n const [state, setState] = createStore(initialValue);\n\n const listener = (nextState: TState, previousState: TState) => {\n const prevStateSlice = selector(previousState);\n const nextStateSlice = selector(nextState);\n\n if (equalityFn !== undefined) {\n if (!equalityFn(prevStateSlice, nextStateSlice))\n setState(reconcile(nextStateSlice));\n } else {\n setState(reconcile(nextStateSlice));\n }\n };\n\n const unsubscribe = api.subscribe(listener);\n onCleanup(() => unsubscribe());\n return state;\n}\n\nexport const usePDFSlick: TUsePDFSlick = (url, options) => {\n const [isDocumentLoaded, setIsDocumentLoaded] = createSignal(false);\n const [areContainersMounted, setContainersMounted] = createSignal(false);\n const [container, setContainer] = createSignal<HTMLElement | null>(null);\n const [thumbs, setThumbs] = createSignal<HTMLElement | null>(null);\n\n const [pdfSlick, setPdfSlick] = createSignal<PDFSlick | null>(null);\n\n const zustandStore = create();\n const pdfSlickStore = useStore(zustandStore);\n\n const viewerRef = (node: HTMLDivElement) => {\n setContainer(node);\n setContainersMounted(true);\n };\n\n const thumbsRef = (node: HTMLDivElement) => {\n setThumbs(node);\n };\n\n createEffect(() => {\n if (url && areContainersMounted()) {\n const pdfSlick = new PDFSlick({\n container: container()!,\n thumbs: thumbs()!,\n store: zustandStore,\n options,\n });\n setPdfSlick(pdfSlick);\n zustandStore.setState({ pdfSlick })\n\n pdfSlick.loadDocument(url, options).then(() => setIsDocumentLoaded(true));\n }\n });\n\n return {\n isDocumentLoaded,\n viewerRef,\n thumbsRef,\n pdfSlick,\n pdfSlickStore,\n PDFSlickViewer,\n PDFSlickThumbnails\n };\n};\n"],"names":["PDFSlickViewer","props","resizeRef","setResizeRef","createSignal","size","createElementSize","createEffect","width","height","store","pdfSlick","scaleValue","viewer","currentScaleValue","update","_el$","_tmpl$","_$use","el","viewerRef","style","setProperty","_$effect","_$className","class","PDFSlickThumbnails","forceRendering","thumbsRef","_$insert","_$createComponent","For","each","Array","from","thumbnailViews","children","pageNumber","view","Portal","mount","div","canvasWidth","canvasHeight","scale","src","rotation","pageLabel","loaded","_p$","_v$","_v$2","classList","_$classList","undefined","useStore","api","selector","getState","equalityFn","initialValue","state","setState","createStore","listener","nextState","previousState","prevStateSlice","nextStateSlice","reconcile","unsubscribe","subscribe","onCleanup","usePDFSlick","url","options","isDocumentLoaded","setIsDocumentLoaded","areContainersMounted","setContainersMounted","container","setContainer","thumbs","setThumbs","setPdfSlick","zustandStore","create","pdfSlickStore","node","PDFSlick","loadDocument","then"],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA"}
|