Modernize and simplify our packages building tools, replace Rollup by tsup #2944

Kocal · 2025-07-26T22:14:27Z

Q	A
Bug fix?	no
New feature?	yes
Docs?	yes
Issues	Fix #...
License	MIT

Following #2935. Same goals, but less frictions than with tsdown, tsup:

target is correctly read from our tsconfig.packages.json
no //#region comments
less polyfills than oxc
the target stays es2021 without any issues with static and Stimulus

Two things:

About the react-dom/client import, yes it will impact AssetMapper users that don't use Flex, but it will positively impact other users (AssetMapper with Flex, Webpack Encore...) by removing useless code and making the file smaller
About the tons of .d.ts files removed, that's still fine, there is no point to generate dist/<file>.d.ts files when dist/<file>.js do not exist, they are not part of the public API.

The code review must be easier, since less code has been touched than with tsdown.

Demo

When building LiveComponent assets:

➜  assets git:(tsup) pnpm build

> @symfony/[email protected] build /Users/kocal/workspace-os/symfony-ux/src/LiveComponent/assets
> tsx ../../../bin/build_package.ts .

CLI Building entry: src/live.css, src/live_controller.ts
CLI Using tsconfig: ../../../tsconfig.packages.json
CLI tsup v8.5.0
CLI Target: es2021
CLI Cleaning output folder
ESM Build start
[Symfony UX] Minified CSS file: /Users/kocal/workspace-os/symfony-ux/src/LiveComponent/assets/dist/live.css
[Symfony UX] Renamed dist/live.css to dist/live.min.css
ESM dist/live_controller.js 12.25 KB
ESM dist/live.css           74.00 B
ESM ⚡️ Build success in 26ms
DTS Build start
DTS ⚡️ Build success in 1276ms
DTS dist/live_controller.d.ts 7.96 KB

When watching LiveComponent assets, the CSS is easily watched too!

Enregistrement.de.l.ecran.2025-07-27.a.00.37.45.mov

github-actions · 2025-07-26T22:14:52Z

📊 Packages dist files size difference

ℹ️ No difference in dist packagesFiles.

Kocal · 2025-07-26T22:57:40Z

tsconfig.json

+        "types": ["node", "@testing-library/jest-dom"],
+        "lib": ["es2022", "dom"]


Not really related to this PR, but it helped to get correct types and syntax highlighting when working on bin/build_package.ts file

Kocal · 2025-07-26T23:00:02Z

src/Translator/assets/src/translator_controller.ts

@@ -7,4 +7,168 @@
 * file that was distributed with this source code.
 */

-export * from './translator';


Conflicted with options.bundle from ESBuild, but in reality it didn't bring any value to externalize the translator logic if the final goal is to export everything in the controller. Just define everything in the controller, that's simpler.

Kocal · 2025-07-26T23:02:10Z

src/StimulusBundle/assets/dist/loader.js

+import {
+  eagerControllers,
+  isApplicationDebug,
+  lazyControllers
+} from "./controllers.js";


Thanks to options.bundle = false from ESBuild and external from tsup, the file controllers.js is not inlined, no BC here.

Kocal · 2025-07-26T23:04:26Z

src/React/assets/dist/render_controller.js

-function requireClient () {
-	if (hasRequiredClient) return client;
-	hasRequiredClient = 1;
-
-	var m = require$$0;
-	if (process.env.NODE_ENV === 'production') {
-	  client.createRoot = m.createRoot;
-	  client.hydrateRoot = m.hydrateRoot;
-	} else {
-	  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-	  client.createRoot = function(c, o) {
-	    i.usingClientEntryPoint = true;
-	    try {
-	      return m.createRoot(c, o);
-	    } finally {
-	      i.usingClientEntryPoint = false;
-	    }
-	  };
-	  client.hydrateRoot = function(c, h, o) {
-	    i.usingClientEntryPoint = true;
-	    try {
-	      return m.hydrateRoot(c, h, o);
-	    } finally {
-	      i.usingClientEntryPoint = false;
-	    }
-	  };
-	}
-	return client;
-}


This is the code from react-dom about handling things differently between development and prod envs. It requires react-dom and not react-dom/client, as explained in previous PRs.

Only the production path is handled, less code, smaller file, ESBuild does not need anymore to import react-dom with the additional logic, but only react-dom/client

Kocal · 2025-07-26T23:06:36Z

Added some comments to help the review

smnandre · 2025-07-27T00:51:15Z

bin/build_package.ts

-    const distDir = path.join(packageRoot, 'dist');
+    const packageData = await readPackageJSON(path.join(packageRoot, 'package.json'));
+    const isStimulusBundle = '@symfony/stimulus-bundle' === packageData.name;
+    const isReactOrVueOrSvelte = ['@symfony/ux-react', '@symfony/ux-vue', '@symfony/ux-svelte'].some(name => packageData.name.startsWith(name));


Suggested change

const isReactOrVueOrSvelte = ['@symfony/ux-react', '@symfony/ux-vue', '@symfony/ux-svelte'].some(name => packageData.name.startsWith(name));

const isReactOrVueOrSvelte

hahaha i may have use a... another const name

Yeah I wasn't really inspired here... 😅

smnandre

The LiveComponent changes are a mess to review :)

… tsup

…ce Rollup by tsup (Kocal) This PR was squashed before being merged into the 2.x branch. Discussion ---------- Modernize and simplify our packages building tools, replace Rollup by tsup | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes  | Docs? | yes  | Issues | Fix #...  | License | MIT Following #2935. Same goals, but less frictions than with tsdown, [tsup](https://github.com/egoist/tsup): - `target` is correctly read from our `tsconfig.packages.json` - no `//#region` comments - less polyfills than oxc - the `target` **stays** `es2021` without any issues with `static` and Stimulus Two things: 1. About the `react-dom/client` import, yes it will impact AssetMapper users that don't use Flex, but it will positively impact other users (AssetMapper with Flex, Webpack Encore...) by removing useless code and making the file smaller 2. About the tons of `.d.ts` files removed, that's still fine, there is no point to generate `dist/<file>.d.ts` files when `dist/<file>.js` do not exist, they are not part of the public API. The code review must be easier, since less code has been touched than with tsdown. --- # Demo When building LiveComponent assets: ``` ➜ assets git:(tsup) pnpm build > `@symfony`/[email protected] build /Users/kocal/workspace-os/symfony-ux/src/LiveComponent/assets > tsx ../../../bin/build_package.ts . CLI Building entry: src/live.css, src/live_controller.ts CLI Using tsconfig: ../../../tsconfig.packages.json CLI tsup v8.5.0 CLI Target: es2021 CLI Cleaning output folder ESM Build start [Symfony UX] Minified CSS file: /Users/kocal/workspace-os/symfony-ux/src/LiveComponent/assets/dist/live.css [Symfony UX] Renamed dist/live.css to dist/live.min.css ESM dist/live_controller.js 12.25 KB ESM dist/live.css 74.00 B ESM ⚡️ Build success in 26ms DTS Build start DTS ⚡️ Build success in 1276ms DTS dist/live_controller.d.ts 7.96 KB ``` When watching LiveComponent assets, the CSS is easily watched too! https://github.com/user-attachments/assets/a246f278-8bf4-40f6-887e-685be7509af0 Commits ------- 78fa229 Rebuild packages with tsup 897aaa8 Modernize and simplify our packages building tools, replace Rollup by tsup

Kocal force-pushed the tsup branch from a2db8c8 to b9e958c Compare July 26, 2025 22:14

Kocal force-pushed the tsup branch 2 times, most recently from a935902 to 5e580c5 Compare July 26, 2025 22:53

Kocal commented Jul 26, 2025

View reviewed changes

Kocal added the DX label Jul 26, 2025

Kocal requested review from kbond and smnandre July 26, 2025 23:06

carsonbot added Status: Needs Review Needs to be reviewed labels Jul 26, 2025

Kocal marked this pull request as ready for review July 26, 2025 23:06

carsonbot added the Feature New Feature label Jul 26, 2025

smnandre reviewed Jul 27, 2025

View reviewed changes

smnandre approved these changes Jul 27, 2025

View reviewed changes

carsonbot added Status: Reviewed Has been reviewed by a maintainer and removed Status: Needs Review Needs to be reviewed labels Jul 27, 2025

Kocal force-pushed the tsup branch from 5e580c5 to 78fa229 Compare July 27, 2025 06:59

Modernize and simplify our packages building tools, replace Rollup by…

965fb95

… tsup

Kocal force-pushed the tsup branch from 78fa229 to 965fb95 Compare July 27, 2025 07:05

Kocal merged commit e1b43e7 into symfony:2.x Jul 27, 2025
1 check was pending

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Modernize and simplify our packages building tools, replace Rollup by tsup #2944

Modernize and simplify our packages building tools, replace Rollup by tsup #2944

Uh oh!

Kocal commented Jul 26, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 26, 2025 •

edited

Loading

Uh oh!

Kocal Jul 26, 2025

Uh oh!

Kocal Jul 26, 2025

Uh oh!

Kocal Jul 26, 2025

Uh oh!

smnandre Jul 27, 2025

Uh oh!

Kocal Jul 26, 2025 •

edited

Loading

Uh oh!

Kocal commented Jul 26, 2025

Uh oh!

smnandre Jul 27, 2025

Uh oh!

Kocal Jul 27, 2025

Uh oh!

smnandre left a comment

Uh oh!

Uh oh!

Uh oh!

		"types": ["node", "@testing-library/jest-dom"],
		"lib": ["es2022", "dom"]

	const isReactOrVueOrSvelte = ['@symfony/ux-react', '@symfony/ux-vue', '@symfony/ux-svelte'].some(name => packageData.name.startsWith(name));
	const isReactOrVueOrSvelte

Uh oh!

Modernize and simplify our packages building tools, replace Rollup by tsup #2944

Modernize and simplify our packages building tools, replace Rollup by tsup #2944

Uh oh!

Conversation

Kocal commented Jul 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo

Uh oh!

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

Uh oh!

📊 Packages dist files size difference

Uh oh!

Kocal Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 26, 2025

Choose a reason for hiding this comment

Uh oh!

smnandre Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kocal commented Jul 26, 2025

Uh oh!

smnandre Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 27, 2025

Choose a reason for hiding this comment

Uh oh!

smnandre left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Kocal commented Jul 26, 2025 •

edited

Loading

github-actions bot commented Jul 26, 2025 •

edited

Loading

Kocal Jul 26, 2025 •

edited

Loading