Make sure every uikit is going to be reset when the frontend is build. (#1139)

* Make sure every uikit is going to be reset when the frontend is built.
* Make export data uikit sensible.
* #1139: Fix failing tests

Co-authored-by: Hydraner <drupal@pascalcrott.del>
Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Co-authored-by: Josef Bredreck <slime.games@outlook.de>

Author: 4 people

packages/core/src/lib/exportData.js

@@ -1,8 +1,7 @@
 'use strict';
 
-const eol = require('os').EOL;
 const path = require('path');
-const _ = require('lodash');
+const eol = require('os').EOL;
 
 const ae = require('./annotation_exporter');
 
@@ -12,7 +11,7 @@ let fs = require('fs-extra'); //eslint-disable-line prefer-const
  * Write out our pattern information for use by the front end
  * @param patternlab - global data store
  */
-module.exports = function(patternlab) {
+module.exports = function(patternlab, uikit) {
   const annotation_exporter = new ae(patternlab);
 
   const paths = patternlab.config.paths;
@@ -71,42 +70,38 @@ module.exports = function(patternlab) {
   const annotationsJSON = annotation_exporter.gather();
   const annotations =
     'var comments = { "comments" : ' + JSON.stringify(annotationsJSON) + '};';
-  _.each(patternlab.uikits, uikit => {
-    fs.outputFileSync(
-      path.resolve(
-        path.join(
-          process.cwd(),
-          uikit.outputDir,
-          paths.public.annotations,
-          'annotations.js'
-        )
-      ),
-      annotations
-    );
-  });
+  fs.outputFileSync(
+    path.resolve(
+      path.join(
+        process.cwd(),
+        uikit.outputDir,
+        paths.public.annotations,
+        'annotations.js'
+      )
+    ),
+    annotations
+  );
 
   // add module.export to the Nodejs-specific file generated.
   const exportedOutput =
     output +
     'module.exports = { config, ishControls, navItems, patternPaths, viewAllPaths, plugins, defaultShowPatternInfo, defaultPattern };';
 
   //write all output to patternlab-data
-  _.each(patternlab.uikits, uikit => {
-    fs.outputFileSync(
-      path.resolve(
-        path.join(process.cwd(), uikit.outputDir, paths.public.data),
-        'patternlab-data.js'
-      ),
-      output
-    );
-    fs.outputFileSync(
-      path.resolve(
-        path.join(process.cwd(), uikit.outputDir, paths.public.data),
-        'patternlab-data.cjs.js'
-      ),
-      exportedOutput
-    );
-  });
+  fs.outputFileSync(
+    path.resolve(
+      path.join(process.cwd(), uikit.outputDir, paths.public.data),
+      'patternlab-data.js'
+    ),
+    output
+  );
+  fs.outputFileSync(
+    path.resolve(
+      path.join(process.cwd(), uikit.outputDir, paths.public.data),
+      'patternlab-data.cjs.js'
+    ),
+    exportedOutput
+  );
 
   return output;
 };

packages/core/src/lib/ui_builder.js

@@ -755,17 +755,18 @@ const ui_builder = function() {
 
   /**
    * The main entry point for ui_builder
-   *
-   * @param patternlab - global data store
+   * @param patternlabGlobal - global data store
    * @returns {Promise} a promise fulfilled when build is complete
    */
-  function buildFrontend(patternlab) {
-    resetUIBuilderState(patternlab);
+  function buildFrontend(patternlabGlobal) {
+    const paths = patternlabGlobal.config.paths;
 
-    const paths = patternlab.config.paths;
+    const uikitPromises = _.map(patternlabGlobal.uikits, uikit => {
+      //we need to make sure the patternlab object gets manipulated per uikit
+      const patternlab = Object.assign({}, patternlabGlobal);
 
-    const uikitPromises = _.map(patternlab.uikits, uikit => {
-      // determine which patterns should be included in the front-end rendering
+      resetUIBuilderState(patternlab);
+      //determine which patterns should be included in the front-end rendering
       const styleguidePatterns = groupPatterns(patternlab, uikit);
 
       return new Promise(resolve => {
@@ -891,8 +892,8 @@ const ui_builder = function() {
                       patternlabSiteHtml
                     );
 
-                    // write out patternlab.data object to be read by the client
-                    exportData(patternlab);
+                    //write out patternlab.data object to be read by the client
+                    exportData(patternlab, uikit);
                     resolve();
                   })
                   .catch(reason => {

packages/core/test/exportData_tests.js

@@ -20,48 +20,77 @@ exportData.__set__({
   fs: fsMock,
 });
 
-const patternlab = util.fakePatternLab(testPatternsPath);
-const result = exportData(patternlab);
+const uikitFoo = {
+  name: 'uikit-foo',
+  enabled: true,
+  outputDir: 'foo',
+  excludedPatternStates: ['legacy'],
+  excludedTags: ['baz'],
+};
 
 tap.test('exportData exports config', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('config') > -1, true);
   test.equals(result.indexOf('paths') > -1, true);
   test.equals(result.indexOf('theme') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports ishControls', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('ishControlsHide') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports navItems', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('patternTypes') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports patternPaths', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('patternPaths') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports viewAllPaths', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('viewAllPaths') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports plugins', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('plugins') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports defaultShowPatternInfo', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('defaultShowPatternInfo') > -1, true);
   test.equals(result.indexOf('"defaultShowPatternInfo":false') > -1, true);
   test.end();
 });
 
 tap.test('exportData exports defaultPattern', function(test) {
+  const patternlab = util.fakePatternLab(testPatternsPath);
+  const result = exportData(patternlab, uikitFoo);
+
   test.equals(result.indexOf('defaultPattern') > -1, true);
   test.equals(result.indexOf('"defaultPattern":"all"') > -1, true);
   test.end();

packages/plugin-tab/src/snippet.js

@@ -1,13 +1,15 @@
 window.patternlab.panels.add({
   id: 'sg-panel-<<type>>',
   name: '<<typeUC>>',
-  default: window.config.defaultPatternInfoPanelCode && window.config.defaultPatternInfoPanelCode === "<<type>>",
+  default:
+    window.config.defaultPatternInfoPanelCode &&
+    window.config.defaultPatternInfoPanelCode === '<<type>>',
   templateID: 'pl-panel-template-code',
   httpRequest: true,
   httpRequestReplace: '.<<type>>',
   httpRequestCompleted: false,
   prismHighlight: true,
-  language: '<<type>>'//,
+  language: '<<type>>', //,
   /* TODO: We would need to find a way to enable keyCombo for multiple panels
   keyCombo: 'ctrl+shift+z',*/
 });

packages/uikit-workshop/src/scripts/components/panels.js

@@ -68,9 +68,10 @@ function init(event) {
   Panels.add({
     id: 'pl-panel-pattern',
     name: window.config.patternExtension.toUpperCase(),
-    default: !window.config.defaultPatternInfoPanelCode ||
-              window.config.defaultPatternInfoPanelCode ===
-              window.config.patternExtension,
+    default:
+      !window.config.defaultPatternInfoPanelCode ||
+      window.config.defaultPatternInfoPanelCode ===
+        window.config.patternExtension,
     templateID: 'pl-panel-template-code',
     httpRequest: true,
     httpRequestReplace: fileSuffixPattern,