Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Conversation

sub-ld
Copy link
Contributor

@sub-ld sub-ld commented Oct 13, 2025

🚀 Migration from Vite to rslib

This PR migrates the LaunchDarkly Toolbar from Vite to rslib for both library and CDN builds, providing better performance and more consistent bundling.

✅ What's Changed

Build System Migration

  • Replaced Vite with rslib for all bundling operations
  • Added rslib.config.ts for NPM library build (ESM/CJS formats)
  • Added rslib.config.cdn.ts for CDN IIFE build with global exposure
  • Updated package.json with rslib dependencies and new build scripts
  • Removed Vite dependencies and configurations

Storybook Integration

  • Integrated storybook-addon-rslib for unified configuration
  • Added storybook-react-rsbuild framework integration
  • Created .storybook/main.ts configuration

CSS & Shadow DOM Fixes

  • Fixed CSS injection for shadow DOM compatibility
  • Updated mount.tsx to filter and copy toolbar styles to shadow DOM
  • Implemented robust style filtering for LaunchPad UI tokens and Vanilla Extract classes

Build Outputs

  • Library build: ESM (dist/js/index.js) + CJS (dist/index.cjs) + TypeScript declarations
  • CDN build: Single IIFE bundle (cdn/toolbar.min.js) with global LaunchDarklyToolbar exposure
  • Source maps generated for both builds
  • Maintained backward compatibility for existing integrations

📊 Bundle Analysis

Build Type Format Size Gzip Output
Library ESM 17.8 kB 3.5 kB dist/js/index.js
Library CJS 19.9 kB - dist/index.cjs
CDN IIFE 1093.5 kB 288.9 kB cdn/toolbar.min.js

🔧 Technical Details

  • rslib provides better tree-shaking and more consistent builds
  • CSS injection now works properly with shadow DOM isolation
  • Source maps available for debugging in both development and production
  • Storybook integration maintains development workflow
  • TypeScript declarations generated automatically

🧪 Testing

  • ✅ Library build generates correct ESM/CJS outputs
  • ✅ CDN build creates single IIFE bundle with global exposure
  • ✅ CSS injection works in shadow DOM
  • ✅ Source maps generated correctly
  • ✅ Storybook integration functional
  • ✅ Backward compatibility maintained

📝 Migration Notes

  • No breaking changes for existing integrations
  • CDN usage remains the same: window.LaunchDarklyToolbar.init()
  • NPM usage unchanged: import { init } from '@launchdarkly/toolbar'
  • Build commands updated: pnpm build:lib and pnpm build:cdn

This migration provides a more robust and performant build system while maintaining full backward compatibility.

pranjal-jately-ld and others added 4 commits October 10, 2025 12:19
- Replace Vite with rslib for both library and CDN builds
- Add rslib.config.ts for NPM library build (ESM/CJS formats)
- Add rslib.config.cdn.ts for CDN IIFE build with global exposure
- Update package.json with rslib dependencies and new build scripts
- Remove Vite-related dependencies and configurations
- Implement Storybook integration with storybook-addon-rslib
- Fix CSS injection for shadow DOM compatibility with rslib's injectStyles
- Update mount.tsx to filter and copy toolbar styles to shadow DOM
- Generate source maps for both library and CDN builds
- Maintain backward compatibility for existing integrations
@sub-ld sub-ld changed the base branch from main to pjately/consolidate-packages-unified-build October 13, 2025 10:22
.join('\n');

if (toolbarStyles) {
style.textContent = toolbarStyles;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

VIte has special plugin which made the prev approach possible. RSLib doesn't have that so we're resorting to this verbose approach for now

…brary build

- Remove VanillaExtractPlugin from library config (only needed for CDN build)
- Library consumers handle their own CSS processing
- CDN build still includes VanillaExtractPlugin for style bundling
- Both builds maintain React plugin for JSX/TSX transformation
Copy link
Contributor

@cspath1 cspath1 left a comment

Choose a reason for hiding this comment

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

Phenomenal to have this migrated back to rslib!

Base automatically changed from pjately/consolidate-packages-unified-build to cspath/REL-9841-toolbar-revamp October 13, 2025 21:11
"sideEffects": false,
"files": [
"dist",
"cdn",
Copy link
Contributor

Choose a reason for hiding this comment

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

Was this intentional? @sub-ld The hook loads the toolbar from unpkg at /cdn/toolbar.min.js, which won't exist if cdn isn't published to npm.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah I didnt realize that is how we host the cdn. Thanks I'll change this

@sub-ld sub-ld merged commit 13d4906 into cspath/REL-9841-toolbar-revamp Oct 15, 2025
2 checks passed
@sub-ld sub-ld deleted the sub-ld-1760348496 branch October 15, 2025 01:21
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.

3 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.