Tokript

Getting Started

똑똑한 개발자의 프론트 개발 업무를 도와줄 스크립트 입니다.

스크립트를 사용해 더 효율적으로 개발해보세요!

Install

Install with npm:

npm i -D tokript

Install with yarn:

yarn add -D tokript

Usage

Usage: tokript [options] [resolver]

CLI to help tok's working

Arguments:
  resolver       script resolver (choices: "gen:source", "gen:img", "gen:font", "gen:icon",
                 "w:start", "commit")

Options:
  -V, --version  output the version number
  -h, --help     display help for command

Overview

• commit

똑똑한 개발자에는 커밋 컨벤션이 존재합니다. 해당 컨벤션에 맞게 커밋메시지 작성을 도와주는 스크립트 입니다.

• gen:api

swagger 를 조회하여 api 함수와 schema type, react-query 의 query,mutation 을 생성해 줍니다.

• gen:source

page, dynamic-page, api 에 대한 탬플릿을 생성해 줍니다.

• gen:icon

asset 폴더를 조회하여 svg 파일을 사용가능한 chakra-icon 컴포넌트로 생성해줍니다.

color props 로 제어를 해야한다면, svg 파일의 fill 이나 stroke 의 컬러를 "currentColor" 로 변경후 실행 해주세요

• gen:img

asset 폴더를 조회하여 img 파일경로를 담은 Object 를 생성해줍니다.

• gen:font

asset 폴더를 조회하여 font 파일을 next-local 폰트로 생성해줍니다.

• gen:route

pages 폴더를 조회하여 route 경로를 담은 오프젝트를 생성해줍니다.

• convert:webp

asset 폴더를 조회하여, png, jpg 확장자를 webp 로 변환해 줍니다. 변환하여 사용하기전에, next/image 사용을 고민해주세요. 다른 확장자를 사용하더라도 자동으로 webp 변환 해줍니다.

Example

tokript // select resolver by cli

tokript commit // pass resolver by argument

tokript -h // option

Configuration

tokript.config.js 파일로 세부적인 설정이 가능합니다. 해당 파일은 루트 디렉토리에 존재해야합니다.

export type TokriptConfig = {
  basePath: string;
  commit: Partial<CommitConfig>;
  'gen:img': Partial<GenerateImageConfig>;
  'convert:webp': Partial<ConvertWebpConfig>;
  'gen:source': Partial<GenerateSourceConfig>;
  'gen:font': Partial<GenerateFontConfig>;
  'gen:icon': Partial<GenerateIconConfig>;
  'gen:api': Partial<GenerateSwaggerApiConfig>;
  'gen:route': Partial<GenerateRouteConfig>;
};

export type CommitConfig = {
  /** 스코프검색에서 제외할 경로들의 glob 패턴 입니다. */
  ignoredScopes: string[];
  /** 모노래포 사용시, workspace 로 커밋 범위 설정할수 있습니다. */
  workspaces: string[];
};

export type GenerateSourceConfig = {
  page: {
    /** 컴포넌트 생성시 Next Head 의 <title> 태그에 들어가게될 앱 이름입니다. */
    appName: string;
  };
};

export type GenerateImageConfig = {
  /** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
  inputPath: string;
  /** 생성될 파일이 위치할 경로입니다.*/
  outputPath: string;
  /** 생성될 image 객체의 이름입니다 */
  displayName: string;
  /** 생성될 객체의 value 에 할당될 경로의 base-path 입니다 */
  basePath: string;
  /** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다. */
  includingPattern: string[];
  /** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다. */
  ignoredPattern: string[];
  /** key 값을 결정할 포멧함수입니다. 기본적으로, SNAKE_UPPER_CASE 로 생성됩니다. */
  formatKey: (fileName: string) => string;
};

export type ConvertWebpConfig = {
  /** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
  inputPath: string;
  /** 생성될 파일이 위치할 경로입니다.*/
  outputPath: string;
  /** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 생성됩니다. */
  includingPattern: string[];
  /** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 제외 됩니다. */
  ignoredPattern: string[];
  /** 변환되는 이미지의 해상도를 결정합니다. */
  quality: number;
};

export type GenerateFontConfig = {
  /** 조회할 font 파일들이 포함되어있는 폴더 입니다. */
  inputPath: string;
  /** 생성될 파일이 위치할 경로입니다.*/
  outputPath: string;
  /** 생성될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다.
   * (default: ['*.otf', '*.ttf', '*.woff', '*.woff2'])
   */
  includingPattern: string[];
  /** 제외 될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다.
   * (default: ['*node_module*'])
   */
  ignoredPattern: string[];
};

export type GenerateRouteConfig = {
  /** 조회할 page 파일들이 포함되어있는 폴더 입니다. */
  inputPath: string;
  /** 생성될 파일이 위치할 경로입니다.*/
  outputPath: string;
  /** 생성될 route 객체의 이름입니다 */
  displayName: string;
  /** 포함할 route 의 glob 패턴입니다. */
  includingPattern: string[];
  /** 제외될 route 의 glob 패턴입니다. */
  ignoredPattern: string[];
};

export type GenerateIconConfig = {
  /** 조회할 svg 파일 혹은 svg 파일이 포함되어있는 폴더 입니다. */
  inputPath: string;
  /** 생성될 파일이 위치할 경로입니다.*/
  outputPath: string;
  /** 생성될 Chakra Component 이름 뒤에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
  suffix: string;
  /** 생성될 Chakra Component 이름 앞에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
  prefix: string;
};


export type GenerateSwaggerApiConfig = {
  /** 조회할 스웨거의 url 혹은 file(yaml, json) 경로 입니다. 통상적으로
   * 백앤드 개발자에게 공유받은  api-swagger-url 의 '/openapi.json' 경로에 해당합니다.
   */
  swaggerSchemaUrl: string;
  /** 생성될 파일들이 위치할 경로입니다. */
  outputPath: string;
  /** 생성되는 코드의 React Query 포함 여부 입니다.
   *  해당 옵션이 false 일경우 infiniteQuery 를 포함한 모든 Query 가 생성되지 않습니다. */
  includeReactQuery: boolean;
  /** 생성되는 코드의 InfiniteQuery 포함 여부 입니다. */
  includeReactInfiniteQuery: boolean;
  /** Api 의 axios 요청 instance 주소입니다 */
  axiosInstancePath: string;
  /**
   * infiniteQuery 를 생성할 함수 필터 목록 입니다.
   * */
  paginations: Array<{
    /** api 의 queryParams key 에 keywords 가 포함되어 있는 항목만 생성됩니다. 키워드 배열은 AND 연산으로써 사용됩니다. */
    keywords: string[];
    /** InfiniteQuery 의 nextPage 와 nextPageParam 을 구하는 함수를 작성하기 위해 사용됩니다. */
    nextKey: string;
    /** InfiniteQuery 의 nextPage 를 구하는 함수를 커스텀하기 위해 사용됩니다. */
    getNextPage?:
      | string
      | ((param: {
          apiInstanceName: string;
          functionName: string;
          pagination: { keywords: string[]; nextKey: string };
        }) => string);
    /** InfiniteQuery 의 nextPageParam 을 구하는 함수를 커스텀하기 위해 사용됩니다. */
    getNextPageParam?:
      | string
      | ((param: {
          apiInstanceName: string;
          functionName: string;
          pagination: { keywords: string[]; nextKey: string };
        }) => string);
  }>;
};

type Pagination = {
  /** api 의 queryParams key 에 keywords 가 포함되어 있는 항목만 생성됩니다. 키워드 배열은 AND 연산으로써 사용됩니다. */
  keywords: string[];
  /** InfiniteQuery 의 nextPage 와 nextPageParam 을 구하는 함수를 작성하기 위해 사용됩니다. */
  nextKey: string;
  /** InfiniteQuery 의 nextPage 를 구하는 함수를 커스텀하기 위해 사용됩니다. */
  getNextPage?:
    | string
    | ((param: {
        apiInstanceName: string;
        functionName: string;
        pagination: { keywords: string[]; nextKey: string };
      }) => string);
  /** InfiniteQuery 의 nextPageParam 을 구하는 함수를 커스텀하기 위해 사용됩니다. */
  getNextPageParam?:
    | string
    | ((param: {
        apiInstanceName: string;
        functionName: string;
        pagination: { keywords: string[]; nextKey: string };
      }) => string);
};

Configuration Example

/* eslint-disable @typescript-eslint/no-var-requires */
require('dotenv').config();

exports.module = {
  'gen:icon': {
    /** 조회할 svg 파일 혹은 svg 파일이 포함되어있는 폴더 입니다. */
    inputPath: 'public/icons/svg',
    /** 생성될 파일이 위치할 경로입니다.*/
    outputPath: 'src/generated/icons/MyIcons.tsx',
    /** 생성될 Chakra Component 이름 뒤에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
    suffix: 'Icon',
    /** 생성될 Chakra Component 이름 앞에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
    prefix: '',
  },
  'gen:img': {
    /** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
    inputPath: 'public',
    /** 생성될 파일이 위치할 경로입니다.*/
    outputPath: 'src/generated/path/images.ts',
    /** 생성될 image 객체의 이름입니다 */
    displayName: 'MY_IMAGES',
    /** 생성될 객체의 value 에 할당될 경로의 base-path 입니다 */
    basePath: '/',
    /** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다. */
    includingPattern: ['*.jpg', '*.png', '*.svg', '*.jpeg', '*.webp'],
    /** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다. */
    ignoredPattern: ['*node_module*'],
    /** key 값을 결정할 포멧함수입니다. 기본적으로, SNAKE_UPPER_CASE 로 생성됩니다. */
    // formatKey: (filename) => str
  },
  'gen:route': {
    /** 조회할 page 파일들이 포함되어있는 폴더 입니다. */
    inputPath: 'src/pages',
    /** 생성될 파일이 위치할 경로입니다.*/
    outputPath: 'src/generated/path/routes.ts',
    /** 생성될 route 객체의 이름입니다 */
    displayName: 'ROUTES',
    /** 포함할 route 의 glob 패턴입니다. */
    includingPattern: [],
    /** 제외될 route 의 glob 패턴입니다. */
    ignoredPattern: ['_app.tsx', '_document.tsx', '_error.tsx', 'api/**'],
  },
  'gen:source': {
    page: {
      /** 컴포넌트 생성시 Next Head 의 <title> 태그에 들어가게될 앱 이름입니다. */
      appName: process.env.NEXT_PUBLIC_APP_NAME || '똑똑한 개발자',
    },
  },
  'gen:font': {
    /** 조회할 font 파일들이 포함되어있는 폴더 입니다. */
    inputPath: 'public/fonts',
    /** 생성될 파일이 위치할 경로입니다.*/
    outputPath: 'src/generated/fonts/next-fonts.ts',
    /** 생성될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다.
     * (default: ['*.otf', '*.ttf', '*.woff', '*.woff2'])
     */
    includingPattern: ['*.otf', '*.ttf', '*.woff', '*.woff2'],
    /** 제외 될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다.
     * (default: ['*node_module*'])
     */
    ignoredPattern: ['*node_module*'],
  },
  'convert:webp': {
    /** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
    inputPath: 'public/images',
    /** 생성될 파일이 위치할 경로입니다.*/
    outputPath: 'public/webp',
    /** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 제외 됩니다. */
    ignoredPattern: ['*.svg'],
    /** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 생성됩니다. */
    includingPattern: ['*.png', '*.jpeg', '*.jpg', '*.webp'],
    /** 변환되는 이미지의 해상도를 결정합니다. */
    quality: 80,
  },
  'gen:api': {
    /** 조회할 스웨거의 url 혹은 file(yaml, json) 경로 입니다. 통상적으로
     * 백앤드 개발자에게 공유받은  api-swagger-url 의 '/openapi.json' 경로에 해당합니다.
     */
    swaggerSchemaUrl: `${process.env.NEXT_PUBLIC_API_BASE_URL}/openapi.json/`,
    /** 생성될 파일들이 위치할 경로입니다. */
    outputPath: 'src/generated/swagger',
    /** 생성되는 코드의 React Query 포함 여부 입니다.
     *  해당 옵션이 false 일경우 infiniteQuery 를 포함한 모든 Query 가 생성되지 않습니다. */
    includeReactQuery: true,
    /** 생성되는 코드의 InfiniteQuery 포함 여부 입니다. */
    includeReactInfiniteQuery: true,
    /** Api 의 axios 요청 instance 주소입니다 */
    axiosInstancePath: '@/configs/axios/instance',
    /**
     * infiniteQuery 를 생성할 함수 필터입니다.
     * - keywords:  api 의 queryParams key 에 keywords 가 포함되어 있는 항목만 생성됩니다. 키워드 배열은 AND 연산으로써 사용됩니다.
     * ex) [limit, offset] === limit && offset
     * - nextkey : InfiniteQuery 의 nextPage 와 nextPageParam 을 구하는 함수를 작성하기 위해 사용됩니다.
     *
     *  getNextPage 와 getNextPagePram 을 커스텀 하고 싶다면 넘겨지는 객체에 포함시켜 주세요,
     */
    paginations: [
      {
        keywords: ['cursor'],
        nextKey: 'cursor',
        /**
         * @type undefined | string | (param: {apiInstanceName: string; functionName: string, pagination: { keywords: string[], nextKey: string }}) => string
         */
        // getNextPage: "",
        /**
         * @type undefined | string | (param: {apiInstanceName: string; functionName: string, pagination: { keywords: string[], nextKey: string }}) => string
         */
        // getNextPageParam: ""
      },
    ],
  },
};