Provide transpiled modules

.npmignore

@@ -1,7 +1,8 @@
 .circleci/
 .git/
-example/
+examples/
 test/
 .editorconfig
 .eslintrc
 webpack.*.js
+tsconfig.*.json

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## Next version
 
+## 6.0.0
+
+### Breaking changes
+
+#### Module paths
+
+ol-mapbox-style now ships with transpiled modules in the `dist/` folder, and sources in the `src/` folder. Previously, all modules were provided in the root directory.
+
+When upgrading, the import paths need to be checked. For example,
+```js
+import stylefunction from 'ol-mapbox-style/stylefunction';
+```
+needs to be changed to
+```js
+import stylefunction from 'ol-mapbox-style/dist/stylefunction';
+```
+
+### Other changes
+
+* Allow mapbox:// urls for all layer types, not just vector
+
 ## 5.0.2
 
 * Update dependencies

README.md

@@ -10,12 +10,6 @@ To use the library in an application with an npm based dev environment, install
 
     npm install ol-mapbox-style
 
-When using webpack as bundler, make sure to include the following in your webpack configuration:
-
-```js
-  node: {fs: 'empty'}
-```
-
 When installed this way, just import the ol-mapbox-style module, like in the usage example below. To use a standalone build of ol-mapbox-style, just include 'dist/olms.js' on your HTML page, and access the global `olms` object.
 
 ### Usage example
@@ -58,6 +52,24 @@ fetch('data/states.json').then(function(response) {
 });
 ```
 
+## Compatibility notes
+
+### Support for old browsers
+
+Internet Explorer (version 11) and other old browsers (Android 4.x) are supported when polyfills for the following features are loaded:
+
+* `fetch` (including `Promise`)
+* `String.prototype.startsWith`
+* `Object.assign`
+
+### Webpack
+
+When using webpack as bundler, it may be necessary to include the following in your webpack configuration:
+
+```js
+  node: {fs: 'empty'}
+```
+
 ## API
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
@@ -120,7 +132,7 @@ for rendering.
 ### stylefunction
 
 ```js
-import stylefunction from 'ol-mapbox-style/stylefunction';
+import stylefunction from 'ol-mapbox-style/dist/stylefunction';
 ```
 
 Creates a style function from the `glStyle` object for all layers that use

package.json

@@ -1,8 +1,8 @@
 {
   "name": "ol-mapbox-style",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "Create OpenLayers maps from Mapbox Style objects",
-  "main": "index.js",
+  "main": "dist/index.js",
   "repository": {
     "type": "git",
     "url": "git://github.com/openlayers/ol-mapbox-style.git"
@@ -17,37 +17,37 @@
   ],
   "license": "BSD-2-Clause",
   "scripts": {
-    "start": "webpack-dev-server --config ./webpack.config.js",
+    "start": "webpack-dev-server --config ./webpack.config.examples.js",
     "prepare": "npm run doc && npm run build",
-    "build": "webpack-cli --mode=production --config ./webpack.config.olms.js && webpack-cli --mode=production",
-    "doc": "documentation readme -s API index.js stylefunction.js --document-exported true",
+    "build": "tsc --project tsconfig-build.json && webpack-cli --mode=production --config ./webpack.config.olms.js && webpack-cli --mode=production --config ./webpack.config.examples.js",
+    "doc": "documentation readme -s API src/index.js src/stylefunction.js --document-exported true",
     "karma": "karma start test/karma.conf.js",
-    "lint": "eslint test example *.js",
+    "lint": "eslint test examples src",
     "typecheck": "tsc --project tsconfig-typecheck.json",
     "pretest": "npm run lint && npm run typecheck",
     "test": "npm run karma -- --single-run --log-level error"
   },
   "dependencies": {
-    "@mapbox/mapbox-gl-style-spec": "^13.9.0",
+    "@mapbox/mapbox-gl-style-spec": "^13.11.0",
     "mapbox-to-css-font": "^2.4.0",
     "webfont-matcher": "^1.1.0"
   },
   "peerDependencies": {
     "ol": "^6.1.0"
   },
   "devDependencies": {
-    "@types/node": "^12.7.12",
+    "@types/node": "^12.12.19",
     "babel-loader": "^8.0.6",
     "buble": "^0.19.8",
     "buble-loader": "^0.5.1",
     "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^1.0.1",
+    "css-loader": "^3.4.0",
     "deep-freeze": "0.0.1",
-    "documentation": "^11.0.1",
+    "documentation": "^12.1.4",
     "eslint": "^5.16.0",
     "eslint-config-openlayers": "^11.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "karma": "^4.3.0",
+    "karma": "^4.4.1",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.2",
     "karma-mocha": "^1.3.0",
@@ -56,14 +56,14 @@
     "mapbox-gl-styles": "^2.0.2",
     "mini-css-extract-plugin": "^0.4.5",
     "mocha": "^5.2.0",
-    "ol": "^6.0.1",
+    "ol": "^6.1.1",
     "puppeteer": "^1.20.0",
     "should": "^13.2.3",
     "sinon": "^7.5.0",
     "style-loader": "^0.23.1",
-    "typescript": "^3.6.3",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2"
+    "typescript": "3.5.3",
+    "webpack": "^4.41.3",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   }
 }

src/olms.js

@@ -0,0 +1,4 @@
+export {default as olms} from './index';
+export {apply, applyBackground, applyStyle} from './index';
+export {default as stylefunction} from './stylefunction';
+

stylefunction.js → src/stylefunction.js

@@ -11,7 +11,8 @@ import Icon from 'ol/style/Icon';
 import Text from 'ol/style/Text';
 import Circle from 'ol/style/Circle';
 import RenderFeature from 'ol/render/Feature';
-import derefLayers from '@mapbox/mapbox-gl-style-spec/deref';
+import {derefLayers} from '@mapbox/mapbox-gl-style-spec';
+
 import {
   expression, Color,
   function as fn,
@@ -168,7 +169,7 @@ function fromTemplate(text, properties) {
 
 /**
  * ```js
- * import stylefunction from 'ol-mapbox-style/stylefunction';
+ * import stylefunction from 'ol-mapbox-style/dist/stylefunction';
  * ```
  * Creates a style function from the `glStyle` object for all layers that use
  * the specified `source`, which needs to be a `"type": "vector"` or

test/applyStyle.test.js

@@ -13,7 +13,7 @@ import styleEmptySprite from './fixtures/style-empty-sprite.json';
 import styleMissingSprite from './fixtures/style-missing-sprite.json';
 import styleInvalidSpriteURL from './fixtures/style-invalid-sprite-url.json';
 
-import {applyStyle} from '../index.js';
+import {applyStyle} from '../src/index.js';
 
 
 describe('applyStyle style argument validation', function() {

test/finalizeLayer.test.js

@@ -9,7 +9,7 @@ import TileSource from 'ol/source/Tile';
 import glStyle from './fixtures/osm-liberty/style.json';
 import invalidStyle from './fixtures/style-invalid-version.json';
 
-import {_finalizeLayer as finalizeLayer} from '../index';
+import {_finalizeLayer as finalizeLayer} from '../src/index';
 
 describe('finalizeLayer promise', function() {
 

test/index.test.js

@@ -1,6 +1,6 @@
 import should from 'should';
 import olms, {applyBackground, apply, getLayer, getLayers, getSource} from '..';
-import {_getFonts as getFonts} from '../index';
+import {_getFonts as getFonts} from '../src/index';
 import Map from 'ol/Map';
 import TileSource from 'ol/source/Tile';
 import VectorSource from 'ol/source/Vector';
@@ -10,7 +10,7 @@ import {toLonLat} from 'ol/proj';
 
 import brightV9 from 'mapbox-gl-styles/styles/bright-v9.json';
 import backgroundStyle from './fixtures/background.json';
-import {defaultResolutions} from '../util';
+import {defaultResolutions} from '../src/util';
 delete brightV9.sprite;
 
 describe('ol-mapbox-style', function() {

test/stylefunction-utils.test.js

@@ -12,7 +12,7 @@ import {
   _fromTemplate as fromTemplate,
   _getValue as getValue,
   _functionCache as functionCache
-} from '../stylefunction';
+} from '../src/stylefunction';
 
 
 describe('utility functions currently in stylefunction.js', function() {

test/stylefunction.test.js

@@ -1,7 +1,7 @@
 import should from 'should';
 import deepFreeze from 'deep-freeze';
-import applyStyleFunction from '../stylefunction';
-import olms from '../index';
+import applyStyleFunction from '../src/stylefunction';
+import olms from '../src/index';
 import states from './fixtures/states.json';
 import Feature from 'ol/Feature';
 import VectorLayer from 'ol/layer/Vector';

tsconfig-build.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "ES5",
+    "module": "es2015",
+    "sourceMap": true,
+    "allowJs": true,
+    "importHelpers": false,
+  },
+  "include": [
+    "./src/**/*.js"
+  ],
+  "exclude": []
+}

tsconfig-typecheck.json

@@ -14,6 +14,6 @@
     ]
   },
   "include": [
-    "*.js"
+    "src/*.js"
   ]
 }

webpack.config.js → webpack.config.examples.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-/** Get the list of examples from the example directory.
+/** Get the list of examples from the examples directory.
  *
  *  @param {String} dirName - Name of the directory to read.
  *  @param {Function} callback - Function to execute for each example.
@@ -77,7 +77,7 @@ module.exports = (env, argv) => {
     context: __dirname,
     target: 'web',
     mode: prod ? 'production' : 'development',
-    entry: getEntries(path.resolve(__dirname, './example')),
+    entry: getEntries(path.resolve(path.join(__dirname, 'examples'))),
     optimization: {
       runtimeChunk: {
         name: 'common'
@@ -90,11 +90,11 @@ module.exports = (env, argv) => {
     },
     output: {
       filename: '[name].js',
-      path: path.join(__dirname, 'dist')
+      path: path.join(__dirname, 'dist', 'examples')
     },
     resolve: {
       alias: {
-        'ol-mapbox-style': path.join(__dirname, '.')
+        'ol-mapbox-style': path.join(__dirname, 'src')
       }
     },
     devtool: 'source-map',
@@ -112,7 +112,7 @@ module.exports = (env, argv) => {
           test: /\.js$/,
           include: [
             __dirname,
-            /node_modules\/(?!(ol|@mapbox\/mapbox-gl-style-spec)\/)/
+            /node_modules\/(?!(@mapbox\/mapbox-gl-style-spec)\/)/
           ],
           use: {
             loader: 'buble-loader'
@@ -129,16 +129,17 @@ module.exports = (env, argv) => {
       }),
       // ensure the data is copied over.
       // currently the index.html is manually created.
+      // @ts-ignore
       new CopyWebpackPlugin([
         {
-          from: path.resolve(__dirname, './example/data'),
+          from: path.resolve(__dirname, './examples/data'),
           to: 'data'
         },
         {
-          from: path.resolve(__dirname, './example/index.html'),
+          from: path.resolve(__dirname, './examples/index.html'),
           to: 'index.html'
         }
       ])
-    ].concat(getHtmlTemplates('./example'))
+    ].concat(getHtmlTemplates('./examples'))
   };
 };