Skip to content

CONFIG.md

Latest commit

 

History

History
101 lines (73 loc) · 6.65 KB

CONFIG.md

File metadata and controls

101 lines (73 loc) · 6.65 KB

Настройка шаблона

В этом шаблоне преднастроен

  • тайпскрипт
  • юнит тесты
  • отображение документации для хуков
  • автоматический lint
  • проверка кода перед коммитом на наличие ошибок
  • проверка коммитов через конвенцию коммитов
  • билд проекта с добавлением типов
  • автоматическая генерация changelog на основе коммитов

После того как сделали форк на основе этого шаблона

  1. package.json
  • Нужно поменять название, описание проекта, ссылки, ключевые слова
  1. README.md
  • Нужно изменить название пакета, описание, цель, задачи, все ссылки, используемые библиотеки, примеры использования
  1. oce.json
  • Поменять название пакета

После этого можно начать разработку. Несколько замечаний

package.json

  • yarn start - запуск сервера для разработки (styleguidist)
  • yarn build - сборка проекта для документации (styleguidist)
  • yarn test - запуск юнит тестов (через jest)
  • yarn lint - запуск linterа (через eslint)
  • yarn prettier - форматирование кода (через prettier)
  • yarn build:babel - сборка проекта для публикации
  • yarn tsc:dts - добавление d.ts в папку dist
  • yarn publish - публикация проекта в npm
  • yarn release - автоматическая генерация changelog с созданием тега

Написание кода

Компоненты

  • Пишем на тайпскрипт. Все кастомные типы и интерфейсы записываем в файл src/types/index.ts
  • В файле styleguide.config.js помещаем настройки для компонентов в переменной sections
  • Сейчас наша структура каталога src:
    • components - сожержимое этой папки билдится для документации и для библиотеки
      • папки компонентов
      • hooks - эта папка не билдится в итоговую библиотеку, она нужна для того чтобы отображать документацию к хукам, подробнее будет описано ниже
    • hooks (папка с хуками, разрешение файлов .ts)
    • utils - хелперы и доп. функции
  • Создаем наши компоненты мы в папке src/components
  • Так как тут используется typescript, вместо proptypes используем типы и интерфейсы для параметров, а jsdoc для документации самого компонента

Хуки

  • Пишем хук в папке src/hooks
  • Не забываем добавлять именованный экспорт в файл src/hooks/index.ts
  • Если нам нужно добавить в документацию этот хук то добавляем файл с таким же именем в папку src/components/hooks. Это будет документация к этому хуку. Формат файла: .tsx. Внутри создаем пустой компонент и прописываем документацию.

Пример:

import React from 'react'

/**
 * Returns the current scroll position of the window.
 */
export default function useWindowScrollPosition() {
  return <></>
}

Тесты

  • Все тесты мы создаем в папке __tests__
  • Пишем на js. Если нужна поддержка тайпскрипта, то нужно дополнительно настроить ts-jest в jest.config.js
  • сейчас там три каталога:
    • __tests__/components - тесты для компонентов
    • __tests__/hooks - тесты для хуков
    • __tests__/utils - тесты для доп функций

Утилиты

  • сейчас не настроен их экспорт в корневом файле src/index.ts по этому для использования нужно писать так import { } from '@texttree/template-rcl/utils'

Публикация и обновление версии

  • Обычно мы настраиваем netlify для публикации документации по библиотеке. После этого надо проверить ссылки в README.md и добавить ссылку на странице проекта в github.
  • Обычно для проверки библиотеки мы используем yalc
  • Если вы хотите проверить, что именно отправляется в npm то один из вариантов, можно запустить команду yarn prepublishOnly && yarn pack
  • Чтобы выпустить новую версию, нужно запустить команду yarn release. На основе коммитов он сам определит, минорная сейчас версия или мажорная. После этой команды он предложит отправить в github новый тег и запустить yarn publish для публикации в npm
  • После этого надо не забыть добавить новую версию и дату в файл oce.json

Возможные проблемы

  • если используется какой-то современный синтаксис, то надо будет в babel.config.json добавить параметры для @babel/preset-env с использованием core-js
  • в определенных случаях возможно придется раскомментировать строку "lib": ["dom"], в tsconfig.json и добавить дополнительные библиотеки
  • если нужно собирать стили или какие-то доп форматы файлов, то может быть придется настроить webpackConfig в styleguide.config.js. Важно заметить что это настройка только для styleguidist.