Giter Club home page Giter Club logo

template's Introduction

Logo

A super-simple way to create new projects based on templates.

A list of known active templates for this program can be found here.

Install

npm install -g @fabiospampinato/template

Usage

demo.mp4
Overview

At a high level a template looks like this:

  1. A template is just a folder installed locally simply by git clone-ing it into ~/.templates, or you can copy it manually there.
  2. Each template has a folder named "template" inside it, which is what will be used for creating projects.
  3. Each template has a "template.json" file inside it, which lists all variables used by files inside the "template" folder.
  4. Each template may optionally have a folder named "hooks" inside it, containing files that will be executed at the appropriate times.

When creating a project from a template this happens:

  1. The user is asked to provide a value for each variable listed by the template inside its "template.json" file.
  2. The entire "template" folder inside the template is duplicated.
  3. Each non-binary file inside this folder is rendered with picolate using the provided variables.
  4. All rendered and binary files are copied in a newly created folder that has the name of the project you want to create.
  5. The postinstall hook, if present, is executed.
  6. That's it.
Command Line Interface

The following commands are available:

# Show help for the entire program
template --help

# Show help for a specific command
template install --help

# List all installed templates
template ls

# CD into an installed template
template cd my-template

# Install a template using a custom git endpoint
template install https://gitlab.com/some-user/some-repo.git my-template

# Install a template using a GitHub url
template install https://github.com/fabiospampinato/template-typescript-package typescript-package

# Install a template using a GitHub shorthand
template install fabiospampinato/template-typescript-package typescript-package

# Install a template from a local path
template install ./work-in-progress-template wip-template

# Automatically update all templates backed by git
template update

# Automatically update a specific template
template update my-template

# Uninstall a template
template uninstall my-template

# Create a new project from a template
template new typescript-package my-package
Template Folder

As mentioned in the "Overview" section a template must have this structure on disk:

.
├── hooks (optional)
│   └── postinstall.js (optional)
├── template
│   └── <anything>
└── template.json
  • You can put any files and folders you want under the "template" folder.
  • Everything inside it will be copied when creating a new project from it, and non-binary files will be rendered with picolate before saving them to disk.
  • Syntax highlighting for those files in your editor will probably be broken, but if you change the language to "Handlebars" it should look nice again.
  • Hooks are optional, each of them must export a function, that this program will call at the right times. Inside hooks process.cwd () will return the path of the new project.
  • The following hooks are supported:
    • postinstall.js: it will be called right after a new project has been created. It will receive the object of variables used to render the project.

The "template.json" file should look somewhat like this:

{
  "delimiters": [ // This is optional
    "start": "[[",
    "end": "]]"
  ],
  "variables": {
    "name": {
      "type": "string"
    },
    "description": {
      "type": "string"
    },
    "version": {
      "type": "string",
      "default": "1.0.0"
    },
    "author": {
      "type": "string"
    },
    "owner": {
      "type": "string"
    },
    "scoped": {
      "type": "boolean"
    },
    "tested": {
      "type": "boolean"
    }
  }
}
  • Custom template delimiters that picolate will use can be provided, if you need them.
  • The user will be prompted to provide a value for each variable you list here.
  • You should list every single variable referenced by any of your template files.
  • A variable can either be of type "string" or of type "boolean".
  • A variable can also provide a default value, to allow the user to use that value quickly just by pressing enter.
Template Overrides

As we saw in the "Templates Folder" section each template must provide a metadata "template.json" file, listing all the variables it uses, and optionally providing some default values for them.

There's also a way to override this metadata, by having a file at ~/.templates/templates.json that looks like this:

{
  "typescript-package": {
    "variables": {
      "author": {
        "default": "Fabio Spampinato"
      },
      "owner": {
        "default": "fabiospampinato"
      }
    }
  },
  "some-other-template": {
    "variables": {
      "someOtherVariable": {
        "default": "Some default value"
      }
    }
  }
}

This is very useful because:

  • In order for a template to be usable by a wide range of people it makes no sense to specify for example a default value for the "author" variable.
  • Still, once you install a template you probably know who the author is going to be, and you don't want to type out that informattion a million times, so this way you can override defaults for a template.

License

MIT © Fabio Spampinato

template's People

Contributors

fabiospampinato avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

template's Issues

Hooks

Thank you for your amazing work on this.

I wish it had before and after hooks.

Here's what I need to do:

  1. CD into the newly created template
  2. Use the data from variables to do stuff e.g. create a GitHub repo based on the {{name}} entered. Sadly, when it runs I don't have the {{name}} data anywhere, I can't cd {{name}} or create a new GitHub repo with that {{name}} without that data.

SEND HALP!

Maybe a better name

First of all, I think this project is awesome. I saw it on your medium post about vscode-extensions, and I've been looking for something like it for a long time. I used Khaos previously, even after it was inactive for years.

Anyways, the name template is very generic, and something more unique would be a better fit (like how Khaos was unique). Easy to remember, easy to search for on google or github, and can fit a unique npm package (unlike the namespaced one you have now).

feature I working on.

I am trying to make some built in template to easy project creating and add the ability to merge and scaffold using templates. I name the first inbuilt template config4. I trying to create what I call a generator. The difference between generator and create is generator is use to add code to project where create is use primarily to replace. The main reason generator where made is to handle the problem
of every program wanting there version of package manager( yarn ,pnpm,npm), Until this feature is add , you would keep having to put
"packageManager": "[email protected]" or what ever package manager your want in package.json, delete there lockfiles and other
annoying things over and over ,this feature attempts to solve all that by just running

template gen config4 defaults

I want generate to do a little more I just thought this might be usful everying still work in progress. But i would like to hear people thought as i develop,. Especially if you don't want this type of thing that way I know to rename my fork. I much rather try to work together i feel early feedback is the key to that.

Work that i done so far.

*Rename project to template output because it better reflect what is is asking 4

  • Added code to help launch template (your project even though i think it might be better name t-n-t for template and typescript a power full combination.) In vscode. I was going to use TNT; if i have to create drive work with no chance of getting merged back.
  • upgrade libraries
  • add depending ts-node but allowed for execution.
  • create a new launch script in package.json to execute typescript in ts-node.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.