node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

meal

Meal

A customizable scaffolding CLI tool.

$ meal make news card
 
Creates:
- /path/to/your/html/components/card-news.html
- /path/to/your/scss/components/_card-news.scss
- /path/to/your/js/components/_card-news.js
 
And replaces all string occurences in your templates:
html -
    <div class="card-COMPONTENT"... ->
    <div class="card-news"...
scss -
    .card-COMPONTENT... ->
    .card-news...
js   - 
    getElementByClassName('card-COMPONTENT')... ->
    getElementByClassName('card-news')...
 

Installation

first install it globally

$ npm install meal -g

Then call init in your project folder to generate the meal.json

$ meal init

Why

Consistent: By using consistent templates you can increase quality, enforce patterns and methodologies, add complexity, and maintain best practices.

Speedy: Generate the boilerplate you need to get started in an instant. By keeping your files abstract and modular, you no longer have to worry about adding weight to a project by including an entire framework.

Organized: Meal keeps your uncompiled files neatly named and organized within your source folder. Say hello to the simple yet effective "[component-type]-[component-name]" naming convention.

$meal make news card
 
Source:                    After:                Or After (component_types_as_dirs enabled)
card/ingredient.html       card-news.html        cards/news.html
card/ingredient.scss       _card-news.scss       cards/_news.scss
card/ingredient.js         _card-news.js         cards/_news.js

meal.json

After installation, you can specify the meal options:

{
    "ingredients": [
        {
            "type": "html",
            "output_type": "html",
            "component_types_as_dirs": true,
            "path": "/resources/markup/html/components",
            "prefix": ""
        },
        {
            "type": "scss",
            "output_type": "scss",
            "component_types_as_dirs": true,
            "path": "/resources/styles/scss/components",
            "import": {
                "name": "style.scss",
                "path": "/resources/scss/"
            },
            "prefix": "_"
        },
        {
            "type": "js",
            "output_type": "js",
            "component_types_as_dirs": true,
            "path": "/resources/scripts/js/components",
            "prefix": "_"
        }
    ],
    "components_dir": "/ingredients"
}

ingredients

Property Description Example
type The type of the source file's template ingredient.html
output_type The filetype that the source will compile to ingredient.html -> card-name.php
path The path to the output folder /public/includes
prefix The file's prefix **_**markup.html
component_types_as_dirs whether to output into separate directories or not false -> ../card-name.php, true -> ../card/name.php
import.name the name of the scss importing file style.scss
import.path the path to the importing file /resources/assets/scss/

components_dir

Spcifying the components directory will tell meal where to look for the template files.

Commands

Command Description Example
init Creates a meal.json in your current directory meal init
list Lists all generatable components meal list
make [NAME] [TYPE] generates files from the [TYPE] template using the [NAME] meal make news card

Make options

Option Description Example
--x__[TYPE]__ Skips the [TYPE] file generation meal make some card --xjs --xscss (Will skip the scss and js files)

Template Files

By default there are template files bundled with meal, however it is understandable that you may like to create your own... ingredients...

To start, go through the steps in the installation section then after running $ meal init edit the meal.json file's components_dir property to point where ever you like in your project directory (maybe something like "resources/meal_templates").

Within the templates folder, each sub folder will represent a separate component. Within each subfolder you will need to create three separate files:

  • ingredient.html
  • ingredient.scss
  • ingredient.js

When you run the $ meal make news card, meal will look for the card directory in your defined templates folder. From there it will copy over the contents respectively and create new component files as per the paths in your meal.json.

Before writing the new files, meal searches and replaces any occurence of the keyword (case sensative) COMPONENT with the defined component name. For example the following will grab the contents of the files within the card directory.

$ meal make news card

Next it will replace all occurences of COMPONENT with news

<!-- Template file -->
<div class="card-COMPONENT"><div>
 
<!-- Generated file -->
<div class="card-news"><div>
 

Component Naming Casing

The current casing control that meal allows when writing your template files is as follows:

String Render Example (using "news")
COMPONENT Lowercase card-COMPONTENT -> card-news
!COMPONENT Capitalize card-!COMPONTENT -> card-News
!COMPONENT! Uppercase card-!COMPONTENT! -> card-NEWS