Skip to content

Added Link Component to Svelte | Cursor Rules for Effecient React to Svelte Migration #3020

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.

Sign up for GitHub

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

Jump to bottom
Draft
wants to merge 3 commits into
base: feat/svelte-impl
Choose a base branch
from
Draft

Added Link Component to Svelte | Cursor Rules for Effecient React to Svelte Migration #3020

wants to merge 3 commits into from
+1,333 −3

Conversation

@kashishbehl
Copy link

@kashishbehl kashishbehl commented Nov 18, 2025 •
edited
Loading

Description

Added Initial Changes for Blade Svelte Migration

  1. Cursor Rules for migrating to Svelte
  2. Migrated Link Component to blade-svelte
  3. Added common utils to blade-core
Link type Screenshot
Anchor link image
Button Link image
Link with colors image

Changes

Additional Information

Component Checklist

  • Update Component Status Page
  • Perform Manual Testing in Other Browsers
  • Add KitchenSink Story
  • Add Interaction Tests (if applicable)
  • Add changeset

@changeset-bot
Copy link

changeset-bot bot commented Nov 18, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 2fe5aa2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2025 •
edited
Loading

❌ PR title doesn't follow Conventional Commits specification.

Details:

No release type found in pull request title "Added Link Component to Svelte | Cursor Rules for Effecient React to Svelte Migration". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

saurabhdaware
saurabhdaware reviewed Nov 20, 2025
View reviewed changes
packages/blade-core/src/utils/makeAccessible/accessibilityMap.ts
Copy link
Member

@saurabhdaware saurabhdaware Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

packages/blade-svelte/src/components/Link/BaseLink/baseLink.css
@@ -0,0 +1,43 @@
.base-link {
Copy link
Member

@saurabhdaware saurabhdaware Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is font-family not defined in our react BaseLink? can you check how fonts are working in react and if we can get that implemented in svelte as well?

Copy link
Member

@saurabhdaware saurabhdaware Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can do it in separate PR

Copy link
Author

@kashishbehl kashishbehl Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally fonts come via Typography components. I will replace those as well once I start working on Typegraphy

packages/blade-svelte/src/components/Link/Link.css Outdated
Copy link
Member

@saurabhdaware saurabhdaware Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need to define this file right?

also maybe having directory structure defined in cursor rule would avoid the naming inconsistencies Link.css vs baseLink.css

packages/blade-svelte/package.json
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
},
"dependencies": {
"@razorpay/blade-core": "0.0.1"
Copy link
Member

@saurabhdaware saurabhdaware Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

anuraghazra
anuraghazra reviewed Nov 21, 2025
View reviewed changes
packages/blade-svelte/src/components/Link/BaseLink/BaseLink.svelte
// TODO: Replace with actual Icon component when available
type IconComponent = any;
interface BaseLinkProps {
Copy link
Member

@anuraghazra anuraghazra Nov 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: Once we have few more components, figure out if we want to move types to a common place. Types can act as contracts to help avoid API drift and React vs Svelte. // @saurabhdaware

anuraghazra
anuraghazra reviewed Nov 21, 2025
View reviewed changes
packages/blade-svelte/src/components/Link/BaseLink/BaseLink.svelte
if (color && color !== 'primary') {
if (color !== 'white') {
return `var(--interactive-${element}-${color}-${stateKey})`;
Copy link
Member

@anuraghazra anuraghazra Nov 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can create a svelte equivalent of getIn function to make variable interpolation typesafe.

Instead of returning the value, it can construct the var string internally.

anuraghazra
anuraghazra reviewed Nov 21, 2025
View reviewed changes
packages/blade-svelte/src/components/Link/BaseLink/BaseLink.svelte
},
});
// Accessibility attributes
Copy link
Member

@anuraghazra anuraghazra Nov 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redundant comments

Suggested change
// Accessibility attributes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@saurabhdaware saurabhdaware saurabhdaware left review comments

@anuraghazra anuraghazra anuraghazra left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@kashishbehl @saurabhdaware @anuraghazra