├── .gitignore
├── templates
├── _gitignore
├── package.json
├── vanillajs-boilerplate
│ ├── bower.json
│ ├── index.html
│ └── src
│ │ └── my-element.html
├── _editorconfig
├── polymer-boilerplate
│ ├── bower.json
│ ├── index.html
│ └── src
│ │ └── my-element.html
├── x-tag-boilerplate
│ ├── bower.json
│ ├── index.html
│ └── src
│ │ └── my-element.html
├── gulpfile.js
└── README.md
├── .travis.yml
├── .npmignore
├── test
└── test-load.js
├── LICENSE
├── package.json
├── README.md
└── slushfile.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | temp
3 | *.log
4 | .idea
5 | .gitkeep
--------------------------------------------------------------------------------
/templates/_gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | node_modules/
3 | .tmp/
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - 'iojs'
5 | - '0.12'
6 | - '0.10'
7 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | temp
3 | *.log
4 | .idea
5 |
6 |
7 | # don't ignore .npmignore files
8 | !.npmignore
9 |
--------------------------------------------------------------------------------
/test/test-load.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 |
3 | // Load all slush generator tasks:
4 | require('../slushfile');
5 |
6 | describe('slush element generator', function() {
7 | it('can be imported without blowing up', function(done) {
8 | var app = gulp.start().isRunning;
9 | if(app !== false) done();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/templates/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true<% if (addGulpTasks == true) { %>,
3 | "devDependencies": {
4 | "gulp": "^3.8.7",<% if (boilerplate != "VanillaJS") { %>
5 | "gulp-replace": "^0.5.4",<% } %>
6 | "gulp-connect-multi": "^1.0.8",
7 | "gulp-clean": "^0.3.1",
8 | "gh-pages": "^0.11.0"
9 | }<% } %>
10 | }
11 |
--------------------------------------------------------------------------------
/templates/vanillajs-boilerplate/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "<%= githubRepository %>",
3 | "version": "0.0.0",
4 | "description": "<%= elementDescription %>",
5 | "license": "MIT",
6 | "main": "src/<%= elementName %>.html",
7 | "keywords": [
8 | "web-components"
9 | ],
10 | "ignore": [
11 | "**/.*",
12 | "node_modules",
13 | "bower_components"
14 | ],
15 | "dependencies": {
16 | "webcomponentsjs": "^0.7.3"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/templates/_editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 | # Change these settings to your own preference
9 | indent_style = space
10 | indent_size = 4
11 |
12 | # We recommend you to keep these unchanged
13 | end_of_line = lf
14 | charset = utf-8
15 | trim_trailing_whitespace = true
16 | insert_final_newline = true
17 |
18 | [*.md]
19 | trim_trailing_whitespace = false
20 |
--------------------------------------------------------------------------------
/templates/polymer-boilerplate/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "<%= githubRepository %>",
3 | "version": "0.0.0",
4 | "description": "<%= elementDescription %>",
5 | "license": "MIT",
6 | "main": "dist/<%= elementName %>.html",
7 | "keywords": [
8 | "polymer",
9 | "web-components"
10 | ],
11 | "ignore": [
12 | "**/.*",
13 | "node_modules",
14 | "bower_components"
15 | ],
16 | "dependencies": {
17 | "polymer": "Polymer/polymer#^1.0.0"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/templates/x-tag-boilerplate/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "<%= githubRepository %>",
3 | "version": "0.0.0",
4 | "description": "<%= elementDescription %>",
5 | "license": "MIT",
6 | "main": "dist/<%= elementName %>.html",
7 | "keywords": [
8 | "x-tag",
9 | "web-components"
10 | ],
11 | "ignore": [
12 | "**/.*",
13 | "node_modules",
14 | "bower_components"
15 | ],
16 | "dependencies": {
17 | "x-tag-core": "^1.1.6",
18 | "webcomponentsjs": "^0.7.3"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/templates/polymer-boilerplate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | <<%= githubRepository %>>
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | <<%= elementName %>><%= elementName %>>
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/templates/x-tag-boilerplate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | <<%= githubRepository %>>
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | <<%= elementName %>><%= elementName %>>
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/templates/vanillajs-boilerplate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | <<%= githubRepository %>>
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | <<%= elementName %>><%= elementName %>>
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/templates/vanillajs-boilerplate/src/my-element.html:
--------------------------------------------------------------------------------
1 |
23 |
--------------------------------------------------------------------------------
/templates/x-tag-boilerplate/src/my-element.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
26 |
--------------------------------------------------------------------------------
/templates/polymer-boilerplate/src/my-element.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2014, Beto Muniz
4 |
5 | Permission is hereby granted, free of charge, to any person
6 | obtaining a copy of this software and associated documentation
7 | files (the "Software"), to deal in the Software without
8 | restriction, including without limitation the rights to use,
9 | copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the
11 | Software is furnished to do so, subject to the following
12 | conditions:
13 |
14 | The above copyright notice and this permission notice shall be
15 | included in all copies or substantial portions of the Software.
16 |
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
24 | OTHER DEALINGS IN THE SOFTWARE.
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "slush-element",
3 | "description": "A slush generator of custom elements with Polymer, X-Tag or VannilaJS based in generator-element",
4 | "version": "1.0.0",
5 | "homepage": "https://github.com/webcomponents/slush-element",
6 | "author": {
7 | "name": "Beto Muniz",
8 | "email": "contato@betomuniz.com"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git://github.com/webcomponents/slush-element.git"
13 | },
14 | "bugs": {
15 | "url": "https://github.com/webcomponents/slush-element/issues"
16 | },
17 | "licenses": [
18 | {
19 | "type": "MIT",
20 | "url": "https://github.com/webcomponents/slush-element/blob/master/LICENSE"
21 | }
22 | ],
23 | "scripts": {
24 | "test": "mocha --reporter spec"
25 | },
26 | "main": "slushfile.js",
27 | "dependencies": {
28 | "gulp": "3.9.1",
29 | "gulp-conflict": "^0.4.0",
30 | "gulp-install": "0.6.0",
31 | "gulp-rename": "1.2.2",
32 | "gulp-template": "4.0.0",
33 | "inquirer": "1.2.1",
34 | "mocha": "3.1.0",
35 | "underscore.string": "3.3.4"
36 | },
37 | "keywords": [
38 | "slushgenerator",
39 | "webcomponents",
40 | "web-components",
41 | "web components",
42 | "custom-elements",
43 | "custom elements",
44 | "polymer",
45 | "x-tag",
46 | "gulp"
47 | ],
48 | "devDependencies": {
49 | "mock-gulp-dest": "^0.1.1",
50 | "mocha": "*"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/templates/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var connect = require('gulp-connect-multi')();
3 | <% if (boilerplate != "VanillaJS") { %>var replace = require('gulp-replace');<% } %>
4 | var ghpages = require('gh-pages');
5 | var clean = require('gulp-clean');
6 | var path = require('path');
7 |
8 | var copy = function (){
9 | gulp.src([
10 | 'bower_components/**/*',
11 | 'demo/*',
12 | 'src/*',
13 | 'index.html'
14 | ], {
15 | base: './'
16 | })
17 | .pipe(gulp.dest('./.tmp/'));
18 | }
19 | <% if (boilerplate != "VanillaJS") { %>
20 | var build = function (){
21 | gulp.src(['src/*'])
22 | .pipe(replace(/bower_components/g, '..'))
23 | .pipe(gulp.dest('dist/'));
24 | }<% } %>
25 | var ignore = function (){
26 | gulp.src(['./.tmp/bower_components/<%= githubRepository %>'])
27 | .pipe(clean());
28 | }
29 |
30 | gulp.task('server', connect.server({
31 | root: [__dirname],
32 | port: 8000,
33 | livereload: true
34 | }));
35 | <% if (boilerplate != "VanillaJS") { %>
36 | gulp.task('build', ['beforebuild'],function(){
37 | build()
38 | });<% } %>
39 | gulp.task('beforebuild', function(){
40 | copy()
41 | ignore()
42 | });
43 |
44 | gulp.task('deploy', ['beforebuild'], function () {
45 |
46 | ghpages.publish(path.join(__dirname, '.tmp/'), {
47 | clone: 'bower_components/<%= githubRepository %>',
48 | logger: function(message) {
49 | console.log(message);
50 | }
51 | } , function(err) {
52 |
53 | console.log("");
54 | if(err.errno == 34){
55 | console.log("Error: You need run 'gulp build' before deploy your custom element in gh-pages.\n");
56 | } else if(typeof err.errno == "undefined"){
57 | console.log("Error: You need add a remote repository before deploy your custom element in gh-pages.\n");
58 | }
59 |
60 | }, true);
61 |
62 | });
--------------------------------------------------------------------------------
/templates/README.md:
--------------------------------------------------------------------------------
1 | # <<%= githubRepository %>>
2 |
3 | > <%= elementDescription %>
4 |
5 | ## Demo
6 |
7 | [Check it live!](http://<%= username %>.github.io/<%= githubRepository %>)
8 |
9 | ## Install
10 |
11 | Install the component using [Bower](http://bower.io/):
12 |
13 | ```sh
14 | $ bower install <%= githubRepository %> --save
15 | ```
16 |
17 | Or [download as ZIP](https://github.com/<%= username %>/<%= githubRepository %>/archive/master.zip).
18 |
19 | ## Usage
20 |
21 | 1. Import Web Components' polyfill:
22 |
23 | ```html
24 |
25 | ```
26 |
27 | 2. Import Custom Element:
28 |
29 | ```html
30 |
31 | ```
32 |
33 | 3. Start using it!
34 |
35 | ```html
36 | <<%= elementName %>><%= elementName %>>
37 | ```
38 |
39 | ## Options
40 |
41 | Attribute | Options | Default | Description
42 | --- | --- | --- | ---
43 | `foo` | *string* | `bar` | Lorem ipsum dolor.
44 |
45 | ## Methods
46 |
47 | Method | Parameters | Returns | Description
48 | --- | --- | --- | ---
49 | `unicorn()` | None. | Nothing. | Magic stuff appears.
50 |
51 | ## Events
52 |
53 | Event | Description
54 | --- | ---
55 | `onsomething` | Triggers when something happens.
56 |
57 | ## Development
58 |
59 | In order to run it locally you'll need to fetch some dependencies and a basic server setup.
60 |
61 | * Install [Bower](http://bower.io/) & [Gulp](http://gulpjs.com/):
62 |
63 | ```sh
64 | $ [sudo] npm install -g bower gulp
65 | ```
66 |
67 | * Install local dependencies:
68 |
69 | ```sh
70 | $ bower install && npm install
71 | ```
72 |
73 | * To test your project, start the development server and open `http://localhost:8000`.
74 |
75 | ```sh
76 | $ gulp server
77 | ```
78 |
79 | <% if (boilerplate != "VanillaJS") { %>* To build the distribution files before releasing a new version.
80 |
81 | ```sh
82 | $ gulp build
83 | ```
84 | <% } %>
85 | * To provide a live demo, send everything to `gh-pages` branch.
86 |
87 | ```sh
88 | $ gulp deploy
89 | ```
90 |
91 | ## Contributing
92 |
93 | 1. Fork it!
94 | 2. Create your feature branch: `git checkout -b my-new-feature`
95 | 3. Commit your changes: `git commit -m 'Add some feature'`
96 | 4. Push to the branch: `git push origin my-new-feature`
97 | 5. Submit a pull request :D
98 |
99 | ## History
100 |
101 | For detailed changelog, check [Releases](https://github.com/<%= username %>/<%= githubRepository %>/releases).
102 |
103 | ## License
104 |
105 | [MIT License](http://opensource.org/licenses/MIT)
106 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Slush Generator
for Custom Elements
2 |
3 | [](http://npmjs.org/slush-element)
4 | [](http://npmjs.org/slush-element)
5 | [](https://travis-ci.org/webcomponents/slush-element)
6 | [](https://david-dm.org/webcomponents/slush-element)
7 |
8 | 
9 |
10 | > A Slush Generator that provides a functional boilerplate to easily create Custom Elements using [Polymer](http://www.polymer-project.org/), [X-Tag](http://x-tags.org/) or [VanillaJS](http://vanilla-js.com/).
11 |
12 | > All templates are based in the boilerplates authored by the [WebComponents.org team](https://github.com/webcomponents/):
13 |
14 | > * [Polymer Boilerplate](https://github.com/webcomponents/polymer-boilerplate)
15 | > * [X-Tag Boilerplate](https://github.com/webcomponents/x-tag-boilerplate)
16 | > * [VanillaJS Boilerplate](https://github.com/webcomponents/element-boilerplate)
17 |
18 | ## Install
19 |
20 | Install this generator using NPM:
21 |
22 | ```sh
23 | $ [sudo] npm install -g slush-element
24 | ```
25 |
26 | ## Getting Started
27 |
28 | There are two different generators available.
29 |
30 | * The first one used to scaffold out new **individual elements**:
31 |
32 | ```sh
33 | $ slush element
34 | ```
35 |
36 | ```
37 | [?] What do you want to use?
38 | [?] What's the name of your element?
39 | [?] Do you want to include lifecycle callbacks?
40 | ```
41 |
42 | Which will generate the following file::
43 |
44 | ```
45 | .
46 | └── my-element.html
47 | ```
48 |
49 | * The second one is used to scaffold an **entire project**:
50 |
51 | ```sh
52 | $ slush element:repo
53 | ```
54 |
55 | ```
56 | [?] What do you want to use?
57 | [?] What's the GitHub repository?
58 | [?] What's your GitHub username?
59 | [?] What's the name of your element?
60 | [?] How would you describe the element?
61 | [?] Do you want to include lifecycle callbacks?
62 | [?] Do you want to include some useful Gulp tasks?
63 | ```
64 |
65 | Which will generate the following project structure with npm and bower dependencies installed:
66 |
67 | ```
68 | .
69 | ├── .editorconfig
70 | ├── .gitignore
71 | ├── bower.json
72 | ├── bower_components/
73 | ├── package.json
74 | ├── index.html
75 | ├── node_modules/
76 | ├── gulpfile.js
77 | ├── src/my-element.html
78 | └── README.md
79 | ```
80 |
81 | > _**Note**: files will be generated in the current directory, so be sure to change to a new directory before running those commands if you don't want to overwrite existing files._
82 |
83 | ## Contributing
84 |
85 | 1. Fork it!
86 | 2. Create your feature branch: `git checkout -b my-new-feature`
87 | 3. Commit your changes: `git commit -m 'Add some feature'`
88 | 4. Push to the branch: `git push origin my-new-feature`
89 | 5. Submit a pull request :D
90 |
91 | ## Team
92 |
93 | This project is maintained by these people and a bunch of awesome [contributors](https://github.com/webcomponents/generator-element/graphs/contributors).
94 |
95 | [](https://github.com/obetomuniz) | [](https://github.com/zenorocha)
96 | --- | --- | --- | --- | ---
97 | [Beto Muniz](https://github.com/obetomuniz) | [Zeno Rocha](https://github.com/zenorocha)
98 |
99 | ## License
100 |
101 | [MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org
102 |
--------------------------------------------------------------------------------
/slushfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp'),
4 | install = require('gulp-install'),
5 | conflict = require('gulp-conflict'),
6 | template = require('gulp-template'),
7 | rename = require('gulp-rename'),
8 | _ = require('underscore.string'),
9 | inquirer = require('inquirer');
10 |
11 | var isTrue = function(v){
12 | return v === true || v === "true" || v === "y" || v === "yes" || v === "Y" || v === "Yes" ? true : false;
13 | }
14 |
15 | /* ==========================================================================
16 | Default task
17 | ========================================================================== */
18 |
19 | gulp.task('default', function(done) {
20 | var prompts = [{
21 | type: 'list',
22 | name: 'boilerplate',
23 | message: 'What do you want to use?',
24 | choices: ['Polymer', 'X-Tag', 'VanillaJS'],
25 | default: 'Polymer'
26 | }, {
27 | name: 'elementName',
28 | message: "What's the name of your element?",
29 | default: 'my-element'
30 | }, {
31 | name: 'addLifeCycles',
32 | message: "Do you want to include lifecycle callbacks?",
33 | default: "Yes"
34 | }];
35 |
36 | /* Questions
37 | ====================================================================== */
38 | inquirer.prompt(prompts).then(function(answers) {
39 | var files = [];
40 |
41 | if (answers.boilerplate === 'Polymer') {
42 | files.push(__dirname + '/templates/polymer-boilerplate/src/**');
43 | } else if (answers.boilerplate === 'X-Tag') {
44 | files.push(__dirname + '/templates/x-tag-boilerplate/src/**');
45 | } else if (answers.boilerplate === 'VanillaJS') {
46 | files.push(__dirname + '/templates/vanillajs-boilerplate/src/**');
47 | } else {
48 | files.push(__dirname + '/templates/polymer-boilerplate/src/**');
49 | }
50 |
51 | answers.addGulpTasks = false;
52 |
53 | if (isTrue(answers.addLifeCycles)) {
54 | answers.addLifeCycles = true;
55 | }
56 |
57 | gulp.src(files)
58 | .pipe(template(answers))
59 | .pipe(rename(function(file) {
60 | if (file.basename[0] === '_') {
61 | file.basename = '.' + file.basename.slice(1);
62 | }
63 | if (file.basename === 'my-element') {
64 | file.basename = _.slugify(answers.elementName);
65 | }
66 | }))
67 | .pipe(conflict('./'))
68 | .pipe(gulp.dest('./'))
69 | .pipe(install())
70 | .on('end', function() {
71 | done();
72 | });
73 | });
74 | });
75 |
76 | /* ==========================================================================
77 | Repo task
78 | ========================================================================== */
79 |
80 | gulp.task('repo', function(done) {
81 | var prompts = [{
82 | type: 'list',
83 | name: 'boilerplate',
84 | message: 'What do you want to use?',
85 | choices: ['Polymer', 'X-Tag', 'VanillaJS'],
86 | default: 'Polymer'
87 | }, {
88 | name: 'githubRepository',
89 | message: "What's the GitHub repository?",
90 | default: 'my-repo'
91 | }, {
92 | name: 'username',
93 | message: "What's your GitHub username?",
94 | default: 'my-user'
95 | }, {
96 | name: 'elementName',
97 | message: "What's the name of your element?",
98 | default: 'my-element'
99 | }, {
100 | name: 'elementDescription',
101 | message: "How would you describe the element?",
102 | default: 'My awesome Custom Element'
103 | }, {
104 | name: 'addLifeCycles',
105 | message: "Do you want to include lifecycle callbacks?",
106 | default: "Yes"
107 | }, {
108 | name: 'addGulpTasks',
109 | message: "Do you want to include some useful Gulp tasks?",
110 | default: "Yes"
111 | }];
112 |
113 | /* Questions
114 | ====================================================================== */
115 | inquirer.prompt(prompts).then(function(answers) {
116 | var files = [];
117 |
118 | files.push(__dirname + '/templates/_editorconfig');
119 | files.push(__dirname + '/templates/_gitignore');
120 | files.push(__dirname + '/templates/README.md');
121 |
122 | if (answers.boilerplate === 'Polymer') {
123 | files.push(__dirname + '/templates/polymer-boilerplate/**');
124 | } else if (answers.boilerplate === 'X-Tag') {
125 | files.push(__dirname + '/templates/x-tag-boilerplate/**');
126 | } else if (answers.boilerplate === 'VanillaJS') {
127 | files.push(__dirname + '/templates/vanillajs-boilerplate/**');
128 | } else {
129 | files.push(__dirname + '/templates/polymer-boilerplate/**');
130 | }
131 |
132 | if (isTrue(answers.addGulpTasks)) {
133 | answers.addGulpTasks = true;
134 | files.push(__dirname + '/templates/package.json');
135 | }
136 |
137 | if (isTrue(answers.addLifeCycles)) {
138 | answers.addLifeCycles = true;
139 | }
140 |
141 | if (isTrue(answers.addGulpTasks)) {
142 | files.push(__dirname + '/templates/gulpfile.js');
143 | }
144 |
145 | gulp.src(files)
146 | .pipe(template(answers))
147 | .pipe(rename(function(file) {
148 | if (file.basename[0] === '_') {
149 | file.basename = '.' + file.basename.slice(1);
150 | }
151 | if (file.basename === 'my-element') {
152 | file.basename = _.slugify(answers.elementName);
153 | }
154 | }))
155 | .pipe(conflict('./'))
156 | .pipe(gulp.dest('./'))
157 | .pipe(install())
158 | .on('end', function() {
159 | done();
160 | });
161 | });
162 | });
163 |
--------------------------------------------------------------------------------