docs: Add guide for CDN and dynamic JavaScript loading in WebAssembly apps

[Copilot]

PR Type:

📚 Documentation content changes

What is the current behavior? 🤔

No documentation exists explaining how to load JavaScript from CDN or dynamically at runtime in Uno Platform WebAssembly applications. The existing Part 1 walkthrough covers basic embedding with WasmScripts and wwwroot folders, but doesn't cover CDN loading or advanced dynamic loading scenarios.

What is the new behavior? 🚀

Added focused guide complementing the existing Part 1 walkthrough, covering advanced JavaScript loading methods:

New Documentation: wasm-referencing-js.md (215 lines)

• CDN Loading Methods

  • Three options: index.html, dynamic JS loader, AMD/RequireJS
  • Version pinning strategies
  • Fallback to local copies with onload/onerror handlers

• Dynamic Runtime Loading

  • Using WebAssemblyRuntime.InvokeJS for runtime script loading
  • Conditional loading example with proper using statements (load scripts only when needed)

• Best Practices

  • Version pinning to avoid breaking changes
  • Fallback strategies for CDN failures with proper onload handlers
  • Security considerations (SRI, CORS)

• Troubleshooting

  • Script loading issues
  • Load order problems
  • CORS issues with CDN

Navigation Updates:

• Added to toc.yml under "Embed a JavaScript Component" section
• Cross-referenced from existing wasm-javascript-1.md with NOTE box

Document explicitly references Part 1 for fundamentals to avoid duplication with existing walkthrough covering WasmScripts, WasmCSS, and basic wwwroot usage.

Example usage:

// CDN loading via AMD/RequireJS
var javascript = @"require(['https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'], 
    function(_) {
        console.log('Lodash loaded:', _.VERSION);
    }
);";
WebAssemblyRuntime.InvokeJS(javascript);

// Dynamic conditional loading with proper using statements
using Microsoft.UI.Xaml.Controls;
using Uno.Foundation;

public static void LoadScript(string url)
{
    var javascript = $@"
        (function() {{
            const script = document.createElement('script');
            script.src = '{url}';
            script.async = true;
            document.head.appendChild(script);
        }})();
    ";
    WebAssemblyRuntime.InvokeJS(javascript);
}

PR Checklist ✅

• 📝 Commits follow Conventional Commits specification
• 🧪 Runtime tests, UI tests, or manual test sample added (N/A - documentation only)
• 📚 Docs added/updated following documentation template
• 🖼️ Validated PR Screenshots Compare Test Run results (N/A - documentation only)
• ❗ Contains NO breaking changes

Other information ℹ️

Documentation simplified based on feedback to avoid duplicating content from the existing Part 1 walkthrough. The guide now focuses exclusively on CDN loading, dynamic loading, and best practices - serving as a complement to the existing documentation rather than a replacement.

Review feedback addressed:

• Removed complex JSImport examples that required additional setup
• Simplified to use only WebAssemblyRuntime.InvokeJS approach throughout
• Added proper using statements to all code examples for clarity
• Added onload handler to fallback strategy example to properly handle success cases
• Removed all duplication with existing Part 1 walkthrough

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[WASM] Explain how to reference arbitrary .js scripts</issue_title>
<issue_description>### What would you like clarification on? 🤔

Currently we don't have documentation on how to reference arbitrary .js libraries/scripts within WebAssembly apps

Concern 📚

None

Renderer 🎨

• Skia
• Native

Affected platforms 📱💻🖥️

No response

Any feedback? 💬

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [WASM] Explain how to reference arbitrary .js scripts #22268

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull request overview

This PR adds comprehensive documentation explaining how to reference and load JavaScript files in Uno Platform WebAssembly applications. The documentation addresses a gap where developers previously had to piece together information from multiple sources.

Key Changes

• New comprehensive guide (wasm-referencing-js.md) covering four methods for loading JavaScript in WASM apps: embedded local scripts, static web assets, external CDN scripts, and dynamic runtime loading
• Navigation updates to integrate the new documentation into the table of contents under the "Embed a JavaScript Component" section
• Cross-references added to existing JavaScript interop documentation for improved discoverability

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
doc/articles/interop/wasm-referencing-js.md	New 450-line comprehensive guide covering all JavaScript loading methods with code examples, best practices, security considerations, and troubleshooting
doc/articles/toc.yml	Added navigation entry for the new guide under "Embed a JavaScript Component" section
doc/articles/interop/wasm-javascript-1.md	Added cross-reference tip boxes pointing to the new comprehensive guide

[unodevops]

⚠️⚠️ The build 190071 has failed on Uno.UI - docs.

[unodevops]

⚠️⚠️ The build 190081 has failed on Uno.UI - docs.