Support Systemjs #6791

Vanuan · 2015-12-22T16:29:47Z

Please add support for systemjs.

yurydelendik · 2015-12-22T16:37:24Z

I would request more information since no examples are provided. And I think Browserify works with pdfjs-dist currently (with some modules exceptions).

Vanuan · 2015-12-22T18:36:45Z

Here's the most common example to use systemjs:

npm install jspm
jspm init # use defaults
jspm install pdfjs-dist

index.html

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Title</title>
</head>

<body>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('src/app.js');
    </script>
</body>
</html>

src/app.js

# ES6 syntax
import pdfjs from 'pdfjs-dist';

# expected pdfjs to be a window.PDFJS object

yurydelendik · 2015-12-22T18:38:14Z

Thank you for example

Vanuan · 2015-12-22T18:42:39Z

In previous versions we could use jspm shim to use pdfjs.
https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm
But after inclusion of node-ensure, we can't (node-ensure doesn't seem to be compatible with system.js).

Vanuan · 2015-12-22T18:53:09Z

Actually, this is a request for jspm packager, not specifically Systemjs loader.
I.e. it would be fine if it would require jspm shim, but don't add incompatible changes like node-ensure.

yurydelendik · 2015-12-22T19:24:33Z

@Vanuan

Having the following in the config.js workaround the issue:

    "npm:pdfjs-dist@1.3.122": {
      "process": "github:jspm/nodelibs-process@0.1.2",
      "node-ensure": "empty",
      "entry?name=[hash]-worker.js": "empty"
    },

(empty is a empty.js file with no content)

Similar hack is need for Browserify

yurydelendik · 2015-12-22T19:41:14Z

Now issue: pdf.worker.js is loaded twice, that's an issue was solved by request.ensure() in webpack. The './pdf.worker.js' has to be forbidden from loading until it's really needed.

Vanuan · 2015-12-22T21:04:08Z

I thought "PDFJS.disableWorker = true;" solves that? Isn't it?

Vanuan · 2015-12-22T21:10:54Z

If you use System.import('./pdf.worker'), it will issue only one http request.

Or even System.import('pdfjs-dist/build/pdf.worker')

Is there a specific reason why node-ensure was used? I believe System loader works fine in Webpack.

yurydelendik · 2015-12-22T21:18:47Z

"PDFJS.disableWorker = true;" is not an option,since we want to move PDF processing on the different thread. We don't want suggest lousy solution for library users, do we?

Vanuan · 2015-12-22T21:20:50Z

Well, I'd be prefer lousy solution than no solution at all. For my use case, even 1 second page freeze is fine.
I'd be glad if you find a better solution.

yurydelendik · 2015-12-22T21:24:19Z

Is there a specific reason why node-ensure was used?

If you look carefully at what examples/webpack/ produces:

pdf.js yury$ ls -la build/webpack/
total 2384
drwxr-xr-x   5 yury  staff     170 Dec 22 15:20 .
drwxr-xr-x  34 yury  staff    1156 Dec 22 10:08 ..
-rw-r--r--   1 yury  staff  546125 Dec 21 16:35 1.bundle.js
-rw-r--r--   1 yury  staff  546463 Dec 21 16:35 9d074593b165291f150e-worker.js
-rw-r--r--   1 yury  staff  122796 Dec 21 16:35 bundle.js

"bundle.js" is main file that loads (that means it will bring and initialize UI after 122796 bytes -- faster page start up). "9d074593b165291f150e-worker.js" is a worker which will run the logic and don't lock UI on slow devices. "1.bundle.js" portion is loaded only if disableWorker triggered and for legacy browsers such as IE9.

yurydelendik · 2015-12-22T21:28:48Z

I'd be glad if you find a better solution.

I'm expecting the systemjs might have some kinda guard to not parse all requires (replacing "./pdf.worker.js" with "empty" did not work for me).

@Vanuan Can you file an issue with systemjs to see if they have something better in mind? Thanks.

yurydelendik · 2015-12-22T21:42:26Z

Sounds like the very last issue at systemjs systemjs/systemjs#983 ?

yurydelendik · 2015-12-22T21:58:02Z

Well, I'd be prefer lousy solution than no solution at all. For my use case, even 1 second page freeze is fine.

@Vanuan, nothing changed in usage of the pdf.combined.js file (I hope) -- looks like we need to keep it for such cases. You need to use it as you described as an issue in #6729. From your description it was not clear you are planing to use systemjs to load PDFJS.

Vanuan · 2015-12-22T22:07:59Z

nothing changed in usage of the pdf.combined.js file

Ah, great!

Vanuan · 2015-12-22T23:08:47Z

Anyway, something has definitely changed with regard to using it with worker.
Previously, we could use full path to worker, but get Uncaught ReferenceError: require is not defined inside it:

PDFJS.workerSrc = 'jspm_packages/npm/pdfjs-dist@1.3.120/build/pdf.worker.js';

Now, it seems like it's stuck on loading files. As if module loaded callback never completes.
The last module requested is process.

Probably, Systemjs can't process the following construction:

(function(process) {
  if (typeof PDFJS === 'undefined') {
    (typeof window !== 'undefined' ? window : this).PDFJS = {};
  }
})(require('process'));

yurydelendik · 2015-12-22T23:13:46Z

Anyway, something has definitely changed with regard to using it with worker.
Previously, we could use full path to worker,

pdf.combined.js fully included/includes pdf.worker.js and does not need workerSrc to be specified.

yurydelendik · 2015-12-22T23:15:54Z

Changes to pdf.combined.js mozilla/pdfjs-dist@a7cd5f7#diff-eccf5b94e31b0939738de07167e02af6

Vanuan · 2015-12-22T23:18:23Z

Yeap, I'm just evaluating options of using workers along with jspm.

Vanuan · 2015-12-22T23:20:37Z

Now issue: pdf.worker.js is loaded twice, that's an issue was solved by request.ensure() in webpack

So, now it is being loaded in the main thread and doesn't use importScripts()?

yurydelendik · 2015-12-22T23:23:58Z

My src/app.js is:

import pdfjs from 'pdfjs-dist';

console.log(PDFJS);

So it's not even using getDocument yet, but in network monitor it shows two entries for pdf.worker.js

Vanuan · 2015-12-22T23:24:28Z

It's strange. I only see one entry.

yurydelendik · 2015-12-22T23:25:05Z

It's strange. I only see one entry.

It shall be none AFAIK :)

yurydelendik · 2015-12-22T23:35:25Z

The same on Firefox and Chrome:

Vanuan · 2015-12-22T23:45:58Z

Ah. So looks like Systemjs dumbly parses all requires and tries to load them...

Vanuan · 2015-12-22T23:50:15Z

Conditional require is not a very common use case.

Vanuan · 2015-12-22T23:52:51Z

That's why it tries to load node-ensure too.

Vanuan · 2015-12-22T23:56:59Z

@yurydelendik
How such requires help webpack? Webpack still loads worker using importScripts, right?

yurydelendik · 2015-12-22T23:58:17Z

Conditional require is not a very common use case.

I would disagree, systemjs/systemjs#983 and https://github.com/webpack/docs/wiki/code-splitting are common use cases.

Webpack still loads worker using importScripts, right?

~~It does.~~ via new Worker(..). But it also has an option to load pdf.worker.js as module if workers are disabled.

yurydelendik · 2015-12-28T15:57:37Z

The issue will be solved by #6775 -- the systemjs has auto-detect for type of the module. Now it's commonjs, with UMD it will be AMD so it will not try to parse require().

P.S. wip at https://github.com/yurydelendik/pdf.js/tree/pdfjsumd

Vanuan · 2015-12-28T19:28:27Z

Wow, great, I'll try as soon as merged and released.

timvandermeij · 2016-01-08T11:58:27Z

Closing as fixed by #6825. If there are remaining problems, please open a new issue.

yurydelendik · 2016-04-04T21:20:52Z

I also recommend to override module format when using jspm: jspm install npm:pdfjs-dist -o "{format: 'amd'}"

yurydelendik added feature information-requested labels Dec 22, 2015

yurydelendik removed the information-requested label Dec 22, 2015

Vanuan mentioned this issue Dec 22, 2015

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

Merged

Vanuan changed the title ~~Support Systemjs and Browserify~~ Support Systemjs Dec 22, 2015

timvandermeij closed this as completed Jan 8, 2016

yurydelendik mentioned this issue Apr 7, 2016

Specifies package format for jspm. #7169

Merged

yurydelendik mentioned this issue Sep 9, 2016

Webpack instructions still cause 'fake worker' to load #7612

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Systemjs #6791

Support Systemjs #6791

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 28, 2015

Vanuan commented Dec 28, 2015

timvandermeij commented Jan 8, 2016

yurydelendik commented Apr 4, 2016

Support Systemjs #6791

Support Systemjs #6791

Comments

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

Vanuan commented Dec 22, 2015

yurydelendik commented Dec 22, 2015

yurydelendik commented Dec 28, 2015

Vanuan commented Dec 28, 2015

timvandermeij commented Jan 8, 2016

yurydelendik commented Apr 4, 2016