Скачать kitsu web - загрузка kitsu web

kitsu web

Данные веб-сайта

1.0.0

Скачать

Kitsu Web App

Это наш репозиторий клиента. Он содержит приложение React.js для Kitsu.
Проверьте инструменты, мобильные, серверные и API Docs Repositories.

Внося

Тот факт, что вы читаете это, вероятно, означает, что вы заинтересованы в участии в веб -приложении Kitsu. Если так, добро пожаловать! Довольно легко начать, и мы здесь, чтобы помочь вам до конца. Если у вас есть какие -либо вопросы, пожалуйста, не стесняйтесь спрашивать нас о нашем разногласий в канале #DEV!

Прежде чем сделать запрос на привлечение, прочитайте StyleGuide и убедитесь, что вы сохраняете кодовую базу чистой и последовательной для будущих разработчиков.

Получите это

Вам понадобится довольно современная версия Node.js. Active LTS, вероятно, является лучшим вариантом, если вы не уверены. Наши развертывания будут использовать Active LTS, но мы стараемся гарантировать, что все работает и в текущей версии.

После того, как у вас есть узел, запустите следующее:

npm install (устанавливает зависимости)
npm run dev (порт по умолчанию 3000)

Теперь посетите http://localhost:3000 , и вы должны увидеть приложение Kitsu!

По умолчанию, в режиме разработки, это будет подключаться к staging.kitsu.io (наша среда предварительного производства) для API, что означает, что все, что вы делаете, будет уничтожено еженедельно. Вы можете изменить это для подключения к производству, если это необходимо, установив VITE_API_HOST=https://kitsu.io/ в файле .env . Обычно это не обязательно, но есть некоторые вещи, которые не работают полностью при постановке.
В будущем мы планируем лучше интегрировать это в среду Dev Kitsu-Tools лучше.

Навигация по кодовой базе

Хотя основная структура проекта должна быть знакома большинству разработчиков, которые использовали React и Vite в прошлом, Kitsu является крупным применением и имеет больше структуры, чем вы можете привыкнуть.

Точки входа

VITE собирает приложение, начинающееся в «точке входа». В нашем случае у нас есть четыре, в трех «целях строительства»:

BUILD_TARGET=client - главное веб -приложение Kitsu (V4)
- index.html - основная точка входа для веб -приложения Kitsu
- oauth2-callback.html -точка входа для обработчика обратного обращения из поставщика OAuth2 (в основном просто делегатов в нашу библиотеку Nanoauth).
BUILD_TARGET=server -версия веб-приложения на стороне сервера
- server.js - основная точка входа для веб -приложения Kitsu
BUILD_TARGET=library - библиотека компонентов из веб -приложения Kitsu (V4) для выставки для приложения V3 Ember во время миграции.
- src/entry-ember.tsx -экспорт, который будет доступен из приложения Ember

Исходный код приложения

src/assets/ - Статические активы, такие как значки, иллюстрации и анимации, импортируемые приложением. Они не просто скопированы в выходной каталог, они должны быть импортированы и могут обрабатываться во время компиляции с различными плагинами.
src/components/ - Общие, многоразовые компоненты
src/pages/ - Компоненты, выполняющие целую страницу
src/layouts/ - Компоненты, обеспечивающие повторную структуру страницы
src/contexts/ - React Contexts для совместного использования между компонентами
src/initializers/ - Императивный код, который работает во время загрузки приложений (избегайте их, если возможно, предпочитают крючки в компоненте приложения)
src/constants/config.ts - разоблачение конфигурации приложению во время выполнения
src/graphql/ - Код поддержки GraphQL, такой как сгенерированные типы схемы, скаляры и обмены URQL.
src/hooks/ - Пользовательские крючки React для приложения
src/locales/ -Данные для каждой локали, которую мы поддерживаем (переводы, Date-fn Locales и т. Д.)
src/errors/ - все наши подклассы ошибок
src/styles/ -стили всего приложения (не специфичные для компонента), в основном в виде переменных, которые используются в стилях компонентов.

Ключевые библиотеки

Язык: TypeScript
Структура: React (мы могли бы переключиться на Preact в какой -то момент)
Бандлер: Vite
Тестирование: vitest
Маршрутизация: React Router v6
Клиент GraphQL: urql с graphcache включена
Стили: CSS -модули, обработанные PostCSS
Интернационализация/локализация: React Intl
Время: Date-Fns

Общие рабочие процессы развития

Запуск codegen

npm run codegen

Если вы измените файл .gql или добавите новый ключ перевода, вам нужно будет запустить npm run codegen чтобы они работали должным образом. GraphQL CodeGen будет генерировать файлы TypeScript для каждого запроса, а Intl CodeGen извлекает все клавиши перевода из ваших компонентов.

Запуск рассказов

npm run storybook

Мы используем сборник рассказов для документирования компонентов. Мы просим вас документировать любые новые компоненты, которые вы добавляете.

Заводящие тесты

npm run test:unit # Runs unit tests (vitest)
npm run test:unit:watch # Opens vitest in watch mode
npm run test:e2e # Runs e2e tests (cypress)

У нас есть два тестовых люкса:

Модульные тесты
- Powered by Vitest, совместимая с помощью шутки структуры тестирования
- Очень быстро
- Бежит в фальшивом доме (не реальный браузер)
- Хранясь рядом с кодом в файлах .test.ts(x)
Сквозные тесты
- Powered By Cypress, безголов
- Помедленнее
- Бежит в реальном браузере (Chrome, Firefox и т. Д.)
- Хранятся в cypress/

В большинстве случаев мы рекомендуем проверить ваш код с помощью Vitest. Это гораздо более приятный опыт, и он работает быстрее. Тем не менее, иногда вам нужно проверить полный рабочий процесс от сквозного, для чего есть кипарис.