Scaffolding Projects

with Plop

What do you generate?

Why code generation?

source: xkcd.com/1205

Why code generation?

• Keeps you at the task
• Avoid context switching
• Automate manual labour
• Correctly name files, component class, imports
• Store a best-practice boilerplate for re-use

There is more to it, than saving time

import MyComponent from './my-component'
const myComponent = new MyComponent

<my-component></my-component>

Ask questions

How to get started

yarn add plop

touch plopfile.js

Building blocks of a generator

Prompts

Name & Description

plop.setGenerator('UI Component', {
    description: 'A new LESS component with KSS documentation',

prompts: [
    {
        type: 'input',
        name: 'name',
        message: 'Name your new component (e.g.: Button)',
        validate: v=>/^[A-Z][a-z]/.test(v)?true:'the name must begin with an uppercase letter'
    },
    {
        type: 'confirm',
        name: 'type',
        message: 'Are there different types for your component? (e.g.: .button-outline)',
    },
    {
        type: 'checkbox',
        name: 'colors',
        message: 'In which colors is your component available?',
        choices: ['primary', 'secondary', 'light', 'dark', 'aside'],
    }
],

Building blocks of a generator

Input

Confirm

Checkbox

List

Password

Building blocks of a generator

Actions

actions: [
    {
        type: 'modify',
        path: 'base/less/components.less',
        pattern: /(\n\/\/ COMPONENT DEFINITIONS \/\/)/gi,
        template: '@import "components/{{dashCase name}}.less";\n$1'
    },
    {
        type: 'modify',
        path: 'base/less/components.less',
        pattern: /$/g,
        templateFile: 'plop_templates/component-definition.hbs'
    },
    {
        type: 'add',
        path: 'base/less/components/{{dashCase name}}.less',
        templateFile: 'plop_templates/component.hbs'
    }
]

Thank you

Presentation carefully prepared by

Martin Muzatko

@martinmuzatko

More about front-end dev by Martin?

Looking for an awesome company to work with?