LFX'25:Update the pipeline to achieve clean build without any errors #16574

Ajay-singh1 · 2025-06-12T05:22:10Z

Description

This PR replaces Babel with esbuild as the build tool for this repository. The main goals of this is to improve build performance, reduce configuration complexity, modernize the toolchain, and generate cleaner builds.

Overview

Babel has served as a popular JavaScript transpiler for years, but it comes with some downsides in the context of modern library development:

Performance bottlenecks: Babel is significantly slower, especially on large codebases or repeated builds
Maintenance concerns: Many Babel plugins and presets are either deprecated, minimally maintained, or lag behind the evolving JavaScript standard.
Unnecessary complexity: Babel's plugin-based architecture leads to verbose and often brittle configurations

esbuild, on the other hand, is designed for speed and simplicity, with modern JavaScript/TypeScript support and built-in minification and bundling.

Technical Changes

Removed

Babel related dependencies

@babel/core

@babel/preset-env

Anyother babel related dependency

Added

esbuildas a dev dependency

A new build script using esbuild, capable of:

Transpiling modern JavaScript (ES6+) to target environments
Minimification of Javascript files to achieve faster builds

Testing

The output structure and exports matches with previous Babel generated output
The site is build successfully without having any errors or warnings

Result

Simplified build setup with fewer and less boilerplate dependencies
More future-proof and modern toolchain

Reviewers

craigbox · 2025-06-12T08:43:16Z

Great initiative.
The new modules would need to be in the build container before the lint will pass.
I don't have enough context to say yes or no without doing a bunch more work.

Can you comment on (or show a diff of) the before/after of the generated JS?

You're asking for approval to merge something that transpiles/touches the site JavaScript; there's no point in showing a video which scrolls a bunch of random pages, we would need to see the before/after for things that are executed by these scripts.

(p.s. generating the site takes ~20 seconds on my laptop. Do I read right that yours takes 440 seconds - 20 times longer? We need to do something about that!)

AritraDey-Dev · 2025-06-12T08:46:43Z

I found that this PR is causing the headerAnimation script and the expandable list functionality to break. If you check the js folder, the headerAnimation.js file is likely missing from the build. Additionally, a few other files might also be missing from the js directory.
If you compare the builds generated using Babel and esbuild, you'll notice that the file structures differ significantly.

Ajay-singh1 · 2025-06-12T09:55:30Z

@craigbox The work is not completed yet I'll ping you when it does. @AritraDey-Dev Yeah I agree with you that the file structure is different but I have resolved this I will push the changes in the meantime.
Thanks

Ajay-singh1 · 2025-06-17T02:53:39Z

@craigbox This PR is up for review , after this PR is merged istio/tools PR .Hopefully the lint will pass here.

istio-testing · 2025-06-17T03:41:31Z

@Ajay-singh1: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
lint_istio.io	`99d3654`	link	true	`/test lint`

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

craigbox · 2025-06-17T09:12:24Z

istio/tools#3222 LGTM but I'm not in the reviewer set. Daniel is, so I think that will go through today his time.

craigbox · 2025-06-17T09:13:21Z

scripts/gen_site.sh

-  tmp/js/themes_init.js \
-  --out-file generated/js/themes_init.min.js
+#Entrypoint for esbuild to bundle and minify through an entrypoint.js file
+cat <<EOF > tmp/js/entrypoint.js


Why generate this every time and not check it in?

(This question doesn't presuppose I know the answer)

esbuild needs an entrypoint for bundling the files and it does when the files are ESModules and the typescript files which is used in this repo is not ESModules but are legacy old standard type global scripts.esbuild follows the import and build a dependency graph so this temporary file is needed for esbuild for bundling the files together and minify them.

You can check the tsconfig.json the target is set to es6.

When you compile a .ts file for ex:- tsc src/ts/faq.ts --target es6 It will throw an error because the files are not following the ES6 standard.

This file is just an entrypoint and nothing else for bundling and minification.

craigbox · 2025-06-17T09:14:26Z

scripts/gen_site.sh

+esbuild tmp/js/headerAnimation.js \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/headerAnimation.min.js


Is it still relevant that this be a separate file?
(Some digging may be required to find out what it does and why it was done this way)

Yeah it needs to be a seperate file otherwise it can break the site.I have to do a bunch more test.

craigbox · 2025-06-17T09:14:40Z

scripts/gen_site.sh

+esbuild tmp/js/themes_init.js \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/themes_init.min.js



same here, previously with Babel this was --minify but not --presets minify for some reason?
Does it still make sense to be its own thing?

You run babel presets-minify it will minify multiple files together in isolation and generate a single output file which doesn't raise global conflicts such as function , var scoping conflicts etc.esbuild does the same thing but is more advanced like it removes any unused code from the bundle through a process called as tree shaking and minifies aggressively.

craigbox · 2025-06-17T09:15:47Z

src/ts/overlays.ts

 declare class Popper {
    constructor(a: HTMLElement, b: HTMLElement, c: any);
    public destroy(): void;
 }
+declare var iconFile: string;
+// Path to the SVG icon sprite file


comments should be above the line?

craigbox · 2025-06-17T09:16:56Z

src/ts/callToAction.ts

@@ -11,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-


were changes such as this required to lint, or something?

Yes make lint-typescript was throwing errors.

craigbox · 2025-06-17T09:17:16Z

src/ts/codeBlocks.ts

+import { listen , copyToClipboard , getById} from "./utils";
+import { button , ariaLabel , mouseenter , mouseleave , click , active} from "./constants";
+import { readLocalStorage } from "./themes_init";


review top tip: I don't know anything about Typescript but it would be worth providing a little context as to why these need to be added

This has to be added to make them ESModules and follow ES6 standards otherwise the .ts files will be complied as global scripts and global scripts are now legacy code which doesn't follow ES6 standard.

Ajay-singh1 · 2025-06-17T10:30:22Z

@dhawton Can you kindly also review this PR and share your comments?It would be really helpful.

Ajay-singh1 requested a review from a team as a code owner June 12, 2025 05:22

istio-testing added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Jun 12, 2025

AritraDey-Dev mentioned this pull request Jun 12, 2025

fix npm warnings in site build #16573

Open

Ajay-singh1 added 4 commits June 16, 2025 10:20

Update typescript files to ES6 and update script

c661f8a

Update other files too

8752924

Update overlays.ts

687198d

fix: linting issues

468bb07

Ajay-singh1 force-pushed the clean-build branch from b124427 to 468bb07 Compare June 16, 2025 15:51

istio-testing added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Jun 16, 2025

Ajay-singh1 added 2 commits June 17, 2025 07:18

fix:typo

0e94e28

set the esbuild target to es6

b91bc29

Ajay-singh1 requested a review from AritraDey-Dev June 17, 2025 02:55

fix:typo

99d3654

craigbox reviewed Jun 17, 2025

View reviewed changes

LFX'25:Update the pipeline to achieve clean build without any errors #16574

Are you sure you want to change the base?

LFX'25:Update the pipeline to achieve clean build without any errors #16574

Conversation

Ajay-singh1 commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Overview

Technical Changes

Added

Testing

Result

Reviewers

Uh oh!

craigbox commented Jun 12, 2025

Uh oh!

AritraDey-Dev commented Jun 12, 2025

Uh oh!

Ajay-singh1 commented Jun 12, 2025

Uh oh!

Ajay-singh1 commented Jun 17, 2025

Uh oh!

istio-testing commented Jun 17, 2025

Uh oh!

craigbox commented Jun 17, 2025

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!

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!

Ajay-singh1 commented Jun 17, 2025

Uh oh!

Uh oh!

Ajay-singh1 commented Jun 12, 2025 •

edited

Loading