fix(vue-directive): unify the functions in vue-hooks into double-layer functions and optimize the infinite-scroll function #2864
Conversation
…r functions and optimize the infinite-scroll function
WalkthroughThis pull request refactors several packages by removing the dependency on @opentiny/vue-directive and updating related imports. In the renderless package, the getScrollContainer function is now imported from @opentiny/utils. The vue-directive package has its exports adjusted to remove getScrollContainer and include InfiniteScroll as the default export, along with the removal of redundant utility functions. In vue-hooks, the dependency on @opentiny/vue-common is removed and the useFloating and useLazyShow functions are updated to accept destructured parameters. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis PR refactors the vue-hooks to use double-layer functions and optimizes the infinite-scroll directive by replacing the internal Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -1,4 +1,5 @@ | |||
| import { throttle } from '@opentiny/utils' | |||
| import { getScrollContainer } from '@opentiny/utils' | |||
There was a problem hiding this comment.
Ensure that the getScrollContainer function from @opentiny/utils provides the same functionality as the previous implementation to avoid any potential issues.
|
[e2e-test-warn] 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/vue-hooks/src/use-lazy-show.ts (1)
14-18: Consider adding type annotations for better maintainability.While the code functions correctly, adding TypeScript type annotations for the destructured parameters would improve code maintainability and IDE support.
- ({ ref, watch, isRef }) => + ({ ref, watch, isRef }: { ref: Function; watch: Function; isRef: Function }) =>packages/vue-directive/src/infinite-scroll.ts (1)
165-172: Consider adding JSDoc for the exported directive.Adding JSDoc documentation for the exported directive would improve code documentation and maintainability.
+/** + * Infinite scroll directive + * @example + * <div v-infinite-scroll="loadMore">...</div> + */ export default { bind, update,packages/vue-hooks/src/use-floating.ts (2)
329-342: Consider adding return type annotation for virtualEl function.Adding a return type annotation would improve type safety and documentation.
-const virtualEl = (x: number, y: number, w = 0, h = 0) => ({ +const virtualEl = (x: number, y: number, w = 0, h = 0): ReferenceElement => ({
348-360: Consider extracting state initialization into a separate function.The state initialization logic could be extracted into a separate function for better readability and maintainability.
+const initializeState = (state: IFloatOption, markRaw: Function) => { + Object.keys(defaultOption).forEach((key) => { + if (!Object.prototype.hasOwnProperty.call(state, key)) { + state[key] = defaultOption[key] + } + }) + state._last = markRaw({}) as any + state._events = markRaw({ show: [], hide: [], update: [] }) +} + const state = reactive(option) as IFloatOption -Object.keys(defaultOption).forEach((key) => { - if (!Object.prototype.hasOwnProperty.call(state, key)) { - state[key] = defaultOption[key] - } -}) -state._last = markRaw({}) as any -state._events = markRaw({ show: [], hide: [], update: [] }) +initializeState(state, markRaw)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/renderless/package.json(0 hunks)packages/renderless/src/recycle-scroller/index.ts(1 hunks)packages/vue-directive/index.ts(1 hunks)packages/vue-directive/src/infinite-scroll.ts(2 hunks)packages/vue-hooks/package.json(1 hunks)packages/vue-hooks/src/use-floating.ts(2 hunks)packages/vue-hooks/src/use-lazy-show.ts(1 hunks)
💤 Files with no reviewable changes (1)
- packages/renderless/package.json
✅ Files skipped from review due to trivial changes (1)
- packages/renderless/src/recycle-scroller/index.ts
🔇 Additional comments (5)
packages/vue-hooks/src/use-lazy-show.ts (1)
11-13: LGTM! Clean dependency injection pattern.The refactoring to accept hooks as parameters improves testability and modularity by removing direct dependencies.
packages/vue-directive/index.ts (1)
16-20: LGTM! Clean export organization.The exports are now properly organized and the utility function has been moved to a more appropriate location.
packages/vue-directive/src/infinite-scroll.ts (1)
1-2: LGTM! Good use of shared utilities.Importing getScrollContainer from @opentiny/utils reduces code duplication and improves maintainability.
packages/vue-hooks/src/use-floating.ts (1)
345-347: LGTM! Clean dependency injection pattern.The refactoring to accept hooks as parameters improves testability and modularity by removing direct dependencies.
packages/vue-hooks/package.json (1)
16-19: Dependency Change: Verification of Updated DependenciesThe removal of "@opentiny/vue-common" and the inclusion of "@opentiny/utils" with workspace versioning are in line with the PR objectives. Please confirm that all modules previously relying on "@opentiny/vue-common" have been appropriately refactored to use the updated utility functions. It would also be beneficial to document this breaking dependency change in the release notes.
PR
统一vue-hooks为双层函数
优化无限滚动指令，内部的函数getScrollContainer使用utils函数代替
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
• Consolidated infinite scrolling is now available with an improved default integration for smoother list navigation.
Refactor
• Enhanced handling of scrollable containers along with updates to floating element and lazy-loading behaviors using modern reactive patterns for a more consistent and flexible user experience.