feat: support provider with multi editor

[winjo]

Types

• 🎉 New Features

Background or solution

支持通过 AppProvider 来创建多个 editor，运行 npm run provider 查看示例

ChangeLog

Summary by CodeRabbit

• 新功能

  • 添加了新的 provider 脚本命令，以增强开发环境的集成选项。
  • 引入了 CodeEditor 组件，允许用户在应用中进行代码编辑。
  • 新增 AppProvider 组件，提供应用程序的上下文管理。
  • 引入 AppContext，集中管理 ClientApp 实例的状态。
  • 扩展 LandingProps 接口，新增 pending 状态以改善用户体验。

• 样式

  • 为 #main 元素添加了样式规则，允许内容在溢出时可滚动。

• 文档

  • 新增了 index.tsx 文件，建立代码编辑环境的基础结构。

[ant-codespaces]

Run and Debug this pull request in Codespaces

[coderabbitai]

Walkthrough

Walkthrough

此次更改涉及多个文件，主要新增了一个名为 provider 的脚本命令，添加了 CodeEditor 组件的导出，创建了 AppProvider 组件以管理应用程序的上下文，增加了 LandingProps 接口的状态选项，并引入了新的 CSS 规则以改善布局。此外，还创建了一个新的 React 应用程序文件 index.tsx，该文件使用了上述组件并配置了工作区设置。

Changes

文件路径	更改摘要
package.json	新增 "provider": "INTEGRATION=provider npm run dev" 脚本命令。
packages/core/src/api/exports.ts	新增导出 CodeEditor 组件。
packages/core/src/api/renderApp.tsx	新增 AppProvider 组件，管理应用程序的上下文和状态。
packages/core/src/core/components/CodeEditor.tsx	新增 CodeEditor 组件及相关钩子和接口。
packages/core/src/core/components/context.ts	新增 AppContext 以管理 ClientApp 状态。
packages/core/src/core/types.ts	扩展 LandingProps 接口，新增 'pending' 状态。
packages/startup/src/provider/index.css	新增 CSS 规则 #main { overflow: auto; }。
packages/startup/src/provider/index.tsx	新增 React 应用程序，使用 AppProvider 和 CodeEditor 组件，并配置工作区设置。

---

Recent review details

Configuration used: .coderabbit.yml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between e0c8418 and 5eb4eca.

Files selected for processing (8)

• package.json (1 hunks)
• packages/core/src/api/exports.ts (1 hunks)
• packages/core/src/api/renderApp.tsx (3 hunks)
• packages/core/src/core/components/CodeEditor.tsx (1 hunks)
• packages/core/src/core/components/context.ts (1 hunks)
• packages/core/src/core/types.ts (1 hunks)
• packages/startup/src/provider/index.css (1 hunks)
• packages/startup/src/provider/index.tsx (1 hunks)

Files skipped from review due to trivial changes (1)

• packages/startup/src/provider/index.css

Additional context used

Biome

packages/core/src/api/renderApp.tsx

[error] 139-139: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.

(lint/complexity/noUselessFragments)

Additional comments not posted (15)

packages/core/src/core/components/context.ts (1)

1-4: 代码审查：创建 React 上下文

此文件中的代码正确地设置了一个名为 AppContext 的 React 上下文，用于存储 ClientApp 类型的应用程序实例。这种做法允许组件树中的任何组件能够访问到应用程序实例，是一种常见且有效的状态管理方式。

建议添加一些注释来解释 ClientApp 的用途和上下文的工作方式，这将有助于未来的开发者更好地理解和维护代码。

packages/core/src/api/exports.ts (2)

7-7: 确认新的导出语句

新增的 CodeEditor 组件导出语句应确保路径正确无误，并且与其他导出不冲突。

---

Line range hint 1-8: 文件结构和一致性审查

文件的结构清晰，导入和导出语句的使用保持了一致性，便于维护和扩展。

packages/core/src/core/types.ts (2)

5-5: 扩展了LandingProps接口的status属性

此更改通过添加'pending'状态，增强了LandingProps接口的灵活性，使其能够表示一个中间状态。这有助于提供更细致的反馈，改善用户体验。

---

5-5: 验证'pending'状态的一致性和影响

请确认添加'pending'状态后，所有使用LandingProps接口的组件都已适当更新，以处理新状态。这是确保功能完整性和避免潜在问题的关键步骤。

packages/startup/src/provider/index.tsx (3)

1-6: 确认导入和CSS包含的正确性。

请确保所有导入的模块和组件都是必需的，并且CSS文件的引用没有问题。此外，检查CSS文件之间是否有可能的样式冲突。

---

8-42: 检查App组件及其配置。

AppProvider的配置应详细检查，确保没有潜在的问题。同时，多个CodeEditor实例的使用应确保正确设置，并考虑其对性能的影响。特别是，检查workspaceDir和layoutConfig的设置是否符合预期。

---

45-45: 确认App组件的渲染逻辑。

确保HTML结构中存在'main'元素，并且使用的React渲染方法与React版本兼容。建议检查'main'元素的存在，以防止渲染时出现错误。

package.json (1)

24-24: 新增脚本命令审查

添加的 "provider": "INTEGRATION=provider npm run dev" 脚本命令格式正确，与 PR 的目标一致，即增强开发环境的功能。此命令通过设置环境变量 INTEGRATION 为 provider 并执行开发脚本 npm run dev，为开发环境提供了新的集成选项。

packages/core/src/core/components/CodeEditor.tsx (4)

1-8: 检查导入的必要性和使用情况。

请确认所有导入的模块和组件都在文件中被使用，以确保没有冗余代码。

---

12-16: 验证自定义钩子 useMemorizeFn 的必要性和正确使用。

请确认这个钩子在文件中的使用是必要的，并且其实现符合预期的功能。

---

26-84: 检查 CodeEditorComponent 组件的逻辑和生命周期管理。

请确保 URI 的处理逻辑正确，并且组件的生命周期方法（如 useEffect）正确管理资源。

---

87-95: 验证 CodeEditor 组件中上下文和属性的正确使用。

请检查组件是否正确地使用了上下文，并且属性的传递没有问题。

packages/core/src/api/renderApp.tsx (2)

4-4: 引入了多个React钩子和Fragment

代码正确地引入了useEffect, useMemo, useRef, useState, 和 Fragment。这些都是在React组件中管理生命周期和状态的常用工具。

---

13-13: 引入了AppContext

正确地引入了AppContext，这是为了在应用程序中提供一个全局的上下文环境。

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1