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: es import error、add build command(comments)、add demo designer... #514

Merged
merged 7 commits into from
May 27, 2024

Conversation

hexqi
Copy link
Collaborator

@hexqi hexqi commented May 27, 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

What is the new behavior?

  • 添加.js解决es中import报错
  • comments和entry包添加构建命令
  • 添加设计器demo项目
  • 删除部分没有用的svg
  • 暂时移除metaService注释

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features

    • Introduced a new designer demo template with loading animations, scrollbar styling, and design canvas elements.
    • Added a Vue.js app structure with TinyEngine integration for the designer demo.
    • Enhanced toolbar and plugin configurations in the engine-cli package.
  • Improvements

    • Updated npm scripts for running demo-related tasks.
    • Improved import paths and script structures for better maintainability.
    • Enhanced Vite configurations for various packages to streamline build processes.
  • Bug Fixes

    • Fixed import path issues in multiple scripts to ensure correct module resolution.
  • Chores

    • Updated workspace configuration to exclude specific packages and folders.

Copy link
Contributor

coderabbitai bot commented May 27, 2024

Walkthrough

The recent changes introduce several new features and enhancements to the designer-demo project, including new HTML templates, Vue components, and configuration files. The updates also include modifications to various scripts and configurations across multiple packages, such as adding file extensions to imports, updating build scripts, and enhancing the registry with new toolbars and plugins. These changes collectively improve the overall functionality and maintainability of the project.

Changes

File(s) / Path(s) Change Summary
designer-demo/canvas.html, designer-demo/index.html Introduced new HTML templates for the designer demo, setting up the basic structure and elements for the web page.
designer-demo/engine.config.js Updated viteConfig to include mode: 'serve' and added a new otherConfig object.
designer-demo/package.json Added scripts for development and building, and included dependencies for Vue.js and OpenTiny engine components.
designer-demo/registry.js Introduced a configuration object defining layout, toolbars, plugins, DSLs, settings, canvas, and utilities for the web engine application.
designer-demo/src/* Added new Vue components and scripts (App.vue, canvas.js, defineEntry.js, main.js) to set up and initialize the TinyEngine using Vue.js.
pnpm-workspace.yaml Updated to exclude the designer-demo package and folders named template in addition to existing exclusions.
package.json Added new npm scripts dev:demo and dev:demo:frontend for running demo-related tasks.
packages/build/vite-plugin-generate-comments/* Updated paths for main and module files, added a new build script, and created a new Vite configuration file.
packages/design-core/* Renamed defaultResigry to defaultRegistry, added console logs, and updated import paths to include .js extensions.
packages/engine-cli/template/registry.js Added new toolbar items and plugins, and updated settings configurations.
packages/entry/package.json, packages/entry/vite.config.js Updated main and module paths, added a files entry for the dist directory, and included a new build script using Vite.
packages/layout/src/index.vue Moved import statements for shallowRef, ref, and reactive from the script block with lang="jsx" to a regular script block.
packages/layout/vite.config.js Added additional configurations for rollupOptions, including setting a banner for importing a CSS file and specifying external dependencies.
packages/plugins/i18n/meta.js, packages/plugins/i18n/src/Main.vue Added import statement for iconLanguage from @opentiny/vue-icon and uncommented the import of BASE_URL from @opentiny/tiny-engine-controller/js/environments.

In the land of code, where changes bloom,
Tiny engines hum, dispelling gloom.
New scripts and tools, a designer's dream,
With Vue and Vite, a seamless stream.
Toolbars and plugins, all aligned,
In this crafted world, brilliance you'll find.
🌸✨

Tip

New Features and Improvements

Review Settings

Introduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments.

AST-based Instructions

CodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation.

Community-driven AST-based Rules

We are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information.

New Static Analysis Tools

We are continually expanding our support for static analysis tools. We have added support for biome, hadolint, and ast-grep. Update the settings in your .coderabbit.yaml file or head over to the settings page to enable or disable the tools you want to use.

Tone Settings

Users can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:

  • Mr. T: "You must talk like Mr. T in all your code reviews. I pity the fool who doesn't!"
  • Pirate: "Arr, matey! Ye must talk like a pirate in all yer code reviews. Yarrr!"
  • Snarky: "You must be snarky in all your code reviews. Snark, snark, snark!"

Revamped Settings Page

We have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to .coderabbit.yaml will be reflected in the settings page, and vice versa.

Miscellaneous

  • Turn off free summarization: You can switch off free summarization of PRs opened by users not on a paid plan using the enable_free_tier setting.
  • Knowledge-base scope: You can now set the scope of the knowledge base to either the repository (local) or the organization (global) level using the knowledge_base setting. In addition, you can specify Jira project keys and Linear team keys to limit the knowledge base scope for those integrations.
  • High-level summary placement: You can now customize the location of the high-level summary in the PR description using the high_level_summary_placeholder setting (default @coderabbitai summary).
  • Revamped request changes workflow: You can now configure CodeRabbit to auto-approve or request changes on PRs based on the review feedback using the request_changes_workflow setting.

Warning

Review ran into problems

Problems (1)
  • Git: Failed to clone repository. Please contact CodeRabbit support.

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.

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 as 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 full the 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 help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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

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 and nitpick comments (1)
packages/design-core/index.js (1)

50-51: Consider whether the added console logs for the default and merged registry are necessary for production. If they are for debugging purposes, ensure they are removed or guarded by a development flag before deployment.

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between 7a583b3 and f1c0272.
Files ignored due to path filters (4)
  • packages/design-core/assets/rf-resources/flowchart-ecs.svg is excluded by !**/*.svg
  • packages/design-core/assets/rf-resources/flowchart-evs.svg is excluded by !**/*.svg
  • packages/design-core/assets/rf-resources/flowchart-rds.svg is excluded by !**/*.svg
  • packages/design-core/assets/rf-resources/flowchart-vpc.svg is excluded by !**/*.svg
Files selected for processing (26)
  • designer-demo/canvas.html (1 hunks)
  • designer-demo/engine.config.js (1 hunks)
  • designer-demo/index.html (1 hunks)
  • designer-demo/package.json (1 hunks)
  • designer-demo/registry.js (1 hunks)
  • designer-demo/src/App.vue (1 hunks)
  • designer-demo/src/canvas.js (1 hunks)
  • designer-demo/src/defineEntry.js (1 hunks)
  • designer-demo/src/main.js (1 hunks)
  • package.json (1 hunks)
  • packages/build/vite-plugin-generate-comments/package.json (1 hunks)
  • packages/build/vite-plugin-generate-comments/vite.config.js (1 hunks)
  • packages/design-core/index.js (3 hunks)
  • packages/design-core/scripts/localCdnFile/copyBundleDeps.js (1 hunks)
  • packages/design-core/scripts/localCdnFile/copyImportMap.js (1 hunks)
  • packages/design-core/scripts/localCdnFile/copyPreviewImportMap.js (1 hunks)
  • packages/design-core/scripts/localCdnFile/index.js (1 hunks)
  • packages/design-core/vite.config.js (1 hunks)
  • packages/engine-cli/template/registry.js (1 hunks)
  • packages/entry/package.json (1 hunks)
  • packages/entry/vite.config.js (1 hunks)
  • packages/layout/src/index.vue (1 hunks)
  • packages/layout/vite.config.js (1 hunks)
  • packages/plugins/i18n/meta.js (1 hunks)
  • packages/plugins/i18n/src/Main.vue (3 hunks)
  • pnpm-workspace.yaml (1 hunks)
Files skipped from review due to trivial changes (9)
  • designer-demo/canvas.html
  • designer-demo/index.html
  • designer-demo/src/canvas.js
  • designer-demo/src/main.js
  • packages/build/vite-plugin-generate-comments/vite.config.js
  • packages/design-core/vite.config.js
  • packages/entry/vite.config.js
  • packages/layout/src/index.vue
  • packages/plugins/i18n/meta.js
Additional comments not posted (21)
pnpm-workspace.yaml (2)

4-4: Including 'designer-demo' in the workspace configuration aligns with the introduction of the demo project.


7-7: Excluding template directories from the workspace is a good practice to streamline operations like testing and linting.

packages/design-core/scripts/localCdnFile/index.js (1)

1-5: Correctly updating the export paths to include the .js extension aligns with ES module standards and resolves import errors.

designer-demo/src/App.vue (1)

1-9: The script setup correctly uses Vue's composition API and lifecycle hooks to initialize the tiny engine, adhering to best practices.

packages/entry/package.json (1)

5-11: Updating the main and module paths to point to the dist directory and adding a build script are appropriate for managing builds and distributions.

packages/build/vite-plugin-generate-comments/package.json (1)

5-11: Correctly updating the paths to the dist directory and adding a build script ensures the plugin is built and managed properly.

designer-demo/package.json (1)

6-21: The configuration of scripts and dependencies in this package.json is well-aligned with the project's goals, ensuring consistency and ease of development.

designer-demo/src/defineEntry.js (1)

13-15: Correct use of ES module imports with .js extensions and proper function invocation.

designer-demo/engine.config.js (1)

16-19: Ensure the otherConfig object is documented for future use, as it's currently empty.

packages/layout/vite.config.js (1)

30-35: Configuration for rollupOptions is appropriate. Verify that all specified external dependencies are correct and necessary.

#!/bin/bash
# Description: Verify external dependencies in rollup configuration.

# Test: Search for external dependencies in the project to ensure they are used and necessary.
rg --type js 'vue|@opentiny/tiny-engine.*|@opentiny/vue.*'
packages/design-core/scripts/localCdnFile/copyImportMap.js (1)

8-10: Correct update of import paths with .js extensions. Consider adding detailed comments to complex function logic for better maintainability.

packages/engine-cli/template/registry.js (1)

17-94: Extensive additions to toolbar items and plugins. Ensure each new item and plugin is well-documented for clarity and ease of use.

designer-demo/registry.js (1)

17-94: Identical additions to toolbar items and plugins as in packages/engine-cli/template/registry.js. Verify the necessity of duplicating these configurations across different parts of the project.

#!/bin/bash
# Description: Verify duplication of configurations across different parts of the project.

# Test: Search for identical configurations in other parts of the project.
rg --type js 'engine.toolbars.logo|engine.plugins.materials'
packages/design-core/scripts/localCdnFile/copyBundleDeps.js (2)

3-4: Ensure that the updated import paths with .js extensions are correct and resolve the ES module import errors as intended.


11-11: Confirm that the import path for locateCdnNpmInfo.js is correctly updated to include the .js extension.

packages/design-core/index.js (1)

16-16: Confirm that the renaming from defaultResigry to defaultRegistry is correctly reflected throughout the codebase.

packages/design-core/scripts/localCdnFile/copyPreviewImportMap.js (2)

9-9: Ensure that the updated import path for locateCdnNpmInfo.js is correct and resolves the ES module import errors as intended.


11-11: Confirm that the import path for installPackageTemporary.js is correctly updated to include the .js extension.

package.json (1)

8-10: Confirm that the new scripts for dev:demo and dev:demo:frontend are correctly set up and functional. Ensure that they do not conflict with existing scripts and that they adhere to the project's scripting conventions.

packages/plugins/i18n/src/Main.vue (2)

130-130: Verify that the uncommented import of BASE_URL is used appropriately within the component and does not introduce any security or functional issues.


291-291: Ensure that the downloadFile method correctly handles the file download process and that the URL construction is secure and does not expose sensitive information.

@chilingling
Copy link
Member

designer-demo 下面后面可能会有多个 demo,建议在 designer-demo/xxx 作为一个 demo 的入口,方便后续添加其他的 demo。

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


There may be multiple demos below designer-demo. It is recommended that designer-demo/xxx be used as the entrance to a demo to facilitate the subsequent addition of other demos.

@chilingling chilingling merged commit 81fae7e into opentiny:refactor/develop May 27, 2024
yy-wow pushed a commit to yy-wow/tiny-engine that referenced this pull request Oct 10, 2024
…opentiny#514)

* feat: add designer demo package

* fix: remove useless svg assets

* fix: add .js to resolve es import error

* fix: add build command in comments and entry

* fix: remove metaService

* feat: update registry template
@coderabbitai coderabbitai bot mentioned this pull request Oct 21, 2024
14 tasks
@coderabbitai coderabbitai bot mentioned this pull request Oct 30, 2024
14 tasks
@coderabbitai coderabbitai bot mentioned this pull request Nov 7, 2024
14 tasks
@coderabbitai coderabbitai bot mentioned this pull request Dec 16, 2024
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants