refactor: migrate classnames to clsx

[yoyo837]

Summary by CodeRabbit

发版说明

• Bug Fixes

  • 改进了 ResizeObserver 在不同运行环境下的兼容性与安全销毁，降低运行时错误风险

• Chores

  • 更新依赖：更换并统一了用于类名处理的工具库，移除不再需要的 polyfill

• Style / Tests

  • 统一并微调了测试与配置文件的代码风格与格式化细节

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

将依赖从 classnames 切换为轻量 clsx，移除 resize-observer-polyfill，并在多个组件中替换类名构建调用；在 src/inner-slider.js 中为 ResizeObserver 添加运行时存在性检查与安全断开逻辑；若干测试与配置文件仅做格式化调整。

Changes

内聚组 / 文件	变更摘要
依赖变更 package.json	移除 classnames、resize-observer-polyfill 并新增 clsx 依赖
箭头与点位组件（类名替换） src/arrows.js, src/dots.js	将 classnames(...) 替换为 clsx(...)，导入从 classnames -> clsx
轨道渲染（类名替换与事件格式微调） src/track.js	替换 classnames 为 clsx，在若处回调签名格式上做轻微格式化
核心滑块与 ResizeObserver 防护 src/inner-slider.js	用 clsx 替代 classnames；在实例化与使用 ResizeObserver 前做环境存在性检查；使用可选链断开观察器（observer?.disconnect()）以保证安全
测试与示例格式化 __tests__/regression/fix-1813.test.js, __tests__/regression/fix-2414.test.js, examples/__tests__/MultipleItems.test.js, examples/__tests__/SimpleSlider.test.js	仅格式化回调签名（如 function() -> function ()），无行为变化
构建/配置小修 gulpfile.js, jest.config.js	格式化字面量/回调签名调整，无功能变更

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 分钟

• 需重点审查：
  • src/inner-slider.js 中 ResizeObserver 的存在性检测与生命周期（创建/断开）路径。
  • 确认 clsx 在所有调用场景（数组、对象、字符串组合）上与之前 classnames 的行为等价。
  • 查验事件回调签名格式化是否影响 lint/格式化工具链或类型检查。

诗

🐰 依赖轻盈如春风，
clsx 轻踏旧径中；
观察器前加把护，
格式微调心自松。 ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题准确反映了主要改动：将classnames库迁移到clsx库，这是贯穿整个变更集的核心内容。

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch drop-classnames

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @yoyo837, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the project's dependency management and improves the robustness of its component rendering logic. The primary goal is to optimize bundle size and enhance performance by switching to a more lightweight utility for handling CSS classes. Additionally, it modernizes the handling of ResizeObserver by removing an unnecessary polyfill and implementing conditional usage, ensuring better compatibility and stability across different environments.

Highlights

• Dependency Swap: Replaced the classnames library with clsx for more efficient CSS class string manipulation, which typically results in a smaller bundle size and faster execution.
• Polyfill Removal: The resize-observer-polyfill dependency has been removed, streamlining the project's dependencies.
• Conditional ResizeObserver: The usage of ResizeObserver is now conditional, checking for its existence before instantiation, and its disconnect method uses optional chaining for safer access.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	clsx@​2.1.1

View full report

[gemini-code-assist]

Code Review

This pull request successfully migrates from classnames to the more lightweight clsx library, which is a positive change. The implementation is correct and consistent across the codebase.

However, the PR also removes resize-observer-polyfill. This is a potentially breaking change for users on older browsers that do not have native ResizeObserver support. The code correctly handles the absence of the API to prevent errors, but the functionality will be missing. It is crucial to communicate this change clearly. I've left a specific comment regarding this. Please consider updating the PR title and description to reflect all significant changes.

[gemini-code-assist]

Removing resize-observer-polyfill is a significant change that could affect users on browsers without native ResizeObserver support. This should be clearly communicated as a potential breaking change. Please consider updating the pull request title and adding a description that explains the impact of this removal.

[socket-security]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

[codecov]

Codecov Report

❌ Patch coverage is 30.76923% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 44.82%. Comparing base (1cc7f3c) to head (812f32c).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/inner-slider.js	20.00%	7 Missing and 1 partial ⚠️
src/track.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #121      +/-   ##
==========================================
- Coverage   45.07%   44.82%   -0.25%     
==========================================
  Files           8        8              
  Lines         994      995       +1     
  Branches      320      321       +1     
==========================================
- Hits          448      446       -2     
- Misses        446      448       +2     
- Partials      100      101       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.