Merge pull request #1 from mblink/develop

Initial DocumentViewer Setup
mblink · Jul 15, 2022 · 9861b61 · 9861b61
2 parents caf3e0d + c9de0cf
commit 9861b61
Show file tree

Hide file tree

Showing 20 changed files with 13,235 additions and 20 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,6 +3,7 @@ module.exports = {
     es6: true,
     node: true,
     jest: true,
+    browser: true,
   },
   extends: [
     "eslint:recommended",
@@ -11,12 +12,20 @@ module.exports = {
   parserOptions: {
     project: [
       "tsconfig.json",
+      "tsconfig.commonjs.json",
+      "tsconfig.example.json",
       "test/tsconfig.json"
     ],
   },
   plugins: [
     "@typescript-eslint",
   ],
+  globals: {
+    "NodeJS": true,
+    "pdfjsImageDecoders": false,
+    "pdfjsLib": false,
+    "pdfjsViewer": false,
+  },
   reportUnusedDisableDirectives: true,
   rules: {
     "@typescript-eslint/adjacent-overload-signatures": "warn",

diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,6 @@
 node_modules/
-dist/
+build/
+dist/
+
+.git/
+.vscode/
diff --git a/README.md b/README.md
@@ -0,0 +1,75 @@
+
+# BondLink Document Viewer (WIP)
+## PDF and docx viewer for Vanilla JavaScript and React applications
+
+### Example Usage
+If using webpack, copy `PATH/TO/NODE_MODULES/pdfjs-dist/build/pdf.worker.min.js` to a local directory:
+
+`webpack.config.ts`
+```
+import CopyPlugin from "copy-webpack-plugin";
+
+...
+
+const config = {
+  ...
+  plugins: [
+    ...
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "PATH/TO/NODE_MODULES/document-viewer/dist/worker/pdf.worker.min.js",
+          to: "PATH/TO/WORKER/FILE"
+        }
+      ]
+    }
+  ]
+}
+
+...
+
+```
+#### With HTML and Vanilla JS
+
+Call the init script in the root of your JS application using the path to your worker file.
+
+`index.js`
+```
+import { init } from 'document-viewer'
+
+init("PATH/TO/WORKER/FILE");
+```
+
+Wherever you want to include a document viewer in the HTML, include a `<div />` with `class="viewerContainer"` and `id` being some unique key (on the page) and `data-document-url` being the url of the document you want to display. Also make sure you're importing `styles.css` from the package in your HTML head.
+
+`index.html`
+```
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <script src="./index.js"></script>
+    <link rel="stylesheet" href="../node_modules/document-viewer/dist/styles/styles.css"></link>
+  </head>
+  <body>
+    <div class="viewerContainer" id="doc-1" data-document-url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"></div>
+  </body>
+</html>
+```
+
+### With React
+
+Import the `Viewer` component and call it with the proper `documentId`, `documentUrl`, and `workerSrc` props. Also make sure to import `styles.css` in your app.
+
+`index.jsx`
+```
+import React from 'react'
+import { Viewer } from 'document-viewer'
+export default () =>
+  <Viewer
+    documentId="doc-1"
+    documentUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+    workerSrc="PATH/TO/WORKER/FILE"
+  />
+```
+
diff --git a/example/example.ts b/example/example.ts
@@ -0,0 +1,3 @@
+import { init } from '../dist/es2015';
+
+init('../node_modules/pdfjs-dist/build/pdf.worker.min.js');
diff --git a/example/viewer.html b/example/viewer.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script src="../build/example.bundle.js"></script>
+  <link rel="stylesheet" href="../styles/styles.css"></link>
+</head>
+<body>
+  <div class="viewerContainer" id="doc-1" data-document-url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"></div>
+  <div class="viewerContainer" id="doc-2" data-document-url="http://ieee802.org:80/secmail/docIZSEwEqHFr.doc"></div>
+  <div class="viewerContainer" id="doc-3" data-document-url="http://ieee802.org:80/secmail/docIZSEwEqHFr.png"></div>
+  <div class="viewerContainer" id="doc-4"></div>
+</body>
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
+  setupFiles: ['./test/jestEnvironment.js'],
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { init } from '../dist/es2015';

		init('../node_modules/pdfjs-dist/build/pdf.worker.min.js');