From 05f13bb363371a32cd98d8a4daddece6ec107fbc Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Wed, 15 May 2019 16:49:38 -0600
Subject: [PATCH] Add worker loader to the examples

---
 examples/webpack/config.js        | 11 +++++++++-
 examples/webpack/worker-loader.js | 16 ++++++++++++++
 examples/worker.html              | 10 +++++++++
 examples/worker.js                | 35 +++++++++++++++++++++++++++++++
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 examples/webpack/worker-loader.js
 create mode 100644 examples/worker.html
 create mode 100644 examples/worker.js

diff --git a/examples/webpack/config.js b/examples/webpack/config.js
index a7ea23a2a4..6121b4b66f 100644
--- a/examples/webpack/config.js
+++ b/examples/webpack/config.js
@@ -19,16 +19,25 @@ module.exports = {
   context: src,
   target: 'web',
   entry: entry,
+  stats: 'minimal',
   module: {
     rules: [{
+      test: /\.js$/,
       use: {
         loader: 'buble-loader'
       },
-      test: /\.js$/,
       include: [
         path.join(__dirname, '..', '..', 'src'),
         path.join(__dirname, '..')
       ]
+    }, {
+      test: /\.js$/,
+      use: {
+        loader: path.join(__dirname, './worker-loader.js')
+      },
+      include: [
+        path.join(__dirname, '../../src/ol/worker')
+      ]
     }]
   },
   optimization: {
diff --git a/examples/webpack/worker-loader.js b/examples/webpack/worker-loader.js
new file mode 100644
index 0000000000..b8d10eae09
--- /dev/null
+++ b/examples/webpack/worker-loader.js
@@ -0,0 +1,16 @@
+const build = require('../../tasks/serialize-workers').build;
+
+function loader() {
+  const callback = this.async();
+
+  build(this.resource, {minify: false})
+    .then(chunk => {
+      for (const filePath in chunk.modules) {
+        this.addDependency(filePath);
+      }
+      callback(null, chunk.code);
+    })
+    .catch(callback);
+}
+
+module.exports = loader;
diff --git a/examples/worker.html b/examples/worker.html
new file mode 100644
index 0000000000..cc794a6a94
--- /dev/null
+++ b/examples/worker.html
@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Worker
+shortdesc: This example should be deleted.
+docs: >
+  When you move the map, a message is sent to a worker.  In response, the woker sends a
+  message back with the version identifier.
+tags: "worker"
+---
+<div id="map" class="map"></div>
diff --git a/examples/worker.js b/examples/worker.js
new file mode 100644
index 0000000000..5324c040b4
--- /dev/null
+++ b/examples/worker.js
@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import {create as createVersionWorker} from '../src/ol/worker/version';
+
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+const worker = createVersionWorker();
+worker.addEventListener('error', function(error) {
+  console.error('worker error', error);
+});
+
+worker.addEventListener('message', function(event) {
+  console.log('message from worker:', event.data);
+});
+
+map.on('moveend', function(event) {
+  const state = event.frameState.viewState;
+  worker.postMessage({zoom: state.zoom, center: state.center});
+});