Use more structured yaml for examples source path

examples/external-map.html

@@ -6,7 +6,7 @@ docs: >
   Move a map to a seperate window.
 tags: "external, window"
 sources:
-  - resources/external-map-map.html
+  - path: resources/external-map-map.html
 ---
 <div id="map" class="map"></div>
 <input id="external-map-button" type="button" value="Open external map"></input>

examples/offscreen-canvas.html

@@ -7,7 +7,8 @@ docs: >
 tags: "worker, offscreencanvas, vector-tiles"
 experimental: true
 sources:
-  - offscreen-canvas.worker.js as worker.js
+  - path: 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/

examples/webpack/example-builder.js

@@ -314,9 +314,8 @@ export default class ExampleBuilder {
     let jsSources = jsSource;
     if (data.sources) {
       data.extraSources = await Promise.all(
-        data.sources.map(async (fileName) => {
+        data.sources.map(async (sourceConfig) => {
-          const as = fileName.split(/ +as +/);
+          const fileName = sourceConfig.path;
-          fileName = as[0];
           const extraSourcePath = path.join(data.dir, fileName);
           let source = await fse.readFile(extraSourcePath, readOptions);
           let ext = fileName.match(/\.(\w+)$/)[1];
@@ -330,7 +329,7 @@ export default class ExampleBuilder {
           source = this.cloakSource(source, data.cloak);
           assets[fileName] = source;
           return {
-            name: as[1] || fileName,
+            name: sourceConfig.as ?? fileName,
             source: source,
             type: ext,
           };