Miss any of our Open RFC calls?Watch the recordings here! »

temples

1.2.1 • Public • Published

Temples

🕍

Automatically generate files from predefined templates. No boilerplate.

Creating the same files with the same boilerplate code gets tedious after a while. Temples automates the process by giving you the ability to define Handlebars templates, output paths, and the commands to generate these given your CLI arguments.


Example of Temples CLI


Installation

Install Temples in your repository or globally:

npm install [-g] temples

Usage

Temples reads from a .temples.yaml file in the root directory of your project.

# Invokes a CLI 
temples
 
# Or, directly specify command and value for each key 
temples [command] [--[key] [value], ...]

Running temples without arguments invokes a CLI that will prompt for a command and the values for each key defined under prompt in .temples.yaml.

Configuration

.temples.yaml is the configuration file for Temples. Each command has a list of temples, each one defining which template files to use, where to output the compiled files, and default mapping for the key value pairs. You can further configure each command.

The schema for .temples.yaml:

[command]:
  base: [base_path]
  prompt:
    - [key]
      ...
  temples:
    template: [template_path]
      output: [output_path]
      default:
        [key]: [value]
        ...
      ...
...

base

Every path (e.g. template, output) will be relative to the given base. This helps avoid redundancy in specifying path values in temples.

If you need to differentiate the base path for all templates and outputs, you can specify template and output under base.

base:
  template: [template_base_path]
  output: [output_base_path]

prompt

prompt takes in a list of keys that the user will be prompted for in the CLI.

Follow this syntax to provide documentation for a key:

prompt:
  key: [key]
    doc: [documentation] # displayed when prompted 

temples

The list of files to generate when running the command. This can take an arbitrary number if you want to generate more than one file from different templates. For example in React, you might want to create a Javascript file, a css stylesheet, and a test file when generating a new component.

  • template: Path to template file. A template file can have any extension as long as it has text and abides by Handlebars syntax. You could establish your own template conventions like file.template to be explicit. Omitting a template will create an empty file.

  • output: Path to output file. Temples will create any non-existent directories along the given path if needed.

  • default: Default key value pairs if not provided by the CLI command.

Note: if you wish to use a key when defining template and output, you can wrap the values with quotes and use the same Handlebars syntax (e.g. “path/to/{{ module }}.js”).

Template Helpers

Temples uses Handlebars syntax for defining file templates and dynamic output paths. We've added a few helpers to provide more flexibility within the templates:

camel

This helper will convert your variable to camelCase.

# Template 
{{ camel name }}
# Input: { name: "BigButton" } 
bigButton

kebab

This helper will convert your variable to kebab-case.

# Template 
{{ kebab name }}
# Input: { name: "bigButton" } 
big-button

snake

This helper will convert your variable to snake_case.

# Template 
{{ snake name }}
# Input: { name: "big-button" } 
big_button

title

This helper will convert your variable to TitleCase.

# Template 
{{ snake name }}
# Input: { name: "big_button" } 
BigButton

Naming Conflicts

If a variable conflicts with a helper name (e.g. {{ title }}), Handlebars will treat it as a helper instead of a variable. You can namespace the variable with this or ./ to avoid naming conflicts.

{{ this.title }}

Example

This is an example .temples.yaml file for a React project:

# Generate a new component 
component:
  # All paths are relative to src folder 
  base: ./src
  temples:
    # Component entry point file 
    template: component.template
      output: 'components/{{ name }}/index.js'
      default:
        name: Component
 
    # Component CSS stylesheet 
    template: styles.template
      output: 'components/{{ name }}/{{ camel name }}.module.scss'
 
    # Component test file 
    template: test.template
      output: 'components/{{ name }}/test.js'

component.template

import React from 'react';
import styles from './{{ camel name }}.module.scss';

const {{ name }} = () => {
    return null;
};

export default {{ name }};

styles.template

.{{ kebab name }} {

}

test.template

import React from 'react';
import { render } from '@testing-library/react'

describe('{{ name }}', () => {})

To run the command:

temples component --name Button

License

Copyright © 2020, Gino Jacob. MIT License.

Install

npm i temples

DownloadsWeekly Downloads

42

Version

1.2.1

License

MIT

Unpacked Size

20 kB

Total Files

10

Last publish

Collaborators

  • avatar