Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: optimize block and material scalability issue #788

Merged

Conversation

hexqi
Copy link
Collaborator

@hexqi hexqi commented Sep 3, 2024

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)
  • Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

Background and solution

What is the current behavior?

Issue Number: N/A

当前问题

  • 从用户注册表去掉区块模块后会报错无法启动,解决该报错后,画布中依然存在了新建区块的入口,且物料插件面板报错无法展开
  • 物料模块没有导出加载bundle.json物料的api,不太方便使用
    image
    image

解决方法

  • 从common包中移除SaveNewBlock组件,画布模块从区块注册表获取组件
  • 物料插件根据区块模块存在情况渲染区块面板
  • 物料模块导出增加addMaterials API,传入bundle对象即可加载物料

遗留

  • 物料插件中要隐藏区块依然需要配置注册表,没有实现自动关联

What is the new behavior?

注册表移除区块后启动正常,画布右键不显示新建区块入口, 物料插件不报错
image

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features

    • Introduced conditional rendering for the SaveNewBlock component, enhancing responsiveness based on the application's state.
    • Added a new component, SaveNewBlock, to improve block management functionality.
  • Bug Fixes

    • Enhanced error handling in the ProgressBar component to prevent runtime errors related to undefined values.

Copy link
Contributor

coderabbitai bot commented Sep 3, 2024

Walkthrough

The changes involve modifying the CanvasMenu.vue component to dynamically render the SaveNewBlock component based on its availability. The SaveNewBlock component has been removed from common exports and reintroduced in the plugins block module. Additionally, the import paths for SaveNewBlock have been adjusted, and a constant's import path has been changed for improved modularity. A new BlockPanel.vue component has also been introduced to streamline block management.

Changes

Files Change Summary
packages/canvas/container/src/components/CanvasMenu.vue
packages/plugins/block/index.js
Dynamic rendering of SaveNewBlock in CanvasMenu.vue based on its presence. Added SaveNewBlock to the exported components in index.js.
packages/common/component/index.js Removed SaveNewBlock from exports and global component installation.
packages/plugins/block/src/Main.vue Changed import of SaveNewBlock from a common library to a local file.
packages/plugins/block/src/SaveNewBlock.vue Updated import path for REGEXP_BLOCK_NAME from relative to absolute.
packages/plugins/materials/src/meta/block/src/BlockPanel.vue
packages/plugins/materials/src/meta/block/src/Main.vue
Introduced BlockPanel.vue for block management, consolidating functionality and simplifying Main.vue by removing multiple components and logic.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CanvasMenu
    participant MetaAPI

    User->>CanvasMenu: Request to view menu
    CanvasMenu->>MetaAPI: Check for available blocks
    MetaAPI-->>CanvasMenu: Return block availability
    CanvasMenu->>User: Render SaveNewBlock if hasBlock is true
Loading

🐰 "In the garden where changes bloom,
New blocks save with a joyful zoom!
Progress flows without a hitch,
Materials added, what a switch!
Hop and skip, let's celebrate,
With every change, we elevate!" 🐇✨

Tip

We have updated our review workflow to use the Anthropic's Claude family of models. Please share any feedback in the discussion post on our Discord.


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
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.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

@github-actions github-actions bot added enhancement New feature or request refactor-main refactor/develop branch feature labels Sep 3, 2024
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 1ed870c and 2055c3e.

Files selected for processing (3)
  • packages/canvas/container/src/components/CanvasMenu.vue (2 hunks)
  • packages/common/component/ProgressBar.vue (1 hunks)
  • packages/plugins/materials/src/composable/useMaterial.js (1 hunks)
Additional comments not posted (4)
packages/common/component/ProgressBar.vue (1)

24-25: LGTM!

The code changes are approved. The modifications improve the reliability of the component by:

  • Introducing a safeguard to check if the result of getMetaApi is null or undefined, and if it is falsy, assigning an empty object instead. This prevents potential runtime errors when attempting to destructure getEditBlock from a null or undefined value.
  • Altering the assignment of editBlock to include a conditional check. If getEditBlock is defined, editBlock is computed using computed(getEditBlock). If getEditBlock is not available, editBlock is set to null. This ensures that editBlock will not attempt to compute a value from an undefined function, thus improving error handling and control flow.

Overall, these changes enhance the robustness of the component by preventing potential errors related to undefined values and ensuring that the computed property is only created when appropriate.

packages/canvas/container/src/components/CanvasMenu.vue (2)

30-30: LGTM!

The conditional rendering of the SaveNewBlock component based on the hasBlock property improves the component's responsiveness to the application's state.


230-230: LGTM!

The addition of the hasBlock property to the reactive properties is consistent with the changes made at line 30 and is correctly derived from the getMetaApi(META_SERVICE.Block) function.

packages/plugins/materials/src/composable/useMaterial.js (1)

433-433: LGTM!

The new addMaterials function is a useful addition to the module. It provides a convenient way to add both components and blocks using a single function call. The implementation is clean, follows the existing code structure, and integrates well with the other functions in the module.

@hexqi hexqi changed the title feat: optimize block and material scalability issue fix: optimize block and material scalability issue Sep 3, 2024
@github-actions github-actions bot added bug Something isn't working and removed enhancement New feature or request labels Sep 3, 2024
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 2055c3e and 9530203.

Files selected for processing (5)
  • packages/canvas/container/src/components/CanvasMenu.vue (3 hunks)
  • packages/common/component/index.js (2 hunks)
  • packages/plugins/block/index.js (1 hunks)
  • packages/plugins/block/src/Main.vue (1 hunks)
  • packages/plugins/block/src/SaveNewBlock.vue (1 hunks)
Files skipped from review due to trivial changes (2)
  • packages/common/component/index.js
  • packages/plugins/block/src/SaveNewBlock.vue
Files skipped from review as they are similar to previous changes (1)
  • packages/canvas/container/src/components/CanvasMenu.vue
Additional comments not posted (4)
packages/plugins/block/index.js (3)

16-16: LGTM!

The code changes are approved.


22-22: LGTM!

The code changes are approved.


23-25: LGTM!

The code changes are approved.

packages/plugins/block/src/Main.vue (1)

123-123: LGTM!

The import statement has been correctly updated to use the local SaveNewBlock component instead of importing it from the common library. This change allows for customization or specific functionality that may not be provided by the common library.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)
packages/plugins/materials/src/meta/block/src/BlockPanel.vue (1)

1-181: The BlockPanel component looks good overall. Here are a few suggestions to further improve it:

  1. The component is well-structured and modular, following Vue 3 best practices and utilizing the Composition API effectively.
  2. The component handles API errors gracefully and displays appropriate error messages to the user.
  3. To improve readability and maintainability, consider adding code comments to explain complex logic or important sections of the code.
  4. To enhance the separation of concerns, consider extracting the API calls (fetchGroups, fetchGroupBlocksById, fetchGroupBlocksByIds) into a separate service or composable. This will make the component more focused and easier to test.
Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 9530203 and 9355db0.

Files selected for processing (2)
  • packages/plugins/materials/src/meta/block/src/BlockPanel.vue (1 hunks)
  • packages/plugins/materials/src/meta/block/src/Main.vue (1 hunks)
Additional comments not posted (4)
packages/plugins/materials/src/meta/block/src/Main.vue (4)

1-2: LGTM!

The changes to the template section look good:

  • The conditional rendering of the <block-panel> component based on existBlockModule simplifies the template structure.
  • Passing down the attributes using v-bind="$attrs" allows for flexibility and reusability of the <block-panel> component.

5-23: LGTM!

The changes to the script section look good:

  • The imports have been streamlined to only include the necessary dependencies.
  • The BlockPanel component is properly registered in the components option.
  • The setup function now focuses on retrieving the existence of the block module using getMergeMeta('engine.plugins.blockmanage').
  • The existBlockModule variable is used to conditionally render the <block-panel> component in the template section.

27-27: Verify the styling responsibilities.

The style section has been emptied, suggesting a potential shift in styling responsibilities to the BlockPanel component.

Please confirm if the styling for the block panel is now handled within the BlockPanel component itself.


1-27: Great refactoring!

The overall changes in the Main.vue component are a step in the right direction:

  • The refactoring improves the modularity and maintainability of the codebase by consolidating functionality into the BlockPanel component.
  • The changes align with the principles of component-driven development, reducing the complexity of the Main.vue component.
  • The conditional rendering based on existBlockModule ensures that the <block-panel> is only rendered when the block module exists.

Copy link
Collaborator

@yy-wow yy-wow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@chilingling chilingling merged commit 1700d3c into opentiny:refactor/develop Sep 5, 2024
4 checks passed
yy-wow pushed a commit to yy-wow/tiny-engine that referenced this pull request Oct 10, 2024
当前问题
从用户注册表去掉区块模块后会报错无法启动,解决该报错后,画布中依然存在了新建区块的入口,且物料插件面板报错无法展开
物料模块没有导出加载bundle.json物料的api,不太方便使用

解决方法
从common包中移除SaveNewBlock组件,画布模块从区块注册表获取组件
物料插件根据区块模块存在情况渲染区块面板
物料模块导出增加addMaterials API,传入bundle对象即可加载物料
遗留
物料插件中要隐藏区块依然需要配置注册表,没有实现自动关联
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working refactor-main refactor/develop branch feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants