From 7404397529d83f00fc2a8f983e9b2fd7232da622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Mon, 8 Aug 2022 22:13:48 +0200
Subject: [PATCH 1/2] Improve example-builder code

Reduce amount of async calls and some other small changes
---
 examples/templates/example.html     |  4 +-
 examples/webpack/example-builder.js | 79 +++++++++++++----------------
 2 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/examples/templates/example.html b/examples/templates/example.html
index 5a0493d975..6e894f0ec7 100644
--- a/examples/templates/example.html
+++ b/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
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 305e598bc0..4494f8d1aa 100644
--- a/examples/webpack/example-builder.js
+++ b/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;
-async function getPackageInfo() {
-  if (cachedPackageInfo) {
-    return cachedPackageInfo;
-  }
-  cachedPackageInfo = await fse.readJSON(
-    path.resolve(baseDir, '../../package.json')
-  );
-  return cachedPackageInfo;
+function getPackageInfo() {
+  return fse.readJSON(path.resolve(baseDir, '../../package.json'));
 }
 
 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) => {
-      return {
-        link: data.filename,
-        title: data.title,
-        shortdesc: data.shortdesc,
-        tags: data.tags,
-      };
-    });
+    const examples = exampleData.map((data) => ({
+      link: data.filename,
+      title: data.title,
+      shortdesc: data.shortdesc,
+      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 jsName = `${name}.js`;
-    const jsPath = path.join(dir, jsName);
-    const jsSource = await fse.readFile(jsPath, {encoding: 'utf8'});
-
-    const {attributes, body} = frontMatter(htmlSource);
-    assert(!!attributes.layout, `missing layout in ${htmlPath}`);
-    const data = Object.assign(attributes, {contents: body});
-
-    const pkg = await getPackageInfo();
-    data.olVersion = pkg.version;
-    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;
+    const {attributes: data, body} = frontMatter(
+      this.ensureNewLineAtEnd(htmlSource)
+    );
+    assert(!!data.layout, `missing layout in ${htmlPath}`);
+    return Object.assign(data, {
+      contents: body,
+      filename: htmlName,
+      dir: dir,
+      name: name,
+      // process tags
+      tags: data.tags ? data.tags.replace(/[\s"]+/g, '').split(',') : [],
+    });
   }
 
   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(
-      this.cloakSource(data.jsSource, data.cloak)
-    );
+    const jsPath = path.join(data.dir, jsName);
+    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) => {

From 2c9cf00126dae2938eeb411d525959ca2ae13975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Mon, 8 Aug 2022 22:17:17 +0200
Subject: [PATCH 2/2] Fix source formatting for some examples

For some css or html files a missing new line at end of file will
concatenate the last line with the following style or script tag
---
 examples/webpack/example-builder.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 4494f8d1aa..e2172a005d 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -262,6 +262,13 @@ export default class ExampleBuilder {
     });
   }
 
+  ensureNewLineAtEnd(source) {
+    if (source[source.length - 1] !== '\n') {
+      source += '\n';
+    }
+    return source;
+  }
+
   transformJsSource(source) {
     return (
       source
@@ -298,8 +305,7 @@ export default class ExampleBuilder {
     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>`,
+      scripts: [`${this.common}.js`, jsName],
       source: jsSource,
     };
 
@@ -359,7 +365,7 @@ export default class ExampleBuilder {
     if (cssSource) {
       data.css = {
         tag: `<link rel="stylesheet" href="${cssName}">`,
-        source: cssSource,
+        source: this.ensureNewLineAtEnd(cssSource),
       };
       assets[cssName] = cssSource;
     }