Configure additional sources displayed below map

examples/external-map.html

@@ -5,7 +5,9 @@ shortdesc: Move a map to a seperate window.
 docs: >
   Move a map to a seperate window.
 tags: "external, window"
+sources:
+  - resources/external-map-map.html
 ---
 <div id="map" class="map"></div>
 <input id="external-map-button" type="button" value="Open external map"></input>
-<span id="blocker-notice" hidden>Could not open map in external window. If you are using an popup or ad blocker you may need to disable it for this example.</span>
+<span id="blocker-notice" hidden>Could not open map in external window. If you are using a popup or ad blocker you may need to disable it for this example.</span>

examples/offscreen-canvas.html

@@ -6,10 +6,11 @@ docs: >
   The map in this example is rendered in a web worker, using `OffscreenCanvas`. **Note:** This is currently only supported in Chrome and Edge.
 tags: "worker, offscreencanvas, vector-tiles"
 experimental: true
+sources:
+  - offscreen-canvas.worker.js as worker.js
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
-
 ---
 <div id="map" class="map">
   <pre id="info" class="info"/>

examples/templates/example.html

@@ -211,13 +211,12 @@
 &lt;/html&gt;</code></pre>
       </div>
 
-{{#if worker.source}}
-      <div class="row-fluid">
-        <h5 class="source-heading">worker.js</h5>
-        <pre><code id="example-worker-source" class="language-js">{{ worker.source }}</code></pre>
+{{#each extraSources}}
+      <div class="row-fluid extra-source">
+        <h5 class="source-heading">{{./name}}</h5>
+        <pre><code class="language-{{./type}}">{{ ./source }}</code></pre>
       </div>
-{{/if}}
-
+{{/each}}
       <div class="row-fluid">
         <h5 class="source-heading">package.json</h5>
         <pre><code id="example-pkg-source" class="language-json">{{ pkgJson }}</code></pre>

examples/webpack/example-builder.js

@@ -311,33 +311,38 @@ export default class ExampleBuilder {
       source: jsSource,
     };
 
-    // check for worker js
-    const workerName = `${data.name}.worker.js`;
-    const workerPath = path.join(data.dir, workerName);
-    let workerSource;
-    try {
-      workerSource = await fse.readFile(workerPath, readOptions);
-    } catch (err) {
-      // pass
-    }
-    if (workerSource) {
-      workerSource = this.transformJsSource(
-        this.cloakSource(workerSource, data.cloak)
+    let jsSources = jsSource;
+    if (data.sources) {
+      data.extraSources = await Promise.all(
+        data.sources.map(async (fileName) => {
+          const as = fileName.split(/ +as +/);
+          fileName = as[0];
+          const extraSourcePath = path.join(data.dir, fileName);
+          let source = await fse.readFile(extraSourcePath, readOptions);
+          let ext = fileName.match(/\.(\w+)$/)[1];
+          if (ext === 'mjs') {
+            ext = 'js';
+          }
+          if (ext === 'js') {
+            source = this.transformJsSource(source);
+            jsSources += '\n' + source;
+          }
+          source = this.cloakSource(source, data.cloak);
+          assets[fileName] = source;
+          return {
+            name: as[1] || fileName,
+            source: source,
+            type: ext,
+          };
+        })
       );
-      data.worker = {
-        source: workerSource,
-      };
-      assets[workerName] = workerSource;
     }
 
     const pkg = await getPackageInfo();
     data.pkgJson = JSON.stringify(
       {
         name: data.name,
-        dependencies: getDependencies(
-          jsSource + (workerSource ? `\n${workerSource}` : ''),
-          pkg
-        ),
+        dependencies: getDependencies(jsSources, pkg),
         devDependencies: {
           parcel: '^2.0.0',
         },