Merge commit 'f2824af7fd9c11b2c93b44da731ab345bf562d5d' into feature/uikit-refactor--reorganize-sass-imports-plus-bug-fixes

Author: sghoweri

.travis.yml

@@ -6,12 +6,12 @@ before_install:
 before_script:
   - npm install -g [email protected]
   - npm run bootstrap
-  - lerna add @pattern-lab/engine-mustache
-  - lerna add @pattern-lab/engine-handlebars
-  - lerna add @pattern-lab/engine-underscore
-  - lerna add @pattern-lab/engine-liquid
-  - lerna add @pattern-lab/engine-twig
-  - lerna add @pattern-lab/engine-react
+  - lerna add @pattern-lab/engine-mustache --scope=@pattern-lab/core
+  - lerna add @pattern-lab/engine-handlebars --scope=@pattern-lab/core
+  - lerna add @pattern-lab/engine-underscore --scope=@pattern-lab/core
+  - lerna add @pattern-lab/engine-liquid --scope=@pattern-lab/core
+  - lerna add @pattern-lab/engine-twig --scope=@pattern-lab/core
+  - lerna add @pattern-lab/engine-react --scope=@pattern-lab/core
 
 branches:
   only:

packages/engine-nunjucks/README.md

@@ -17,10 +17,10 @@ Level of Support is more or less full. Partial calls and lineage hunting are sup
 
 ## Extending the Nunjucks instance
 
-To add custom filters or make customizations to the nunjucks instance, create a file named `patternlab-nunjucks-config.js` in the root of your Pattern Lab project. `patternlab-nunjucks-config.js` should export a function that takes two parameters. The first parameter is the nunjucks instance; the second is the nunjucks instance's environment.
+To add custom filters or make customizations to the nunjucks instance, create a file named `patternlab-nunjucks-config.js` in the root of your Pattern Lab project. `patternlab-nunjucks-config.js` should export a function with the Nunjucks environment as parameter.
 
 ```
-module.exports = function (nunjucks, env) {
+module.exports = function (env) {
   [YOUR CUSTOM CODE HERE]
 };
 ```
@@ -30,7 +30,7 @@ Example: `patternlab-nunjucks-config.js` file that uses lodash and adds three cu
 var _shuffle = require('lodash/shuffle'),
   _take = require('lodash/take');
 
-exports = module.exports = function (nunjucks, env) {
+exports = module.exports = function (env) {
   env.addFilter('shorten', function (str, count) {
     return str.slice(0, count || 5);
   });

packages/engine-nunjucks/lib/engine_nunjucks.js

@@ -20,48 +20,43 @@
 
 'use strict';
 
-var fs = require('fs-extra'),
-  path = require('path'),
-  plPath = process.cwd(),
-  plConfig = require(path.join(plPath, 'patternlab-config.json')),
-  nunjucks = require('nunjucks'),
-  env = nunjucks.configure(plConfig.paths.source.patterns),
-  partialRegistry = [];
-
-////////////////////////////
-// LOAD ANY USER NUNJUCKS CONFIGURATIONS
-////////////////////////////
+const fs = require('fs-extra');
+const path = require('path');
+const plPath = process.cwd();
+const plConfig = require(path.join(plPath, 'patternlab-config.json'));
+const nunjucks = require('nunjucks');
+const partialRegistry = [];
+
+// Create Pattern Loader
+// Since Pattern Lab includes are not path based we need a custom loader for Nunjucks.
+function PatternLoader() {}
+
+PatternLoader.prototype.getSource = function(name) {
+  const fullPath = path.resolve(
+    plConfig.paths.source.patterns,
+    partialRegistry[name]
+  );
+  return {
+    src: fs.readFileSync(fullPath, 'utf-8'),
+    path: fullPath,
+  };
+};
+
+const env = new nunjucks.Environment(new PatternLoader());
+
+// Load any user Defined configurations
 try {
-  var nunjucksConfig = require(path.join(
+  const nunjucksConfig = require(path.join(
     plPath,
     'patternlab-nunjucks-config.js'
   ));
-  if (typeof nunjucksConfig == 'function') {
-    nunjucksConfig(nunjucks, env);
+  if (typeof nunjucksConfig === 'function') {
+    nunjucksConfig(env);
   }
 } catch (err) {}
 
-////////////////////////////
-// HELPER FUNCTIONS
-// https://stackoverflow.com/questions/2116558/fastest-method-to-replace-all-instances-of-a-character-in-a-string
-// Might do some research on the solution.
-////////////////////////////
-if (!String.prototype.replaceAll) {
-  String.prototype.replaceAll = function(str1, str2, ignore) {
-    return this.replace(
-      new RegExp(
-        str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, '\\$&'),
-        ignore ? 'gi' : 'g'
-      ),
-      typeof str2 == 'string' ? str2.replace(/\$/g, '$$$$') : str2
-    );
-  };
-}
-
-////////////////////////////
-// NUNJUCKS ENGINE
-////////////////////////////
-var engine_nunjucks = {
+// Nunjucks Engine
+const engine_nunjucks = {
   engine: nunjucks,
   engineName: 'nunjucks',
   engineFileExtension: '.njk',
@@ -77,25 +72,24 @@ var engine_nunjucks = {
   // render it
   renderPattern: function renderPattern(pattern, data) {
     try {
-      // replace pattern names with their full path so Nunjucks can find them.
-      pattern.extendedTemplate = this.replacePartials(pattern);
-      var result = nunjucks.renderString(pattern.extendedTemplate, data);
+      const result = env.renderString(pattern.extendedTemplate, data);
       return Promise.resolve(result);
     } catch (err) {
       console.error('Failed to render pattern: ' + pattern.name);
+      console.error(err);
     }
   },
 
   // find and return any Nunjucks style includes/imports/extends within pattern
   findPartials: function findPartials(pattern) {
-    var matches = pattern.template.match(this.findPartialsRE);
+    const matches = pattern.template.match(this.findPartialsRE);
     return matches;
   },
 
   // given a pattern, and a partial string, tease out the "pattern key" and return it.
   findPartial: function(partialString) {
     try {
-      var partial = partialString.match(this.findPartialKeyRE)[1];
+      let partial = partialString.match(this.findPartialKeyRE)[1];
       partial = partial.replace(/["']/g, '');
       return partial;
     } catch (err) {
@@ -116,38 +110,9 @@ var engine_nunjucks = {
     }
   },
 
-  replacePartials: function(pattern) {
-    try {
-      var partials = this.findPartials(pattern);
-      if (partials !== null) {
-        for (var i = 0; i < partials.length; i++) {
-          // e.g. {% include "atoms-parent" %}
-          var partialName = this.findPartial(partials[i]); // e.g. atoms-parent
-          var partialFullPath = partialRegistry[partialName]; // e.g. 00-atoms/01-parent.njk
-          var newPartial = partials[i].replaceAll(
-            partialName,
-            partialFullPath,
-            true
-          ); // e.g. {% include "00-atoms/01-parent.njk" %}
-          pattern.extendedTemplate = pattern.extendedTemplate.replaceAll(
-            partials[i],
-            newPartial,
-            true
-          );
-        }
-      }
-      return pattern.extendedTemplate;
-    } catch (err) {
-      console.error(
-        'Error occurred in replacing partial names with paths for patern: ' +
-          pattern.name
-      );
-    }
-  },
-
   // still requires the mustache syntax because of the way PL handles lists
   findListItems: function(pattern) {
-    var matches = pattern.template.match(this.findListItemsRE);
+    const matches = pattern.template.match(this.findListItemsRE);
     return matches;
   },
 
@@ -168,7 +133,6 @@ var engine_nunjucks = {
       fs.statSync(metaFilePath);
     } catch (err) {
       //not a file, so spawn it from the included file
-      const localMetaFilePath = path.resolve(__dirname, '_meta/', fileName);
       const metaFileContent = fs.readFileSync(
         path.resolve(__dirname, '..', '_meta/', fileName),
         'utf8'

packages/engine-nunjucks/package.json

@@ -7,8 +7,8 @@
   "deprecated": false,
   "description": "The nunjucks PatternEngine for Pattern Lab / Node",
   "dependencies": {
-    "fs-extra": "5.0.0",
-    "nunjucks": "3.0.1"
+    "fs-extra": "7.0.0",
+    "nunjucks": "3.1.3"
   },
   "engines": {
     "node": ">=4.0"

packages/uikit-workshop/dist/index.html

@@ -5,7 +5,8 @@
   "main": "gulpfile.js",
   "scripts": {
     "build": "webpack-cli --config webpack.config.js --progress",
-    "watch": "webpack-cli --config webpack.config.js --progress --watch"
+    "watch": "webpack-cli --config webpack.config.js --progress --watch",
+    "test": "npm run build -- --bail"
   },
   "authors": [
     {

packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js

@@ -1,3 +1,3 @@
 <pre class="language-markup">
-	<code id="pl-code-fill-{{ language }}" class="language-{{ language }}">{{{ code }}}</code>
+<code id="pl-code-fill-{{ language }}" class="language-{{ language }}">{{{ code }}}</code>
 </pre>

packages/uikit-workshop/package.json

@@ -99,7 +99,14 @@ import Mousetrap from 'mousetrap';
     killDisco();
     killHay();
     fullMode = false;
-    sizeiframe(getRandom(minViewportWidth, 500));
+    sizeiframe(
+      getRandom(
+        minViewportWidth,
+        config.ishViewportRange !== undefined
+          ? parseInt(config.ishViewportRange.s[1])
+          : 500
+      )
+    );
   }
 
   $('#pl-size-s').on('click', function(e) {
@@ -119,10 +126,12 @@ import Mousetrap from 'mousetrap';
     fullMode = false;
     sizeiframe(
       getRandom(
-        minViewportWidth,
         config.ishViewportRange !== undefined
-          ? parseInt(config.ishViewportRange.s[1])
-          : 500
+          ? parseInt(config.ishViewportRange.m[0])
+          : 500,
+        config.ishViewportRange !== undefined
+          ? parseInt(config.ishViewportRange.m[1])
+          : 800
       )
     );
   }
@@ -133,7 +142,7 @@ import Mousetrap from 'mousetrap';
   });
 
   Mousetrap.bind('ctrl+shift+m', function(e) {
-    goLarge();
+    goMedium();
     return false;
   });
 
@@ -147,9 +156,7 @@ import Mousetrap from 'mousetrap';
         config.ishViewportRange !== undefined
           ? parseInt(config.ishViewportRange.l[0])
           : 800,
-        config.ishViewportRange !== undefined
-          ? parseInt(config.ishViewportRange.l[1])
-          : 1200
+        maxViewportWidth
       )
     );
   }