Descarga kitsu web - Descargar el código fuente kitsu web

kitsu web

Datos del sitio web

1.0.0

Descargar

Aplicación web kitsu

Este es nuestro repositorio de clientes. Contiene la aplicación react.js para kitsu.
Consulte los repositorios Herramientas, Mobile, Server y API Docs.

Que contribuye

El hecho de que esté leyendo esto probablemente significa que está interesado en contribuir a la aplicación web Kitsu. Si es así, ¡bienvenido! Es bastante fácil comenzar, y estamos aquí para ayudarte todo el camino. Si tiene alguna pregunta, ¡no dude en preguntarnos en nuestra discordia en el canal #DEV!

Antes de hacer una solicitud de extracción, lea la guía de estilo y asegúrese de mantener la base de código limpia y consistente para los futuros desarrolladores.

Conseguirlo correr

Necesitarás una versión de nodo.js bastante moderna. El LTS activo es probablemente la mejor opción si no está seguro. Nuestras implementaciones utilizarán los LT activos, pero tratamos de asegurarnos de que todo se ejecute sin problemas en la versión actual.

Después de tener el nodo, ejecute lo siguiente:

npm install (instala dependencias)
npm run dev (puerto predeterminado 3000)

Ahora visite http://localhost:3000 y debería ver la aplicación kitsu.

De manera predeterminada, en modo de desarrollo, esto se conectará a staging.kitsu.io (nuestro entorno de preproducción) para la API, lo que significa que todo lo que haga será eliminado semanalmente. Puede cambiar esto para conectarse a la producción si es necesario configurar VITE_API_HOST=https://kitsu.io/ en el archivo .env . Esto generalmente no es necesario, pero hay algunas cosas que no funcionan completamente en la puesta en escena.
En el futuro, planeamos integrar esto en el entorno de desarrollo kitsu-tools mejor.

Navegar por la base de código

Si bien la estructura básica del proyecto debe ser familiar para la mayoría de los desarrolladores que han usado React y Vite en el pasado, Kitsu es una gran aplicación y tiene más estructura de la que podría estar acostumbrado.

Puntos de entrada

Vite compila la aplicación que comienza en un "punto de entrada". En nuestro caso, tenemos cuatro, en tres "objetivos de construcción":

BUILD_TARGET=client - la aplicación web principal Kitsu (V4)
- index.html - punto de entrada principal para la aplicación web Kitsu
- oauth2-callback.html -Punto de entrada para un controlador de devolución de llamada de un proveedor de OAuth2 (en su mayoría solo delegados a nuestra biblioteca Nanoauth).
BUILD_TARGET=server -versión renderizada del lado del servidor de la aplicación web kitsu
- server.js - Punto de entrada principal para la aplicación web Kitsu
BUILD_TARGET=library : una biblioteca de componentes de la aplicación web Kitsu (V4) para exponer para la aplicación V3 Ember durante la migración.
- src/entry-ember.tsx : las exportaciones a las que se puede acceder desde la aplicación Ember

Código fuente de la aplicación

src/assets/ - Activos estáticos como iconos, ilustraciones y animaciones importadas por la aplicación. Estos no solo se copian en el directorio de salida, estos deben importarse y se pueden procesar durante la compilación con varios complementos.
src/components/ - Componentes comunes y reutilizables
src/pages/ - Componentes que hacen una página completa
componentes src/layouts/ - que proporcionan una estructura de página reutilizable
src/contexts/ - Reaccionar contextos para compartir el estado entre componentes
src/initializers/ - Código imperativo que se ejecuta durante el arranque de la aplicación (evite estos si es posible, prefiera los ganchos en el componente de la aplicación)
src/constants/config.ts : expone la configuración a la aplicación en tiempo de ejecución
Código de soporte src/graphql/ - GraphQL, como los tipos de esquema generados, los escalares y los intercambios URQL.
src/hooks/ - CONSTRUCTOS Customing React para la aplicación
src/locales/ -Datos para cada localidad que apoyamos (traducciones, locales de fechas, etc.)
src/errors/ - Todos nuestros subclases de error
src/styles/ -Estilos de toda la aplicación (no específicos de un componente), principalmente en forma de variables que se utilizan en los estilos de componentes.

Bibliotecas clave

Idioma: mecanografiado
Marco: Reaccionar (podríamos cambiar a Preact en algún momento)
Bundler: Vite
Pruebas: Vitest
Enrutamiento: React Router V6
Cliente GraphQL: URQL con GraphCache habilitado
Estilos: módulos CSS procesados por PostCSS
Internacionalización/localización: reaccionar intl
Hora: fecha-fns

Flujos de trabajo de desarrollo comunes

Ejecutando Codegen

npm run codegen

Si cambia un archivo .gql o agrega una nueva clave de traducción, deberá ejecutar npm run codegen para que funcionen correctamente. GraphQL Codegen generará archivos TypeScript para cada consulta y el Codegen intl extraerá todas las claves de traducción de sus componentes.

Running Storybook

npm run storybook

Utilizamos el libro de cuentos para documentar componentes. Le pedimos que documente cualquier componente nuevo que agregue.

Pruebas de ejecución

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)

Tenemos dos suites de prueba:

Pruebas unitarias
- Impulsado por Vitest, un marco de prueba compatible con broma
- Extremadamente rápido
- Corre en un DOM falso (no un navegador real)
- Almacenado adyacente al código en archivos .test.ts(x)
Pruebas de extremo a extremo
- Impulsado por Cypress, un marco de prueba de navegador sin cabeza
- Más lento
- Corre en un navegador real (Chrome, Firefox, etc.)
- Almacenado en cypress/

La mayoría de las veces, recomendamos probar su código con Vitest. Es una experiencia mucho mejor, y funciona más rápido. Dicho esto, a veces debe probar un flujo de trabajo completo de extremo a extremo, que es para lo que está allí Cypress.