Skip to content

feat: Implement scrollTo method for x-swiper component #1197

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Jul 1, 2025

This PR implements a new scrollTo method for the x-swiper component that replaces the existing scrollToNext and scrollToPrevious methods, providing a more flexible and standardized scrolling API.

Changes Made

Removed Methods

  • scrollToNext() - Previously allowed scrolling to the next swiper item
  • scrollToPrevious() - Previously allowed scrolling to the previous swiper item

Added Method

  • scrollTo() - New method with multiple overloads supporting both standard HTML usage and custom x-swiper functionality

API Usage

The new scrollTo method supports both standard HTML scrollTo usage and a new custom usage:

// New custom usage with index-based scrolling
swiper.scrollTo({
  index: 2,        // target index
  smooth: true     // optional, defaults to true
});

// Standard HTML usage (unchanged compatibility)
swiper.scrollTo({ top: 100, left: 0, behavior: 'smooth' });
swiper.scrollTo(0, 100);

Implementation Details

  • Type Safety: Multiple TypeScript overloads ensure proper type checking
  • Backward Compatibility: Standard HTML scrollTo usage continues to work unchanged
  • Reuses Existing Logic: Leverages the existing #scrollToIndex private method for consistency
  • Default Behavior: The smooth parameter defaults to true for the custom usage
  • Minimal Changes: Surgical modification with no impact on existing functionality

Test Coverage

Added comprehensive test file x-swiper-scroll-to.html with interactive buttons to validate:

  • Index-based scrolling with instant behavior
  • Index-based scrolling with smooth animations
  • Proper integration with existing swiper functionality

The implementation follows the same pattern as the existing ScrollView component's scrollTo method, ensuring consistency across the codebase.

Fixes #1196.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copy link

changeset-bot bot commented Jul 1, 2025

🦋 Changeset detected

Latest commit: b69d2b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@lynx-js/web-elements Patch
@lynx-js/web-elements-template Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@CLAassistant
Copy link

CLAassistant commented Jul 1, 2025

CLA assistant check
All committers have signed the CLA.

@Copilot Copilot AI changed the title [WIP] [Feature]: support scrollTo for x-swiper [Feature] Implement scrollTo method for x-swiper component Jul 1, 2025
@Copilot Copilot AI requested a review from PupilTong July 1, 2025 10:24
Copilot finished work on behalf of PupilTong July 1, 2025 10:24
@PupilTong PupilTong marked this pull request as ready for review July 3, 2025 10:38
Copy link

codecov bot commented Jul 3, 2025

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
2893 1 2892 56
View the top 2 failed test(s) by shortest run time
react.spec.ts::reactlynx3 tests › configs › config-mode-dev-with-all-in-one
Stack Traces | 8.88s run time
react.spec.ts:1375:5 config-mode-dev-with-all-in-one
react.spec.ts::reactlynx3 tests › basic › basic-mts-run-on-main-thread
Stack Traces | 150s run time
react.spec.ts:404:5 basic-mts-run-on-main-thread

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

Copy link

codspeed-hq bot commented Jul 3, 2025

CodSpeed Performance Report

Merging #1197 will not alter performance

Comparing copilot/fix-1196 (b69d2b0) with main (360050f)

Summary

✅ 10 untouched benchmarks

@PupilTong PupilTong changed the title [Feature] Implement scrollTo method for x-swiper component feat: Implement scrollTo method for x-swiper component Jul 3, 2025
Copy link

relativeci bot commented Jul 3, 2025

Web Explorer

#2553 Bundle Size — 259.26KiB (-0.1%).

b69d2b0(current) vs ae3a1a8 main#2540(baseline)

Bundle metrics  Change 5 changes Improvement 2 improvements
                 Current
#2553
     Baseline
#2540
Improvement  Initial JS 140.69KiB(-0.18%) 140.94KiB
No change  Initial CSS 31.82KiB 31.82KiB
Change  Cache Invalidation 65.07% 0%
No change  Chunks 4 4
No change  Assets 4 4
Change  Modules 206(-1.9%) 210
Improvement  Duplicate Modules 16(-5.88%) 17
Change  Duplicate Code 3.61%(-13.01%) 4.15%
No change  Packages 4 4
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Improvement 1 improvement
                 Current
#2553
     Baseline
#2540
Improvement  JS 227.44KiB (-0.11%) 227.7KiB
No change  CSS 31.82KiB 31.82KiB

Bundle analysis reportBranch copilot/fix-1196Project dashboard


Generated by RelativeCIDocumentationReport issue

Copy link

relativeci bot commented Jul 3, 2025

React Example

#2562 Bundle Size — 234.7KiB (0%).

b69d2b0(current) vs ae3a1a8 main#2549(baseline)

Bundle metrics  no changes
                 Current
#2562
     Baseline
#2549
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
No change  Cache Invalidation 0% 0%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 153 153
No change  Duplicate Modules 61 61
No change  Duplicate Code 45.85% 45.85%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#2562
     Baseline
#2549
No change  IMG 145.76KiB 145.76KiB
No change  Other 88.94KiB 88.94KiB

Bundle analysis reportBranch copilot/fix-1196Project dashboard


Generated by RelativeCIDocumentationReport issue

@PupilTong PupilTong enabled auto-merge July 3, 2025 11:29
@PupilTong PupilTong requested a review from Sherry-hue July 3, 2025 11:50
@Sherry-hue Sherry-hue self-requested a review July 5, 2025 01:19
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.

[Feature]: support scrollTo for x-swiper
4 participants