Upgrade pdfjs from 1.7.246 to 2.0.489

* Required web pack 2+ => updated to 3
* Add web pack-dev-server to be able to test worker.js stuff

.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": ["es2015", "stage-0"],
+  "env": {
-  "plugins": ["transform-runtime"]
+    "testing": {
+        "presets": ["es2015"]
+    }
+  },
+  "presets": [ ["es2015", { "loose": false, "modules": false}], "react", "stage-0", "stage-2"]
 }

README.md

@@ -16,6 +16,8 @@ Use the [issue tracker](https://github.com/jzillmann/pdf-to-markdown/issues) and
 - ```npm run lint``` Lint the javascript files
 - ```npm run test``` Run tests
 - ```npm run check``` Lint & Test
+- ```npm run build``` Build the dev version
+- ```npm run start``` Run the app on an server (useful for loading of worker.js and cmaps)
 - ```npm run watch``` Continuously build the project
 - ```open build/index.html``` Open the build project in your default browser
 - ```npm run release``` Build production version

package.json

@@ -6,8 +6,9 @@
   "scripts": {
     "watch": "webpack -d --watch",
     "build": "webpack",
+    "start": "webpack-dev-server",
     "lint": "eslint src --ext .js --ext .jsx --cache",
-    "test": "mocha --compilers js:babel-core/register test --recursive",
+    "test": "NODE_ENV=testing mocha --compilers js:babel-core/register test --recursive",
     "check": "npm run lint && npm run test",
     "release": "npm run lint && rm -rf build/* && NODE_ENV=production webpack -p",
     "deploy": "npm run release && cp -r build/* docs/"
@@ -26,7 +27,7 @@
   "dependencies": {
     "bootstrap": "^3.3.7",
     "enumify": "^1.0.4",
-    "pdfjs-dist": "^1.7.246",
+    "pdfjs-dist": "^2.0.489",
     "rc-progress": "^2.0.6",
     "react": "^15.4.2",
     "react-bootstrap": "^0.30.7",
@@ -39,11 +40,12 @@
   "devDependencies": {
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
+    "babel-loader": "^7.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",
     "babel-preset-stage-0": "^6.22.0",
+    "babel-preset-stage-2": "^6.24.1",
     "chai": "^3.5.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
@@ -51,12 +53,14 @@
     "eslint": "^3.15.0",
     "eslint-plugin-jasmine": "^2.2.0",
     "eslint-plugin-react": "^6.9.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.10.0",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^2.22.0",
     "mocha": "^3.2.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.14.0"
+    "webpack": "^3.11.0",
+    "webpack-cli": "^2.0.15",
+    "webpack-dev-server": "^2.11.1"
   }
 }

src/javascript/components/LoadingView.jsx

@@ -8,6 +8,8 @@ import Metadata from '../models/Metadata.jsx';
 import Page from '../models/Page.jsx';
 import TextItem from '../models/TextItem.jsx';
 
+pdfjs.GlobalWorkerOptions.workerSrc = 'bundle.worker.js';
+
 // Parses the PDF pages and displays progress
 export default class LoadingView extends React.Component {
 
@@ -101,7 +103,11 @@ export default class LoadingView extends React.Component {
         const self = this;
         const fontStage = this.state.progress.fontStage();
 
-        PDFJS.getDocument(this.props.fileBuffer).then(function(pdfDocument) { // eslint-disable-line no-undef
+        pdfjs.getDocument({
+            data: this.props.fileBuffer,
+            cMapUrl: 'cmaps/',
+            cMapPacked: true
+        }).then(function(pdfDocument) { // eslint-disable-line no-undef
             // console.debug(pdfDocument);
             pdfDocument.getMetadata().then(function(metadata) {
                 // console.debug(metadata);
@@ -127,7 +133,7 @@ export default class LoadingView extends React.Component {
                                 fontStage.steps = self.state.fontIds.size;
                             }
 
-                            const tx = PDFJS.Util.transform( // eslint-disable-line no-undef
+                            const tx = pdfjs.Util.transform( // eslint-disable-line no-undef
                                 viewport.transform,
                                 item.transform
                             );

src/javascript/components/UploadView.jsx

@@ -26,7 +26,7 @@ export default class UploadView extends React.Component {
         const uploadFunction = this.state.uploadPdfFunction;
         reader.onload = (evt) => {
             const fileBuffer = evt.target.result;
-            uploadFunction(fileBuffer);
+            uploadFunction(new Uint8Array(fileBuffer));
         };
         reader.readAsArrayBuffer(files[0]);
     }

src/javascript/models/AppState.jsx

@@ -38,7 +38,7 @@ export default class AppState {
     }
 
     // the uploaded pdf as file buffer
-    storeFileBuffer(fileBuffer:ArrayBuffer) {
+    storeFileBuffer(fileBuffer:Uint8Array) {
         this.fileBuffer = fileBuffer;
         this.mainView = View.LOADING;
         this.render()

webpack.config.js

@@ -4,42 +4,32 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 var SOURCE_DIR = path.resolve(__dirname, 'src');
+var JAVASCRIPT_DIR = SOURCE_DIR + '/javascript';
 var BUILD_DIR = path.resolve(__dirname, 'build');
 var NODEMODULES_DIR = path.resolve(__dirname, 'node_modules');
-var JAVASCRIPT_DIR = SOURCE_DIR + '/javascript';
 
 module.exports = {
-    entry: JAVASCRIPT_DIR + '/index.jsx',
+    context: SOURCE_DIR,
+    resolve: {
+        modules: [
+            path.resolve(JAVASCRIPT_DIR),
+            path.resolve('./node_modules')
+        ]
+    },
+    entry: {
+        app: './javascript/index.jsx'
+    },
     output: {
         path: BUILD_DIR,
         filename: 'bundle.js'
     },
-    resolve: {
-        extensions: ['', '.js'],
-        fallback: [path.join(__dirname, '../node_modules')],
-        alias: {
-            'src': path.resolve(__dirname, '../src'),
-            'assets': path.resolve(__dirname, '../src/assets'),
-            'components': path.resolve(__dirname, '../src/components')
-        }
-    },
-    resolveLoader: {
-        fallback: [path.join(__dirname, '../node_modules')]
-    },
     module: {
-        // Special compilation rules
+        rules: [
-        loaders: [
             {
                 // Ask webpack to check: If this file ends with .js, then apply some transforms
                 test: /\.jsx?$/,
-                // Transform it with babel
+                loader: 'babel-loader',
-                loader: 'babel',
-                // don't transform node_modules folder (which don't need to be compiled)
                 include: [JAVASCRIPT_DIR],
-                query: {
-                    plugins: ['transform-runtime'],
-                    presets: ['es2015', 'stage-0', 'react'],
-                }
             },
             {
                 test: /\.css$/,
@@ -55,25 +45,25 @@ module.exports = {
             },
             {
                 test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
-                loader: 'url?limit=10000&mimetype=application/font-woff'
+                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
             },
             {
                 test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-                loader: 'url?limit=10000&mimetype=application/octet-stream'
+                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
             },
             {
                 test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-                loader: 'file'
+                loader: 'file-loader'
             },
             {
                 test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-                loader: 'url?limit=10000&mimetype=image/svg+xml'
+                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
             }
         ]
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: SOURCE_DIR + '/index.html'
+            template: 'index.html'
         }),
         new webpack.DefinePlugin({
             'process.env': {
@@ -89,7 +79,13 @@ module.exports = {
         ]),
         new CopyWebpackPlugin([
             {
-                from: SOURCE_DIR + '/favicons',
+                from: NODEMODULES_DIR + '/pdfjs-dist/cmaps',
+                to: 'cmaps'
+            },
+        ]),
+        new CopyWebpackPlugin([
+            {
+                from: 'favicons',
                 to: 'favicons'
             },
         ])