From cdaae54c00a5d872e8f7830aec52cd16c9432ada Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Sun, 20 Sep 2015 01:01:34 -0500 Subject: [PATCH] Merge pull request #149 from pattern-lab/dev v0.12.0 --- packages/patternengine-node-twig/CHANGELOG | 11 ++ .../patternengine-node-twig/CONTRIBUTING.md | 9 +- packages/patternengine-node-twig/Gruntfile.js | 109 ++++++------ packages/patternengine-node-twig/README.md | 113 +++++++----- .../builder/lineage_hunter.js | 2 +- .../builder/list_item_hunter.js | 2 +- .../builder/media_hunter.js | 2 +- .../builder/object_factory.js | 2 +- .../builder/parameter_hunter.js | 6 +- .../builder/pattern_assembler.js | 18 +- .../builder/pattern_exporter.js | 2 +- .../builder/patternlab.js | 38 ++-- .../builder/patternlab_grunt.js | 6 +- .../builder/patternlab_gulp.js | 26 +++ .../builder/pseudopattern_hunter.js | 2 +- packages/patternengine-node-twig/config.json | 7 +- packages/patternengine-node-twig/gulpfile.js | 143 ++++++++++++++++ .../patternengine-node-twig/package.gulp.json | 40 +++++ packages/patternengine-node-twig/package.json | 22 ++- .../patternengine-node-twig/public/WHAR_INDEX | 3 - .../public/listeners/synclisteners.js | 162 ------------------ .../public/styleguide/js/styleguide.js | 2 +- .../partials/ishControls.mustache | 9 +- .../source/css/style.scss | 21 ++- .../test/parameter_hunter_tests.js | 146 +++++++++++++++- .../test/pattern_assembler_tests.js | 17 ++ 26 files changed, 592 insertions(+), 328 deletions(-) create mode 100644 packages/patternengine-node-twig/builder/patternlab_gulp.js create mode 100644 packages/patternengine-node-twig/gulpfile.js create mode 100644 packages/patternengine-node-twig/package.gulp.json delete mode 100644 packages/patternengine-node-twig/public/WHAR_INDEX delete mode 100644 packages/patternengine-node-twig/public/listeners/synclisteners.js diff --git a/packages/patternengine-node-twig/CHANGELOG b/packages/patternengine-node-twig/CHANGELOG index 85124e76e..9a3abb751 100644 --- a/packages/patternengine-node-twig/CHANGELOG +++ b/packages/patternengine-node-twig/CHANGELOG @@ -1,5 +1,16 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT. +PL-node-v0.12.0 + - ADD: Gulp support arrives with an optional configuration + - ADD: Instructions how to install and run with Gulp + - DEL: Deleted the sass modules from `package.json` files + - CHG: Commented out all sass tasks in Grunt and Gulp files + - CHG: Changed static web server provider to BrowserSync + - CHG: Replaced the Style Guide toolbar Auto-Reload and Page Follow with a link to the BrowserSync UI + - THX: Thanks @oscar-g for the initial work on the gulpfile! + - ADD: An alternative, more verbose syntax for pattern partial inclusion + - THX: Thanks @e2tha-e for the thoughtful addition with unit test coverage + PL-node-v0.11.0 - ADD: Ignore pattern directories that start with an underscore. - ADD: Support for lists with the listItems variable diff --git a/packages/patternengine-node-twig/CONTRIBUTING.md b/packages/patternengine-node-twig/CONTRIBUTING.md index 276a2af37..dcaef2d3d 100644 --- a/packages/patternengine-node-twig/CONTRIBUTING.md +++ b/packages/patternengine-node-twig/CONTRIBUTING.md @@ -4,6 +4,9 @@ If you'd like to contribute to patternlab - node, please do so! There is always No pull request is too small. ##Guidelines -1. Please keep your pull requests concise -2. _ALWAYS_ submit it against the [dev branch](https://github.com/pattern-lab/patternlab-node/tree/dev). If this does not occur, I will first, try to redirect you gently, second, port over your contribution manually if time allows, and/or third, close your pull request. -3. If you can, add some unit tests using the existing patterns \ No newline at end of file +1. Please keep your pull requests concise and limited to **ONE** substantive change at a time. +2. _ALWAYS_ submit pull requests against the [dev branch](https://github.com/pattern-lab/patternlab-node/tree/dev). If this does not occur, I will first, try to redirect you gently, second, port over your contribution manually if time allows, and/or third, close your pull request. +3. If you can, add some unit tests using the existing patterns + +##Coding style +Regarding code style like indentation and whitespace, follow the conventions you see used in the source already. Add enough source code comments to help the next person. diff --git a/packages/patternengine-node-twig/Gruntfile.js b/packages/patternengine-node-twig/Gruntfile.js index f0708fab1..c8f9e603f 100644 --- a/packages/patternengine-node-twig/Gruntfile.js +++ b/packages/patternengine-node-twig/Gruntfile.js @@ -3,10 +3,6 @@ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), - clean: { - options: { force: true }, - files: ['./public/patterns'] - }, concat: { options: { stripBanners: true, @@ -63,67 +59,72 @@ module.exports = function(grunt) { { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'}, { expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' } ] - } - }, - jshint: { - options: { - "curly": true, - "eqnull": true, - "eqeqeq": true, - "undef": true, - "forin": true, - //"unused": true, - "node": true }, - patternlab: ['Gruntfile.js', './builder/lib/patternlab.js'] + css: { + files: [ + { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' } + ] + } }, watch: { - // scss: { //scss can be watched if you like - // options: { - // livereload: true - // }, + all: { + files: [ + 'source/css/**/*.css', + 'public/styleguide/css/*.css', + 'source/_patterns/**/*.mustache', + 'source/_patterns/**/*.json', + 'source/_data/*.json' + ], + tasks: ['default'] + }, + // scss: { // files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], - // tasks: ['default'] + // tasks: ['sass', 'copy:css','bsReload:css'] // }, - all: { - options: { - livereload: true - }, + patterns: { files: [ - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' + 'source/_patterns/**/*.mustache', + 'source/_patterns/**/*.json', + 'source/_data/*.json' ], tasks: ['default'] } }, - 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' - } - } - }, + // 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'] }, - connect: { - app:{ + browserSync: { + dev: { options: { - port: 9001, - base: './public', - hostname: 'localhost', - open: true, - livereload: 35729 + server: './public', + watchTask: true, + plugins: [ + { + module: 'bs-html-injector', + options: { + files: './public/index.html' + } + } + ] } } + }, + bsReload: { + css: './public/**/*.css' } }); @@ -134,11 +135,15 @@ module.exports = function(grunt) { grunt.task.loadTasks('./builder/'); //if you choose to use scss, or any preprocessor, you can add it here - grunt.registerTask('default', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']); + grunt.registerTask('default', ['patternlab', /*'sass',*/ 'copy:main']); //travis CI task - grunt.registerTask('travis', ['nodeunit', 'clean', 'concat', 'patternlab', /*'sass',*/ 'copy']); + 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', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'connect', 'watch']); + grunt.registerTask('build', ['nodeunit', 'concat']); }; diff --git a/packages/patternengine-node-twig/README.md b/packages/patternengine-node-twig/README.md index c72b197a6..336d031fb 100644 --- a/packages/patternengine-node-twig/README.md +++ b/packages/patternengine-node-twig/README.md @@ -2,21 +2,59 @@ ## 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. +The Node version of [Pattern Lab](http://patternlab.io/) is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns, the JavaScript-based viewer, and the self-contained webserver, with a Node-based "builder" that transforms and dynamically builds the Pattern Lab site. -### Getting Started +This repository contains the vanilla builder logic, grunt and gulp configurations, and some sample template/css/data to illustrate the power and flexibility of the tool. -To run patternlab-node, run the following from the command line at the root of whichever directory you want to initialize your project in: +### Download -1. `npm install` -2. `npm install -g grunt-cli` -3. `grunt` +* Download the [latest release of patternlab-node](https://github.com/pattern-lab/patternlab-node/releases/latest) from Github +* Via npm, run `npm install patternlab-node` (Note this will auto install the grunt version currently. see below) -This creates all patterns, the styleguide, and the pattern lab site. +### Choose Your Adventure! Now Vanilla, Grunt & Gulp + +This repository ships with two `package.json` files, a `Gruntfile.js`, and a `gulpfile.js`. The default is grunt currently. The core builder is not dependent on either. + +**HELP WANTED** Please help me test both of the configurations by [reporting](https://github.com/pattern-lab/patternlab-node/blob/dev/CONTRIBUTING.md) any issues encountered. + +### Getting Started - Grunt + +To run patternlab-node using grunt, do the following in the directory you downloaded and extracted the zipped release: + +1. Run `npm install` from the command line +2. Optionally, delete `package.gulp.json`, `gulpfile.js`, and `builder/patternlab_gulp.js` files if you are certain you don't need it. +* Not deleting `builder/patternlab_gulp.js` may cause a harmless error when running grunt. Delete it. +3. Run `grunt` or `grunt 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. + +### Getting Started - Gulp + +To run patternlab-node using gulp, you need to swap out the default grunt configuration. Do the following in the directory you downloaded and extracted the zipped release: + +1. Rename `package.json` to `package.grunt.json` or delete it if you don't intend on going back +2. Rename `package.gulp.json` to `package.json` +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. + +### There and Back Again, or Switching Between Grunt and Gulp + +It's not expected to toggle between the two build systems, but for those migrating between the two configs, here's some general guidelines: + +* Make sure your `package.json` files are correct per the Getting Started sections. +* Run `npm cache clear` before installation +* Delete the contents of `./node_modules` if you want a cleaner installation. +* Regarding speed, Gulp is faster. BrowserSync takes a bit longer than the old static server to spin up, but its capabilities far outweigh the startup cost. + +### Upgrading + +You can find some simple upgrade documenation in it's current home here (unreleased but confirmed to work): [https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md](https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md) ### Command Line Interface -The following are grunt task arguments you may execute: +The following are grunt/gulp task arguments you may execute: ##### `patternlab` With no arguments, patternlab runs the full builder, compiling patterns, and constructing the front-end site. @@ -30,15 +68,20 @@ Retrieve the version of patternlab-node you have installed ##### `patternlab:help` Get more information about patternlab-node, pattern lab in general, and where to report issues. -### Config Options +### Further Configuration ##### Watching Changes -To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt watch`. The `Gruntfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy. +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. + +**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. ##### Nav Bar Controls -If you don't have a need for some of the nav-bar tools in the patternlab frontend, you can turn them off in `config.json`. +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`. -The current selection is as follows. It reflects support versus patternlab-php. +The current selection is as follows. ``` "ishControlsVisible": { @@ -99,11 +142,20 @@ If you'd like to exclude an individual pattern you can do so by prepending the f You can also exclude complete directories by prepending the directory name with an underscore, like: `/_experiment/...` -##### Verbose Mode +##### Debug Mode `patternlab.json` is a file created for debugging purposes. Set `debug` to true in `.config.json` to see all the secrets. -##### Server -Running `grunt serve` will compile the patternlab front end and host it on http://localhost:9001 by default. Page will reload on any saved source code change. +##### Server & BrowserSync +Running `grunt serve` or `gulp serve` will compile the Pattern Lab frontend and host it by default on http://localhost:3000 via [BrowserSync](http://www.browsersync.io/docs/). After it starts, templates, `data.json`, and scss/css changes in your source code will be automatically injected into the page. + +You'll notice that if you have this open across different browsers, we do our best to keep the frontend in sync, but there is a known issue with synced navigation using the main menu. + +### Roadmap + + +A roadmap exists for Pattern Lab Node. Check it out [here](https://github.com/pattern-lab/patternlab-node/issues/134). The Node version of Pattern Lab is maintained by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md). + +Dave Olsen has also 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. Post v1 work will focus on other pattern engines and a plugin architecture. ### Advanced Pattern Library Features @@ -190,37 +242,6 @@ This would compile to: As you can see, it's a much easier way of linking patterns to one another. - -=== - -The Node version of Pattern Lab is maintained by [@bmuenzenmeyer](https://twitter.com/bmuenzenmeyer) and contributors. Pull requests welcome, but please take a moment to read the [guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/CONTRIBUTING.md). - -### Upgrading - -You can find some simple upgrade documenation in it's current home here (unreleased but confirmed to work): [https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md](https://github.com/pattern-lab/website/blob/dev/patternlabsite/docs/node/upgrading.md) - -### ROADMAP - -A roadmap exists for Pattern Lab Node. Check it out [here](https://github.com/pattern-lab/patternlab-node/issues/134) - -Dave Olsen has also 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? - -A lot of good conversation has revolved around whether Pattern Lab is a platform or a tool in the toolbox, part of a larger solution. It's my goal to #1) adhere to the specification and #2) meet the needs of both use cases. - -If you want to only build the patterns, alter your `Gruntfile.js` patternlab task to the following: - -``` -grunt.registerTask('default', ['clean', 'concat', 'patternlab:only_patterns', /*'sass',*/ 'copy']); -``` - -This will output compiled patterns to ./public/patterns/ - -### Where is the Gulp Version? - -The core patternlab engine is free of any dependencies to grunt, allowing users to integrate with gulp if desired. Future efforts here will orient towards [this gulp implementation](https://github.com/oscar-g/patternlab-node/tree/dev-gulp) by [oscar-g](https://github.com/oscar-g). - === ## Working with Patterns diff --git a/packages/patternengine-node-twig/builder/lineage_hunter.js b/packages/patternengine-node-twig/builder/lineage_hunter.js index 47bc9c473..7c9f5038f 100644 --- a/packages/patternengine-node-twig/builder/lineage_hunter.js +++ b/packages/patternengine-node-twig/builder/lineage_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/packages/patternengine-node-twig/builder/list_item_hunter.js b/packages/patternengine-node-twig/builder/list_item_hunter.js index dd251bda3..cc357f48d 100644 --- a/packages/patternengine-node-twig/builder/list_item_hunter.js +++ b/packages/patternengine-node-twig/builder/list_item_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/packages/patternengine-node-twig/builder/media_hunter.js b/packages/patternengine-node-twig/builder/media_hunter.js index 289a78bb9..247a96042 100644 --- a/packages/patternengine-node-twig/builder/media_hunter.js +++ b/packages/patternengine-node-twig/builder/media_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/packages/patternengine-node-twig/builder/object_factory.js b/packages/patternengine-node-twig/builder/object_factory.js index 6725abe75..38582ab65 100644 --- a/packages/patternengine-node-twig/builder/object_factory.js +++ b/packages/patternengine-node-twig/builder/object_factory.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/packages/patternengine-node-twig/builder/parameter_hunter.js b/packages/patternengine-node-twig/builder/parameter_hunter.js index 089b80055..e4faf7450 100644 --- a/packages/patternengine-node-twig/builder/parameter_hunter.js +++ b/packages/patternengine-node-twig/builder/parameter_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. @@ -21,12 +21,12 @@ function findparameters(pattern, patternlab){ //find the {{> template-name(*) }} within patterns - var matches = pattern.template.match(/{{>([ ]+)?([A-Za-z0-9-]+)(\()(.+)(\))([ ]+)?}}/g); + var matches = pattern.template.match(/{{>([ ]+)?([\w\-\.\/~]+)(\()(.+)(\))([ ]+)?}}/g); if(matches !== null){ //compile this partial immeadiately, essentially consuming it. matches.forEach(function(pMatch, index, matches){ //find the partial's name - var partialName = pMatch.match(/([a-z-]+)/ig)[0]; + var partialName = pMatch.match(/([\w\-\.\/~]+)/g)[0]; if(patternlab.config.debug){ console.log('found patternParameters for ' + partialName); diff --git a/packages/patternengine-node-twig/builder/pattern_assembler.js b/packages/patternengine-node-twig/builder/pattern_assembler.js index 98b661783..65e80eb5b 100644 --- a/packages/patternengine-node-twig/builder/pattern_assembler.js +++ b/packages/patternengine-node-twig/builder/pattern_assembler.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. @@ -25,7 +25,7 @@ //find and return any {{> template-name }} within pattern function findPartials(pattern){ - var matches = pattern.template.match(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g); + var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g); return matches; } @@ -138,7 +138,7 @@ //do something with the regular old partials for(var i = 0; i < foundPatternPartials.length; i++){ - var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([A-Za-z0-9-]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2'); + var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2'); var partialPattern = getpatternbykey(partialKey, patternlab); currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace(foundPatternPartials[i], partialPattern.extendedTemplate); } @@ -157,17 +157,17 @@ function getpatternbykey(key, patternlab){ for(var i = 0; i < patternlab.patterns.length; i++){ - if(patternlab.patterns[i].key === key){ - return patternlab.patterns[i]; + switch(key){ + case patternlab.patterns[i].key: + case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName: + case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName + '.mustache': + return patternlab.patterns[i]; } } throw 'Could not find pattern with key ' + key; } - /* - * Recursively merge properties of two objects - * http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically - */ + var self = this; function mergeData(obj1, obj2) { for (var p in obj2) { diff --git a/packages/patternengine-node-twig/builder/pattern_exporter.js b/packages/patternengine-node-twig/builder/pattern_exporter.js index 78560b631..71c19b616 100644 --- a/packages/patternengine-node-twig/builder/pattern_exporter.js +++ b/packages/patternengine-node-twig/builder/pattern_exporter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/packages/patternengine-node-twig/builder/patternlab.js b/packages/patternengine-node-twig/builder/patternlab.js index d819cff43..80f8d75f4 100644 --- a/packages/patternengine-node-twig/builder/patternlab.js +++ b/packages/patternengine-node-twig/builder/patternlab.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v0.11.0 - 2015 - * +/* + * patternlab-node - v0.12.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. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -36,7 +36,7 @@ var patternlab_engine = function () { console.log('==============================='); console.log('Command Line Arguments'); console.log('patternlab:only_patterns'); - console.log(' > Compiles the patterns only, outputting to ./public/patterns'); + console.log(' > Compiles the patterns only, outputting to config.patterns.public'); console.log('patternlab:v'); console.log(' > Retrieve the version of patternlab-node you have installed'); console.log('patternlab:help'); @@ -54,7 +54,7 @@ var patternlab_engine = function () { } } - function buildPatterns(callback){ + function buildPatterns(deletePatternDir){ patternlab.data = fs.readJSONSync('./source/_data/data.json'); patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json'); patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8'); @@ -89,6 +89,12 @@ var patternlab_engine = function () { pattern_assembler.process_pattern_file(file, patternlab); }); + + //delete the contents of config.patterns.public before writing + if(deletePatternDir){ + fs.emptyDirSync(patternlab.config.patterns.public); + } + //render all patterns last, so lineageR works patternlab.patterns.forEach(function(pattern, index, patterns){ //render the pattern, but first consolidate any data we may have @@ -101,13 +107,13 @@ var patternlab_engine = function () { var patternFooter = pattern_assembler.renderPattern(patternlab.footer, pattern); //write the compiled template to the public patterns directory - fs.outputFileSync('./public/patterns/' + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter); + fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter); //write the mustache file too - fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.mustache'), entity_encoder.encode(pattern.template)); + fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink.replace('.html', '.mustache'), entity_encoder.encode(pattern.template)); //write the encoded version too - fs.outputFileSync('./public/patterns/' + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial)); + fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial)); }); //export patterns if necessary @@ -154,7 +160,7 @@ var patternlab_engine = function () { var viewAllTemplate = fs.readFileSync('./source/_patternlab-files/viewall.mustache', 'utf8'); var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial}); - fs.outputFileSync('./public/patterns/' + pattern.flatPatternPath + '/index.html', viewAllHtml); + fs.outputFileSync(patternlab.config.patterns.public + pattern.flatPatternPath + '/index.html', viewAllHtml); } } @@ -342,16 +348,16 @@ var patternlab_engine = function () { version: function(){ return getVersion(); }, - build: function(){ - buildPatterns(); + build: function(deletePatternDir){ + buildPatterns(deletePatternDir); buildFrontEnd(); printDebug(); }, help: function(){ help(); }, - build_patterns_only: function(){ - buildPatterns(); + build_patterns_only: function(deletePatternDir){ + buildPatterns(deletePatternDir); printDebug(); } }; diff --git a/packages/patternengine-node-twig/builder/patternlab_grunt.js b/packages/patternengine-node-twig/builder/patternlab_grunt.js index 72fccc8ff..744421a1b 100644 --- a/packages/patternengine-node-twig/builder/patternlab_grunt.js +++ b/packages/patternengine-node-twig/builder/patternlab_grunt.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. @@ -16,7 +16,7 @@ module.exports = function(grunt) { var patternlab = patternlab_engine(); if(arguments.length === 0){ - patternlab.build(); + patternlab.build(true); } if(arg && arg === 'v'){ @@ -24,7 +24,7 @@ module.exports = function(grunt) { } if(arg && arg === "only_patterns"){ - patternlab.build_patterns_only(); + patternlab.build_patterns_only(true); } if(arg && arg === "help"){ diff --git a/packages/patternengine-node-twig/builder/patternlab_gulp.js b/packages/patternengine-node-twig/builder/patternlab_gulp.js new file mode 100644 index 000000000..5cbeb2440 --- /dev/null +++ b/packages/patternengine-node-twig/builder/patternlab_gulp.js @@ -0,0 +1,26 @@ +var patternlab_engine = require('./patternlab.js'); + +module.exports = function(gulp) { + + gulp.task('patternlab', ['clean'], function(cb){ + var patternlab = patternlab_engine(); + patternlab.build(false); + cb(); + }); + + gulp.task('patternlab:version', function(){ + var patternlab = patternlab_engine(); + patternlab.version(); + }) + + gulp.task('patternlab:only_patterns', ['clean'], function(){ + var patternlab = patternlab_engine(); + patternlab.build_patterns_only(false); + }) + + gulp.task('patternlab:help', function(){ + var patternlab = patternlab_engine(); + patternlab.help(); + }) + +} diff --git a/packages/patternengine-node-twig/builder/pseudopattern_hunter.js b/packages/patternengine-node-twig/builder/pseudopattern_hunter.js index b5513e458..9f0a33a4e 100644 --- a/packages/patternengine-node-twig/builder/pseudopattern_hunter.js +++ b/packages/patternengine-node-twig/builder/pseudopattern_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v0.11.0 - 2015 + * patternlab-node - v0.12.0 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/packages/patternengine-node-twig/config.json b/packages/patternengine-node-twig/config.json index f0b2f6a74..ff787019b 100644 --- a/packages/patternengine-node-twig/config.json +++ b/packages/patternengine-node-twig/config.json @@ -5,9 +5,7 @@ }, "ignored-extensions" : ["scss", "DS_Store", "less"], "ignored-directories" : ["scss"], - "contentSyncPort" : 8002, - "navSyncPort" : 8003, - "debug": true, + "debug": false, "ishControlsVisible": { "s": true, "m": true, @@ -23,8 +21,7 @@ "views-code": true, "views-new": true, "tools-all": true, - "tools-follow": false, - "tools-reload": false, + "tools-sync": true, "tools-shortcuts": true, "tools-docs": true }, diff --git a/packages/patternengine-node-twig/gulpfile.js b/packages/patternengine-node-twig/gulpfile.js new file mode 100644 index 000000000..8007b8410 --- /dev/null +++ b/packages/patternengine-node-twig/gulpfile.js @@ -0,0 +1,143 @@ +// Special thanks to oscar-g (https://github.com/oscar-g) for starting this at https://github.com/oscar-g/patternlab-node/tree/dev-gulp + +var pkg = require('./package.json'), + gulp = require('gulp'), + eol = require('os').EOL, + del = require('del'), + strip_banner = require('gulp-strip-banner'), + header = require('gulp-header'), + nodeunit = require('gulp-nodeunit'), + //sass = require('gulp-sass'), + browserSync = require('browser-sync').create(); + +require('gulp-load')(gulp); +var banner = [ '/** ', + ' * <%= pkg.name %> - v<%= pkg.version %> - <%= today %>', + ' * ', + ' * <%= pkg.author %>, and the web community.', + ' * Licensed under the <%= pkg.license %> license.', + ' * ', + ' * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.', + ' * ', ' **/'].join(eol); + +//load patternlab-node tasks +gulp.loadTasks(__dirname+'/builder/patternlab_gulp.js'); + +//clean patterns dir +gulp.task('clean', function(cb){ + del.sync(['./public/patterns/*'], {force: true}); + cb(); +}) + +//build the banner +gulp.task('banner', function(){ + return gulp.src([ + './builder/patternlab.js', + './builder/object_factory.js', + './builder/lineage_hunter.js', + './builder/media_hunter.js', + './builder/patternlab_grunt.js', + './builder/parameter_hunter.js', + './builder/pattern_exporter.js', + './builder/pattern_assembler.js', + './builder/pseudopattern_hunter.js', + './builder/list_item_hunter.js' + ]) + .pipe(strip_banner()) + .pipe(header( banner, { + pkg : pkg, + today : new Date().getFullYear() } + )) + .pipe(gulp.dest('./builder')); +}) + +//copy tasks +gulp.task('cp:js', function(){ + return gulp.src('**/*.js', {cwd:'./source/js'}) + .pipe(gulp.dest('./public/js')) +}); +gulp.task('cp:img', function(){ + return gulp.src( + [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ], + {cwd:'./source/images'} ) + .pipe(gulp.dest('./public/images')) +}); +gulp.task('cp:font', function(){ + return gulp.src('*', {cwd:'./source/fonts'}) + .pipe(gulp.dest('./public/fonts')) +}); +gulp.task('cp:data', function(){ + return gulp.src('annotations.js', {cwd:'./source/_data'}) + .pipe(gulp.dest('./public/data')) +}) +gulp.task('cp:css', function(){ + return gulp.src('./source/css/style.css') + .pipe(gulp.dest('./public/css')) + .pipe(browserSync.stream()); +}) + +//server and watch tasks +gulp.task('connect', ['lab'], function(){ + browserSync.init({ + server: { + baseDir: './public/' + } + }); + gulp.watch('./source/css/style.css', ['cp:css']); + + //suggested watches if you use scss + // gulp.watch('./source/css/**/*.scss', ['sass:style']); + // gulp.watch('./public/styleguide/*.scss', ['sass:styleguide']); + + gulp.watch([ + './source/_patterns/**/*.mustache', + './source/_patterns/**/*.json', + './source/_data/*.json' ], + ['lab-pipe'], function(){ + browserSync.reload(); + }); + +}) + +//unit test +gulp.task('nodeunit', function(){ + return gulp.src('./test/**/*_tests.js') + .pipe(nodeunit()); +}) + +//sass tasks, turn on if you want to use +// gulp.task('sass:style', function(){ +// return gulp.src('./source/css/*.scss') +// .pipe(sass({ +// outputStyle: 'expanded', +// precision: 8 +// })) +// .pipe(gulp.dest('./public/css')) +// .pipe(browserSync.stream()); +// }) +// gulp.task('sass:styleguide', function(){ +// return gulp.src('./public/styleguide/css/*.scss') +// .pipe(sass({ +// outputStyle: 'expanded', +// precision: 8 +// })) +// .pipe(gulp.dest('./public/styleguide/css')) +// .pipe(browserSync.stream()); +// }) + +gulp.task('lab-pipe', ['lab'], function(cb){ + cb(); + browserSync.reload(); +}) + +gulp.task('default', ['lab']); + +gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', /*'sass:style', 'sass:styleguide'*/]); +gulp.task('prelab', ['clean', 'banner', 'assets']); +gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();}); +gulp.task('patterns', ['patternlab:only_patterns']); +gulp.task('serve', ['lab', 'connect']); +gulp.task('travis', ['lab', 'nodeunit']); + +gulp.task('version', ['patternlab:version']); +gulp.task('help', ['patternlab:help']); diff --git a/packages/patternengine-node-twig/package.gulp.json b/packages/patternengine-node-twig/package.gulp.json new file mode 100644 index 000000000..36406357a --- /dev/null +++ b/packages/patternengine-node-twig/package.gulp.json @@ -0,0 +1,40 @@ +{ + "name": "patternlab-node", + "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", + "version": "0.12.0", + "devDependencies": { + "browser-sync": "^2.8.2", + "del": "^1.2.1", + "diveSync": "^0.2.1", + "fs-extra": "^0.14.0", + "glob": "^4.3.5", + "gulp": "^3.8.8", + "gulp-connect": "^2.0.6", + "gulp-copy": "0.0.2", + "gulp-header": "^1.0.5", + "gulp-load": "^0.1.1", + "gulp-nodeunit": "0.0.5", + "gulp-strip-banner": "0.0.2", + "html-entities": "^1.1.1", + "mustache": "^1.0.0" + }, + "keywords": [ + "Pattern Lab", + "Atomic Web Design", + "Node", + "Grunt", + "Javascript" + ], + "repository": { + "type": "git", + "url": "git://github.com/pattern-lab/patternlab-node.git" + }, + "author": "Brian Muenzenmeyer", + "license": "MIT", + "scripts": { + "test": "grunt travis --verbose" + }, + "engines": { + "node": ">=0.1" + } +} diff --git a/packages/patternengine-node-twig/package.json b/packages/patternengine-node-twig/package.json index 8e0a247ad..1d97710a9 100644 --- a/packages/patternengine-node-twig/package.json +++ b/packages/patternengine-node-twig/package.json @@ -1,23 +1,21 @@ { "name": "patternlab-node", "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", - "version": "0.11.0", + "version": "0.12.0", "devDependencies": { + "bs-html-injector": "^2.0.4", + "diveSync": "^0.2.1", + "fs-extra": "^0.24.0", + "glob": "^4.3.5", "grunt": "~0.4.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-contrib-sass": "^0.8.1", - "grunt-contrib-copy": "^0.7.0", - "grunt-contrib-jshint": "^0.10.0", - "grunt-contrib-clean": "^0.6.0", + "grunt-browser-sync": "^2.1.3", "grunt-contrib-concat": "^0.5.0", + "grunt-contrib-copy": "^0.7.0", "grunt-contrib-nodeunit": "^0.4.1", - "grunt-contrib-connect": "^0.9.0", - "mustache": "^1.0.0", - "matchdep": "^0.3.0", - "fs-extra": "^0.14.0", - "diveSync": "^0.2.1", + "grunt-contrib-watch": "^0.6.1", "html-entities": "^1.1.1", - "glob": "^4.3.5" + "matchdep": "^0.3.0", + "mustache": "^1.0.0" }, "keywords": [ "Pattern Lab", diff --git a/packages/patternengine-node-twig/public/WHAR_INDEX b/packages/patternengine-node-twig/public/WHAR_INDEX deleted file mode 100644 index bf59a26ad..000000000 --- a/packages/patternengine-node-twig/public/WHAR_INDEX +++ /dev/null @@ -1,3 +0,0 @@ -If you're seeing a listing of files rather than the main home page for Pattern Lab -then you probably forgot to generate the site first. Please go into scripts/ and -double-click generateSite.command. \ No newline at end of file diff --git a/packages/patternengine-node-twig/public/listeners/synclisteners.js b/packages/patternengine-node-twig/public/listeners/synclisteners.js deleted file mode 100644 index 218bdfa3f..000000000 --- a/packages/patternengine-node-twig/public/listeners/synclisteners.js +++ /dev/null @@ -1,162 +0,0 @@ - -/*! - * Sync Listeners, v0.1 - * - * Copyright (c) 2013 Dave Olsen, http://dmolsen.com - * Licensed under the MIT license - * - * The JavaScript component of the WebSocket set-up that supports syncing - * navigation between browsers and content updates with the server. - * - * The WebSocket test is from Modernizr. It might be a little too strict for our purposes. - * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/websockets.js - * - */ - -var wsn; -var wsnConnected = false; -var wsc; -var wscConnected = false; -var dataPrevious = 0; -var host = (window.location.hostname !== '') ? window.location.hostname : '127.0.0.1'; - -// handle page updates from one browser to another -function connectNavSync() { - - if ('WebSocket' in window && window.WebSocket.CLOSING === 2) { - - var navSyncCopy = "Page Follow"; - wsn = new WebSocket("ws://"+host+":"+navSyncPort+"/navsync"); - - // when trying to open a connection to WebSocket update the pattern lab nav bar - wsn.onopen = function (event) { - wsnConnected = true; - $('#navSyncButton').attr("data-state","on"); - $('#navSyncButton').addClass("connected"); - $('#navSyncButton').html(navSyncCopy+' On'); - } - - // when closing a connection (or failing to make a connection) to WebSocket update the pattern lab nav bar - wsn.onclose = function (event) { - wsnConnected = false; - $('#navSyncButton').attr("data-state","off"); - if ($('#navSyncButton').hasClass("connected")) { - $('#navSyncButton').removeClass("connected"); - } - $('#navSyncButton').html(navSyncCopy+' Disabled'); - } - - // when receiving a message from WebSocket update the iframe source - wsn.onmessage = function (event) { - - var data = JSON.parse(event.data); - var vpLocation = document.getElementById('sg-viewport').contentWindow.location.href; - var mLocation = "http://"+host+data.url; - - if (vpLocation != mLocation) { - - document.getElementById('sg-viewport').contentWindow.location.replace(mLocation); - - // make sure the pop doesn't fire and push the pattern - urlHandler.doPop = false; - urlHandler.pushPattern(data.patternpartial); - - // reset the defaults - urlHandler.doPop = true; - urlHandler.skipBack = false; - - } - } - - // when there's an error update the pattern lab nav bar - wsn.onerror = function (event) { - wsnConnected = false; - $('#navSyncButton').attr("data-state","off"); - if ($('#navSyncButton').hasClass("connected")) { - $('#navSyncButton').removeClass("connected"); - } - $('#navSyncButton').html(navSyncCopy+' Disabled'); - } - - } - -} -connectNavSync(); - -// handle content updates generated by the watch -function connectContentSync() { - - if ('WebSocket' in window && window.WebSocket.CLOSING === 2) { - - var dc = true; - var contentSyncCopy = "Auto-reload"; - - wsc = new WebSocket("ws://"+host+":"+contentSyncPort+"/contentsync"); - - // when trying to open a connection to WebSocket update the pattern lab nav bar - wsc.onopen = function (event) { - wscConnected = true; - $('#contentSyncButton').attr("data-state","on"); - $('#contentSyncButton').addClass("connected"); - $('#contentSyncButton').html(contentSyncCopy+' On'); - } - - // when closing a connection (or failing to make a connection) to WebSocket update the pattern lab nav bar - wsc.onclose = function (event) { - wscConnected = false; - $('#contentSyncButton').attr("data-state","off"); - if ($('#contentSyncButton').hasClass("connected")) { - $('#contentSyncButton').removeClass("connected"); - } - $('#contentSyncButton').html(contentSyncCopy+' Disabled'); - } - - // when receiving a message from WebSocket reload the current frame adding the received timestamp - // as a request var to, hopefully, bust caches... cachi(?) - wsc.onmessage = function (event) { - document.getElementById('sg-viewport').contentWindow.location.reload(); - } - - // when there's an error update the pattern lab nav bar - wsc.onerror = function (event) { - wscConnected = false; - $('#contentSyncButton').attr("data-state","off"); - if ($('#contentSyncButton').hasClass("connected")) { - $('#contentSyncButton').removeClass("connected"); - } - $('#contentSyncButton').html(contentSyncCopy+' Disabled'); - } - - } - -} -connectContentSync(); - -// handle when a user manually turns navSync and contentSync on & off -$('#navSyncButton').click(function() { - if ($(this).attr("data-state") == "on") { - wsn.close(); - $(this).attr("data-state","off"); - $(this).removeClass("connected"); - $(this).html('Nav Sync Off'); - } else { - connectNavSync(); - $(this).attr("data-state","on"); - $(this).addClass("connected"); - $(this).html('Nav Sync On'); - } -}); - -$('#contentSyncButton').click(function() { - if ($(this).attr("data-state") == "on") { - wsc.close(); - $(this).attr("data-state","off"); - $(this).removeClass("connected"); - $(this).html('Content Sync Off'); - } else { - connectContentSync(); - $(this).attr("data-state","on"); - $(this).addClass("connected"); - $(this).html('Content Sync On'); - } -}); diff --git a/packages/patternengine-node-twig/public/styleguide/js/styleguide.js b/packages/patternengine-node-twig/public/styleguide/js/styleguide.js index 05d7cb276..44adb6561 100644 --- a/packages/patternengine-node-twig/public/styleguide/js/styleguide.js +++ b/packages/patternengine-node-twig/public/styleguide/js/styleguide.js @@ -554,7 +554,7 @@ function receiveIframeMessage(event) { urlHandler.pushPattern(data.patternpartial, data.path); } - if (wsnConnected) { + if (this.wsnConnected) { var iFramePath = urlHandler.getFileName(data.patternpartial); wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' ); } diff --git a/packages/patternengine-node-twig/source/_patternlab-files/partials/ishControls.mustache b/packages/patternengine-node-twig/source/_patternlab-files/partials/ishControls.mustache index acec6f2b3..6c0a70b68 100644 --- a/packages/patternengine-node-twig/source/_patternlab-files/partials/ishControls.mustache +++ b/packages/patternengine-node-twig/source/_patternlab-files/partials/ishControls.mustache @@ -5,7 +5,7 @@
  • - Size px / + Size px / em
    @@ -51,15 +51,14 @@
  • Tools
    • {{/ ishControlsVisible.tools-all }} - + - \ No newline at end of file + diff --git a/packages/patternengine-node-twig/source/css/style.scss b/packages/patternengine-node-twig/source/css/style.scss index 60e5210c3..761b1d3d3 100644 --- a/packages/patternengine-node-twig/source/css/style.scss +++ b/packages/patternengine-node-twig/source/css/style.scss @@ -1,5 +1,24 @@ /* - + ,, ,, ,, + .M"""bgd mm db `7MM mm mm `7MM OO OO OO +,MI "Y MM MM MM MM MM 88 88 88 +`MMb. mmMMmm ,pW"Wq.`7MMpdMAo. `7Mb,od8 `7MM .P"Ybmmm MMpMMMb.mmMMmm mmMMmm MMpMMMb. .gP"Ya `7Mb,od8 .gP"Ya || || || + `YMMNq. MM 6W' `Wb MM `Wb MM' "' MM :MI I8 MM MM MM MM MM MM ,M' Yb MM' "',M' Yb || || || +. `MM MM 8M M8 MM M8 MM MM WmmmP" MM MM MM MM MM MM 8M"""""" MM 8M"""""" `' `' `' +Mb dM MM YA. ,A9 MM ,AP MM MM 8M MM MM MM MM MM MM YM. , MM YM. , ,, ,, ,, +P"Ybmmd" `Mbmo`Ybmd9' MMbmmd' .JMML. .JMML.YMMMMMb .JMML JMML.`Mbmo `Mbmo.JMML JMML.`Mbmmd'.JMML. `Mbmmd' db db db + MM 6' dP + .JMML. Ybmmmd' +Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray! +You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet. +So please don't use these styles. They're just here to put together the demo, and nothing more. +They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself. +Atomic design is philosophically complimentary with these CSS approaches: +* SMACSS by Jonathan Snook http://smacss.com/ +* OOCSS by Nicole Sullivan http://oocss.org/ +* BEM CSS Methology : http://bem.info/method/ +* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines +So feel free to use any of these approaches. Or don't. It's totally up to you. */ diff --git a/packages/patternengine-node-twig/test/parameter_hunter_tests.js b/packages/patternengine-node-twig/test/parameter_hunter_tests.js index 16bb8e202..a7192bd48 100644 --- a/packages/patternengine-node-twig/test/parameter_hunter_tests.js +++ b/packages/patternengine-node-twig/test/parameter_hunter_tests.js @@ -149,6 +149,150 @@ test.done(); }, - }; + 'pattern hunter finds and extends templates with verbose partials' : function(test){ + + //setup current pattern from what we would have during execution + var currentPattern = { + "fileName": "01-sticky-comment", + "subdir": "02-organisms/02-comments", + "name": "02-organisms-02-comments-01-sticky-comment", + "data": null, + "jsonFileData": {}, + "patternName": "sticky-comment", + "patternLink": "02-organisms-02-comments-01-sticky-comment/02-organisms-02-comments-01-sticky-comment.html", + "patternGroup": "organisms", + "patternSubGroup": "comments", + "flatPatternPath": "02-organisms-02-comments", + "key": "organisms-sticky-comment", + "template": "{{> 01-molecules/06-components/02-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "{{> 01-molecules/06-components/02-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}" + }; + var patternlab = { + patterns: [ + { + "fileName": "02-single-comment", + "subdir": "01-molecules/06-components", + "name": "01-molecules-06-components-02-single-comment", + "data": null, + "jsonFileData": {}, + "patternName": "single-comment", + "patternLink": "01-molecules-06-components-02-single-comment/01-molecules-06-components-02-single-comment.html", + "patternGroup": "molecules", + "patternSubGroup": "components", + "flatPatternPath": "01-molecules-06-components", + "key": "molecules-single-comment", + "template": "

    {{description}}

    ", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "

    {{description}}

    " + } + ], + config: { + debug: false + }, + data: { + description: 'Not a quote from a smart man' + } + }; + + var parameter_hunter = new ph(); + + parameter_hunter.find_parameters(currentPattern, patternlab); + test.equals(currentPattern.extendedTemplate, '

    A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

    '); + + test.done(); + }, + + 'pattern hunter finds and extends templates with fully-pathed partials' : function(test){ + + //setup current pattern from what we would have during execution + var currentPattern = { + "fileName": "01-sticky-comment", + "subdir": "02-organisms/02-comments", + "name": "02-organisms-02-comments-01-sticky-comment", + "data": null, + "jsonFileData": {}, + "patternName": "sticky-comment", + "patternLink": "02-organisms-02-comments-01-sticky-comment/02-organisms-02-comments-01-sticky-comment.html", + "patternGroup": "organisms", + "patternSubGroup": "comments", + "flatPatternPath": "02-organisms-02-comments", + "key": "organisms-sticky-comment", + "template": "{{> 01-molecules/06-components/02-single-comment.mustache(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "{{> 01-molecules/06-components/02-single-comment.mustache(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}" + }; + var patternlab = { + patterns: [ + { + "fileName": "02-single-comment", + "subdir": "01-molecules/06-components", + "name": "01-molecules-06-components-02-single-comment", + "data": null, + "jsonFileData": {}, + "patternName": "single-comment", + "patternLink": "01-molecules-06-components-02-single-comment/01-molecules-06-components-02-single-comment.html", + "patternGroup": "molecules", + "patternSubGroup": "components", + "flatPatternPath": "01-molecules-06-components", + "key": "molecules-single-comment", + "template": "

    {{description}}

    ", + "patternPartial": "", + "lineage": [ + ], + "lineageIndex": [ + ], + "lineageR": [ + ], + "lineageRIndex": [ + ], + "patternState": "", + "extendedTemplate": "

    {{description}}

    " + } + ], + config: { + debug: false + }, + data: { + description: 'Not a quote from a smart man' + } + }; + + var parameter_hunter = new ph(); + + parameter_hunter.find_parameters(currentPattern, patternlab); + test.equals(currentPattern.extendedTemplate, '

    A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

    '); + + test.done(); + } + + }; }()); diff --git a/packages/patternengine-node-twig/test/pattern_assembler_tests.js b/packages/patternengine-node-twig/test/pattern_assembler_tests.js index 361b6f15d..6ea9199c8 100644 --- a/packages/patternengine-node-twig/test/pattern_assembler_tests.js +++ b/packages/patternengine-node-twig/test/pattern_assembler_tests.js @@ -18,6 +18,23 @@ test.equals(results[0], '{{> molecules-comment-header}}'); test.equals(results[1], '{{> molecules-single-comment(description: \'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.\') }}'); + test.done(); + }, + + 'find_pattern_partials finds verbose partials' : function(test){ + + //setup current pattern from what we would have during execution + var currentPattern = { + "template": "

    {{> 01-molecules/06-components/03-comment-header.mustache }}

    {{> 01-molecules/06-components/02-single-comment(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}
    ", + }; + + var pattern_assembler = new pa(); + + var results = pattern_assembler.find_pattern_partials(currentPattern); + test.equals(results.length, 2); + test.equals(results[0], '{{> 01-molecules/06-components/03-comment-header.mustache }}'); + test.equals(results[1], '{{> 01-molecules/06-components/02-single-comment(description: \'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.\') }}'); + test.done(); }