New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pattern Lab Node v1.1.0 #243

Merged
merged 55 commits into from Feb 9, 2016
Commits
File filter...
Filter file types
Jump to file or symbol
Failed to load files and symbols.
+1,899 −4,011
Diff settings

Always

Just for now

Copy path View file
@@ -18,3 +18,5 @@ public/styleguide/css/static.css.map
public/styleguide/css/styleguide-specific.css.map
public/styleguide/css/styleguide.css.map
source/css/style.css.map
.idea/
public/styleguide/
Copy path View file
@@ -1,5 +1,29 @@
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.

PL-node-v1.1.0
- FIX: Fixed issue where partials containing styleModifiers with integers were not found correctly under all circumstances
- FIX: Fixed issue where excluded patterns were still rendered on the Pattern Lab site. Now they do not directly get rendered via the menu, view all links, or the styleguide, but are accessible for inclusion as pattern partials, and can be accessed via lineage.
- THX: Thanks @theorise for reporting these issues.
- THX: Thanks @dmolsen for input on desired behavior.
- FIX: Fixed issue where style modifier partials within list item blocks where not uniquely being applied. this seems like a regression. added a unit test with fix
- ADD: Added fuzzy pattern matching support based on patternType-substring(patternName) to align with PL PHP
- FIX: Fixed issue with gulpfile not copying style.css and watching the wrong directory
- THX: Thanks @robinsonaaron for the issue and pull request!
- FIX: Prefer exact pattern key match over fuzzy matches inside getpatternbykey()
- THX: Thanks @EvanLovely for the suggestion
- ADD: Make all paths configurable
- THX: HUGE Thanks to @geoffp and @EvanLovely for their thoughts, time, and talent to make this a reality!
- FIX: Fix issue where absolute paths in the config path object would not resolve
- THX: Thanks to @geoffp and @EvanLovely for reporting, fixing and testing the issue in the dev branch.
- FIX: Typo in gulp instructions in README.
- THX: Thanks @simonknittel for the watchful eyes
- CHG: Changed locations of ./public/styleguide to ./core/styleguide to make ./public/ a cleaner distribution directory
- CHG: Removed scss files and config from project. This is in preparation for including the default asset repo in the future
- FIX: Fix issue where partials were not being sent to Mustache during pattern parameter parsing.
- THX: Thanks to @e2tha-e for reporting this issue.
- ADD: Now patterns and pseudopatterns can be linked from global or file data.json
- THX: Thanks @kylewelsby for the thoughtful enhancement

PL-node-v1.0.0
- FIX: Resolve issue with not hiding underscored patterns.
- THX: Thanks @ivancamilov for reporting this regression.
Copy path View file
@@ -1,5 +1,7 @@
module.exports = function(grunt) {

var path = require('path');

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
@@ -60,97 +62,77 @@ module.exports = function(grunt) {
copy: {
main: {
files: [
{ expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
{ expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' },
{ expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' },
{ expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'},
{ expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'},
{ expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' }
{ expand: true, cwd: path.resolve(paths().source.js), src: '*.js', dest: path.resolve(paths().public.js) },
{ expand: true, cwd: path.resolve(paths().source.css), src: '*.css', dest: path.resolve(paths().public.css) },
{ expand: true, cwd: path.resolve(paths().source.images), src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: path.resolve(paths().public.images) },
{ expand: true, cwd: path.resolve(paths().source.fonts), src: '*', dest: path.resolve(paths().public.fonts) },
{ expand: true, cwd: path.resolve(paths().source.data), src: 'annotations.js', dest: path.resolve(paths().public.data) }
]
},
css: {
styleguide: {
files: [
{ expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' }
{ expand: true, cwd: path.resolve(paths().source.styleguide), src: ['*.*', '**/*.*'], dest: path.resolve(paths().public.styleguide) }
]
}
},
watch: {
all: {
files: [
'source/css/**/*.css',
'public/styleguide/css/*.css',
'source/_patterns/**/*.mustache',
'source/_patterns/**/*.json',
'source/_data/*.json'
path.resolve(paths().source.css + '**/*.css'),
path.resolve(paths().source.styleguide + 'css/*.css'),
path.resolve(paths().source.patterns + '**/*.mustache'),
path.resolve(paths().source.patterns + '**/*.json'),
path.resolve(paths().source.fonts + '/*'),
path.resolve(paths().source.images + '/*'),
path.resolve(paths().source.data + '*.json')
],
tasks: ['default']
},
// scss: {
// files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
// tasks: ['sass', 'copy:css','bsReload:css']
// },
patterns: {
files: [
'source/_patterns/**/*.mustache',
'source/_patterns/**/*.json',
'source/_data/*.json'
],
tasks: ['default']
tasks: ['default', 'bsReload:css']
}
},
// sass: {
// build: {
// options: {
// style: 'expanded',
// precision: 8
// },
// files: {
// './source/css/style.css': './source/css/style.scss',
// './public/styleguide/css/static.css': './public/styleguide/css/static.scss',
// './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss',
// './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss'
// }
// }
// },
nodeunit: {
all: ['test/*_tests.js']
},
browserSync: {
dev: {
options: {
server: './public',
server: path.resolve(paths().public.root),
watchTask: true,
watchOptions: {
ignoreInitial: true,
ignored: '*.html'
},
plugins: [
{
module: 'bs-html-injector',
options: {
files: './public/index.html'
files: [path.resolve(paths().public.root + '/index.html'), path.resolve(paths().public.styleguide + '/styleguide.html')]
}
}
]
}
}
},
bsReload: {
css: './public/**/*.css'
css: path.resolve(paths().public.root + '**/*.css')
}
});

function paths () {
return require('./config.json').paths;
}

// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

//load the patternlab task
grunt.task.loadTasks('./builder/');

//if you choose to use scss, or any preprocessor, you can add it here
grunt.registerTask('default', ['patternlab', /*'sass',*/ 'copy:main']);
grunt.registerTask('default', ['patternlab', 'copy:main', 'copy:styleguide']);

//travis CI task
grunt.registerTask('travis', ['nodeunit', 'patternlab']);

//TODO: this line is more efficient, but you cannot run concurrent watch tasks without another dependency.
//grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:patterns', 'watch:scss']);
grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:all']);
grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']);

grunt.registerTask('build', ['nodeunit', 'concat']);

Copy path View file
@@ -44,7 +44,7 @@ To run patternlab-node using gulp, you need to swap out the default grunt config
3. Run `npm install` from the command line
4. Run `gulp` or `gulp serve` from the command line

This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt serve` to see have BrowserSync spin up and serve the files to you.
This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `gulp serve` to have BrowserSync spin up and serve the files to you.

### There and Back Again, or Switching Between Grunt and Gulp

@@ -80,10 +80,36 @@ Get more information about patternlab-node, pattern lab in general, and where to
##### Watching Changes
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.

##### Preprocessor Support
The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are not included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. Uncomment the preprocessor configuration to fully utilize the example templates, css and style guide.
##### Configurable Paths
Pattern Lab Node ships with a particular source and public workflow intended to separate the code you work on with the code generated for consumption elsewhere. If you wish to change any paths, you may do so within `config.json`. The contents are here:

**NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass.
```
"paths" : {
"source" : {
"root": "./source/",
"patterns" : "./source/_patterns/",
"data" : "./source/_data/",
"styleguide" : "./core/styleguide/",
"patternlabFiles" : "./source/_patternlab-files/",
"js" : "./source/js",
"images" : "./source/images",
"fonts" : "./source/fonts",
"css" : "./source/css/"
},
"public" : {
"root" : "./public/",
"patterns" : "./public/patterns/",
"data" : "./public/data/",
"styleguide" : "./public/styleguide/",
"js" : "./public/js",
"images" : "./public/images",
"fonts" : "./public/fonts",
"css" : "./public/css"
}
}
```

Note the intentional repitition of the nested structure, made this way for maximum flexibility. Relative paths are default but absolute paths should work too. You may also use these paths within Grunt or Gulp files by referring to the paths() object.

##### Nav Bar Controls
If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in `config.json`.
Copy path View file
@@ -1,5 +1,5 @@
/*
* patternlab-node - v1.0.0 - 2015
* patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -23,47 +23,41 @@
if(matches !== null){
matches.forEach(function(match, index, matches){
//strip out the template cruft
var foundPattern = match.replace("{{> ", "").replace(" }}", "").replace("{{>", "").replace("}}", "");
var foundPatternKey = match.replace("{{> ", "").replace(" }}", "").replace("{{>", "").replace("}}", "");

// remove any potential pattern parameters. this and the above are rather brutish but I didn't want to do a regex at the time
if(foundPattern.indexOf('(') > 0){
foundPattern = foundPattern.substring(0, foundPattern.indexOf('('));
if(foundPatternKey.indexOf('(') > 0){
foundPatternKey = foundPatternKey.substring(0, foundPatternKey.indexOf('('));
}

//add if it doesnt exist
if (pattern.lineageIndex.indexOf(foundPattern) === -1){
//remove any potential stylemodifiers.
foundPatternKey = foundPatternKey.split(':')[0];

pattern.lineageIndex.push(foundPattern);
//get the ancestorPattern
var ancestorPattern = pattern_assembler.get_pattern_by_key(foundPatternKey, patternlab);

patternlab.patterns.forEach(function(ancestorPattern, index, patterns){
if (ancestorPattern && pattern.lineageIndex.indexOf(ancestorPattern.key) === -1){

//find the pattern in question
var searchPattern = ancestorPattern.patternGroup + "-" + ancestorPattern.patternName;
//add it since it didnt exist
pattern.lineageIndex.push(ancestorPattern.key);
//create the more complex patternLineage object too
var l = {
"lineagePattern": ancestorPattern.key,
"lineagePath": "../../patterns/" + ancestorPattern.patternLink
};
pattern.lineage.push(JSON.stringify(l));

if(searchPattern === foundPattern){
//create the more complex patternLineage object too
var l = {
"lineagePattern": foundPattern,
"lineagePath": "../../patterns/" + ancestorPattern.patternLink
//also, add the lineageR entry if it doesn't exist
if (ancestorPattern.lineageRIndex.indexOf(pattern.key) === -1){
ancestorPattern.lineageRIndex.push(pattern.key);

//create the more complex patternLineage object in reverse
var lr = {
"lineagePattern": pattern.key,
"lineagePath": "../../patterns/" + pattern.patternLink
};
pattern.lineage.push(JSON.stringify(l));

//also, add the lineageR entry if it doesn't exist
var patternLabel = pattern.patternGroup + "-" + pattern.patternName;
if (ancestorPattern.lineageRIndex.indexOf(patternLabel) === -1){
ancestorPattern.lineageRIndex.push(patternLabel);

//create the more complex patternLineage object in reverse
var lr = {
"lineagePattern": patternLabel,
"lineagePath": "../../patterns/" + pattern.patternLink
};
ancestorPattern.lineageR.push(JSON.stringify(lr));
}
ancestorPattern.lineageR.push(JSON.stringify(lr));
}

});

}
});
}
Copy path View file
@@ -1,5 +1,5 @@
/*
* patternlab-node - v1.0.0 - 2015
* patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -72,13 +72,16 @@
var partialName = foundPartials[j].match(/([\w\-\.\/~]+)/g)[0];
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);

//create a copy of the partial so as to not pollute it after the get_pattern_by_key call.
var cleanPartialPattern = JSON.parse(JSON.stringify(partialPattern));

//if partial has style modifier data, replace the styleModifier value
if(pattern.stylePartials && pattern.stylePartials.length > 0){
style_modifier_hunter.consume_style_modifier(partialPattern, foundPartials[j], patternlab);
if(foundPartials[j].indexOf(':') > -1){
style_modifier_hunter.consume_style_modifier(cleanPartialPattern, foundPartials[j], patternlab);
}

//replace its reference within the block with the extended template
thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], cleanPartialPattern.extendedTemplate);
}

//render with data
@@ -97,6 +100,9 @@
var repeatingBlock = pattern.extendedTemplate.substring(pattern.extendedTemplate.indexOf(liMatch), pattern.extendedTemplate.indexOf(end) + end.length);
pattern.extendedTemplate = pattern.extendedTemplate.replace(repeatingBlock, repeatedBlockHtml);

//update the extendedTemplate in the partials object in case this pattern is consumed later
patternlab.partials[pattern.key] = pattern.extendedTemplate;

});
}
}
Copy path View file
@@ -1,5 +1,5 @@
/*
* patternlab-node - v1.0.0 - 2015
* patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Copy path View file
@@ -1,5 +1,5 @@
/*
* patternlab-node - v1.0.0 - 2015
* patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
Copy path View file
@@ -1,5 +1,5 @@
/*
* patternlab-node - v1.0.0 - 2015
* patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -61,6 +61,9 @@

//remove the parameter from the partial and replace it with the rendered partial + paramData
pattern.extendedTemplate = pattern.extendedTemplate.replace(pMatch, renderedPartial);

//update the extendedTemplate in the partials object in case this pattern is consumed later
patternlab.partials[pattern.key] = pattern.extendedTemplate;
});
}
}
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.