feat(turbopack): add loadScript method for script external

[fireairforce]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @fireairforce, 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 enhances Turbopack's capability to manage external dependencies by introducing a dedicated mechanism for loading scripts from external URLs. This feature is essential for integrating third-party libraries or components hosted on CDNs, ensuring that the runtime can dynamically fetch and execute these scripts while providing improved reliability and error reporting for such operations.

Highlights

• External Script Loading: Introduced a new loadScript method in the browser runtime, enabling Turbopack to load external scripts dynamically using <script> tags. This is crucial for handling script externals from CDNs or other remote sources.
• Caching Mechanism: The loadScript method includes a caching mechanism to prevent redundant loading of the same script, returning a cached promise if a script is already loading or has been loaded.
• Robust External Module Handling: The Rust-based external module generation logic was updated to use the new loadScript method. It now includes checks for global variables both before and after script loading, providing more robust error handling for missing variables.
• Runtime Type and Constant Updates: Added the LoadScript type definition and mapped it to the S property in TurbopackBaseContext. A new TURBOPACK_LOAD_SCRIPT constant was also defined and registered in the runtime functions.

Changelog

• turbopack/crates/turbopack-ecmascript-runtime/js/src/browser/runtime/base/runtime-base.ts
  • Added loadScript function to dynamically load external scripts via <script> tags.
  • Implemented caching for loadScript to avoid duplicate script loading.
  • Mapped the new loadScript function to browserContextPrototype.S.
• turbopack/crates/turbopack-ecmascript-runtime/js/src/shared/runtime-types.d.ts
  • Defined LoadScript type for the new script loading function.
  • Added S: LoadScript to the TurbopackBaseContext interface.
• turbopack/crates/turbopack-ecmascript/src/references/external_module.rs
  • Updated the runtime_functions import to use TURBOPACK_LOAD_SCRIPT instead of TURBOPACK_LOAD_BY_URL.
  • Refactored external module loading logic to check for global variables before and after script loading.
  • Improved error handling for external script loading failures, providing more specific error messages.
• turbopack/crates/turbopack-ecmascript/src/runtime_functions.rs
  • Defined TURBOPACK_LOAD_SCRIPT as a new runtime function shortcut.
  • Increased the size of TURBOPACK_RUNTIME_FUNCTION_SHORTCUTS array to accommodate the new entry.
  • Added __turbopack_load_script__ to the list of runtime function shortcuts.

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 new loadScript method to handle external scripts, which is a great addition. The implementation includes a new runtime function in TypeScript for loading scripts in the browser and updates the Rust code to generate more robust JavaScript for handling these externals. The new logic correctly uses globalThis and provides better error handling.

I've left one suggestion to improve the error handling in the loadScript function to allow for retries on failure and to clean up the DOM.

[gemini-code-assist]

When a script fails to load, the rejected promise is cached. This prevents any subsequent attempts to load the script from retrying, as they will immediately receive the cached rejected promise. It's better to remove the failed script's promise from the cache to allow for retries (e.g., in case of a transient network error).

Additionally, the failed <script> tag remains in the document's <head>, which is unnecessary. It should be removed on error.

    script.onerror = () => {
      loadedScripts.delete(scriptUrl)
      script.remove()
      reject(new Error(`Failed to load script: ${scriptUrl}`))
    }