feat(build): integrate esbuild for improved build performance and add CSS processing

[7HR4IZ3]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @7HR4IZ3, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the project's build infrastructure by transitioning from Webpack to esbuild. This change is primarily driven by the goal of achieving faster build times and improving the overall efficiency of the development process. The new setup also incorporates robust CSS preprocessing capabilities using SASS and PostCSS, ensuring modern styling practices are maintained.

Highlights

• Build System Migration: The project's build system has been migrated from Webpack to esbuild, aiming for significant improvements in build performance and a streamlined development experience.
• Enhanced CSS Processing: Integrated PostCSS and SASS processing directly into the new esbuild configuration, allowing for more efficient and modern CSS handling within the build pipeline.
• Dependency Updates: New development dependencies esbuild and postcss have been added, and several existing packages in package-lock.json were updated, including nanoid, postcss, and source-map-js.
• Build Script Refactoring: The build.sh and start.sh scripts have been updated to utilize the new esbuild configuration script, replacing the previous Webpack commands.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request replaces Webpack with esbuild for the build process, which should significantly improve build times. It also introduces CSS processing with Sass and PostCSS. The changes include a new esbuild script, updates to npm packages, and modifications to shell scripts to use the new build process. The code is well-structured, but I have a few suggestions to improve maintainability and the development experience, particularly around sourcemap generation and how Web Workers are handled.

[gemini-code-assist]

Using a hardcoded path to the built worker file makes the code more brittle. If the build output structure changes, this path will need to be updated. It's better to use the new URL('./worker.js', import.meta.url) syntax. esbuild supports this and will automatically bundle the worker and generate the correct path. This also allows you to remove the worker as a separate entry point in your esbuild.js configuration, simplifying it.

Suggested change

	return new Worker("./build/searchInFilesWorker.js");
	return new Worker(new URL("./worker.js", import.meta.url));

[UnschooledGamer]

Assigned myself to update F-droid Build commands If this gets Merged.

[bajrangCoder]

@7HR4IZ3 Thank you for your contribution!
I really appreciate the effort ✨

However, I personally don’t feel confident using esbuild for production. It’s great for development, but even Vite relies on esbuild only during dev and switches to rollup(now rolldown) for production builds. So depending solely on esbuild for production doesn’t seem like the best direction to me.
To move away from Webpack, I’d prefer considering Rspack or Vite as our next step.

[7HR4IZ3]

Oh, alright
Webpack was taking too long to build, hence why I created the esbuild version

I'll try modifying it for rspack/rollup (wasn't able to get bite working properly) and create another PR