create-kek-layer

CLI для генерации component-layer в текущей директории.

Что делает

Создаёт базовую структуру компонента:

• ui
• types
• index.ts

По флагам добавляет дополнительные папки:

• hooks
• helpers
• config
• lib
• model
• store
• api

Требования

• Node.js >= 20

Установка

npm

npm i -D create-kek-layer

yarn

yarn add -D create-kek-layer

pnpm

pnpm add -D create-kek-layer

После установки пакет пытается:

-создать или обновить в корне проекта CREATE_KEK_LAYER.md -добавить CREATE_KEK_LAYER.md в .gitignore -добавить в package.json script:

Через script

{
  "scripts": {
    "kek": "create-kek-layer"
  }
}

Если установка выполнена с --ignore-scripts, этот файл может не создаться. В этом случае используй README.md.

Если scripts.kek уже существует и указывает на другую команду, пакет его не перезаписывает.

Запуск

npm

npm run kek -- Button -hca
npx create-kek-layer Button -hca
npm exec create-kek-layer Button -hca

yarn

yarn run kek Button -hca
yarn run create-kek-layer Button -hca

pnpm

pnpm run kek -- Button -hca
pnpm exec create-kek-layer Button -hca

Примеры запуска:

npm run kek -- Button -hca
yarn run kek Button -hca
pnpm run kek -- Button -hca

Формат команды

create-kek-layer <Name> [flags] [--force]

• <Name> — PascalCase имя компонента: Button, UserCard, Input2
• [flags] — дополнительные части слоя
• --force — перезаписать существующие файлы

Флаги

• -h → hooks/use{Name}.ts + hooks/index.ts
• -hs → helpers/{camelName}Helper.ts + helpers/index.ts
• -c → config/{camelName}Config.ts + config/index.ts
• -l → lib/{camelName}Lib.ts + lib/index.ts
• -m → model/{Name}Model.ts + model/index.ts
• -s → store/{camelName}Store.ts + store/index.ts
• -a → api/{camelName}Api.ts + api/index.ts

Флаги можно комбинировать:

create-kek-layer Button -hca
create-kek-layer UserCard -hsl
create-kek-layer Input --force

Что создаётся по умолчанию

Button/
├── index.ts
├── types
│   ├── ButtonTypes.ts
│   └── index.ts
└── ui
    ├── Button.module.scss
    └── Button.tsx

ui/Button.tsx:

import type { ButtonProps } from '../types/ButtonTypes'

import styles from './Button.module.scss'

export function Button({ children }: ButtonProps) {
  return <div className={styles.button}>{children}</div>
}

ui/Button.module.scss:

.button {
}