Update deps (#15)

* Update deps

* Use node v20

* Add author and other meta in package.json

* Format code

* Bump versions

.nvmrc

@@ -1 +1 @@
-18
+20

README.md

@@ -3,6 +3,7 @@
 ![readme-header](https://pdfslick.dev/pdfslick_logo.svg)
 
 <br><br>
+
 <div align="center">
 View and Interact with PDF documents in React and SolidJS apps
 <br><br>
@@ -11,16 +12,19 @@ View and Interact with PDF documents in React and SolidJS apps
 [![GitHub release](https://img.shields.io/github/release/pdfslick/pdfslick.svg)](https://github.com/pdfslick/pdfslick/)
 [![npm version](https://img.shields.io/npm/v/@pdfslick/core.svg)](https://www.npmjs.com/package/@pdfslick/core)
 [![npm](https://img.shields.io/npm/dt/@pdfslick/core.svg)](https://www.npmjs.com/package/@pdfslick/core)
+
 <!-- [![npm](https://img.shields.io/npm/dt/@pdfslick/react.svg)](https://www.npmjs.com/package/@pdfslick/react)
 [![npm](https://img.shields.io/npm/dt/@pdfslick/solid.svg)](https://www.npmjs.com/package/@pdfslick/solid) -->
 
 <br>
 
 [Getting Started](https://pdfslick.dev/docs) | [Examples](https://pdfslick.dev/examples)
 <br><br>
+
 </div>
 
 ---
+
 <br>
 
 PDFSlick is a library which enables viewing of and interaction with PDF documents in React and SolidJS apps.
@@ -29,13 +33,15 @@ It's build on top of Mozilla's [PDF.js](https://github.com/mozilla/pdf.js), and
 ## PDFSlick for React
 
 To get started with React run:
+
 ```shell
 npm install @pdfslick/react
 # yarn add @pdfslick/react
 # pnpm add @pdfslick/react
 ```
 
 You can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:
+
 ```jsx
 import { usePDFSlick } from "@pdfslick/react";
 import PDFNavigation from "./yourcomponents/PDFNavigation";
@@ -47,13 +53,16 @@ import PDFNavigation from "./yourcomponents/PDFNavigation";
 import "@pdfslick/react/dist/pdf_viewer.css";
 
 type PDFViewerComponentProps = {
-  pdfFilePath: string;
+  pdfFilePath: string,
 };
 
 const PDFViewerComponent = ({ pdfFilePath }: PDFViewerComponent) => {
-  const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(pdfFilePath, {
-    scaleValue: "page-fit"
-  });
+  const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(
+    pdfFilePath,
+    {
+      scaleValue: "page-fit",
+    }
+  );
 
   /*
    Access the store with `usePDFSlickStore()` hook — you can pass is
@@ -93,6 +102,7 @@ export default PDFViewerComponent;
 ```
 
 Provided with the PDF Document path and PDFSlick options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
+
 - `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document
 - `viewerRef` is the `ref` callback that is provided as a prop to the `<PDFSlickViewer />` component
 - `usePDFSlickStore` enables using PDFSlick store within your React components
@@ -106,13 +116,15 @@ Provided with the PDF Document path and PDFSlick options object, the `usePDFSlic
 ## PDFSlick for SolidJS
 
 To get started with PDFSlick for SolidJS run:
+
 ```shell
 npm install @pdfslick/solid
 # yarn add @pdfslick/solid
 # pnpm add @pdfslick/solid
 ```
 
 You can start using PDFSlick with the `usePDFSlick()` hook, like with the following basic example:
+
 ```jsx
 import { Component, createSignal } from "solid-js";
 import { usePDFSlick } from "@pdfslick/solid";
@@ -125,12 +137,17 @@ import PDFNavigation from "./yourcomponents/PDFNavigation";
 import "@pdfslick/solid/dist/pdf_viewer.css";
 
 type PDFViewerComponentProps = {
-  pdfFilePath: string;
+  pdfFilePath: string,
 };
 
-const PDFViewerComponent: Component<PDFViewerComponentProps> = ({ pdfFilePath }) => {
-  const { viewerRef, pdfSlickStore: store, PDFSlickViewer } =
-    usePDFSlick(pdfFilePath);
+const PDFViewerComponent: Component<PDFViewerComponentProps> = ({
+  pdfFilePath,
+}) => {
+  const {
+    viewerRef,
+    pdfSlickStore: store,
+    PDFSlickViewer,
+  } = usePDFSlick(pdfFilePath);
 
   return (
     <div class="absolute inset-0 flex flex-col pdfSlick">
@@ -162,6 +179,7 @@ export default PDFViewerComponent;
 ```
 
 Provided with the PDF Document path and options object, the `usePDFSlick()` hook returns an object consisting (among the other things) of:
+
 - `PDFSlickViewer` is the PDF Viewer component used for viewing the PDF document
 - `viewerRef` is the `ref` callback that is provided as a prop to the `<PDFSlickViewer />` component
 - `pdfSlickStore` is the PDFSlick store
@@ -182,11 +200,11 @@ The core of PDFSlick is within the `@pdfslick/core` package. It wraps `PDF.js`'s
 
 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.
 
-
 <br>
 
 [Learn more about PDFSlick](https://pdfslick.dev) | [Checkout the Examples](https://pdfslick.dev/examples)
 
 ## Thanks
+
 - [Vane Kosturanov](https://kosturanov.com/portfolio/logo-branding-design) for designing the logo
 - [VS Code Icons](https://github.com/microsoft/vscode-codicons) for the icons used throughout the examples

apps/solidweb/package.json

@@ -14,22 +14,22 @@
     "@kobalte/tailwindcss": "^0.8.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.6",
-    "@types/d3-drag": "^3.0.3",
-    "@types/d3-selection": "^3.0.6",
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.28",
+    "@types/d3-drag": "^3.0.4",
+    "@types/d3-selection": "^3.0.7",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^4.4.11",
     "vite-plugin-solid": "^2.7.0"
   },
   "dependencies": {
     "@kobalte/core": "^0.11.0",
     "@pdfslick/solid": "*",
-    "@solid-primitives/resize-observer": "^2.0.21",
+    "@solid-primitives/resize-observer": "^2.0.22",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "solid-icons": "^1.0.11",
-    "solid-js": "^1.7.11"
+    "solid-icons": "^1.0.12",
+    "solid-js": "^1.7.12"
   }
 }

apps/solidweb/src/examples/PDFViewerApp/Toolbar/DocumentInfoModal.tsx

@@ -22,8 +22,11 @@ export default function DocumentInfoModal(props: DocumentInfoModalProps) {
   let wrapperRef!: HTMLDivElement;
 
   const handleClick = (event: MouseEvent) => {
-    if (wrapperRef.contains(event.target as HTMLElement) && !ref.contains(event.target as HTMLElement)) {
-      props.closeModal()
+    if (
+      wrapperRef.contains(event.target as HTMLElement) &&
+      !ref.contains(event.target as HTMLElement)
+    ) {
+      props.closeModal();
     }
   };
 

apps/solidweb/src/examples/PDFViewerApp/Toolbar/ZoomSelector.tsx

@@ -65,7 +65,9 @@ const ZoomSelector = ({ store }: TZoomSelectorProps) => {
           <span class="sr-only">Open zoom options</span>
           <div class="flex px-1 w-full">
             <span
-              class={`flex-1 px-1 ${store.pdfSlick ? "opacity-100" : "opacity-0"}`}
+              class={`flex-1 px-1 ${
+                store.pdfSlick ? "opacity-100" : "opacity-0"
+              }`}
             >
               {store.scaleValue && presets.has(store.scaleValue)
                 ? presets.get(store.scaleValue)

apps/solidweb/src/examples/PDFViewerApp/Toolbar/index.tsx

@@ -1,4 +1,10 @@
-import { createEffect, createSignal, type Accessor, type JSX, onCleanup } from "solid-js";
+import {
+  createEffect,
+  createSignal,
+  type Accessor,
+  type JSX,
+  onCleanup,
+} from "solid-js";
 import {
   VsChevronDown,
   VsChevronUp,
@@ -35,7 +41,10 @@ const Toolbar = ({
     1
   );
 
-  const handleOpenPdfFile: JSX.ChangeEventHandlerUnion<HTMLInputElement, Event> = (e) => {
+  const handleOpenPdfFile: JSX.ChangeEventHandlerUnion<
+    HTMLInputElement,
+    Event
+  > = (e) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
       const url = URL.createObjectURL(file);