Merge pull request #132 from pattern-lab/dev

Dev to Master

Author: Brian Muenzenmeyer

.jslintrc

@@ -0,0 +1,36 @@
+{
+    "ass": false,
+    "bitwise": false,
+    "browser": false,
+    "closure": false,
+    "continue": false,
+    "couch": false,
+    "debug": false,
+    "devel": true,
+    "eqeq": false,
+    "eval": true,
+    "evil": false,
+    "forin": false,
+    "indent": 2,
+    "maxerr": 50,
+    "maxlen": false,
+    "newcap": false,
+    "node": true,
+    "nomen": false,
+    "passfail": false,
+    "plusplus": false,
+    "predef": [
+        "node",
+        "$",
+        "require"
+    ],
+    "regexp": false,
+    "rhino": false,
+    "sloppy": false,
+    "stupid": false,
+    "sub": false,
+    "todo": false,
+    "unparam": true,
+    "vars": false,
+    "white": true
+}

CHANGELOG

@@ -1,4 +1,13 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
+PL-node-v0.10.0
+ - ADD: Added support for pattern parameters! Resolves #88
+ - FIX: Data inheritance is now working as advertised. Resolves #127. This turned out to be a MAJOR thing, as I realized the home-page was not passing down any of its json data to partials.
+ - CHG: Refactored a lot of code out of patternlab.js and into separate files. Doing so should make everything dryer, more unit testable, and easier to understand I hope.
+ - ADD: Added proper styling for the homepage-emergency alert that is displayed for demo purposes
+ - ADD: Added a new comment organism, the sticky comment, to ship an example of pattern parameters
+ - CHG: Start some JS linting of the project. I don't quite agree with a lot of it, so am trying to set some smart configurations
+ - CHG: Wrapped some build messages in the patternlab.config.debug flag
+ - FIX: Allow users to set a base url path. Resolves #125 ([)testing in the while requested)
 
 PL-node-v0.9.1
  - FIX: Fixed an issue with view all navigation not checking for index out of bounds cases
@@ -7,7 +16,7 @@ PL-node-v0.9.0
  - FIX: Added grunt-contrib-copy args to copy all found source/css/*.css
  - ADD: Added upgrade instructions to README
  - FIX: Fix issue with styleguide accordions not closing upon click of a sibling menu.
- - THX: @getsetbro for reporting more issues :) 
+ - THX: @getsetbro for reporting more issues :)
  - ADD: Added support for pattern search. This is 'in beta' and should have more testing applied to it.
  - ADD: Added support for all keyboard shortcuts found in PL-PHP-v1.0.0
  - FIX: Fixed an issue where Hay mode and Disco mode did not stop one another when using keyboard shortcuts
@@ -63,7 +72,7 @@ PL-node-v0.1.3
 
 PL-node-v0.1.2
  - ADD: Abstracted template rendering into a function for easier swapping of rendering engine
- - ADD: Smarter filtering of files to support other templates Thanks 
+ - ADD: Smarter filtering of files to support other templates Thanks
  - ADD: Help command line agument
  - ADD: Version command line argument
  - ADD: Patterns only command line argument
@@ -102,7 +111,7 @@ PL-node-v0.0.5
 
 PL-node-v0.0.4
  - ADD: An explicit MIT license
- - FIX: Clean public/patterns/ before build 
+ - FIX: Clean public/patterns/ before build
 
 PL-node-v0.0.3
  - FIX: Install documentation was incomplete, should not have assumed grunt
@@ -114,4 +123,4 @@ PL-node-v0.0.2
  - FIX: Grunt watching styleguide scss
 
 PL-node-v0.0.1
- - Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build an atomic design-driven website.
+ - Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build an atomic design-driven website.

Gruntfile.js

@@ -32,9 +32,21 @@ module.exports = function(grunt) {
 				src: './builder/patternlab_grunt.js',
 				dest: './builder/patternlab_grunt.js'
 			},
+			parameter_hunter: {
+				src: './builder/parameter_hunter.js',
+				dest: './builder/parameter_hunter.js'
+			},
 			pattern_exporter: {
 				src: './builder/pattern_exporter.js',
 				dest: './builder/pattern_exporter.js'
+			},
+			pattern_assembler: {
+				src: './builder/pattern_assembler.js',
+				dest: './builder/pattern_assembler.js'
+			},
+			pseudopattern_hunter: {
+				src: './builder/pseudopattern_hunter.js',
+				dest: './builder/pseudopattern_hunter.js'
 			}
 		},
 		copy: {
@@ -125,4 +137,4 @@ module.exports = function(grunt) {
 
 	grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);
 
-};
+};

README.md

@@ -1,12 +1,12 @@
-[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node) 
+[![Build Status](https://travis-ci.org/pattern-lab/patternlab-node.png?branch=master)](https://travis-ci.org/pattern-lab/patternlab-node)
 
 ## About the Node Version of Pattern Lab
 
 The Node version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the [Mustache](http://mustache.github.io/)-based patterns and the JavaScript-based viewer, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, the Node version of Pattern Lab strongly separates patterns, data, and presentation from build logic. The Node version is a work in progress, the [PHP version](https://github.com/pattern-lab/patternlab-php) should be seen as a reference for other developers to improve upon as they build their own Pattern Lab Builders in their language of choice.
 
 ### Getting Started
 
-To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: 
+To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in:
 
 1. `npm install`
 2. `npm install -g grunt-cli`
@@ -73,6 +73,25 @@ Pattern states should be lowercase and use hyphens where spaces are present.
 }
 ```
 
+##### Pattern Parameters
+attern parameters are a simple mechanism for replacing Mustache variables via attributes on a pattern partial tag rather than having to use a pattern-specific json file. They are especially useful when you want to supply distinct values for Mustache variables in a specific pattern partial instance that may be included multiple times in a molecule, template, or page.
+
+The basic syntax is this:
+
+```
+{{> molecules-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}
+```
+
+The attributes listed in the pattern parameters should match Mustache variable names in your pattern. The values listed for each attribute will replace the Mustache variables. Again, pattern parameters are a simple find and replace of Mustache variables with the supplied values.
+
+Pattern parameters **do not** currently support the following:
+
+* sub-lists (e.g. iteration of a section),
+* and the use of long strings of text can be unwieldy
+* nested properties within the parameter data, such as `{{> molecules-single-comment(foo.bar: 'baz') }}`
+
+You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
+
 ##### Pseudo-Patterns
 Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns.
 
@@ -139,7 +158,7 @@ As you can see, it's a much easier way of linking patterns to one another.
 
 
 ##### Pattern Export
-`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory. 
+`config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.
 
 ```
 "patternExportKeys": ["molecules-primary-nav", "organisms-header", "organisms-header"],
@@ -148,6 +167,15 @@ As you can see, it's a much easier way of linking patterns to one another.
 
 Coupled with exported css (much easier to extract with existing tools like [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy)), pattern export can help to maintain the relevancy of the design system by directly placing partials in a directory of your choosing.
 
+##### baseurl
+
+If your instance of Pattern Lab lives in a subdirectory of your server, for instance on github pages (ex: yourusername.github.io/patterns-demo/), then add the baseurl here. The baseurl is everything after the hostname - ie: `patterns-demo`
+
+```
+"baseurl" : "/patterns-demo"
+```
+
+Default: blank
 
 ##### Verbose Mode
 `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
@@ -165,7 +193,7 @@ You can find some simple upgrade documenation in it's current home here (unrelea
 
 ### Forward, To the Specification!
 
-Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together. 
+Dave Olsen has published the [specification](https://github.com/pattern-lab/the-spec/blob/draft/SPEC.md) for Pattern Lab ports. Development will be oriented toward compliance with this as the spec and the port mature together.
 
 ### Is Pattern Lab a Platform or a Build Tool?
 
@@ -219,7 +247,7 @@ By default, the Pattern Lab assets can be manually generated and the Pattern Lab
 * [Watching for Changes and Auto-Regenerating Patterns](http://patternlab.io/docs/advanced-auto-regenerate.html) - Node version coming soon
 * [Auto-Reloading the Browser Window When Changes Are Made](http://patternlab.io/docs/advanced-reload-browser.html) - Node version coming soon
 * [Multi-browser & Multi-device Testing with Page Follow](http://patternlab.io/docs/advanced-page-follow.html)
-* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html) 
+* [Keyboard Shortcuts](http://patternlab.io/docs/advanced-keyboard-shortcuts.html)
 * [Special Pattern Lab-specific Query String Variables ](http://patternlab.io/docs/pattern-linking.html)
 * [Preventing the Cleaning of public/](http://patternlab.io/docs/advanced-clean-public.html) - Node version coming soon
 * [Modifying the Pattern Lab Nav](http://patternlab.io/docs/advanced-pattern-lab-nav.html) - Node version coming soon

builder/lineage_hunter.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.9.1 - 2015 
+ * patternlab-node - v0.10.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -15,12 +15,15 @@
 
 		function findlineage(pattern, patternlab){
 
+			var pa = require('./pattern_assembler');
+			var pattern_assembler = new pa();
+
 			//find the {{> template-name }} within patterns
-			var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ]+)}}/g);
+			var matches = pattern_assembler.find_pattern_partials(pattern);
 			if(matches !== null){
 				matches.forEach(function(match, index, matches){
 					//strip out the template cruft
-					var foundPattern = match.replace("{{> ", "").replace(" }}", "");
+					var foundPattern = match.replace("{{> ", "").replace(" }}", "").replace("{{>", "").replace("}}", "");
 
 					//add if it doesnt exist
 					if (pattern.lineageIndex.indexOf(foundPattern) === -1){
@@ -71,4 +74,4 @@
 
 	module.exports = lineage_hunter;
 
-}());
+}());

builder/media_hunter.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.9.1 - 2015 
+ * patternlab-node - v0.10.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -12,8 +12,8 @@
 	"use strict";
 
 	var diveSync = require('diveSync'),
-		path = require('path'),
-		fs = require('fs-extra');
+	path = require('path'),
+	fs = require('fs-extra');
 
 	var media_hunter = function(){
 
@@ -32,7 +32,7 @@
 						}
 					}
 				}
-			});	
+			});
 			//alpha sort for now, but should meet most use-cases except greater than 100ems. you are using ems right?
 			patternlab.mediaQueries.sort();
 		}
@@ -48,22 +48,3 @@
 	module.exports = media_hunter;
 
 }());
-
-	// protected function gatherMQs() {
-		
-	// 	$mqs = array();
-		
-	// 	foreach(glob($this->sd."/css/*.css") as $filename) {
-	// 		$data    = file_get_contents($filename);
-	// 		preg_match_all("/(min|max)-width:([ ]+)?(([0-9]{1,5})(\.[0-9]{1,20}|)(px|em))/",$data,$matches);
-	// 		foreach ($matches[3] as $match) {
-	// 			if (!in_array($match,$mqs)) {
-	// 				$mqs[] = $match;
-	// 			}
-	// 		}	
-	// 	}
-		
-	// 	sort($mqs);
-	// 	return $mqs;
-		
-	// }

builder/object_factory.js

@@ -1,5 +1,5 @@
 /* 
- * patternlab-node - v0.9.1 - 2015 
+ * patternlab-node - v0.10.0 - 2015 
  * 
  * Brian Muenzenmeyer, and the web community.
  * Licensed under the MIT license. 
@@ -16,6 +16,7 @@
     this.subdir = subdir;
     this.name = subdir.replace(/[\/\\]/g, '-') + '-' + this.fileName; //this is the unique name with the subDir
     this.data =  data || null;
+    this.jsonFileData = {};
     this.patternName = this.fileName.substring(this.fileName.indexOf('-') + 1); //this is the display name for the ui
     this.patternLink = this.name + '/' + this.name + '.html';
     this.patternGroup = this.name.substring(this.name.indexOf('-') + 1, this.name.indexOf('-', 4) + 1 - this.name.indexOf('-') + 1);
@@ -59,4 +60,4 @@
     oNavSubItem: oNavSubItem
   };
 
-}());
+}());

builder/parameter_hunter.js

@@ -0,0 +1,77 @@
+/* 
+ * patternlab-node - v0.10.0 - 2015 
+ * 
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license. 
+ * 
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ *
+ */
+
+(function () {
+	"use strict";
+
+	var parameter_hunter = function(){
+
+		var extend = require('util')._extend,
+		pa = require('./pattern_assembler'),
+		mustache = require('mustache'),
+		pattern_assembler = new pa();
+
+		function findparameters(pattern, patternlab){
+
+			//find the {{> template-name(*) }} within patterns
+			var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(\()(.+)(\))([ ]+)?}}/g);
+			if(matches !== null){
+				matches.forEach(function(pMatch, index, matches){
+					//find the partial's name
+					var partialName = pMatch.match(/([a-z-]+)/ig)[0]
+
+					if(patternlab.config.debug){
+						console.log('found patternParameters for ' + partialName);
+					}
+
+					//strip out the additional data and eval
+					var leftParen = pMatch.indexOf('(');
+					var rightParen = pMatch.indexOf(')');
+					var paramString =  '({' + pMatch.substring(leftParen + 1, rightParen) + '})';
+
+					//do no evil. there is no good way to do this that I can think of without using a split, which then makes commas and colons special characters and unusable within the pattern params
+					var paramData = eval(paramString);
+
+					//compile this partial immeadiately, essentially consuming it.
+					//TODO: see how this affects lineage. perhaps add manually here.
+					var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
+					var existingData = pattern.data || patternlab.data;
+
+					//merge paramData with any other data that exists.
+					for (var prop in paramData) {
+						if (existingData.hasOwnProperty(prop)) {
+							existingData[prop] = paramData[prop];
+						}
+					}
+
+					//extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally
+					existingData.link = extend({}, patternlab.data.link);
+					var renderedPartial = pattern_assembler.renderPattern(partialPattern.extendedTemplate, existingData, patternlab.partials);
+
+					//remove the parameter from the partial and replace it with the rendered partial + paramData
+					pattern.extendedTemplate = pattern.extendedTemplate.replace(pMatch, renderedPartial);
+
+					//TODO: lineage is missing for this pattern
+
+				});
+			}
+		}
+
+		return {
+			find_parameters: function(pattern, patternlab){
+				findparameters(pattern, patternlab);
+			}
+		};
+
+	};
+
+	module.exports = parameter_hunter;
+
+}());