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

folder-template

v0.1.4

Published

A directory / files generator based on templates

Downloads

113

Readme

Jump to

Table of contents

Overview

[jump to TOC]

folder-template is an easy to use directory / files generator.

Its main purpose is to help with generation of components, modules and other folder / files structures from predefined and easy to configure templates.

It's a simpler and more focused alternative to angular-cli and similar tools.

Check the screenshots to quickly get a better idea.

TL;DR

[jump to TOC]

  1. Install the package:
$ npm install folder-template --save-dev
  1. Expose the CLI through your package.json's scripts:
{
    ...
    "scripts": {
        ...
        "generate": "ft"
    }
    ...
}
  1. Define templates inside a /templates directory located in your project's root:
    Samples here

  2. Define questions and variable names inside a .config located in each template folder (Eg: /templates/component/.config)

  3. Run the npm command to generate files / folders:

$ npm run generate component ./

component being a folder name from your /templates directory and ./ is the destination path.

Features

[jump to TOC]

  • Simple configuration
  • Ability to query the user for data
  • Compilation is done using handlebars
  • Access to all handlebars helpers
  • Supports nested structures

Getting started

Installing folder-template

[jump to TOC]

$ npm install folder-template --save-dev

This adds the ft CLI command locally to your project and can now be used in your project's npm scripts.

Expose folder-template through npm scripts

[jump to TOC]

Add the following to your project's package.json's scripts section:

{
    ...
    "scripts": {
        ...
        "generate": "ft"
    }
    ...
}

This will basically create a npm task in your project which basically exposes the CLI of the folder-template package.

Define some templates

[jump to TOC]

Now we need some templates inside a /templates directory in the root of your project.
There are a few available in the /examples/sample-templates directory of folder-template's github repository.
The sample templates are for Angular 2 but similarily they can be generated for any framework.

Basically every folder inside the /templates directory is a template.
Whatever is inside each of these folders (except .config file) will be compiled with handlebars and copied in the specified destination.

|-- project-root
|   |-- templates
|   |   |-- component
|   |   |   |-- {{hyphenate name}}
|   |   |   |   |-- {{hyphenate name}}.component.css.tpl
|   |   |   |   |-- {{hyphenate name}}.component.html.tpl
|   |   |   |   |-- {{hyphenate name}}.component.ts.tpl
|   |   |   |-- .config
|   |   |-- service
|   |   |   |-- {{hyphenate name}}.service.ts.tpl
|   |   |   |-- .config
|   |-- package.json
|   |-- Gruntfile.js
|   |-- LICENSE.md
|   |-- README.md

Setup the .config file

[jump to TOC]

When you run folder-template, the CLI will ask some questions to collect data to populate the templates.

The questions and the variable names to store the answers are defined inside a .config folder inside each of the templates folders.
For example the .config file inside the /templates/component directory contains the following code:

{
  "meta": {
    "description": "This is some optional description. Eg. Please enter all the input in 'hyphen-case':"
  },
  "name": "Enter name for the new component:",
  "selector": "Enter the name of the selector:"
}

The key names (name, selector) become handlebars variables to be used inside the templates and the filenames.
They will be replaced with the answers given to the questions.
The meta.description property is optional and holds some optional instructions to display to the user before collecting the data.

Generate files / folders

[jump to TOC]

Assuming that the steps above were followed, you can start generating files and folders using commands like the following (in your project's root directory):

$ npm run generate component ./

Where:

  • generate is the alias to folder-template CLI (ft) defined in scripts property of package.json
  • component is the name of one of the direct folders inside /templates directory from your project's root (specifically these)
  • and ./ is the path where you want the generated files to appear (relative to your project's root)

You should now be asked some questions about the new component (based on the .config file) and then you should find a new folder with the name you specified in the root of your project.

Screenshots

[jump to TOC]

1. Define a templates directory in your project's root directory:

2. Setup your templates and specify variables and questions in a .config file sitting in each template folder:

3. Generate a template and you'll be queried for data based on the .config file:

Completion screen:

Example of template contents:

Notes

[jump to TOC]
You can use handlebars to parametrise both the contents of files and also the names of the directories and files. Examples here.
You can also use all the handlebars helpers as can be seen in the examples and in screenshots.

Sample project

[jump to TOC]

There is a sample project in the github repo inside /examples/sample-project

To use it, clone the repo:

git clone [email protected]:efidiles/folder-template.git  

navigate to /examples/sample-project:

cd folder-template/examples/sample-project

run:

npm run generate component ./

(no need for npm install as it will be done automatically)

Authors

[jump to TOC]

Eduard Fidiles

John Kilpatrick

License

[jump to TOC]

Copyright © 2016, Eduard Fidiles. Released under the MIT license.