Props hoc

[hashiqi12138]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] 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)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] 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:

What is the current behavior?

为 vue3及 vue2 增加 WithDesignConfigPropsDefineComponent 方法

组件中引入 defineComponent 的地方改为 WithDesignConfigPropsDefineComponent import { $props, $prefix, $setup, WithDesignConfigPropsDefineComponent as defineComponent } from '@opentiny/vue-common'

目前仅 Button 进行了调整，Vue2，Vue3中都达到了预期的效果，Button 组件Vue3版本单元测试也能正常通过

Issue Number: #2940

What is the new behavior?

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Summary by CodeRabbit

• New Features

  • Enhanced UI components now support global design configuration, offering improved customization and consistent styling—especially noticeable in button behaviors.
  • Introduced a new <config-provider> component for better button property configuration.
  • Added a new Higher-Order Component (HOC) for improved design configuration integration.

• Tests

  • Upgraded the unit testing experience with an interactive testing interface for more intuitive validation.

[coderabbitai[bot]]

Walkthrough

This pull request introduces design configuration enhancements across components. The button demo now wraps <tiny-button> components within a new <config-provider> and <tiny-row> and defines a design data property. The unit test command in package.json is updated to use vitest --ui, with an upgraded dependency. Additionally, new Higher-Order Components (HOC) and helper functions—DesignConfigPropsHOC and WithDesignConfigPropsDefineComponent—are added to both Vue 2 and Vue 3 adapter modules for integrating global design configurations. The button component import is updated to use the new HOC.

Changes

File(s)	Changes
examples/.../button/basic-usage.vue	Wrapped <tiny-button> components with <config-provider> inside <tiny-row>; added design data property (with resetTime: 0, size: 'mini').
examples/vue3/package.json	Updated test script from "vitest" to "vitest --ui" and upgraded @vitest/ui from ^0.31.0 to ^2.1.9.
packages/vue-common/src/adapter/vue{2,2.7,3}/* packages/vue-common/src/index.ts	Added new HOC DesignConfigPropsHOC and helper function WithDesignConfigPropsDefineComponent for injecting global design configurations; updated module exports accordingly.
packages/vue/src/button/src/index.ts	Replaced the direct import of defineComponent with WithDesignConfigPropsDefineComponent as defineComponent to incorporate design configuration.
internals/unplugin-hoc-plugin/...	Introduced new package @opentiny-internal/unplugin-hoc-plugin with various files for plugin functionality, including configuration, types, and integration with build tools.
package.json	Added script for building the @opentiny-internal/unplugin-hoc-plugin and a patched dependency for @opentiny/vue-vite-import.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant CP as ConfigProvider
    participant TR as TinyRow
    participant TB as TinyButton

    User->>CP: Initiate button interaction
    CP->>TR: Wraps TinyButton(s)
    TR->>TB: Supplies design settings (resetTime=0, size='mini')
    TB->>User: Renders configured button

sequenceDiagram
    participant BC as BaseComponent
    participant HOC as WithDesignConfigPropsDefineComponent
    participant GC as GlobalDesignConfig
    participant Render as EnhancedComponent

    BC->>HOC: Wrapped by HOC
    HOC->>GC: Inject global design config
    GC-->>HOC: Returns design properties
    HOC->>Render: Merge props and render component
    Render->>User: Display enhanced component

Suggested labels

enhancement

Suggested reviewers

• zzcr

Poem

I'm hopping through lines of code so bright,
With buttons wrapped in config light.
HOCs and functions join the parade,
In Vue's realm, fresh changes are made.
CodeRabbit hops with glee and cheer,
Celebrating each update far and near!
🐰✨

[!WARNING] There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

examples/sites/demos/pc/app/button/basic-usage.vue

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/vue3/vite.config.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

internals/unplugin-hoc-plugin/src/esbuild.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

• 13 others

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

🪧 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 generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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.

[petercat-assistant[bot]]

Walkthrough

This PR introduces a new feature by adding the WithDesignConfigPropsDefineComponent method for both Vue 2 and Vue 3. It replaces instances of defineComponent with WithDesignConfigPropsDefineComponent in components, specifically adjusting the Button component to achieve the desired effect in both Vue 2 and Vue 3 environments.

Changes

Files	Summary
examples/sites/demos/pc/app/button/basic-usage.vue	Wrapped tiny-button components with config-provider and added design configuration.
packages/vue-common/src/adapter/vue2.7/hoc.tsx packages/vue-common/src/adapter/vue2/hoc.tsx packages/vue-common/src/adapter/vue3/hoc.tsx	Added DesignConfigPropsHOC function to inject design configuration into components.
packages/vue-common/src/adapter/vue2.7/index.ts packages/vue-common/src/adapter/vue2/index.ts packages/vue-common/src/adapter/vue3/index.ts	Introduced WithDesignConfigPropsDefineComponent function to wrap components with design configuration.
packages/vue-common/src/index.ts	Exported WithDesignConfigPropsDefineComponent from adapter.
packages/vue/src/button/src/index.ts	Replaced defineComponent with WithDesignConfigPropsDefineComponent.

[github-actions[bot]]

[e2e-test-warn] The component to be tested is missing.

The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".

Please make sure you've read our contributing guide

[hashiqi12138]

我看了下 vue-common 中的逻辑，目前组件应该都是两层组件的，可以在 vue-common 中统一处理第一层接收进来的 props，

我目前的思路是： 1、先获取当前组件或者上级组件的 props 配置，通过配置得出各个 prop 对应的默认值，再结合传入的 prop 值以及 designConfig 中注入的值， 2、判断 当前 props 值是否是默认值，如果是默认值且与 designConfig 注入的值不同，则将当前 props 改为 designConfig 的值，并传入下一层组件， 3、如果当前 prop 值不是默认值，则表明用户传入了值，此时忽略 designConfig 的值，以用户传入值为准

需要兼容之前的业务，可以全局增加公共 prop tiny_props_hoc，如果第一层组件传入了改 props，才执行替换逻辑，否则走原本逻辑，对原有业务不影响

[Issues-translate-bot]

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

---

I looked at the logic in vue-common. Currently, the components should be of two-layer components. The props received in the first layer can be uniformly processed in vue-common.

My current thinking is:

1. First get the props configuration of the current component or the superior component, obtain the default values ​​corresponding to each prop through configuration, and then combine the passed prop value and the value injected in designConfig.
2. Determine whether the current props value is the default value. If it is the default value and is different from the value injected by designConfig, change the current props to the value of designConfig and pass it into the next layer of component.
3. If the current prop value is not the default value, it means that the user has passed in the value. At this time, the value of designConfig is ignored, and the value passed in by the user shall prevail.

It needs to be compatible with previous businesses, and you can add public prop tiny_props_hoc globally. If the first layer component passes in modified props, the replacement logic will be executed. Otherwise, the original logic will not affect the original business.

[kagol]

@hashiqi12138 麻烦解决下冲突~

[Issues-translate-bot]

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

---

@hashiqi12138 Please resolve the conflict~

[zzcr]

因为TinyVue的组件大部分已经是双层组件了，所以我给了个改动量比较小的方法：https://github.com/opentiny/tiny-vue/pull/3419

[kagol]

@hashiqi12138 非常感谢你在此特性上付出的努力，你提供的高阶组件思路也给了我们很多启发，目前该特性已经由 @zzcr 重新实现，并且在 v3.23.0 版本发布了，再次感谢你的付出！

[Issues-translate-bot]

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

---

@hashiqi12138 Thank you very much for your efforts in this feature. The advanced component ideas you provided also gave us a lot of inspiration. At present, this feature has been re-implemented by @zzcr and has been released in v3.23.0. Thank you again for your efforts!