tiny-engine icon indicating copy to clipboard operation
tiny-engine copied to clipboard
verified publisher icon opentiny

Ospp 2024/003 react dsl

Open wjywy opened this issue 1 year ago • 3 comments

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?

Does this PR introduce a breaking change?

  • [ ] Yes
  • [ ] No

Other information

Summary by CodeRabbit

  • New Features

    • Added support for React components through new dependencies and configuration updates.
    • Introduced new UI components such as AntdForm, AntdFormItem, and AntdSteps to enhance form handling capabilities.
    • Enhanced project flexibility by integrating dynamic template generation based on schemas.

  • Bug Fixes

    • Resolved issues with component importing and rendering logic to improve application stability.

  • Documentation

    • Updated README and project templates to reflect new setup instructions and project structure.

  • Chores

    • Streamlined dependency management and updated version specifications across various configuration files.

These changes aim to improve user experience and facilitate easier development with React components in the project.

wjywy avatar Aug 17 '24 10:08 wjywy

[!IMPORTANT]

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

43 files out of 130 files are above the max files limit of 75. Please upgrade to Pro plan to get higher limits.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The pull request introduces significant updates to the @opentiny/tiny-engine-dsl-react package, enhancing its structure and functionality. Key changes include the addition of a module field in package.json, new dependencies for React and TypeScript, and a complete overhaul of the DEFAULT_COMPONENTS_MAP to align with Ant Design components. Furthermore, a new CodeGenerator class is implemented for schema-based code generation, and multiple utility and plugin files are added to facilitate various functionalities, including internationalization, data source management, and code formatting.

Changes

File Path Change Summary
packages/react-generator/package.json Added "module": "dist/tiny-engine-dsl-react.es.js", added react-router-dom and @types/node dependencies, and reformatted eslint-plugin-vue.
packages/react-generator/src/constant/index.js Updated DEFAULT_COMPONENTS_MAP to replace Vue components with Ant Design components, added new component mappings, and updated comments.
packages/react-generator/src/generator/codeGenerator.js Implemented CodeGenerator class with methods for schema processing, error handling, and file operations.
packages/react-generator/src/generator/generateApp.js Introduced generateApp function for application generation with plugins.
packages/react-generator/src/generator/index.js Added exports for generateApp and CodeGenerator.
packages/react-generator/src/generator/parseImport.js Added functions for parsing imports and generating import statements.
packages/react-generator/src/index.js Updated exports to include generateApp and CodeGenerator.
packages/react-generator/src/parser/state.js Added translateHookState function for state management.
packages/react-generator/src/plugins/formatCodePlugin.js Introduced formatCode function for code formatting using Prettier.
packages/react-generator/src/plugins/genBlockPlugin.js Added genBlockPlugin function for block schema transformation.
packages/react-generator/src/plugins/genDataSourcePlugin.js Added genDataSourcePlugin function for transforming schema into data source format.
packages/react-generator/src/plugins/genDependenciesPlugin.js Added genDependenciesPlugin function for managing dependencies in package.json.
packages/react-generator/src/plugins/genGlobalState.js Added genGlobalState function for generating global state management code.
packages/react-generator/src/plugins/genI18nPlugin.js Added genI18nPlugin function for internationalization code generation.
packages/react-generator/src/plugins/genPagePlugin.js Added genPagePlugin function for generating page code from schema.
packages/react-generator/src/plugins/genRouterPlugin.js Added genRouterPlugin function for router configuration generation.
packages/react-generator/src/plugins/genTemplatePlugin.js Added genTemplatePlugin function for template generation.
packages/react-generator/src/plugins/genUtilsPlugin.js Added genUtilsPlugin function for utility schema transformation.
packages/react-generator/src/plugins/index.js Re-exported all plugin functions for easier access.
packages/react-generator/src/templates/react-templates/index.js Introduced template generation functionality based on schema.
packages/react-generator/src/templates/react-templates/template-files/* Added various template files for project setup, including index.html, packageJson.js, and App.jsx.
packages/react-generator/src/utils/* Added utility functions for import statement generation and JSX detection.
packages/react-generator/vite.config.js Updated Vite configuration to include new plugins and settings.
packages/toolbars/generate-react/src/Main.vue Transitioned from Vue to React code generation logic.
packages/toolbars/generate-vue/src/Main.vue Updated imports and state management for Vue code generation.
packages/vue-generator/src/generator/vue/sfc/* Updated import paths and structures for Vue component generation.
packages/vue-generator/src/plugins/* Adjusted import paths for various Vue plugins.
mockServer/src/mock/get/app-center/v1/apps/schema/918.json Updated JSON schema formatting for readability.
mockServer/src/services/appinfo.json Restructured JSON formatting for clarity and added a new state entry.

Possibly related PRs

  • #558: Introduces a vite-config package, related to configuration and dependency management.
  • #832: Optimizes schema generation, related to enhancements in the generateApp function.
  • #837: Changes the namespace to export a module, aligning with updates in module exports.
  • #862: Addresses a preview error, indirectly related to enhancements in React component functionality.

Suggested labels

ready_for_review

Suggested reviewers

  • hexqi
  • yy-wow
  • lizhijie429

Poem

🐇 In the garden where changes bloom,
React takes flight, dispelling gloom.
Code flows like rivers, swift and bright,
With plugins and templates, all feels right.
So hop along, let’s celebrate,
The magic of code, it’s never too late! 🌼

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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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.

coderabbitai[bot] avatar Aug 17 '24 10:08 coderabbitai[bot]

代码有冲突，请先拉取远程目标分支代码，解决冲突

hexqi avatar Aug 18 '24 04:08 hexqi

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

There is a conflict in the code. Please pull the remote target branch code first to resolve the conflict.

Issues-translate-bot avatar Aug 18 '24 04:08 Issues-translate-bot

出码：QQ20241031-95421 (1).zip

wjywy avatar Oct 31 '24 02:10 wjywy

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

出码：QQ20241031-95421 (1).zip

Issues-translate-bot avatar Oct 31 '24 02:10 Issues-translate-bot

预览： QQ20241031-101948.zip

wjywy avatar Oct 31 '24 02:10 wjywy

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

预览： QQ20241031-101948.zip

Issues-translate-bot avatar Oct 31 '24 02:10 Issues-translate-bot

预览：

https://github.com/user-attachments/assets/7dd6867f-1ebc-41f0-a76f-8f490c334e4f

wjywy avatar Oct 31 '24 02:10 wjywy

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

Preview:

https://github.com/user-attachments/assets/7dd6867f-1ebc-41f0-a76f-8f490c334e4f

Issues-translate-bot avatar Oct 31 '24 02:10 Issues-translate-bot

预览与出码视频：https://www.yuque.com/u29297079/sfghcg/qgtpld1m5go5g9dg?singleDoc# 《React DSL出码与预览功能实现》

wjywy avatar Oct 31 '24 02:10 wjywy

image 我启动看到画布有些组件无法显示出来了，你本地会有这个问题吗，如图，画布只显示出来了4个组件

hexqi avatar Oct 31 '24 05:10 hexqi

有，合并了主代码后出现的，还未排查什么原因，应该不涉及到React 出码这一块？

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2024年10月31日(星期四) 中午1:31 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [opentiny/tiny-engine] Ospp 2024/003 react dsl (PR #743)

image.png (view on web) 我启动看到画布有些组件无法显示出来了，你本地会有这个问题吗，如图，画布只显示出来了3个组件

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

wjywy avatar Oct 31 '24 05:10 wjywy