npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

yeoman-blender

v0.1.0

Published

Yeoman generator methods as mixins

Downloads

5

Readme

Yeoman Blender

Yeoman generator methods as mixins.

This module helps you organize your Yeoman generator code by splitting methods into multiple modules, aka mixins. You can write generator's prototype mixins (methods will run sequentially) or split methods by feature/option and priority upon the Yeoman queue system.

Installation

$ npm i yeoman-blender

Usage

# Move into your generator folder
$ cd /path/to/your/yeoman/generator

# Create the "flavors" folder into the "app" or subgenerator folder
$ mkdir app/flavors

# Split your generator features by flavor
$ mkdir -p app/flavors/{css,ui}

# Create modules to organize methods by priority
$ touch app/flavors/css/{initializing.js,prompting.js,writing.js}
$ touch app/flavors/ui/{initializing.js,prompting.js,writing.js}

Supported priorities are:

  • initializing (example: app/flavors/css/initializing.js)
  • prompting (example: app/flavors/css/prompting.js)
  • configuring (example: app/flavors/css/configuring.js)
  • writing (example: app/flavors/css/writing.js)
  • install (example: app/flavors/css/install.js)
  • end (example: app/flavors/css/end.js)

Write your generator methods inside these modules:

// generator/app/flavors/css/writing.js
module.exports = {
  css: function() {
    this.copy('main.css', 'css/main.css');
  }
};

You can also define generator's prototype methods:

// generator/app/helpers.js
module.exports = {
  sayHello: function() {
    this.log('Hello');
  }
};

Then in generator/app/index.js:

'use strict';

var path    = require('path');
var yeoman  = require('yeoman-generator');
var blender = require('yeoman-blender')();

// Add generator methods (order counts)
blender.methods([
  require('./path/to/generator/app/mixins')
]);

// Add flavor directories (order counts)
blender.flavors([
  path.join(__dirname, 'features', 'base'),
  path.join(__dirname, 'features', 'css'),
  path.join(__dirname, 'features', 'ui')
]);

// Then call blend() to get the global mixin
module.exports = yeoman.generators.Base.extend(blender.blend());

Example

Let's take an example. You need to write a generator that let the developer choose between several CSS preprocessors (SASS, Less, Stylus, etc) and several UI frameworks (Twitter Bootstrap, Foundation, SemanticUI, etc). Instead of having a big bloated generator file, you can split this generator into two "flavors" (or "features"): css and ui. You create a flavors folder into your app directory (or subgenerator) and one folder per flavor:

generator/app/index.js
generator/app/templates/
generator/app/flavors/css/
generator/app/flavors/css/initializing.js
generator/app/flavors/css/prompting.js
generator/app/flavors/css/configuring.js
generator/app/flavors/css/writing.js
generator/app/flavors/ui/
generator/app/flavors/ui/initializing.js
generator/app/flavors/ui/prompting.js
generator/app/flavors/ui/writing.js

As you can see, each flavor folder contains modules named with Yeoman queue names (or priorities). Each module exports a plain object with methods to invoke on that given queue:

// generator/app/flavors/css/writing.js
module.exports = {
  css: function() {
    this.copy('main.css', 'css/main.css');
  }
};

This module will be merged into the generator prototype like this:

{
  writing: {
    css: function() {
      this.copy('main.css', 'css/main.css');
    }
  }
}

Flavors help you write modular code.

You add flavors with the flavors() method that takes an array of paths:

blender.flavors([
  path.join(__dirname, 'flavors', 'base'),
  path.join(__dirname, 'flavors', 'css'),
  path.join(__dirname, 'flavors', 'ui')
]);

You can also add mixins that will be directly merged into the generator's prototype. This can be useful for initialization or to define common helpers. These mixins can be added with the methods() method that takes an array of mixins.

blender.methods([
  require('./lib/init.js'),
  require('./lib/helpers.js')
]);

Once you setup your methods and flavors, you just need to call blend() to retrieve the global mixin to give to Yeoman generator extend() method:

var Generator = yeoman.generators.Base.extend(blender.blend());

License

MIT License.