feat(plugin-tab, core): initial plugin hook exploration

Author: bmuenzenmeyer

packages/core/src/lib/compose.js

@@ -167,36 +167,57 @@ module.exports = function(pattern, patternlab) {
           allFooterData.cacheBuster = patternlab.cacheBuster;
           allFooterData.patternLabFoot = footerPartial;
 
-          return render(patternlab.userFoot, allFooterData).then(footerHTML => {
-            ///////////////
-            // WRITE FILES
-            ///////////////
-
-            patternlab.events.emit(
-              events.PATTERNLAB_PATTERN_WRITE_BEGIN,
-              patternlab,
-              pattern
-            );
-
-            //write the compiled template to the public patterns directory
-            patternlab.writePatternFiles(
-              headHTML,
-              pattern,
-              footerHTML,
-              uikit.outputDir
-            );
-
-            patternlab.events.emit(
-              events.PATTERNLAB_PATTERN_WRITE_END,
-              patternlab,
-              pattern
-            );
-
-            // Allows serializing the compile state
-            patternlab.graph.node(pattern).compileState = pattern.compileState =
-              CompileState.CLEAN;
-            logger.info('Built pattern: ' + pattern.patternPartial);
-          });
+          return render(patternlab.userFoot, allFooterData).then(
+            async footerHTML => {
+              ///////////////
+              // WRITE FILES
+              ///////////////
+
+              patternlab.events.emit(
+                events.PATTERNLAB_PATTERN_WRITE_BEGIN,
+                patternlab,
+                pattern
+              );
+
+              //write the compiled template to the public patterns directory
+              patternlab.writePatternFiles(
+                headHTML,
+                pattern,
+                footerHTML,
+                uikit.outputDir
+              );
+
+              patternlab.events.emit(
+                events.PATTERNLAB_PATTERN_WRITE_END,
+                patternlab,
+                pattern
+              );
+
+              console.log(196);
+
+              (async function() {
+                const hookHandlers = patternlab.hooks[
+                  events.PATTERNLAB_PATTERN_WRITE_END
+                ].forEach(h => h());
+                console.log(203, hookHandlers.length);
+
+                const results = await Promise.all(hookHandlers);
+                console.log(205, results);
+              })();
+
+              console.log(208);
+
+              await patternlab.hooks[events.PATTERNLAB_PATTERN_WRITE_END];
+
+              console.log(212);
+
+              // Allows serializing the compile state
+              patternlab.graph.node(
+                pattern
+              ).compileState = pattern.compileState = CompileState.CLEAN;
+              logger.info('Built pattern: ' + pattern.patternPartial);
+            }
+          );
         })
         .catch(reason => {
           console.log(reason);

packages/core/src/lib/patternlab.js

@@ -64,6 +64,9 @@ module.exports = class PatternLab {
     // Make ye olde event emitter
     this.events = new PatternLabEventEmitter();
 
+    this.hooks = {};
+    this.hooks[events.PATTERNLAB_PATTERN_WRITE_END] = [];
+
     // Make a place for the pattern graph to sit
     this.graph = null;
 

packages/development-edition-engine-handlebars/package.json

@@ -32,6 +32,7 @@
     "@pattern-lab/engine-handlebars": "^2.0.1",
     "@pattern-lab/engine-mustache": "^2.0.1-alpha.0",
     "@pattern-lab/starterkit-mustache-demo": "^5.0.0",
-    "@pattern-lab/uikit-workshop": "^1.0.3"
+    "@pattern-lab/uikit-workshop": "^1.0.3",
+    "@pattern-lab/plugin-tab": "2.0.3-beta.1"
   }
 }

packages/development-edition-engine-handlebars/patternlab-config.json

@@ -90,5 +90,14 @@
     "handlebars": {
       "extend": "helpers/*.js"
     }
+  },
+  "plugins": {
+    "pattern-lab-plugin-tab": {
+      "enabled": true,
+      "initialized": false,
+      "options": {
+        "tabsToAdd": ["scss"]
+      }
+    }
   }
 }

packages/development-edition-engine-handlebars/source/_patterns/atoms/swatches/swatch.hbs

@@ -3,3 +3,4 @@
   <span class="sg-label {{#if inverted}}sg-label__inverted{{/if}} sg-label__bottom">hex: {{color.hex}}</span>
   <span class="sg-label {{#if inverted}}sg-label__inverted{{/if}} sg-label__bottom">cmyk: {{color.cmyk}}</span>
 </div>
+swatch

packages/development-edition-engine-handlebars/source/_patterns/atoms/swatches/swatch.scss

@@ -0,0 +1,3 @@
+* {
+  color: rebeccapurple
+}

packages/plugin-tab/index.js

@@ -34,8 +34,8 @@ function writeConfigToOutput(patternlab, pluginConfig) {
   }
 }
 
-function onPatternIterate(patternlab, pattern) {
-  tab_loader(patternlab, pattern);
+async function onPatternIterate(patternlab, pattern) {
+  await tab_loader(patternlab, pattern);
 }
 
 /**
@@ -48,6 +48,10 @@ function registerEvents(patternlab) {
   patternlab.events.on('patternlab-pattern-write-end', onPatternIterate);
 }
 
+function registerEventHandlers(patternlab) {
+  patternlab.hooks['patternlab-pattern-write-end'].push(onPatternIterate);
+}
+
 /**
  * A single place to define the frontend configuration
  * This configuration is outputted to the frontend explicitly as well as included in the plugins object.
@@ -169,7 +173,8 @@ function pluginInit(patternlab) {
     !patternlab.config.plugins[pluginName].initialized
   ) {
     //register events
-    registerEvents(patternlab);
+    //registerEvents(patternlab);
+    registerEventHandlers(patternlab);
 
     //set the plugin initialized flag to true to indicate it is installed and ready
     patternlab.config.plugins[pluginName].initialized = true;

packages/plugin-tab/src/tab-loader.js

@@ -11,7 +11,7 @@ const fs = require('fs-extra');
  * @param patternlab - the global data store
  * @param pattern - the pattern object being iterated over
  */
-function findTab(patternlab, pattern) {
+async function findTab(patternlab, pattern) {
   //read the filetypes from the configuration
   const fileTypes =
     patternlab.config.plugins['@pattern-lab/plugin-tab'].options.tabsToAdd;