Improve example-builder code

Reduce amount of async calls and some other small changes

examples/templates/example.html

@@ -170,7 +170,9 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
     <script src="./resources/prism/prism-1.20.0.min.js"></script>
     <script src="./resources/common.js"></script>
-    {{{ js.tag }}}
+{{#each js.scripts}}
+    <script src="{{{ . }}}"></script>
+{{/each}}
     <script>
       $('#tag-example-list').on('show.bs.modal', function (event) {
         const button = $(event.relatedTarget); // Button that triggered the modal

examples/webpack/example-builder.js

@@ -23,15 +23,8 @@ const exampleDirContents = fs
   .filter((name) => /^(?!index).*\.html$/.test(name))
   .map((name) => name.replace(/\.html$/, ''));
 
-let cachedPackageInfo = null;
+function getPackageInfo() {
-async function getPackageInfo() {
+  return fse.readJSON(path.resolve(baseDir, '../../package.json'));
-  if (cachedPackageInfo) {
-    return cachedPackageInfo;
-  }
-  cachedPackageInfo = await fse.readJSON(
-    path.resolve(baseDir, '../../package.json')
-  );
-  return cachedPackageInfo;
 }
 
 handlebars.registerHelper(
@@ -200,17 +193,15 @@ export default class ExampleBuilder {
     }
 
     const exampleData = await Promise.all(
-      names.map(async (name) => await this.parseExample(dir, name))
+      names.map((name) => this.parseExample(dir, name))
     );
 
-    const examples = exampleData.map((data) => {
+    const examples = exampleData.map((data) => ({
-      return {
+      link: data.filename,
-        link: data.filename,
+      title: data.title,
-        title: data.title,
+      shortdesc: data.shortdesc,
-        shortdesc: data.shortdesc,
+      tags: data.tags,
-        tags: data.tags,
+    }));
-      };
-    });
 
     examples.sort((a, b) =>
       a.title.localeCompare(b.title, 'en', {sensitivity: 'base'})
@@ -239,9 +230,10 @@ export default class ExampleBuilder {
       });
     });
 
+    const pkg = await getPackageInfo();
     await Promise.all(
       exampleData.map(async (data) => {
-        const newAssets = await this.render(data);
+        const newAssets = await this.render(data, pkg);
         for (const file in newAssets) {
           assets[file] = new RawSource(newAssets[file]);
         }
@@ -256,25 +248,18 @@ export default class ExampleBuilder {
     const htmlName = `${name}.html`;
     const htmlPath = path.join(dir, htmlName);
     const htmlSource = await fse.readFile(htmlPath, {encoding: 'utf8'});
-
+    const {attributes: data, body} = frontMatter(
-    const jsName = `${name}.js`;
+      this.ensureNewLineAtEnd(htmlSource)
-    const jsPath = path.join(dir, jsName);
+    );
-    const jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
+    assert(!!data.layout, `missing layout in ${htmlPath}`);
-
+    return Object.assign(data, {
-    const {attributes, body} = frontMatter(htmlSource);
+      contents: body,
-    assert(!!attributes.layout, `missing layout in ${htmlPath}`);
+      filename: htmlName,
-    const data = Object.assign(attributes, {contents: body});
+      dir: dir,
-
+      name: name,
-    const pkg = await getPackageInfo();
+      // process tags
-    data.olVersion = pkg.version;
+      tags: data.tags ? data.tags.replace(/[\s"]+/g, '').split(',') : [],
-    data.filename = htmlName;
+    });
-    data.dir = dir;
-    data.name = name;
-    data.jsSource = jsSource;
-
-    // process tags
-    data.tags = data.tags ? data.tags.replace(/[\s"]+/g, '').split(',') : [];
-    return data;
   }
 
   transformJsSource(source) {
@@ -289,24 +274,29 @@ export default class ExampleBuilder {
     );
   }
 
+  /**
+   * @param {string} source Source file
+   * @param {Array<{key: string, value: string}>|undefined} cloak Replacement rules
+   * @return {string} The source with all keys replaced by value
+   */
   cloakSource(source, cloak) {
     if (cloak) {
       for (const entry of cloak) {
-        source = source.replace(new RegExp(entry.key, 'g'), entry.value);
+        source = source.replaceAll(entry.key, entry.value);
       }
     }
     return source;
   }
 
-  async render(data) {
+  async render(data, pkg) {
     const assets = {};
     const readOptions = {encoding: 'utf8'};
 
     // add in script tag
     const jsName = `${data.name}.js`;
-    const jsSource = this.transformJsSource(
+    const jsPath = path.join(data.dir, jsName);
-      this.cloakSource(data.jsSource, data.cloak)
+    let jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
-    );
+    jsSource = this.transformJsSource(this.cloakSource(jsSource, data.cloak));
     data.js = {
       tag: `<script src="${this.common}.js"></script>
         <script src="${jsName}"></script>`,
@@ -339,7 +329,7 @@ export default class ExampleBuilder {
       );
     }
 
-    const pkg = await getPackageInfo();
+    data.olVersion = pkg.version;
     data.pkgJson = JSON.stringify(
       {
         name: data.name,
@@ -376,7 +366,6 @@ export default class ExampleBuilder {
 
     // add additional resources
     if (data.resources) {
-      const pkg = await getPackageInfo();
       const localResources = [];
       const remoteResources = [];
       data.resources.forEach((resource) => {