Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds/modifies examples for node.js and webpack. #6785

Merged
merged 1 commit into from
Dec 21, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions examples/node/domstubs.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,9 +120,17 @@ DOMElement.prototype = {
},
}

global.window = global;

global.navigator = { userAgent: 'node' };

global.document = {
childNodes : [],

get currentScript() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return { src: '' };
},

get documentElement() {
return this;
},
Expand Down
8 changes: 3 additions & 5 deletions examples/node/getinfo.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@

var fs = require('fs');

// HACK few hacks to let PDF.js be loaded not as a module in global space.
global.window = global;
global.navigator = { userAgent: "node" };
global.PDFJS = {};
// HACK adding DOMParser to read XMP metadata.
global.DOMParser = require('./domparsermock.js').DOMParserMock;

require('../../build/singlefile/build/pdf.combined.js');
// Run `node make dist` to generate 'pdfjs-dist' npm package files.
require('../../build/dist');

// Loading file from file system into typed array
var pdfPath = process.argv[2] || '../../web/compressed.tracemonkey-pldi-09.pdf';
Expand Down
8 changes: 2 additions & 6 deletions examples/node/pdf2svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,10 @@
var fs = require('fs');

// HACK few hacks to let PDF.js be loaded not as a module in global space.
global.window = global;
global.navigator = { userAgent: 'node' };
global.PDFJS = {};

require('./domstubs.js');

PDFJS.workerSrc = true;
require('../../build/singlefile/build/pdf.combined.js');
// Run `node make dist` to generate 'pdfjs-dist' npm package files.
require('../../build/dist');

// Loading file from file system into typed array
var pdfPath = process.argv[2] || '../../web/compressed.tracemonkey-pldi-09.pdf';
Expand Down
1 change: 1 addition & 0 deletions examples/webpack/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
18 changes: 18 additions & 0 deletions examples/webpack/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
## Overview

Example to demonstrate PDF.js library usage with webpack.

## Getting started

Build project and install the example dependencies:

$ node make dist
$ cd examples/webpack
$ npm install

To build webpack bundles, run `node_modules/.bin/webpack`. If you are running
a web server, you can observe the build results at
http://localhost:8888/examples/webpack/index.html

See main.js and webpack.config.js files. Please notice that PDF.js packaging
requires 'entry' loader.
11 changes: 11 additions & 0 deletions examples/webpack/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack example</title>
<script src="../../build/webpack/bundle.js"></script>
</head>
<body>
<canvas id="theCanvas"></canvas>
</body>
</html>
32 changes: 32 additions & 0 deletions examples/webpack/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// Any copyright is dedicated to the Public Domain.
// http://creativecommons.org/licenses/publicdomain/

// Hello world example for webpack.

require('pdfjs-dist');

var pdfPath = '../helloworld/helloworld.pdf';

// It is also possible to disable workers via `PDFJS.disableWorker = true`,
// however that might degrade the UI performance in web browsers.

// Loading a document.
var loadingTask = PDFJS.getDocument(pdfPath);
loadingTask.promise.then(function (pdfDocument) {
// Request a first page
return pdfDocument.getPage(1).then(function (pdfPage) {
// Display page on the existing canvas with 100% scale.
var viewport = pdfPage.getViewport(1.0);
var canvas = document.getElementById('theCanvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
var ctx = canvas.getContext('2d');
var renderTask = pdfPage.render({
canvasContext: ctx,
viewport: viewport
});
return renderTask.promise;
});
}).catch(function (reason) {
console.error('Error: ' + reason);
});
9 changes: 9 additions & 0 deletions examples/webpack/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"name": "webpack-pdf.js-example",
"version": "0.1.0",
"devDependencies": {
"webpack": "~1.12.9",
"entry-loader": "~0.1.0",
"pdfjs-dist": "../../build/dist"
}
}
20 changes: 20 additions & 0 deletions examples/webpack/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
var webpack = require('webpack');
var path = require('path');

module.exports = {
context: __dirname,
entry: './main.js',
output: {
path: path.join(__dirname, '../../build/webpack'),
publicPath: '../../build/webpack/',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
screw_ie8: true,
warnings: false
}
})
]
};
2 changes: 2 additions & 0 deletions make.js
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ target.generic = function() {
};
builder.build(setup);

cleanupJSSource(GENERIC_DIR + '/build/pdf.js');
cleanupJSSource(GENERIC_DIR + '/web/viewer.js');
cleanupCSSSource(GENERIC_DIR + '/web/viewer.css');
};
Expand Down Expand Up @@ -325,6 +326,7 @@ target.dist = function() {
var npmManifest = {
name: DIST_NAME,
version: VERSION,
main: 'build/pdf.js',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this address #6729?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, closing the above

description: DIST_DESCRIPTION,
keywords: DIST_KEYWORDS,
homepage: DIST_HOMEPAGE,
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"jsdoc": "^3.3.0-alpha9",
"jshint": "~2.8.0",
"wintersmith": "^2.0.0",
"node-ensure": "^0.0.0",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is it and why it's needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's needed for webpack to properly split bundles

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe the problem is that this is in devDependencies, not runtime dependencies?

"rimraf": "^2.4.1",
"shelljs": "~0.4.0",
"typogr": "~0.6.5",
Expand Down
5 changes: 3 additions & 2 deletions src/core/worker.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals NetworkManager */
/* globals NetworkManager, module */

'use strict';

Expand Down Expand Up @@ -648,7 +648,8 @@ var workerConsole = {


// Worker thread?
if (typeof window === 'undefined' && typeof require === 'undefined') {
if (typeof window === 'undefined' &&
!(typeof module !== 'undefined' && module.require)) {
if (!('console' in globalScope)) {
globalScope.console = workerConsole;
}
Expand Down
19 changes: 16 additions & 3 deletions src/display/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,14 @@ var globalScope = sharedGlobal.globalScope;

var DEFAULT_RANGE_CHUNK_SIZE = 65536; // 2^16 = 65536

//#if PRODUCTION && !SINGLE_FILE
//#if GENERIC
//#include ../src/frameworks.js
//#else
//var fakeWorkerFilesLoader = null;
//#endif
//#endif

/**
* The maximum allowed image size in total pixels e.g. width * height. Images
* above this value will not be drawn. Use -1 for no limit.
Expand Down Expand Up @@ -1192,7 +1200,10 @@ var PDFWorker = (function PDFWorkerClosure() {
// PDFJS.fakeWorkerFilesLoadedCapability.resolve();
//#endif
//#if PRODUCTION && !SINGLE_FILE
// Util.loadScript(PDFJS.workerSrc, function() {
// var loader = fakeWorkerFilesLoader || function (callback) {
// Util.loadScript(PDFJS.workerSrc, callback);
// };
// loader(function () {
// PDFJS.fakeWorkerFilesLoadedCapability.resolve();
// });
//#endif
Expand Down Expand Up @@ -1295,8 +1306,10 @@ var PDFWorker = (function PDFWorkerClosure() {
},

_setupFakeWorker: function PDFWorker_setupFakeWorker() {
warn('Setting up fake worker.');
globalScope.PDFJS.disableWorker = true;
if (!globalScope.PDFJS.disableWorker) {
warn('Setting up fake worker.');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making this warning appear only when PDF.js decides to fall back (and not when user explicitly sets the option).

globalScope.PDFJS.disableWorker = true;
}

setupFakeWorkerGlobal().then(function () {
if (this.destroyed) {
Expand Down
40 changes: 40 additions & 0 deletions src/frameworks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/* Copyright 2015 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals PDFJS, require, module */

// included from api.js for GENERIC build
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

License header is missing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The license header is not removed for included files. Changing make.js...


'use strict';

var useRequireEnsure = false;
if (typeof module !== 'undefined' && module.require) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about typeof window === 'undefined' ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see conflict in node examples we have (due to DOM mock)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typeof module !== 'undefined' && module.require can be changed to something else that will identify only node (preferably in less hacky way)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm... maybe it's better to use System.import polyfill instead of require.ensure?
https://github.com/ModuleLoader/es6-module-loader
I believe, pdf.js is used more on browser side, so using ES6 modules seems more logical.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using require.ensure is the only way to make it work for webpack, and require.ensure = require('node-ensure) is only way to make it work on node.js as well.

Adding a proper node.js detection (that will not be true for systemjs) will solve your issue

// node.js - disable worker and set require.ensure.
PDFJS.disableWorker = true;
if (typeof require.ensure === 'undefined') {
require.ensure = require('node-ensure');
}
useRequireEnsure = true;
}
if (typeof __webpack_require__ !== 'undefined') {
// Webpack - get/bundle pdf.worker.js as additional file.
PDFJS.workerSrc = require('entry?name=[hash]-worker.js!./pdf.worker.js');
useRequireEnsure = true;
}
var fakeWorkerFilesLoader = useRequireEnsure && function (callback) {
require.ensure([], function () {
require('./pdf.worker.js');
callback();
});
};
7 changes: 4 additions & 3 deletions src/pdf.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*jshint globalstrict: false */
/* globals PDFJS */
/* jshint globalstrict: false */
/* globals PDFJS, global */

// Initializing PDFJS global object (if still undefined)
if (typeof PDFJS === 'undefined') {
(typeof window !== 'undefined' ? window : this).PDFJS = {};
(typeof window !== 'undefined' ? window :
typeof global !== 'undefined' ? global : this).PDFJS = {};
}

//#if BUNDLE_VERSION
Expand Down