webpack support, refreshed build tasks

[HIRANO-Satoshi]

Hi,

Since build tasks are obsolete, I refreshed the build tasks and package.json from standard Aurelia plugins such as aurelia-ui-virtualization and aurelia-i18n.
Now it should work with JSPM and webpack.

I updated dependency from Leaflet 1.0.2 to 1.2.0.
During the process I needed to rename src/index.js to src/aurelia-leaflet.js. The initialization process was improved a bit to avoid a DI problem.

This PR does not include dist/* files. Please build at your side.

I managed to improve the build tasks to work with esnext and JSPM. Unfortunately a map is not properly rendered within a sample based on aurelia-skeleton-esnext, although it works fine within our webpack project. That also occurs with Leaflet 1.0.2.
I don't dive into the detail of that now.

[benib]

Thanks a lot for this @HIRANO-Satoshi. I will need some time to get through this.

[martynchamberlin]

@benib Would love to see this PR move along. The community has by and large moved away from Gulp and JSPM into Webpack and NPM. For now, my package.json references the changes introduced by this PR:

    "aurelia-leaflet": "github:HIRANO-Satoshi/aurelia-leaflet",

There are a couple of things lacking that I had to change to get this to work. First I had to install the leaflet.css directly so it'd be in my package.json:

npm install --save leaflet

Then in main.js:

require('leaflet/dist/leaflet.css');

Then the image src's got messed up for the markers and shadows, so I had to elbow grease those too, by creating custom icons so I could specify custom URLs (which end up becoming data:image resources).

import leaflet from 'leaflet';
const iconUrl = require('leaflet/dist/images/marker-icon.png');
const shadowUrl = require('leaflet/dist/images/marker-shadow.png'); 

// then later on, when I'm building a layer, which will get added to the 
// layers.overlay array, which is then passed to the leaflet component as the layers.bind="layers"
// prop
const newLayer = {
  type: 'marker',
  // some other properties, such as latLng, popupContent, id, etc, and then:
  icon: leaflet.icon({
    iconUrl,
    shadowUrl
  })
}
this.layers.overlay.push(newLayer)

It'd be awesome if this PR supported these things so their implementation details are tucked away, but I'm honestly not sure what the best way is to get image resources from a node_modules dependency into a production context. You don't want to just reference an image with an src that directly references the node_modules, directory as JSPM does. There's some discussion about this elsewhere but I'm not sure there's an agreed standard for this.

[HIRANO-Satoshi]

@martynchamberlin Hi Martyn,

I think importing required resources is not bad.

Here is a part of my map.ts. Some come from src since not all packages have dist.

import { LeafletCustomElement } from 'aurelia-leaflet';
import * as Leaflet from 'leaflet';
import 'leaflet.fullscreen'
import 'leaflet.fullscreen/Control.FullScreen.css'
import 'Leaflet.extra-markers';
import 'Leaflet.extra-markers/dist/css/leaflet.extra-markers.min.css'
import 'leaflet.zoomslider/src/L.Control.Zoomslider.css';
import 'leaflet.zoomslider/src/L.Control.Zoomslider.js';
import 'leaflet-control-topcenter/dist/leaflet-control-topcenter.css'
import 'leaflet-control-topcenter/dist/leaflet-control-topcenter.js'
/// <reference path='leaflet.d.ts'/>

I had not noticed the leaflet/dist/leaflet.css. My app is working without importing it.

[benib]

I am very sorry for not finding the time to look into these. I hope to be able to go through these PRs in the next weeks.

Would anyone of you be available to take over lead maintainership?

[HIRANO-Satoshi]

@benib Don't worry. I just appreciate your efforts made so far. Everyone knows everyone is busy.

I don't think I could take time to be a lead maintainer. Sorry.