Skip to content

Commit

Permalink
Merge pull request #132 from pattern-lab/dev
Browse files Browse the repository at this point in the history
Dev to Master
  • Loading branch information
Brian Muenzenmeyer committed Aug 1, 2015
2 parents 721ffe7 + 8175083 commit f5219c9
Show file tree
Hide file tree
Showing 28 changed files with 554 additions and 211 deletions.
36 changes: 36 additions & 0 deletions .jslintrc
Original file line number Diff line number Diff line change
@@ -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
}
17 changes: 13 additions & 4 deletions CHANGELOG
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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.
14 changes: 13 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -125,4 +137,4 @@ module.exports = function(grunt) {

grunt.registerTask('serve', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']);

};
};
38 changes: 33 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -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`
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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"],
Expand All @@ -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.
Expand All @@ -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?

Expand Down Expand Up @@ -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
Expand Down
11 changes: 7 additions & 4 deletions builder/lineage_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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){
Expand Down Expand Up @@ -71,4 +74,4 @@

module.exports = lineage_hunter;

}());
}());
27 changes: 4 additions & 23 deletions builder/media_hunter.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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(){

Expand All @@ -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();
}
Expand All @@ -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;

// }
5 changes: 3 additions & 2 deletions builder/object_factory.js
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
Expand Down Expand Up @@ -59,4 +60,4 @@
oNavSubItem: oNavSubItem
};

}());
}());
77 changes: 77 additions & 0 deletions builder/parameter_hunter.js
Original file line number Diff line number Diff line change
@@ -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;

}());
Loading

0 comments on commit f5219c9

Please sign in to comment.