feat(pv-styleguide, assemble-lite): read and write to memory fs

when in memory file system is provided by webpack, lsg and assemble read and write the output to it.
compared to reading and writing to the actuall file system, this is slightly faster.

packages/assemble-lite/Assemble.js

@@ -1,5 +1,7 @@
 const { basename, relative, dirname, extname } = require("path");
+const { promisify } = require("util");
 const { readJson, readFile } = require("fs-extra");
+const fsExtra = require("fs-extra");
 const pvHandlebars = require("handlebars").create();
 const { loadFront } = require("yaml-front-matter");
 const handlebarsHelpers = require("handlebars-helpers/lib/index");
@@ -21,7 +23,7 @@ const {
  * @class Assemble
  */
 module.exports = class Assemble {
-  constructor({ verbose = false } = {}) {
+  constructor({ verbose = true } = {}) {
     // if `true`, it logs info when running
     this.verbose = verbose;
     // key, value pairs of the path to .hbs files for components, partials and pages which will be read an processed
@@ -39,6 +41,7 @@ module.exports = class Assemble {
     // it helps the user to not forget to fix stuff,
     // and sometimes a simple re-run might help. e.g. when there was a i/o issues
     this.failedPaths = [];
+    this.fs = fsExtra;
   }
 
   // console logs in verbose mode
@@ -448,7 +451,8 @@ module.exports = class Assemble {
         // only write to disc when the value changes
         if (html !== tpl.output.NORMAL)
           writingJobs.push(
-            asyncWriteFile(componentsTargetDirectory, reldir, filename, html)
+            // eslint-disable-next-line prettier/prettier
+            this._asyncWriteFile(componentsTargetDirectory, reldir, filename, html)
           );
 
         tpl.output.NORMAL = html;
@@ -461,7 +465,8 @@ module.exports = class Assemble {
         const html = layout ? layout.replace(/{%\s*body\s*%}/g, body) : body;
         if (html !== tpl.output.LSG)
           writingJobs.push(
-            asyncWriteFile(lsgComponentsTargetDirectory, reldir, filename, html)
+            // eslint-disable-next-line prettier/prettier
+            this._asyncWriteFile(lsgComponentsTargetDirectory, reldir, filename, html)
           );
         tpl.output.LSG = html;
       }
@@ -475,7 +480,8 @@ module.exports = class Assemble {
         : "";
       const html = layout ? layout.replace(/{%\s*body\s*%}/g, body) : body;
       if (html !== tpl.output.NORMAL)
-        await asyncWriteFile(pagesTargetDirectory, reldir, filename, html);
+        // eslint-disable-next-line prettier/prettier
+        await this._asyncWriteFile(pagesTargetDirectory, reldir, filename, html);
       tpl.output.NORMAL = html;
     }
   }
@@ -535,6 +541,7 @@ module.exports = class Assemble {
               filename,
             });
           }
+          // @TODO: .js files
         } catch (error) {
           console.error(
             `[assemble-lite] Failed reading data file ${basename(path)}`
@@ -657,4 +664,11 @@ module.exports = class Assemble {
         delete obj[key];
       });
   }
+
+  // writes to the content to the file system. depending on the setup this might be the real file system or one in memory.
+  async _asyncWriteFile(target, reldir, filename, markup) {
+    await promisify(this.fs.mkdir)(`${target}/${reldir}`, { recursive: true });
+    // eslint-disable-next-line prettier/prettier
+    await promisify(this.fs.writeFile)(`${target}/${reldir}/${filename}.html`, markup);
+  }
 };

packages/pv-stylemark/helper/io-helper.js

@@ -1,12 +1,20 @@
-const { ensureDir, writeFile: fsWriteFile, watchFile } = require("fs-extra");
+let fs = require("fs-extra");
+const { promisify } = require("util");
 const { glob } = require("glob");
 const { resolve, normalize } = require("path");
 
+// can override the filesystem api used to read and write files, e.g. using memfs via webpack.
+function updateFileSystemConnector(fileSystem) {
+  fs = fileSystem;
+}
+
+function readFile(...args) {
+  return promisify(fs.readFile)(...args);
+}
+
 const writeFile = async (target, reldir, filename, markup) => {
-  await ensureDir(`${target}/${reldir}`);
-  return await fsWriteFile(`${target}/${reldir}/${filename}.html`, markup, {
-    encoding: "utf8",
-  });
+  await promisify(fs.mkdir)(`${target}/${reldir}`, { recursive: true });
+  return promisify(fs.writeFile)(`${target}/${reldir}/${filename}.html`, markup);
 };
 
 const watchGlob = async (curGlob, callback) => {
@@ -15,11 +23,13 @@ const watchGlob = async (curGlob, callback) => {
   });
   const normalizedPaths = paths.map(filePath => normalize(resolve(process.cwd(), filePath)));
   normalizedPaths.forEach(path => {
-    watchFile(path, () => callback());
+    fs.watchFile(path, () => callback());
   });
 };
 
 module.exports = {
   writeFile,
   watchGlob,
+  updateFileSystemConnector,
+  readFile,
 };

packages/pv-stylemark/tasks/lsg/buildLsgExamples.js

@@ -1,12 +1,12 @@
 const { resolve } = require("path");
-const { readFile } = require("fs-extra");
+const { readFile: fsReadFile } = require("fs-extra");
 const hbsInstance = require("handlebars").create();
 
-const { writeFile } = require("../../helper/io-helper");
+const { writeFile, readFile } = require("../../helper/io-helper");
 const { resolveApp, getAppConfig, join } = require("../../helper/paths");
 
 const loadTemplate = async hbsInst => {
-  const templateContent = await readFile(resolve(__dirname, "../templates/lsg-example.hbs"), {
+  const templateContent = await fsReadFile(resolve(__dirname, "../templates/lsg-example.hbs"), {
     encoding: "utf-8",
   });
   return hbsInst.compile(templateContent);

packages/pv-stylemark/webpack-plugin/index.js

@@ -3,6 +3,7 @@ const Assemble = require("@pro-vision/assemble-lite/Assemble");
 const buildStylemark = require("../scripts/buildStylemarkLsg");
 const { getFilesToWatch, fileGlobes } = require("./getFilesToWatch");
 const { resolveApp, getAppConfig, join } = require("../helper/paths");
+const { updateFileSystemConnector } = require("../helper/io-helper");
 
 const { destPath, componentsSrc } = getAppConfig();
 class PvStylemarkPlugin {
@@ -43,6 +44,7 @@ class PvStylemarkPlugin {
       const buildLsg = buildAssemble || copyStylemarkFiles;
 
       if (buildAssemble) {
+        this.assemble.fs = compiler.outputFileSystem;
         await this.assemble.build(
           {
             baseDir: resolveApp(componentsSrc),
@@ -61,6 +63,7 @@ class PvStylemarkPlugin {
       }
 
       if (buildLsg) {
+        updateFileSystemConnector(compiler.outputFileSystem);
         await buildStylemark({
           // unless files were changed but none was a static stylemark file
           shouldCopyStyleguideFiles: copyStylemarkFiles,