Support systemjs

[jamesjwarren]

mapbox-gl-js version: 0.17.0

Steps to Trigger Behavior

1. Import mapbox gl in app source code (using typescript) import mapboxgl from 'mapbox-gl'
2. Run/import application with systemjs System.import('app')

Expected Behavior

Library should work as normal with no errors.

Actual Behavior

Get error:

Error: TypeError: Cannot read property 'default' of undefined
        at new module.exports (http://localhost:8000/jspm_packages/npm/webworkify@1.1.0/index.js:20:30)
        at Object.Dispatcher (http://localhost:8000/jspm_packages/npm/mapbox-gl@0.17.0/js/util/browser/dispatcher.js:10:18)
        at Object.Style (http://localhost:8000/jspm_packages/npm/mapbox-gl@0.17.0/js/style/style.js:22:21)
        at util.extend.setStyle (http://localhost:8000/jspm_packages/npm/mapbox-gl@0.17.0/js/ui/map.js:238:20)
        at new module.exports (http://localhost:8000/jspm_packages/npm/mapbox-gl@0.17.0/js/ui/map.js:62:10)
        at a.initMap (http://localhost:8000/src/map/map.ts!transpiled:27:40)
        at execute (http://localhost:8000/src/client.ts!transpiled:12:19)
    Error loading http://localhost:8000/src/client.ts

[lucaswoj]

It looks like systemjs doesn't support the browserify middleware essential to building mapbox-gl-js, namely webworkify. We do not support systemjs at this time but would gladly accept a PR that added support in a backwards-compatible way and didn't require checking any build artifacts into git.

[emakarov]

see same error message in browser with app built with browserify.
The case is observed, in this small script:
`var mapboxgl = require('mapbox-gl');
var $ = require('jquery');
var inview = require('./plugins/jquery.inview.js'); // THIS is REASON of THE ERROR

mapboxgl.accessToken = "pk.eyJ1IjoiZW1ha2Fyb3YiLCJhIjoiMDFER0JicyJ9.0yaID4RS09gxfY4uyERhVQ";
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
`
where jquery inview is a https://github.com/protonet/jquery.inview/blob/master/jquery.inview.js

[emakarov]

meanwhile, this script works
`var mapboxgl = require('mapbox-gl');
var $ = require('jquery');

mapboxgl.accessToken = "pk.eyJ1IjoiZW1ha2Fyb3YiLCJhIjoiMDFER0JicyJ9.0yaID4RS09gxfY4uyERhVQ";
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});

var inview = require('./plugins/jquery.inview.js');
`

[jscheid]

@lucaswoj how about simply a configurable hook function that is responsible for invoking the worker code? For backwards compatibility (and ease of use) you could fall back to a webworkify-based default when not specified.

I don't use systemjs, I'm bringing it up because webworkify-webpack is a pretty nasty hack that doesn't scale well, it's causing a noticeable delay and memory overhead in our (large) application as it stringifies the complete (!) application code (not just the worker dependency tree), twice (not counting the conversion from string to blob) and later stores it all in the blob.

This would make systemjs users happy, and let me pick a better alternative with webpack, and also give users full control over how exactly the worker code is executed. They could use it to spawn more than one worker thread, use a SharedWorker, use one worker for both mapbox and other work, run the code on the main thread, choose to keep worker threads around or shut them down, start worker threads in advance, etc.etc... most of these probably don't make much sense but the point is that you would enable people to make these choices for more advanced use cases.

[vegafx12]

Not that my opinion matters, but I'll throw in (in case you didn't already know) that the folks at Angular are pushing all of their tuts and the Angular2-seed project with SystemJS. So, likely will be many more using SystemJS vs Webpack.

[jscheid]

FWIW I've worked around this using NormalModuleReplacementPlugin to replace your dispatcher with a homegrown one based on worker-loader. Works well, but obviously no guarantee it will keep working with future versions, so it would still be great if there could be some kind of official mechanism.

[mourner]

See #3235.