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,18 +1,15 @@
 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");
 const { load } = require("js-yaml");
 
 const Timer = require("./Timer");
 const Visitor = require("./Visitor");
-const {
-  getPaths,
-  asyncReadFile,
-  asyncWriteFile,
-  getName,
-} = require("./helper/io-helper");
+const { getPaths, asyncReadFile, getName } = require("./helper/io-helper");
 
 /**
  * provides an instance which build html pages from handlebars templates, helpers and data
@@ -40,6 +37,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
@@ -443,7 +441,7 @@ module.exports = class Assemble {
 
     // only write to disc when the value changes
     if (html !== tpl.output)
-      await asyncWriteFile(targetDir, reldir, filename, html);
+      this._asyncWriteFile(targetDir, reldir, filename, html);
     tpl.output = html;
   }
 
@@ -622,4 +620,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),
@@ -63,6 +65,7 @@ class PvStylemarkPlugin {
       }
 
       if (buildLsg) {
+        updateFileSystemConnector(compiler.outputFileSystem);
         await buildStylemark({
           // unless files were changed but none was a static stylemark file
           shouldCopyStyleguideFiles: copyStylemarkFiles,