Merge branch 'dev' into fix-1019

Author: sghoweri

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/docs/src/docs/advanced-config-options.md

@@ -45,6 +45,12 @@ Sets whether or not you want the styleguide to load with the pattern info open o
 
 **default**: `false`
 
+### defaultPatternInfoPanelCode (optional)
+
+Sets default active pattern info code panel by file extension - if unset, uses the value out of _patternExtension_ config value, or instead use value `html` to display the html code initially, or the value defined for the _patternExtension_.
+
+**default**: _patternExtension_ value (`"hbs"` | `"mustache"` | `"twig"` | `"html"`)
+
 ### ishControlsHide
 
 Sets whether or not to hide navigation options within the styleguide.

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/package.json

@@ -99,7 +99,7 @@
     "mini-css-extract-plugin": "^0.8.0",
     "mousetrap": "^1.6.3",
     "no-emit-webpack-plugin": "^1.0.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.14.1",
     "node-sass-selector-importer": "^5.2.0",
     "penthouse": "^2.2.2",
     "postcss-loader": "^3.0.0",

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,
@@ -83,7 +84,7 @@ function init(event) {
   Panels.add({
     id: 'pl-panel-html',
     name: 'HTML',
-    default: false,
+    default: window.config.defaultPatternInfoPanelCode && window.config.defaultPatternInfoPanelCode === 'html',
     templateID: 'pl-panel-template-code',
     httpRequest: true,
     httpRequestReplace: fileSuffixMarkup + '.html',

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js

@@ -20,17 +20,16 @@ import { NavItem } from './src/NavItem';
 class Nav extends BaseComponent {
   static is = 'pl-nav';
 
-  constructor(self) {
-    self = super(self);
-    self.toggleNavPanel = self.toggleNavPanel.bind(self);
-    self.toggleSpecialNavPanel = self.toggleSpecialNavPanel.bind(self);
-    self.handleClick = self.handleClick.bind(self);
-    self.handleURLChange = self.handleURLChange.bind(self);
-    self.handlePageClick = self.handlePageClick.bind(self);
-    self._hasInitiallyRendered = false;
-    self.receiveIframeMessage = self.receiveIframeMessage.bind(self);
-    self.useShadow = false;
-    return self;
+  constructor() {
+    super();
+    this.toggleNavPanel = this.toggleNavPanel.bind(this);
+    this.toggleSpecialNavPanel = this.toggleSpecialNavPanel.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleURLChange = this.handleURLChange.bind(this);
+    this.handlePageClick = this.handlePageClick.bind(this);
+    this._hasInitiallyRendered = false;
+    this.receiveIframeMessage = this.receiveIframeMessage.bind(this);
+    this.useShadow = false;
   }
 
   handlePageClick(e) {

packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js

@@ -17,29 +17,28 @@ import { BaseComponent } from '../base-component';
 class Search extends BaseComponent {
   static is = 'pl-search';
 
-  constructor(self) {
-    self = super(self);
-    self.useShadow = false;
-    self.defaultMaxResults = 10;
+  constructor() {
+    super();
+    this.useShadow = false;
+    this.defaultMaxResults = 10;
 
     // Autosuggest is a controlled component.
     // This means that you need to provide an input value
     // and an onChange handler that updates this value (see below).
     // Suggestions also need to be provided to the Autosuggest,
     // and they are initially empty because the Autosuggest is closed.
-    self.state = {
+    this.state = {
       value: '',
       suggestions: [],
       isFocused: false,
     };
 
-    self.receiveIframeMessage = self.receiveIframeMessage.bind(self);
-    self.onChange = self.onChange.bind(self);
-    self.toggleSearch = self.toggleSearch.bind(self);
-    self.closeSearch = self.closeSearch.bind(self);
-    self.renderInputComponent = self.renderInputComponent.bind(self);
-    self.openSearch = self.openSearch.bind(self);
-    return self;
+    this.receiveIframeMessage = this.receiveIframeMessage.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.toggleSearch = this.toggleSearch.bind(this);
+    this.closeSearch = this.closeSearch.bind(this);
+    this.renderInputComponent = this.renderInputComponent.bind(this);
+    this.openSearch = this.openSearch.bind(this);
   }
 
   connecting() {
@@ -61,10 +60,9 @@ class Search extends BaseComponent {
   }
 
   connected() {
-    const self = this;
     Mousetrap.bind('command+shift+f', function(e) {
       e.preventDefault();
-      self.toggleSearch();
+      this.toggleSearch();
     });
     window.addEventListener('message', this.receiveIframeMessage, false);
   }

packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js

@@ -11,12 +11,11 @@ import styles from './pl-drawer.scss?external';
 
 @customElement('pl-drawer')
 class Drawer extends LitElement {
-  constructor(self) {
-    self = super(self);
-    self.onMouseDown = self.onMouseDown.bind(self); // fix bindings so "self" works properly
-    self.onMouseUp = self.onMouseUp.bind(self); // fix bindings so "self" works properly
-    self.onMouseMove = self.onMouseMove.bind(self); // fix bindings so "this" works properly
-    return self;
+  constructor() {
+    super();
+    this.onMouseDown = this.onMouseDown.bind(this); // fix bindings so "this" works properly
+    this.onMouseUp = this.onMouseUp.bind(this); // fix bindings so "this" works properly
+    this.onMouseMove = this.onMouseMove.bind(this); // fix bindings so "this" works properly
   }
 
   connectedCallback() {