Download kitsu web do kitsu - download do código -fonte kitsu web

kitsu web

Dados do site

1.0.0

Baixar

Kitsu Web App

Este é o nosso repositório de clientes. Ele contém o aplicativo react.js para kitsu.
Confira os repositórios de ferramentas, dispositivos móveis, servidores e documentos da API.

Contribuindo

O fato de você estar lendo isso provavelmente significa que você está interessado em contribuir para o aplicativo da Web do Kitsu. Se sim, seja bem -vindo! É muito fácil começar, e estamos aqui para ajudá -lo o tempo todo. Se você tiver alguma dúvida, não hesite em nos perguntar em nossa discórdia no canal #dev!

Antes de fazer uma solicitação de tração, leia o estilo de estilo e certifique -se de manter a base de código limpa e consistente para futuros desenvolvedores.

Fazendo com que seja executado

Você vai precisar de uma versão node.js bastante moderna. O LTS ativo é provavelmente a melhor opção, se você não tiver certeza. Nossas implantações usarão o LTS ativo, mas tentamos garantir que tudo funcione bem na versão atual.

Depois de ter um nó, execute o seguinte:

npm install (instala dependências)
npm run dev (porta 3000 padrão)

Agora visite http://localhost:3000 e você deve ver o aplicativo kitsu!

Por padrão, no modo de desenvolvimento, isso se conectará ao staging.kitsu.io (nosso ambiente de pré-produção) para a API, o que significa que tudo o que você fizer será eliminado semanalmente. Você pode alterar isso para conectar -se à produção, se necessário, configurando VITE_API_HOST=https://kitsu.io/ no arquivo .env . Isso geralmente não é necessário, mas há algumas coisas que não funcionam totalmente na encenação.
No futuro, planejamos integrar melhor isso no ambiente de desenvolvimento Kitsu-Tools.

Navegando pela base de código

Embora a estrutura básica do projeto deva ser familiar para a maioria dos desenvolvedores que usaram o React e o Vite no passado, o Kitsu é uma grande aplicação e tem mais estrutura do que você pode estar acostumado.

Pontos de entrada

O Vite compila o aplicativo começando em um "ponto de entrada". No nosso caso, temos quatro, em três "construir metas":

BUILD_TARGET=client - O aplicativo Web Kitsu principal (V4)
- index.html - ponto de entrada principal para o aplicativo da web kitsu
- oauth2-callback.html -Ponto de entrada para um manipulador de retorno de chamada de uma biblioteca OAuth2 (principalmente apenas delegados à nossa nanoauth).
BUILD_TARGET=server -versão renderizada do servidor do aplicativo da web kitsu
- server.js - ponto de entrada principal para o aplicativo da web kitsu
BUILD_TARGET=library - Uma biblioteca de componentes do aplicativo Web Kitsu (V4) para expor ao aplicativo V3 Ember durante a migração.
- src/entry-ember.tsx -As exportações que serão acessíveis a partir do aplicativo Ember

Código fonte do aplicativo

src/assets/ - Ativos estáticos como ícones, ilustrações e animações importadas pelo aplicativo. Estes não são apenas copiados para o diretório de saída, devem ser importados e podem ser processados durante a compilação com vários plugins.
src/components/ - componentes comuns e reutilizáveis
src/pages/ - componentes que renderizam uma página inteira
src/layouts/ - componentes que fornecem uma estrutura de página reutilizável
src/contexts/ - React Contextos para compartilhar estado entre componentes
src/initializers/ - código imperativo que é executado durante a inicialização do aplicativo (evite -os, se possível, prefira ganchos no componente do aplicativo)
src/constants/config.ts - expõe a configuração ao aplicativo em tempo de execução
Código de suporte src/graphql/ - GraphQL, como os tipos de esquema gerado, escalares e trocas de URQL.
src/hooks/ - ganchos de reação personalizados para o aplicativo
src/locales/ -Dados para cada localidade que apoiamos (traduções, locais de data-fn, etc.)
src/errors/ - todas as nossas subclasses de erro
src/styles/ -Estilos em todo o aplicativo (não específicos para um componente), principalmente na forma de variáveis usadas em estilos de componentes.

Bibliotecas -chave

Idioma: TypeScript
Framework: React (podemos mudar para o Preact em algum momento)
Pouco: Vite
Teste: Vitest
Roteamento: React Router V6
Cliente GraphQL: URQL com GraphCache habilitado
Estilos: módulos CSS processados pelo PostCSS
Internacionalização/Localização: React Intl
Hora: Date-FNs

Fluxos de trabalho de desenvolvimento comuns

Executando o codeGen

npm run codegen

Se você alterar um arquivo .gql ou adicionar uma nova chave de tradução, precisará executar npm run codegen para que eles funcionem corretamente. O CodeGen do GraphQL gerará arquivos TypeScript para todas as consultas e o Intl CodeGen extrairá todas as teclas de tradução de seus componentes.

Running Storybook

npm run storybook

Usamos o Storybook para documentar componentes. Pedimos que você documente todos os novos componentes que você adicionar.

Testes de execução

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)

Temos duas suítes de teste:

Testes de unidade
- Alimentado pela Vitest, uma estrutura de teste compatível com jestes
- Extremamente rápido
- Corre em um DOM falso (não um navegador de verdade)
- Armazenado adjacente ao código em .test.ts(x) arquivos
Testes de ponta a ponta
- Alimentado por Cypress, uma estrutura de teste de navegador sem cabeça
- Mais devagar
- Corre em um navegador real (Chrome, Firefox, etc.)
- Armazenado em cypress/

Na maioria das vezes, recomendamos testar seu código com o Vitest. É uma experiência muito melhor e corre mais rápido. Dito isto, às vezes você precisa testar um fluxo de trabalho completo de ponta a ponta, e é para isso que o Cypress existe.