Add native ESM support

wojtekmaj · Jul 27, 2023 · 03fd7e6 · 03fd7e6
1 parent 2859170
commit 03fd7e6
Show file tree

Hide file tree

Showing 49 changed files with 211 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -2,18 +2,30 @@
   "name": "react-pdf",
   "version": "7.2.0",
   "description": "Display PDFs in your React app as easily as if they were images.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "source": "src/index.ts",
-  "types": "dist/cjs/index.d.ts",
+  "type": "module",
   "sideEffects": [
     "*.css"
   ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./dist/cjs/Page/AnnotationLayer.css": "./dist/cjs/Page/AnnotationLayer.css",
+    "./dist/cjs/Page/TextLayer.css": "./dist/cjs/Page/TextLayer.css",
+    "./dist/esm/Page/AnnotationLayer.css": "./dist/esm/Page/AnnotationLayer.css",
+    "./dist/esm/Page/TextLayer.css": "./dist/esm/Page/TextLayer.css"
+  },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
-    "build-js": "yarn build-js-esm && yarn build-js-cjs",
+    "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
     "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+    "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist/esm && cpy 'src/**/*.css' dist/cjs",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -23,7 +35,7 @@
     "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
     "tsc": "tsc --noEmit",
     "unit": "vitest",
-    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
+    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""
   },
   "keywords": [
     "pdf",

diff --git a/src/Document.spec.tsx b/src/Document.spec.tsx
@@ -2,16 +2,16 @@ import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { fireEvent, getByTestId, render } from '@testing-library/react';
 
-import { pdfjs } from './index.test';
+import { pdfjs } from './index.test.js';
 
-import Document from './Document';
-import DocumentContext from './DocumentContext';
-import Page from './Page';
+import Document from './Document.js';
+import DocumentContext from './DocumentContext.js';
+import Page from './Page.js';
 
-import { makeAsyncCallback, loadPDF, muteConsole, restoreConsole } from '../test-utils';
+import { makeAsyncCallback, loadPDF, muteConsole, restoreConsole } from '../test-utils.js';
 
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import type { ScrollPageIntoViewArgs } from './shared/types';
+import type { ScrollPageIntoViewArgs } from './shared/types.js';
 
 const pdfFile = loadPDF('./__mocks__/_pdf.pdf');
 const pdfFile2 = loadPDF('./__mocks__/_pdf2.pdf');

diff --git a/src/Document.tsx b/src/Document.tsx
@@ -19,12 +19,12 @@ import invariant from 'tiny-invariant';
 import warning from 'tiny-warning';
 import * as pdfjs from 'pdfjs-dist';
 
-import DocumentContext from './DocumentContext';
+import DocumentContext from './DocumentContext.js';
 
-import Message from './Message';
+import Message from './Message.js';
 
-import LinkService from './LinkService';
-import PasswordResponses from './PasswordResponses';
+import LinkService from './LinkService.js';
+import PasswordResponses from './PasswordResponses.js';
 
 import {
   cancelRunningTask,
@@ -35,10 +35,10 @@ import {
   isBrowser,
   isDataURI,
   loadFromFile,
-} from './shared/utils';
+} from './shared/utils.js';
 
-import useResolver from './shared/hooks/useResolver';
-import { eventProps, isClassName, isFile, isRef } from './shared/propTypes';
+import useResolver from './shared/hooks/useResolver.js';
+import { eventProps, isClassName, isFile, isRef } from './shared/propTypes.js';
 
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 import type { EventProps } from 'make-event-props';
@@ -61,7 +61,7 @@ import type {
   RenderMode,
   ScrollPageIntoViewArgs,
   Source,
-} from './shared/types';
+} from './shared/types.js';
 
 const { PDFDataRangeTransport } = pdfjs;
 

diff --git a/src/DocumentContext.tsx b/src/DocumentContext.tsx
@@ -2,6 +2,6 @@
 
 import { createContext } from 'react';
 
-import type { DocumentContextType } from './shared/types';
+import type { DocumentContextType } from './shared/types.js';
 
 export default createContext<DocumentContextType>(null);
diff --git a/src/LinkService.ts b/src/LinkService.ts
@@ -21,9 +21,9 @@ import type {
   ExternalLinkRel,
   ExternalLinkTarget,
   ScrollPageIntoViewArgs,
-} from './shared/types';
+} from './shared/types.js';
 
-import type { IPDFLinkService } from 'pdfjs-dist/types/web/interfaces';
+import type { IPDFLinkService } from 'pdfjs-dist/types/web/interfaces.js';
 
 const DEFAULT_LINK_REL = 'noopener noreferrer nofollow';
 

diff --git a/src/Outline.spec.tsx b/src/Outline.spec.tsx
@@ -2,17 +2,17 @@ import { beforeAll, describe, expect, it } from 'vitest';
 import React, { createRef } from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { pdfjs } from './index.test';
+import { pdfjs } from './index.test.js';
 
-import Outline from './Outline';
+import Outline from './Outline.js';
 
-import failingPdf from '../__mocks__/_failing_pdf';
-import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../test-utils';
+import failingPdf from '../__mocks__/_failing_pdf.js';
+import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../test-utils.js';
 
-import DocumentContext from './DocumentContext';
+import DocumentContext from './DocumentContext.js';
 
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import type { DocumentContextType } from './shared/types';
+import type { DocumentContextType } from './shared/types.js';
 
 type PDFOutline = Awaited<ReturnType<PDFDocumentProxy['getOutline']>>;
 

diff --git a/src/Outline.tsx b/src/Outline.tsx
@@ -8,19 +8,19 @@ import clsx from 'clsx';
 import invariant from 'tiny-invariant';
 import warning from 'tiny-warning';
 
-import OutlineContext from './OutlineContext';
+import OutlineContext from './OutlineContext.js';
 
-import OutlineItem from './OutlineItem';
+import OutlineItem from './OutlineItem.js';
 
-import { cancelRunningTask } from './shared/utils';
+import { cancelRunningTask } from './shared/utils.js';
 
-import useDocumentContext from './shared/hooks/useDocumentContext';
-import useResolver from './shared/hooks/useResolver';
-import { eventProps, isClassName, isPdf, isRef } from './shared/propTypes';
+import useDocumentContext from './shared/hooks/useDocumentContext.js';
+import useResolver from './shared/hooks/useResolver.js';
+import { eventProps, isClassName, isPdf, isRef } from './shared/propTypes.js';
 
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 import type { EventProps } from 'make-event-props';
-import type { ClassName, OnItemClickArgs } from './shared/types';
+import type { ClassName, OnItemClickArgs } from './shared/types.js';
 
 type PDFOutline = Awaited<ReturnType<PDFDocumentProxy['getOutline']>>;
 

diff --git a/src/OutlineContext.tsx b/src/OutlineContext.tsx
@@ -2,6 +2,6 @@
 
 import { createContext } from 'react';
 
-import type { OutlineContextType } from './shared/types';
+import type { OutlineContextType } from './shared/types.js';
 
 export default createContext<OutlineContextType>(null);
diff --git a/src/OutlineItem.spec.tsx b/src/OutlineItem.spec.tsx
@@ -2,16 +2,16 @@ import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, getAllByRole, render, screen } from '@testing-library/react';
 
-import { pdfjs } from './index.test';
-import OutlineItem from './OutlineItem';
+import { pdfjs } from './index.test.js';
+import OutlineItem from './OutlineItem.js';
 
-import { loadPDF, makeAsyncCallback } from '../test-utils';
+import { loadPDF, makeAsyncCallback } from '../test-utils.js';
 
-import DocumentContext from './DocumentContext';
-import OutlineContext from './OutlineContext';
+import DocumentContext from './DocumentContext.js';
+import OutlineContext from './OutlineContext.js';
 
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import type { DocumentContextType, OutlineContextType } from './shared/types';
+import type { DocumentContextType, OutlineContextType } from './shared/types.js';
 
 const pdfFile = loadPDF('./__mocks__/_pdf.pdf');
 

diff --git a/src/OutlineItem.tsx b/src/OutlineItem.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import invariant from 'tiny-invariant';
 
-import Ref from './Ref';
+import Ref from './Ref.js';
 
-import useCachedValue from './shared/hooks/useCachedValue';
-import useDocumentContext from './shared/hooks/useDocumentContext';
-import useOutlineContext from './shared/hooks/useOutlineContext';
+import useCachedValue from './shared/hooks/useCachedValue.js';
+import useDocumentContext from './shared/hooks/useDocumentContext.js';
+import useOutlineContext from './shared/hooks/useOutlineContext.js';
 
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import type { RefProxy } from 'pdfjs-dist/types/src/display/api';
+import type { RefProxy } from 'pdfjs-dist/types/src/display/api.js';
 
 type PDFOutline = Awaited<ReturnType<PDFDocumentProxy['getOutline']>>;
 

diff --git a/src/Page.spec.tsx b/src/Page.spec.tsx
@@ -2,18 +2,18 @@ import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import { pdfjs } from './index.test';
+import { pdfjs } from './index.test.js';
 
-import Page from './Page';
+import Page from './Page.js';
 
-import failingPdf from '../__mocks__/_failing_pdf';
-import silentlyFailingPdf from '../__mocks__/_silently_failing_pdf';
-import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../test-utils';
+import failingPdf from '../__mocks__/_failing_pdf.js';
+import silentlyFailingPdf from '../__mocks__/_silently_failing_pdf.js';
+import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../test-utils.js';
 
-import DocumentContext from './DocumentContext';
+import DocumentContext from './DocumentContext.js';
 
 import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
-import type { DocumentContextType, PageCallback } from './shared/types';
+import type { DocumentContextType, PageCallback } from './shared/types.js';
 
 const pdfFile = loadPDF('./__mocks__/_pdf.pdf');
 const pdfFile2 = loadPDF('./__mocks__/_pdf2.pdf');

diff --git a/src/Page.tsx b/src/Page.tsx
@@ -9,18 +9,18 @@ import mergeRefs from 'merge-refs';
 import invariant from 'tiny-invariant';
 import warning from 'tiny-warning';
 
-import PageContext from './PageContext';
+import PageContext from './PageContext.js';
 
-import Message from './Message';
-import PageCanvas from './Page/PageCanvas';
-import PageSVG from './Page/PageSVG';
-import TextLayer from './Page/TextLayer';
-import AnnotationLayer from './Page/AnnotationLayer';
+import Message from './Message.js';
+import PageCanvas from './Page/PageCanvas.js';
+import PageSVG from './Page/PageSVG.js';
+import TextLayer from './Page/TextLayer.js';
+import AnnotationLayer from './Page/AnnotationLayer.js';
 
-import { cancelRunningTask, isProvided, makePageCallback } from './shared/utils';
+import { cancelRunningTask, isProvided, makePageCallback } from './shared/utils.js';
 
-import useDocumentContext from './shared/hooks/useDocumentContext';
-import useResolver from './shared/hooks/useResolver';
+import useDocumentContext from './shared/hooks/useDocumentContext.js';
+import useResolver from './shared/hooks/useResolver.js';
 import {
   eventProps,
   isClassName,
@@ -30,7 +30,7 @@ import {
   isRef,
   isRenderMode,
   isRotate,
-} from './shared/propTypes';
+} from './shared/propTypes.js';
 
 import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
 import type { EventProps } from 'make-event-props';
@@ -55,7 +55,7 @@ import type {
   OnRenderTextLayerSuccess,
   PageCallback,
   RenderMode,
-} from './shared/types';
+} from './shared/types.js';
 
 const defaultScale = 1;
 

diff --git a/src/Page/AnnotationLayer.spec.tsx b/src/Page/AnnotationLayer.spec.tsx
@@ -2,21 +2,21 @@ import { beforeAll, describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { pdfjs } from '../index.test';
+import { pdfjs } from '../index.test.js';
 
-import AnnotationLayer from './AnnotationLayer';
-import LinkService from '../LinkService';
+import AnnotationLayer from './AnnotationLayer.js';
+import LinkService from '../LinkService.js';
 
-import failingPage from '../../__mocks__/_failing_page';
+import failingPage from '../../__mocks__/_failing_page.js';
 
-import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../../test-utils';
+import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../../test-utils.js';
 
-import DocumentContext from '../DocumentContext';
-import PageContext from '../PageContext';
+import DocumentContext from '../DocumentContext.js';
+import PageContext from '../PageContext.js';
 
 import type { RenderResult } from '@testing-library/react';
 import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
-import type { Annotations, DocumentContextType, PageContextType } from '../shared/types';
+import type { Annotations, DocumentContextType, PageContextType } from '../shared/types.js';
 
 const pdfFile = loadPDF('./__mocks__/_pdf.pdf');
 const annotatedPdfFile = loadPDF('./__mocks__/_pdf3.pdf');

diff --git a/src/Page/AnnotationLayer.tsx b/src/Page/AnnotationLayer.tsx
@@ -7,12 +7,12 @@ import invariant from 'tiny-invariant';
 import warning from 'tiny-warning';
 import * as pdfjs from 'pdfjs-dist';
 
-import useDocumentContext from '../shared/hooks/useDocumentContext';
-import usePageContext from '../shared/hooks/usePageContext';
-import useResolver from '../shared/hooks/useResolver';
-import { cancelRunningTask } from '../shared/utils';
+import useDocumentContext from '../shared/hooks/useDocumentContext.js';
+import usePageContext from '../shared/hooks/usePageContext.js';
+import useResolver from '../shared/hooks/useResolver.js';
+import { cancelRunningTask } from '../shared/utils.js';
 
-import type { Annotations } from '../shared/types';
+import type { Annotations } from '../shared/types.js';
 
 export default function AnnotationLayer() {
   const documentContext = useDocumentContext();

diff --git a/src/Page/PageCanvas.spec.tsx b/src/Page/PageCanvas.spec.tsx
@@ -2,18 +2,18 @@ import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { pdfjs } from '../index.test';
+import { pdfjs } from '../index.test.js';
 
-import PageCanvas from './PageCanvas';
+import PageCanvas from './PageCanvas.js';
 
-import failingPage from '../../__mocks__/_failing_page';
+import failingPage from '../../__mocks__/_failing_page.js';
 
-import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../../test-utils';
+import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../../test-utils.js';
 
-import PageContext from '../PageContext';
+import PageContext from '../PageContext.js';
 
 import type { PDFPageProxy } from 'pdfjs-dist';
-import type { PageContextType } from '../shared/types';
+import type { PageContextType } from '../shared/types.js';
 
 const pdfFile = loadPDF('./__mocks__/_pdf.pdf');
 

diff --git a/src/Page/PageCanvas.tsx b/src/Page/PageCanvas.tsx
@@ -6,17 +6,17 @@ import invariant from 'tiny-invariant';
 import warning from 'tiny-warning';
 import * as pdfjs from 'pdfjs-dist';
 
-import StructTree from '../StructTree';
+import StructTree from '../StructTree.js';
 
-import usePageContext from '../shared/hooks/usePageContext';
+import usePageContext from '../shared/hooks/usePageContext.js';
 import {
   cancelRunningTask,
   getDevicePixelRatio,
   isCancelException,
   makePageCallback,
-} from '../shared/utils';
+} from '../shared/utils.js';
 
-import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api.js';
 
 const ANNOTATION_MODE = pdfjs.AnnotationMode;