Automating repetitive software tasks using Plop

Repeating the same thing over and over again, copying and pasting, converting text from kebab-case to camel-case, etc. may indicate a task suitable for automation. I integrated Plop into my node project to help me with such a task, adding a new blog post, and here I describe my journey

The problem

Automating with Plop

basically glue code between inquirer prompts and handlebar templates

npm i —save-dev plop

{
  "scripts": {
    "plop": "plop"
  }
}

Basic plopfile

module.exports = (plop) => {
  plop.setGenerator('blog-post', {
    description: 'Creating a new blog post',
    prompts: [],
    actions: [],
  });
};

Prompts

The questions

• Language
• TItle
• Description
• Tags
• Picture url

{
  type: 'list',
  name: 'language',
  message: 'Language',
  choices: [
    { name: 'English', value: 'en' },
    { name: 'Romanian', value: 'ro' },
  ],
  default: 0,
}

My prompts

prompts: [
  {
    type: 'input',
    name: 'title',
    message: 'Blog post title',
  },
  {
    type: 'list',
    name: 'language',
    message: 'Language',
    choices: [
      { name: 'English', value: 'en' },
      { name: 'Romanian', value: 'ro' },
    ],
    default: 0,
  },
  {
    type: 'input',
    name: 'description',
    message: 'Description',
  },
  {
    type: 'input',
    name: 'tags',
    message: 'Tags (comma separated list, e.g. food,soup)',
  },
  {
    type: 'input',
    name: 'pictureUrl',
    message: 'Picture url (e.g. /images/123.jpg)',
  },
],

? Blog post title How to automate some things
? Language English
? Description Automating things can be really useful, so we can look at automating something
? Tags (comma separated list, e.g. food,soup) automation,things
? Picture url (e.g. /images/123.jpg) /images/automation.jpg

Let's see some action

Files to be created

./src/markdown/{title-in-kebab-case}.md

Required input

• title (both kebab-case version and original)
• description

Template

./plop-templates/blog-post-file.hbs

# {{title}}

## {{description}}

Stopping Prettier interfering with my template

"[handlebars]": {
  "editor.formatOnSave": false
}

The action

{{kebabCase title}}

{
  type: 'add',
  path: './src/markdown/{{kebabCase title}}.md',
  templateFile: './plop-templates/blog-post-file.hbs',
},

./src/markdown/how-to-automate-some-things.md

# How to automate some things

## Automating things can be really useful, so we can look at automating something

Files to be edited

• ./src/markdown/index.js
• ./src/utils/i18n/resources.json

Working out how to edit an exiting file

• Find start of file
• Find end of a piece of text

/^/u;

{
  type: 'modify',
  path: './src/markdown/index.js',
  pattern: /^/u, // The start of the file
  template:
    "import {{camelCase title}} from './{{kebabCase title}}.md';\n",
},

/(?<=export default \{)/u;

{
  type: 'modify',
  path: './src/markdown/index.js',
  pattern: /(?<=export default \{)/u, // After export default \{
  template: "\n  '{{kebabCase title}}': {{camelCase title}},",
},

To transform or to template

• "en"->"routes"
• "en"->"blog-posts"
• "ro"->"routes"
• "ro"->"blog-posts"

{
  "en": {
    "routes": {
      "/blog/how-to-automate-some-things": "/blog/how-to-automate-some-things",
    },
    "blog-posts": {
      "how-to-automate-some-things-title": "How to automate some things",
      "how-to-automate-some-things-description": "Automating things can be really useful, so we can look at automating something",
      ...
    }
  },
  "ro": {
    "routes": {
      "/blog/how-to-automate-some-things": "/blog/how-to-automate-some-things",
    },
    "blog-posts": {
      "how-to-automate-some-things-title": "How to automate some things",
      "how-to-automate-some-things-description": "Automating things can be really useful, so we can look at automating something",
      ...
    }
  }
}

/"ro":\s\{/u // Locate the language
/"ro":\s\{(?:(?:.|\n)*)"routes":\s\{/u // Locate the language and section, here routes
/(?<="ro":\s\{(?:(?:.|\n)*)"routes":\s\{)/u // Wrap this in the positive lookbehind I used earlier

Conditionals within handlebars templates

"/blog/{{kebabCase title}}": "/blog/{{kebabCase title}}"

"/ro/blog/{{kebabCase title}}": "/ro/blog/{{kebabCase title}}"

"{{#if language === 'ro'}}/ro{{/if}}/blog/{{kebabCase title}}": "{{#if language === 'ro'}}/ro{{/if}}/blog/{{kebabCase title}}"

if_eq doesn't match if - 2:10

Eslint and Prettier at war :(

function ifEq(a, b, opts) {
  ...
}

"extends": [
  "eslint:recommended", — already
  "plugin:react/recommended", — already
  "prettier",
  "prettier/react"
],

// eslint-disable-next-line prefer-arrow-callback
plop.setHelper('dateNow', function dateNow() {
  const now = new Date();
  const year = now.getFullYear().toString();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
});

"{{kebabCase title}}-date-posted": "{{dateNow}}",

The end