Add worker support to examples

examples/resources/common.js

@@ -57,6 +57,8 @@
       event.preventDefault();
       const html = document.getElementById('example-html-source').innerText;
       const js = document.getElementById('example-js-source').innerText;
+      const workerContainer = document.getElementById('example-worker-source');
+      const worker = workerContainer ? workerContainer.innerText : undefined;
       const pkgJson = document.getElementById('example-pkg-source').innerText;
       const form = document.getElementById('codepen-form');
 
@@ -68,8 +70,7 @@
 
       Promise.all(promises)
         .then(results => {
-          const data = {
+          const files = {
-            files: {
             'index.html': {
               content: html
             },
@@ -82,7 +83,14 @@
             'sandbox.config.json': {
               content: '{"template": "parcel"}'
             }
+          };
+          if (worker) {
+            files['worker.js'] = {
+              content: worker
             }
+          }
+          const data = {
+            files: files
           };
 
           for (let i = 0; i < localResources.length; i++) {

examples/templates/example.html

@@ -160,6 +160,14 @@
         <pre><legend>index.js</legend><code id="example-js-source" class="language-js">import 'ol/ol.css';
 {{ js.source }}</code></pre>
       </div>
+{{#if worker.source}}
+      <div class="row-fluid">
+        <div class="source-controls">
+          <a class="copy-button" id="copy-worker-button" data-clipboard-target="#example-worker-source"><i class="fa fa-clipboard"></i> Copy</a>
+        </div>
+        <pre><legend>worker.js</legend><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
+      </div>
+{{/if}}
       <div class="row-fluid">
         <div class="source-controls">
           <a class="copy-button" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard"></i> Copy</a>
@@ -167,7 +175,6 @@
         <pre><legend>package.json</legend><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
       </div>
     </div>
-
     <script src="./resources/common.js"></script>
     <script src="./resources/prism/prism.min.js"></script>
     {{{ js.tag }}}

examples/webpack/example-builder.js

@@ -208,6 +208,10 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
       jsSource = jsSource.replace(new RegExp(entry.key, 'g'), entry.value);
     }
   }
+  // Remove worker loader import and modify `new Worker()` to add source
+  jsSource = jsSource.replace(/import Worker from 'worker-loader![^\n]*\n/g, '');
+  jsSource = jsSource.replace('new Worker()', 'new Worker(\'./worker.js\')');
+
   data.js = {
     tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`,
     source: jsSource
@@ -218,9 +222,33 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
     data.js.tag = prelude + data.js.tag;
   }
 
+  // check for worker js
+  const workerName = `${name}.worker.js`;
+  const workerPath = path.join(dir, workerName);
+  let workerSource;
+  try {
+    workerSource = await readFile(workerPath, readOptions);
+  } catch (err) {
+    // pass
+  }
+  if (workerSource) {
+    // remove "../src/" prefix and ".js" to have the same import syntax as the documentation
+    workerSource = workerSource.replace(/'\.\.\/src\//g, '\'');
+    workerSource = workerSource.replace(/\.js';/g, '\';');
+    if (data.cloak) {
+      for (const entry of data.cloak) {
+        workerSource = workerSource.replace(new RegExp(entry.key, 'g'), entry.value);
+      }
+    }
+    data.worker = {
+      source: workerSource
+    };
+    assets[workerName] = workerSource;
+  }
+
   data.pkgJson = JSON.stringify({
     name: name,
-    dependencies: getDependencies(jsSource),
+    dependencies: getDependencies(jsSource + workerSource ? `\n${workerSource}` : ''),
     devDependencies: {
       parcel: '1.11.0'
     },