Skip to content
This repository was archived by the owner on Dec 10, 2019. It is now read-only.

Commit 9d0eff3

Browse files
committed
Merge remote-tracking branch 'remotes/upstream/pattern-engines' into pattern-engines
Conflicts: builder/object_factory.js builder/parameter_hunter.js builder/pattern_assembler.js builder/patternlab.js
2 parents f54db83 + c6cbcdb commit 9d0eff3

25 files changed

+618
-220
lines changed

.travis.yml

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
language: node_js
22

33
node_js:
4-
- 4.1
5-
- 4.0
64
- 0.12
75
- 0.11
86

CHANGELOG

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
22

3+
PL-node-v0.14.0
4+
- ADD: Support for style modifiers
5+
- ADD: Support for styleGuideExcludes
6+
- THX: Thanks to @bramsmulders for the styleGuideExcludes pull request and @illepic for the original headsup
7+
- FIX: Fix an issue where listitem blocks would only render if the pattern containing the block had a partial within it
8+
9+
PL-node-v0.13.1
10+
- FIX: Allow verbose partials for list items
11+
- THX: Thanks @e2tha-e
12+
313
PL-node-v0.13.0
414
- FIX: Cleanup an old file and an incorrect entry in the .gitignore file
515
- CHG: Change order of pattern addition and ~variant pattern addition so they build naturally in the menu.

Gruntfile.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ module.exports = function(grunt) {
5151
list_item_hunter: {
5252
src: './builder/list_item_hunter.js',
5353
dest: './builder/list_item_hunter.js'
54+
},
55+
style_modifier_hunter: {
56+
src: './builder/style_modifier_hunter.js',
57+
dest: './builder/style_modifier_hunter.js'
5458
}
5559
},
5660
copy: {

README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ This repository contains the vanilla builder logic, grunt and gulp configuration
1010

1111
* Download the [latest release of patternlab-node](https://github.com/pattern-lab/patternlab-node/releases/latest) from Github
1212
* Via npm, run `npm install patternlab-node` (Note this will auto install the grunt version currently. see below)
13+
* **NOTE** Node version 4.X is not officially supported yet, citing [a lot of Windows issues](https://github.com/nodejs/node-gyp/issues/629), including [mine](https://github.com/pattern-lab/patternlab-node/issues/162). Upgrade node at your own risk until otherwise stated.
1314

1415
### Choose Your Adventure! Now Vanilla, Grunt & Gulp
1516

@@ -142,6 +143,18 @@ If you'd like to exclude an individual pattern you can do so by prepending the f
142143

143144
You can also exclude complete directories by prepending the directory name with an underscore, like: `/_experiment/...`
144145

146+
##### Style Guide Excludes
147+
148+
Exclude whole pattern types from the "All patterns" styleguide by adding entries to `config.json`. This is quite useful to make speedier. Pattern Lab Node ships with the following:
149+
150+
```
151+
"styleGuideExcludes": [
152+
"templates",
153+
"pages"
154+
]
155+
```
156+
157+
145158
##### Debug Mode
146159
`patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets.
147160

@@ -178,6 +191,32 @@ Pattern parameters **do not** currently support the following:
178191

179192
You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
180193

194+
##### Pattern Style Modifiers
195+
Style Modifiers allow you to create a base pattern that you can easily modify by adding a class name to the pattern partial. Read more about them [here](http://patternlab.io/docs/pattern-stylemodifier.html), including support with pattern parameters. Below is the gist.
196+
197+
The basic syntax is this:
198+
199+
```
200+
{{> atoms-message:error }}
201+
```
202+
203+
This works by using a reserved mustache variable of sorts called {{ styleModifier }} applied to the atoms-message mustache file itself:
204+
205+
```
206+
<div class="message {{ styleModifier }}">{{ message }}</div>
207+
```
208+
209+
Once rendered, it looks like this:
210+
211+
```
212+
<div>
213+
<div class="message error"></div>
214+
</div>
215+
```
216+
217+
218+
219+
181220
##### Pseudo-Patterns
182221
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.
183222

builder/lineage_hunter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* patternlab-node - v0.13.0 - 2015
2+
* patternlab-node - v0.14.0 - 2015
33
*
44
* Brian Muenzenmeyer, and the web community.
55
* Licensed under the MIT license.

builder/list_item_hunter.js

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* patternlab-node - v0.13.0 - 2015
2+
* patternlab-node - v0.14.0 - 2015
33
*
44
* Brian Muenzenmeyer, and the web community.
55
* Licensed under the MIT license.
@@ -15,81 +15,87 @@
1515

1616
var extend = require('util')._extend,
1717
pa = require('./pattern_assembler'),
18+
smh = require('./style_modifier_hunter'),
1819
mustache = require('mustache'),
1920
pattern_assembler = new pa(),
20-
items = [ 'zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen','twenty'];
21+
style_modifier_hunter = new smh(),
22+
items = [ 'zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen','twenty'];
2123

2224
function processListItemPartials(pattern, patternlab){
23-
//find any listitem blocks
24-
var matches = pattern_assembler.find_list_items(pattern, patternlab);
25+
//find any listitem blocks
26+
var matches = pattern_assembler.find_list_items(pattern, patternlab);
2527
if(matches !== null){
2628
matches.forEach(function(liMatch, index, matches){
2729

28-
if(patternlab.config.debug){
29-
console.log('found listItem of size ' + liMatch + ' inside ' + pattern.key);
30-
}
30+
if(patternlab.config.debug){
31+
console.log('found listItem of size ' + liMatch + ' inside ' + pattern.key);
32+
}
3133

32-
//find the boundaries of the block
33-
var loopNumberString = liMatch.split('.')[1].split('}')[0].trim();
34-
var end = liMatch.replace('#', '/');
35-
var patternBlock = pattern.template.substring(pattern.template.indexOf(liMatch) + liMatch.length, pattern.template.indexOf(end)).trim();
34+
//find the boundaries of the block
35+
var loopNumberString = liMatch.split('.')[1].split('}')[0].trim();
36+
var end = liMatch.replace('#', '/');
37+
var patternBlock = pattern.template.substring(pattern.template.indexOf(liMatch) + liMatch.length, pattern.template.indexOf(end)).trim();
38+
//build arrays that repeat the block, however large we need to
39+
var repeatedBlockTemplate = [];
40+
var repeatedBlockHtml = '';
41+
for(var i = 0; i < items.indexOf(loopNumberString); i++){
42+
repeatedBlockTemplate.push(patternBlock);
43+
}
3644

37-
//build arrays that repeat the block, however large we need to
38-
var repeatedBlockTemplate = [];
39-
var repeatedBlockHtml = '';
40-
for(var i = 0; i < items.indexOf(loopNumberString); i++){
41-
repeatedBlockTemplate.push(patternBlock);
42-
}
45+
//check for a local listitems.json file
46+
var listData = JSON.parse(JSON.stringify(patternlab.listitems));
47+
listData = pattern_assembler.merge_data(listData, pattern.listitems);
4348

44-
//check for a local listitems.json file
45-
var listData = JSON.parse(JSON.stringify(patternlab.listitems));
46-
listData = pattern_assembler.merge_data(listData, pattern.patternSpecificListJson);
49+
//iterate over each copied block, rendering its contents along with pattenlab.listitems[i]
50+
for(var i = 0; i < repeatedBlockTemplate.length; i++){
4751

48-
//iterate over each copied block, rendering its contents along with pattenlab.listitems[i]
49-
for(var i = 0; i < repeatedBlockTemplate.length; i++){
52+
var thisBlockTemplate = repeatedBlockTemplate[i];
53+
var thisBlockHTML = "";
5054

51-
var thisBlockTemplate = repeatedBlockTemplate[i];
52-
var thisBlockHTML = "";
55+
//combine listItem data with pattern data with global data
56+
var itemData = listData['' + items.indexOf(loopNumberString)]; //this is a property like "2"
57+
var globalData = JSON.parse(JSON.stringify(patternlab.data));
58+
var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
5359

54-
//combine listItem data with pattern data with global data
55-
var itemData = listData['' + items.indexOf(loopNumberString)]; //this is a property like "2"
56-
var globalData = JSON.parse(JSON.stringify(patternlab.data));
57-
var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
60+
var allData = pattern_assembler.merge_data(globalData, localData);
61+
allData = pattern_assembler.merge_data(allData, itemData != undefined ? itemData[i] : {}); //itemData could be undefined if the listblock contains no partial, just markup
62+
allData.link = extend({}, patternlab.data.link);
5863

59-
var allData = pattern_assembler.merge_data(globalData, localData);
60-
allData = pattern_assembler.merge_data(allData, itemData[i]);
61-
allData.link = extend({}, patternlab.data.link);
64+
//check for partials within the repeated block
65+
var foundPartials = pattern_assembler.find_pattern_partials({ 'template' : thisBlockTemplate });
6266

63-
//check for partials within the repeated block
64-
var foundPartials = pattern_assembler.find_pattern_partials({ 'template' : thisBlockTemplate });
67+
if(foundPartials && foundPartials.length > 0){
6568

66-
if(foundPartials && foundPartials.length > 0){
69+
for(var j = 0; j < foundPartials.length; j++){
6770

68-
for(var j = 0; j < foundPartials.length; j++){
71+
//get the partial
72+
var partialName = foundPartials[j].match(/([\w\-\.\/~]+)/g)[0];
73+
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
6974

70-
//get the partial
71-
var partialName = foundPartials[j].match(/([a-z-]+)/ig)[0];
72-
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
75+
//if partial has style modifier data, replace the styleModifier value
76+
if(pattern.stylePartials && pattern.stylePartials.length > 0){
77+
style_modifier_hunter.consume_style_modifier(partialPattern, foundPartials[j], patternlab);
78+
}
7379

74-
//replace its reference within the block with the extended template
75-
thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
76-
}
80+
//replace its reference within the block with the extended template
81+
thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
82+
}
7783

78-
//render with data
79-
thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
84+
//render with data
85+
thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
8086

81-
} else{
82-
//just render with mergedData
83-
thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
84-
}
87+
} else{
88+
//just render with mergedData
89+
thisBlockHTML = pattern_assembler.renderPattern(thisBlockTemplate, allData, patternlab.partials);
90+
}
8591

86-
//add the rendered HTML to our string
87-
repeatedBlockHtml = repeatedBlockHtml + thisBlockHTML;
88-
}
92+
//add the rendered HTML to our string
93+
repeatedBlockHtml = repeatedBlockHtml + thisBlockHTML;
94+
}
8995

90-
//replace the block with our generated HTML
91-
var repeatingBlock = pattern.extendedTemplate.substring(pattern.extendedTemplate.indexOf(liMatch), pattern.extendedTemplate.indexOf(end) + end.length);
92-
pattern.extendedTemplate = pattern.extendedTemplate.replace(repeatingBlock, repeatedBlockHtml);
96+
//replace the block with our generated HTML
97+
var repeatingBlock = pattern.extendedTemplate.substring(pattern.extendedTemplate.indexOf(liMatch), pattern.extendedTemplate.indexOf(end) + end.length);
98+
pattern.extendedTemplate = pattern.extendedTemplate.replace(repeatingBlock, repeatedBlockHtml);
9399

94100
});
95101
}

builder/media_hunter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* patternlab-node - v0.13.0 - 2015
2+
* patternlab-node - v0.14.0 - 2015
33
*
44
* Brian Muenzenmeyer, and the web community.
55
* Licensed under the MIT license.

builder/object_factory.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/*
2-
* patternlab-node - v0.13.0 - 2015
3-
*
1+
/*
2+
* patternlab-node - v0.14.0 - 2015
3+
*
44
* Brian Muenzenmeyer, and the web community.
55
* Licensed under the MIT license.
66
*

builder/parameter_hunter.js

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/*
2-
* patternlab-node - v0.13.0 - 2015
3-
*
1+
/*
2+
* patternlab-node - v0.14.0 - 2015
3+
*
44
* Brian Muenzenmeyer, and the web community.
55
* Licensed under the MIT license.
66
*
@@ -14,19 +14,20 @@
1414
var parameter_hunter = function(){
1515

1616
var extend = require('util')._extend,
17-
pa = require('./pattern_assembler'),
18-
mustache = require('mustache'),
19-
pattern_assembler = new pa();
17+
pa = require('./pattern_assembler'),
18+
mustache = require('mustache'),
19+
smh = require('./style_modifier_hunter'),
20+
style_modifier_hunter = new smh(),
21+
pattern_assembler = new pa();
2022

2123
function findparameters(pattern, patternlab){
2224

23-
//find the {{> template-name(*) }} within patterns
24-
var matches = pattern.template.match(/{{>([ ]+)?([\w\-\.\/~]+)(\()(.+)(\))([ ]+)?}}/g);
25-
if(matches !== null){
25+
if(pattern.parameteredPartials && pattern.parameteredPartials.length > 0){
2626
//compile this partial immeadiately, essentially consuming it.
27-
matches.forEach(function(pMatch, index, matches){
28-
//find the partial's name
27+
pattern.parameteredPartials.forEach(function(pMatch, index, matches){
28+
//find the partial's name and retrieve it
2929
var partialName = pMatch.match(/([\w\-\.\/~]+)/g)[0];
30+
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
3031

3132
if(patternlab.config.debug){
3233
console.log('found patternParameters for ' + partialName);
@@ -40,13 +41,17 @@
4041
//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
4142
var paramData = eval(paramString);
4243

43-
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
4444
var globalData = JSON.parse(JSON.stringify(patternlab.data));
45-
var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
45+
var localData = JSON.parse(JSON.stringify(pattern.jsonFileData || {}));
4646

4747
var allData = pattern_assembler.merge_data(globalData, localData);
4848
allData = pattern_assembler.merge_data(allData, paramData);
4949

50+
//if partial has style modifier data, replace the styleModifier value
51+
if(pattern.stylePartials && pattern.stylePartials.length > 0){
52+
style_modifier_hunter.consume_style_modifier(partialPattern, pMatch, patternlab);
53+
}
54+
5055
//extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally
5156
allData.link = extend({}, patternlab.data.link);
5257

0 commit comments

Comments
 (0)