소개

|____Button
| |____Button.module.scss
| |____Button.stories.mdx
| |____Button.tsx
| |____index.ts
| |____README.md

스트렛츠 / 바이스트로

스캐폴딩 코드 템플릿 및 상용구용 CLI 유틸리티 라이브러리입니다.

바이스트로

설치

$ npm install -D bystro

용법

$ bystro <template_name> <path>

Note: You can alternatively run npx bystro <template_name> <path> without install step.

Arguments

<template_name> - Name of the template you want to scaffold.
<path>- Path to scaffold template in.

List of available templates can be found here

템플릿 만들기

To create a local template start by making a .bystro directory in the current working directory:

$ mkdir .bystro

After that you can add templates:

$ mkdir .bystro/my_template
$ mkdir .bystro/my_template/__Name__
$ echo 'import "./__Name__.css";' > .bystro/my_template/__Name__.js
$ echo '// hello from __Name__'

계획

Before writing any code I found it reasonable to put together some small description of the algorithm that I expect from my CLI tool to implement:

1. Obtain user input (<template_name> and <path_to_clone_into>) from the command line.

2. Get template data by <template_name> by checking custom templates folder created by user and if not found fetch it from predefined templates folder inside of the package itself.

3. If template was found prompt user to fill the variables required in the template.

4. Interpolate template filenames and contents according to users input.

5. Write result template files into <path_to_clone_into>

건축물

For now it is totally fine to store shared templates inside of package source code but the bigger it gets the slower npx will execute it.

Later we could implement templates search using github api or something. That is why we need our code to be loosely coupled to easily switch between template repository implementations.

Clean architecture to the rescue. I won't go in much details explaining it here, there are a lot of great official resources to read. Just take a look at the diagram which describes the main idea:

CA states that source code dependencies can only point inwards, the inner circles must be unaware of the outer ones and that they should communicate by passing simple Data Transfer objects. Let's take all the about literally and start writing some code.

비즈니스 규칙

If we take a closer look at the algorithm we've defined at planning phase it seems like it's a perfect example of a use case. So let's implement right away:

import Template from "entities/Template"

export default class ScaffoldTemplateIntoPath {
  constructor(
    private templatesRepository: ITemplatesRepository,
    private fs: IFileSystemAdapter,
    private io: IInputOutputAdapter,
  ) {}

  public exec = async (path: string, name: string) => {
    if (!name) throw new Error("Template name is required");

    // 2. Get template data by <template_name>
    const dto = this.templatesRepository.getTemplateByName(name);
    if (!dto) throw new Error(`Template "${name}" was not found`);

    // 3. If template was found prompt user to fill the variable
    const template = Template.make(dto).setPath(path);
    const variables = await this.io.promptInput(template.getRequiredVariables());

    // 4. Interpolate template filenames and contents
    const files = template.interpolateFiles(values);

    // 5. Write modified files
    return this.fs.createFiles(files);
  };
}

class Template implements ITemplateInstance {
  constructor(private dto: ITemplate) {
    this.dto = { ...dto };
  }

  public getPath = () => {
    return this.dto.path;
  };

  public getRequiredVariables = () => {
    return this.dto.config.variables;
  };

  public getFiles = () => {
    return this.dto.files;
  };

  public interpolateFiles = (variables: Record<string, string>) => {
    return this.dto.files.map((file) => {
      // private methods
      file = this.interpolateFile(file, variables); 
      file.path = this.toFullPath(file.path);
      return file;
    });
  };

  public setPath = (newPath: string) => {
    this.dto.path = newPath;
    return this;
  };

  public toDTO = () => {
    return this.dto;
  };

  // ...
}

{
  "name": "bystro",
  "version": "0.1.0",
  "bin": "./dist/index.js", // compiled code
  // ...
}

"scripts": {
  "build": "tsc -p .",
  "release": "yarn build && np", 
  // ...
}