feat(wasm): run webpack loaders with systemjs

[xusd320]

Now webpack-loaders can be run in browser, succeed example of less-loader in utooweb-demo

next.js PR utooland/next.js#75

[gemini-code-assist]

Summary of Changes

Hello @xusd320, 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 advances the browser-side build capabilities by integrating webpack loaders directly into a WebAssembly environment. It establishes a new worker-based architecture for running these loaders, leveraging SystemJS for module resolution and dynamically handling Node.js polyfills. The changes are demonstrated through an updated example application and supported by a new CLI tool for bundling worker scripts, ultimately enabling more sophisticated client-side compilation processes.

Highlights

• WASM Loader Execution in Browser: Webpack loaders can now be executed directly within the browser's WebAssembly (WASM) environment, utilizing SystemJS for module loading. This enables complex loader logic, such as less-loader, to run client-side.
• Conditional Compilation for WASM Targets: Source map generation and PostCSS transformations are now conditionally disabled when targeting WASM, optimizing performance and reducing bundle size for browser-based WASM applications.
• Refactored Node.js Polyfill Handling: The mechanism for providing Node.js polyfills has been refactored to be dynamically configurable, improving flexibility and ensuring compatibility in diverse environments.
• Enhanced Demo Application: The utooweb-demo example has been updated to demonstrate the new less-loader functionality, including the addition of a .less file and corresponding changes in App.tsx and webpack.config.js.
• New CLI for UMD Bundling: A new command-line interface tool (cli/umd.js) has been introduced to facilitate the building of UMD bundles from TypeScript entry points, with options to stringify the output as ESM or CJS modules for worker scripts.
• Internal Project Logic Centralization: The core project logic for WASM applications and loader worker pool management has been centralized into a new internalProject.ts file, improving code organization and maintainability.

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 introduces a significant feature: the ability to run webpack loaders in a browser/WASM environment using SystemJS. The changes are well-structured, involving conditional compilation for the WASM target, refactoring of import maps for Node.js polyfills, and the addition of a new worker and build scripts. My review focuses on the new worker implementation, where I've identified a debugger statement and opportunities to improve the polyfilling of Buffer and fs.readFile.