kitsu web

Kitsu Web应用程序

---

这是我们的客户存储库。它包含kitsu的react.js应用程序。
查看工具，移动，服务器和API文档存储库。

---

贡献

您正在阅读的事实可能意味着您有兴趣为Kitsu Web应用程序做出贡献。如果是这样，欢迎！入门非常容易，我们在这里为您提供帮助。如果您有任何疑问，请随时在#DEV频道中的不和谐中询问我们！

在提出拉动请求之前，请阅读styleGuide，并确保将代码库保持清洁和一致的未来开发人员。

让它运行

您将需要一个相当现代的node.js版本。如果您不确定，那么Active LTS可能是最好的选择。我们的部署将使用Active LTS，但我们尝试确保所有内容在当前版本上也顺利运行。

有节点后，运行以下内容：

1. npm install （安装依赖项）
2. npm run dev （默认端口3000）

现在访问http://localhost:3000 ，您应该查看Kitsu应用程序！

默认情况下，在开发模式下，这将连接到API的staging.kitsu.io （我们的预生产环境），这意味着您所做的任何事情都将每周消除。您可以通过在.env文件中设置VITE_API_HOST=https://kitsu.io/将其更改为连接到生产。这通常不是必需的，但是有些事情在分期中无法完全起作用。

将来，我们计划将其整合到Kitsu-Tools开发环境中。

导航代码库

尽管过去使用React和Vite的大多数开发人员应该熟悉基本的项目结构，但Kitsu是一个大型应用程序，其结构比您习惯的更多。

入口点

Vite从“入口点”开始编译应用程序。在我们的情况下，我们有四个“构建目标”：

• BUILD_TARGET=client - 主媚值（V4）Web应用程序
  • index.html - kitsu Web应用程序的主要入口点
  • oauth2-callback.html - 来自OAuth2提供商（主要是我们纳米AANOAUTH）库的回调处理程序的入口点。
• BUILD_TARGET=server - 服务器端渲染版本的Kitsu Web应用程序
  • server.js - Kitsu Web应用程序的主要切入点
• BUILD_TARGET=library - kitsu（v4）Web应用程序中的组件库，可在迁移过程中曝光V3 Ember应用程序。
  • src/entry-ember.tsx - 可以从Ember应用程序访问的出口

应用程序源代码

• src/assets/ - 应用程序导入的图标，插图和动画等静态资产。这些不仅复制到输出目录，还必须进口这些目录，并且可以在使用各种插件的过程中处理。
• src/components/ - 常见，可重复使用的组件
• src/pages/ - 呈现整个页面的组件
• src/layouts/ - 提供可重复使用的页面结构的组件
• src/contexts/ - 在组件之间共享状态的反应上下文
• src/initializers/ - 在应用程序启动期间运行的命令代码（如果可能的话，请避免使用应用程序中的钩子）
• src/constants/config.ts - 在运行时公开配置到应用程序
• src/graphql/ - GraphQl支持代码，例如生成的模式类型，标量和URQL交换。
• src/hooks/ - 应用程序的自定义式挂钩
• src/locales/ - 我们支持的每个语言环境的数据（翻译，date-fn Locales等）
• src/errors/ - 我们所有的错误子类
• src/styles/ - 全应用样式（不是针对组件的特定），主要是以组件样式使用的变量形式。

关键库

• 语言：打字稿
• 框架：反应（我们可能会在某个时候切换到预告）
• 邦德勒：维特
• 测试： vitest
• 路由： React路由器V6
• GraphQl客户端：启用GraphCache的URQL
• 样式： PostCSS处理的CSS模块
• 国际化/本地化： React Intl
• 时间： date-fns

共同的开发工作流程

运行CodeGen

npm run codegen

如果更改.gql文件或添加新的翻译键，则需要运行npm run codegen以使其正常工作。 GraphQl CodeGen将为每个查询生成打字稿文件，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)

我们有两个测试套件：

• 单位测试
  • 由Jest兼容的测试框架vitest提供支持
  • 非常快
  • 在伪造的DOM中运行（不是真正的浏览器）
  • 存储在.test.ts(x)文件中的代码附近
• 端到端测试
  • 由赛普拉斯（Cypress）提供动力，无头浏览器测试框架
  • 慢点
  • 在真正的浏览器（Chrome，Firefox等）中运行
  • 存储在cypress/

在大多数情况下，我们建议使用Vitest测试您的代码。这是一个更好的体验，而且运行速度更快。也就是说，有时您需要从端到端测试完整的工作流程，这是柏树的目的。

翻译

我们使用Crowdin来处理翻译，前往Crowdin.com/project/kitsu-web建议更改或添加新的翻译。

翻译使用ICU消息语法格式。阅读语法文档。

问题

想要创建一个问题？在Kitsu上打开错误报告或功能请求。