Создание React-компонентов с помощью Hygen

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.
Вы использовали когда-нибудь Hygen, автоматический генератор кода? Если еще нет, возможно, наш перевод откроет для вас новый полезный инструмент.




При разработке на React создавать компоненты вручную довольно сложно, если количество файлов, составляющих компонент, растет (например, файл Storybook, файл c тестами, модуль CSS).

Представьте, что один компонент имеет такую структуру:



Hygen — это генератор кода на основе Node.js, который позволяет автоматизировать стандартные рутинные операции с кодом с помощью интерактивной команды.

В этой статье вы узнаете, как эффективно создавать React-компоненты с помощью Hygen.

Окончательная кодовая база на GitHub доступна по этой ссылке.

Обзор


Чтобы протестировать Hygen, мы настроим React-приложение, выполнив следующие действия:

  1. Создать React-приложение
  2. Настроить Hygen
  3. Создать файлы шаблона
  4. Создать файл конфигурации
  5. Добавить скрипты в package.json.


1. Создать React-приложение


Чтобы ускорить процесс, мы будем использовать create-react-app для создания приложения React:

npx create-react-app hygen-app --template typescript

После установки вы можете запустить dev-сервер, выполнив эту команду:

yarn start

После чего мы увидим приветственную страницу:



2. Настроить Hygen
Далее установим Hygen и настроим его.

Чтобы установить Hygen:

yarn add -D hygen

Следующий шаг: мы создадим файлы шаблонов для создания React-компонентов.

По умолчанию Hygen выбирает папку _templates на любом уровне папки проекта для загрузки файлов шаблонов.

В этой статье мы добавим для него собственную папку. Для этого добавьте .hygen.js в корень проекта:

module.exports = {
  templates: `${__dirname}/.hygen`,
}

Это заменит путь по умолчанию (_templates) на папку .hygen.

И добавьте new/components в папку .hygen:

.hygen
└── new
    └── component


3. Создать файлы шаблонов


Теперь, когда мы настроили Hygen, мы создадим следующие файлы шаблонов:

  • index.ts
  • React-компонент
  • Тестовый файл
  • Файл Storybook
  • Модуль CSS


index.ts


Сначала мы создадим шаблон для index.ts, который экспортирует все зависимости папки.

Добавьте index.tsx.ejs.t в .hygen/new/component:

---
to: <%= absPath %>/index.tsx
---
export * from './<%= component_name %>';

Hygen использует Frontmatter в качестве шаблона метаданных и движок EJS для тела.

В заголовке мы помещаем свойство to, которое используется для выходного пути для файлов.

Вы можете проверить все свойства в документации.



<%= absPath %> — это тег EJS, который выводит значение в шаблоне.

В этом случае, если мы назначим src/components/atom/Button переменной absPath, путь будет таким: src/components/atom/Button/index.tsx.

Чтобы передать переменную, нам нужно создать index.js для настройки, которую мы рассмотрим. Позже создайте раздел в файле конфигурации.

React-компоненты


Далее мы создадим шаблон для React-компонента.

Добавьте component.tsx.ejs.t в .hygen/new/component:

---
to: <%= absPath %>/<%= component_name %>.tsx
---
import React from 'react';
import styles from './style.module.css';

type Props = {};

export const <%= component_name %>: React.FC<Props> = (props) => {
  return <div className={styles.container} data-testid="test" />;
};


Test-файл


Далее мы создадим шаблон для Test-файла.

Добавьте test.tsx.ejs.t в .hygen/new/component:

---
to: <%= absPath %>/__tests__/<%= component_name %>.test.tsx
---
import React from 'react';
import { render, screen } from '@testing-library/react';
import { <%= component_name %> } from '../';

test('renders component successfully', () => {
  render(<<%= component_name %>  />);
  const element = screen.getByTestId(/test/i);
  expect(element).toBeInTheDocument();
});


Файл Storybook


На этом этапе создадим шаблон для файла Storybook.

Добавьте stories.tsx.ejs.t в .hygen/new/component:

---
to: <%= absPath %>/<%= component_name %>.stories.tsx
---
import React from 'react';
import { <%= component_name %> } from './';
import { Story, Meta } from '@storybook/react/types-6-0';

type Props = React.ComponentProps<typeof <%= component_name %>>

const csf: Meta = {
  title: '<%= category %>/<%= component_name %>',
}

const Template: Story<Props> = (args) => <<%= component_name %> {...args} />;

export const c1 = Template.bind({});
c1.storyName = 'default'

export default csf


Модуль CSS


Создадим шаблон для модуля CSS.

Добавьте style.module.css.ejs.t в .hygen/new/component:

---
to: <%= absPath %>/style.module.css
---
.container {}


4. Создать файл конфигурации


Теперь, когда мы настроили все файлы шаблонов, мы создадим файл конфигурации для Hygen.

Давайте добавим index.js в .hygen/new/component:

module.exports = {
  prompt: ({ inquirer }) => {
    const questions = [
      {
        type: 'select',
        name: 'category',
        message: 'Which Atomic design level?',
        choices: ['atoms', 'molecules', 'organisms', 'templates', 'pages']
      },
      {
        type: 'input',
        name: 'component_name',
        message: 'What is the component name?'
      },
      {
        type: 'input',
        name: 'dir',
        message: 'Where is the directory(Optional)',
      },
    ]
    return inquirer
      .prompt(questions)
      .then(answers => {
        const { category, component_name, dir } = answers
        const path = `${category}/${ dir ? `${dir}/` : `` }${component_name}`
        const absPath = `src/components/${path}`
        return { ...answers, path, absPath, category }
      })
  }
}

Это файл конфигурации для интерактивной подсказки, которая при запуске задает вам несколько вопросов. Вы можете настроить в этом файле всё, что захотите.

prompt получает данные ответа и возвращает их. Как я уже написал выше, они будут использованы в файле шаблона EJS.

В этом случае в EJS передаются answers, path, absPath и category.

Более подробное описание на GitHub.

5. Добавить скрипты в package.json


Теперь, когда мы готовы запустить Hygen, мы добавим скрипты в package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",

  "new:component": "hygen new component" // Add here
},

Hygen автоматически сверяется со структурой папок и отображает ее. В этом случае мы должны передать new component в соответствии со структурой папок:

.hygen
└── new
    └── component

Отлично, давайте попробуем!

Создадим компонент Button:

yarn new:component

Появится интерактивная подсказка, которая поможет с решением ваших вопросов:



Мы сгенерировали данные файлы в папку src/components:

├── components
│   └── atoms
│       └── Button
│           ├── Button.stories.tsx
│           ├── Button.tsx
│           ├── __tests__
│           │   └── Button.test.tsx
│           ├── index.tsx
│           └── style.module.css


Заключение


На этом всё! Мы рассмотрели, как автоматизировать задачи разработки на React с помощью Hygen. Конечно, вы можете применить его и к другим проектам, используя Vue.js или Angular.

Hygen довольно гибок, поэтому вы можете настроить подсказки и шаблоны под любые свои потребности.

Итак, здесь доступна окончательная кодовая база. Она также содержит и настройку Storybook.

Надеюсь, эта статья поможет вам найти вдохновение. Удачи!
Источник: https://habr.com/ru/company/timeweb/blog/534686/


Интересные статьи

Интересные статьи

DDoS-атаке может подвергнуться любой ресурс. Чаще всего атаки носят целенаправленный характер — злоумышленники могут пытаться положить сайт с какой-то информацией (разного рода СМИ и...
Все, кто использует SSH знают, что при первом подключении к серверу, появляется сообщение с подтверждением отпечатка ключа. Дальше ключ сохраняется на стороне клиента, и больше это сообщение ...
Предыстория Я заинтересовался созданием бота для Discord, но всё что я нашёл, было пару видео на YouTube, да и то там просто писали код, без всяких пояснений. Поэтому я хочу начать серию статей ...
Эта статья для тех, кто собирается открыть интернет-магазин, но еще рассматривает варианты и думает по какому пути пойти, заказать разработку магазина в студии, у фрилансера или выбрать облачный серви...
Для Java программистов существуют полезные инструменты, помогающие писать качественный код, например, мощная среда разработки IntelliJ IDEA, бесплатные анализаторы SpotBugs, PMD и другие. Всё э...