Migrated vite to rollup #3060

kashishbehl · 2025-12-29T12:35:16Z

Description

Migrated vite to rollup
Fixed fonts issues

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 · 2025-12-29T12:35:19Z

⚠️ No Changeset found

Latest commit: 7c1d2c6

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 · 2025-12-29T12:35:25Z

❌ PR title doesn't follow Conventional Commits specification.

Details:

No release type found in pull request title "Migrated vite to rollup". 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

kashishbehl · 2025-12-29T13:02:21Z

packages/blade-svelte/src/components/index.ts

@@ -0,0 +1,27 @@
+// Re-export Base components with their original names to ensure they're available


One drawback of this approach is for blade and consumer to be on same svelte version as far as I have observed.

Another approach could be to let consumer compile the svelte

module.exports = { module: { rules: [ { test: /\.svelte$/, // ⚠️ Must include node_modules/@razorpay include: [ path.resolve(__dirname, 'src'), /node_modules\/@razorpay/ // Add this! ], use: { loader: 'svelte-loader', options: { preprocess: sveltePreprocess() } } } ] } };

how is re-exports related to binding consumers with same svelte version?

My bad not a svelte version issue. The re-export was needed so that when svelte 5 compiles for eg Button component which needs basebutton it is able to find both. Without re-exporting it was compoiling button but only loading the import statement of Basebutton and not the actual component

Instead the problem I faced face while using button component I was facing a svelte runtime issue because of which I had to upgrade the svelte version on blade's end.

ohh. Is it common known issue? Like why does svelte not follow the import statements while compiling 🤔 ?

As far as I checked this started happening in svelte 5 where there are some issues in treeshaking. The above error was due to the version on which blade i running svelte. As soon as I upgraded it to match consumer it got fixed.

But yeah, the re-exports was still an issue so had to use re-exports to fix the reference errors

yes yes I meant is there any open issue in svelte repo for this usecase? like its common usecase for all consumers right?

.github/workflows/release.yml

packages/blade-core/src/styles/BaseText/baseText.ts

packages/blade-core/rollup.config.mjs

saurabhdaware · 2025-12-30T04:54:20Z

packages/blade-svelte/src/components/Button/BaseButton/BaseButton.svelte

+  // Workaround for Svelte tree-shaking: reference imported classes to prevent removal
+  const buttonContentClass = _buttonContentClass;
+  const buttonIconClass = _buttonIconClass;
+  const loadingSpinnerClass = _loadingSpinnerClass;
+  const loadingClass = _loadingClass;


why do we not want it to treeshake?

Basicall what is happening is while compiling i

import { ButtonContentClass } from '@rzorpay/blade-core.styles'

Svelte 5 compiler treat this as unused import since it;s reference is only made in the html template and not JS execution script.

import * as styles from '@razorpay/blade-core/styles'; we can do this as well but this would mean there is no treeshaking.

Ohh interesting. This seems like a common usecase though no? is there some open issue on svelte side to fix this?

Could nto find any open issue on svelte side but solved it with this approach #3062

saurabhdaware · 2025-12-30T04:56:02Z

packages/blade-svelte/src/components/index.ts

@@ -0,0 +1,27 @@
+// Re-export Base components with their original names to ensure they're available


how is re-exports related to binding consumers with same svelte version?

packages/blade-svelte/package.json

packages/blade-svelte/svelte.config.js

codesandbox-ci · 2025-12-30T12:17:31Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7c1d2c6:

Sandbox	Source
razorpay/blade: basic	Configuration

saurabhdaware

Looks good to me. Added one followup comment.

Can you somewhere maybe add a README on how to use this library? you can add a Installation section in Svelte storybook I guess the way we have in react storybook?

You can do it in separate PR if you want

saurabhdaware · 2026-01-02T09:19:50Z

packages/blade-svelte/src/components/index.ts

@@ -0,0 +1,27 @@
+// Re-export Base components with their original names to ensure they're available


yes yes I meant is there any open issue in svelte repo for this usecase? like its common usecase for all consumers right?

* Resolved all design review comments * Resolved all design review comments * Added Readme and installation docs * Updated docs

* Reverting blade-core from blade-react * Reverting blade-core from blade-react * Upgraded to node 20 * Upgraded to node 20 * Migrated vite to rollup (#3060) * Migrated vite to rollup * Updated publish workflow * PR comments resolved * PR comments resolved * Resolved all design review comments (#3062) * Resolved all design review comments * Resolved all design review comments * Added Readme and installation docs * Updated docs

* Added Link Component to Svelte | Cursor Rules for Effecient React to Svelte Migration * Added Link Component to Svelte | Cursor Rules for Effecient React to Svelte Migration * PR comments resolved * Added Base Text Component | Migrated styles to use css classes | updated link to use BaseText * Added Heading | Code | Text component | Refactored to use default css styling and create classes * CSS STyling migration | Migrated all css logic to blade-core * PR comments resolved * Added Button.Svelte * Added PostCSS support | Added Loader component for Button * Added amount component * Added storybook implementation * Added storybook implementation * Added storybook implementation * Added storybook implementation * Added storybook implementation * Added storybook implementation * Fixed build issues * Fixed build issues * Fixed build issues * Fixed build issues * Fixed storybook workflow * Storybook playground fixes * Storybook playground fixes * Fixed fonts * Pr comments resolved * Reverting blade-core from blade-react (#3059) * Reverting blade-core from blade-react * Reverting blade-core from blade-react * Upgraded to node 20 * Upgraded to node 20 * Migrated vite to rollup (#3060) * Migrated vite to rollup * Updated publish workflow * PR comments resolved * PR comments resolved * Resolved all design review comments (#3062) * Resolved all design review comments * Resolved all design review comments * Added Readme and installation docs * Updated docs

kashishbehl commented Dec 29, 2025

View reviewed changes

saurabhdaware reviewed Dec 30, 2025

View reviewed changes

kashishbehl force-pushed the fix/react-build-fixes branch from c6d6ecb to 322ee50 Compare December 31, 2025 11:06

kashishbehl added 4 commits December 31, 2025 16:36

Migrated vite to rollup

64ac73a

Updated publish workflow

b3eae78

PR comments resolved

3a6346c

PR comments resolved

da2dcdd

kashishbehl force-pushed the feat/svelte-rollup-bundle branch from 57f80ae to da2dcdd Compare December 31, 2025 11:06

saurabhdaware approved these changes Jan 2, 2026

View reviewed changes

saurabhdaware approved these changes Jan 5, 2026

View reviewed changes

Resolved all design review comments (#3062)

7c1d2c6

* Resolved all design review comments * Resolved all design review comments * Added Readme and installation docs * Updated docs

kashishbehl marked this pull request as ready for review January 5, 2026 06:56

kashishbehl merged commit 165bcb3 into fix/react-build-fixes Jan 5, 2026
6 of 12 checks passed

kashishbehl deleted the feat/svelte-rollup-bundle branch January 5, 2026 06:56

		@@ -0,0 +1,27 @@
		// Re-export Base components with their original names to ensure they're available

Migrated vite to rollup #3060

Migrated vite to rollup #3060

Uh oh!

Conversation

kashishbehl commented Dec 29, 2025

Description

Changes

Additional Information

Component Checklist

Uh oh!

changeset-bot bot commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Dec 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codesandbox-ci bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

saurabhdaware left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Dec 29, 2025 •

edited

Loading

github-actions bot commented Dec 29, 2025 •

edited

Loading

codesandbox-ci bot commented Dec 30, 2025 •

edited

Loading