Migrate UI build from rollup to tsc #114
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Move tsconfig.exporter.json to src/exporter/tsconfig.json - Move tsconfig.ui.esm.json to src/ui/tsconfig.json - Remove rollup.config.ts (no longer needed) - Remove root tsconfig.json (rollup-specific config) This reorganizes the build configuration to use tsc directly instead of rollup, with configs living alongside their respective source code.
Add custom build scripts to handle UI module compilation: - generate-css-entry.js: Auto-generates CSS entry file with all imports - fix-ui-build-output.js: Fixes directory structure from tsc output - remove-css-imports.js: Removes CSS imports from compiled .js and .d.ts files - add-use-client.js: Adds 'use client' directive for Next.js App Router - postcss-remove-dark.js: PostCSS plugin to remove dark mode styles - README.md: Documentation for all build scripts These scripts replace rollup's bundling functionality and handle: - CSS bundling separately from JavaScript - TypeScript output cleanup - React Server Components compatibility
Dependencies: - Remove rollup and related plugins - Add postcss, postcss-cli, postcss-import, cssnano for CSS processing Build scripts: - Replace 'ui:rollup' with granular build steps: - ui:clean: Clean dist directory - ui:css:generate: Generate CSS entry file - ui:tsc: Compile TypeScript - ui:fix-output: Fix output directory structure - ui:remove-css-imports: Remove CSS imports from compiled files - ui:css:build: Bundle and minify CSS - ui:css:build:without-dark: Build CSS without dark mode - ui:use-client: Add 'use client' directives Package exports: - Switch to ESM-only (remove UMD and CJS) - Update type definitions path: types.d.ts -> index.d.ts - Update CSS paths to dist/ui/
- Move vite.config.ts to .storybook/ (only used by Storybook) - Update .storybook/main.ts to reference new config location - Update .gitignore to: - Exclude build scripts from JS ignore pattern - Remove css.d.ts (it's a source file, not build artifact)
Add css.d.ts to allow TypeScript to understand CSS module imports during development and compilation.
Add instructions for testing local Rotion changes using npm pack: - Build the package - Create tarball - Install in example - Run dev server This helps developers verify changes before publishing.
* main: fix: add VCR pattern to oEmbed API tests to prevent flaky failures
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Migrate the UI module build process from rollup bundler to TypeScript compiler (tsc), matching the approach used by the exporter module. This simplifies the build toolchain while maintaining full functionality.
Changes
Build System
Configuration
src/exporter/andsrc/ui/directoriesvite.config.tsto.storybook/(only used by Storybook).gitignoreto exclude build artifacts while allowing build scriptsBuild Scripts
Add custom scripts to handle build steps that rollup previously managed:
generate-css-entry.js: Auto-generate CSS entry file with all importsfix-ui-build-output.js: Fix TypeScript output directory structureremove-css-imports.js: Remove CSS imports from compiled.jsand.d.tsfilesadd-use-client.js: Add 'use client' directives for Next.js App Router compatibilitypostcss-remove-dark.js: PostCSS plugin to create light-mode-only CSS variantPackage Changes
Documentation
Testing
Verified with
examples/app-routerusingnpm pack:Benefits
Breaking Changes
None. The package API and exports remain unchanged.