refactor(v3): unify JS/CSS injection via runtime fetch#4888
refactor(v3): unify JS/CSS injection via runtime fetch#4888leaanthony wants to merge 14 commits intov3-alphafrom
Conversation
Move window-specific JS/CSS injection from platform-specific execJS calls to a unified approach using the runtime. The runtime now fetches /wails/init.js and /wails/init.css from the asset server after signaling ready, and the backend identifies which window made the request via the existing x-wails-window-id header. This fixes the bug where JS/CSS options were not executed when using URL navigation (only worked with HTML option), and provides a single, consistent implementation across all platforms. Changes: - Add middleware handlers for /wails/init.js and /wails/init.css - Remove platform-specific JS/CSS injection from Windows, Linux, macOS - Add init script loading to runtime JS (fire-and-forget) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughJS/CSS injection was moved from platform-specific inline injections to centralized endpoints (/wails/init.js, /wails/init.css) served per-window; the desktop runtime loader now requires HTTP 200 to inject optional scripts and adds a stylesheet loader that requests and injects init.css. Changes
Sequence DiagramssequenceDiagram
participant Browser as WebView/Browser
participant Runtime as Desktop Runtime
participant Server as App Server
participant WindowStore as Window Store
Note over Browser,WindowStore: Centralized per-window init asset flow
Browser->>Runtime: Start init
Runtime->>Server: HEAD /wails/init.js (x-wails-window-id)
Server->>WindowStore: Lookup window by ID
WindowStore-->>Server: 200 or 204
Server-->>Runtime: 200 or 204
alt 200
Runtime->>Server: GET /wails/init.js
Server-->>Runtime: JS payload (application/javascript)
Runtime->>Browser: Inject <script> tag
end
Runtime->>Server: HEAD /wails/init.css (x-wails-window-id)
Server->>WindowStore: Lookup window by ID
WindowStore-->>Server: 200 or 204
Server-->>Runtime: 200 or 204
alt 200
Runtime->>Server: GET /wails/init.css
Server-->>Runtime: CSS payload (text/css)
Runtime->>Browser: Inject <link rel="stylesheet">
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 OpenGrep (1.16.0)v3/internal/assetserver/bundledassets/runtime.js┌──────────────┐ �[32m✔�[39m �[1mOpengrep OSS�[0m �[1m Loading rules from local config...�[0m v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/hierarchy.js┌──────────────┐ �[32m✔�[39m �[1mOpengrep OSS�[0m �[1m Loading rules from local config...�[0m v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/navigation.js┌──────────────┐ �[32m✔�[39m �[1mOpengrep OSS�[0m �[1m Loading rules from local config...�[0m
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Address code scanning alert about incorrect integer conversion. Using strconv.Atoi (which returns int) matches the platform's native integer size and is consistent with how other code in the repo parses window IDs (e.g., transport_http.go). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Deploying wails with
|
| Latest commit: |
6b989d8
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e1764cbd.wails.pages.dev |
| Branch Preview URL: | https://refactor-runtime-init-script.wails.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@v3/internal/runtime/desktop/`@wailsio/runtime/src/index.ts:
- Around line 80-95: Replace the eval-based runtime loader for '/wails/init.js'
with injecting a script element: when the fetch for '/wails/init.js' returns
non-empty text (the current fetch(...).then(js => { if (js) eval(js); })),
create a HTMLScriptElement, set its textContent to the fetched JS (or set src to
'/wails/init.js' and let the browser load it), append it to document.head to
execute it, and then optionally remove the node; keep the fire-and-forget async
pattern and existing error swallowing. Target the fetch('/wails/init.js')
handling in this file (the block that currently calls eval(js)) and leave the
init.css logic unchanged.
|
@leaanthony this is great. Only note is agreeing with the review to remove |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
v3/internal/runtime/desktop/@wailsio/runtime/src/index.ts (1)
84-104: CSS is never applied (loaded as a<script>).
loadOptionalScript('/wails/init.css')injects a script tag, so the stylesheet won’t load. This breaks CSS options for window init.✅ Suggested fix (add a style loader and use it for init.css)
export function loadOptionalScript(url: string): Promise<void> { return fetch(url, { method: 'HEAD' }) .then(response => { if (response.ok) { const script = document.createElement('script'); script.src = url; document.head.appendChild(script); } }) .catch(() => {}); // Silently ignore - script is optional } + +export function loadOptionalStyle(url: string): Promise<void> { + return fetch(url, { method: 'HEAD' }) + .then(response => { + if (response.ok) { + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = url; + document.head.appendChild(link); + } + }) + .catch(() => {}); // Silently ignore - style is optional +} @@ loadOptionalScript('/wails/custom.js'); loadOptionalScript('/wails/init.js'); -loadOptionalScript('/wails/init.css'); +loadOptionalStyle('/wails/init.css');
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@v3/internal/assetserver/bundledassets/runtime.js`:
- Line 1: The runtime currently uses the ne(n) / loadOptionalScript helper to
fetch a URL then always inject a <script> tag (see ne function and exported
loadOptionalScript), which is wrong for CSS; change ne (in
v3/internal/runtime/desktop/@wailsio/runtime/src/index.ts — exported as
loadOptionalScript) to detect the file extension (e.g., endsWith(".css") or
content-type) and branch: for CSS create a LINK element with rel="stylesheet"
and href=n and append to document.head, otherwise keep the existing SCRIPT
creation behavior; preserve the existing fetch check and overall promise/failure
handling.
|
@popaprozac - updated 👍 |
5455d4f to
ab57d0f
Compare
Add loadOptionalStylesheet function that properly loads CSS files using <link> tags instead of <script> tags. The init.css is now loaded correctly as a stylesheet. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
ab57d0f to
1aaa50a
Compare
popaprozac
left a comment
There was a problem hiding this comment.
This looks good to me!
There was a problem hiding this comment.
Pull request overview
Refactors window-specific WebviewWindowOptions.JS/CSS injection to be served via the asset server (/wails/init.js and /wails/init.css) and fetched by the runtime, replacing platform-specific injection paths and fixing missing injection when using URL navigation.
Changes:
- Add asset-server middleware endpoints to serve per-window init JS/CSS using the
x-wails-window-idheader. - Remove platform-specific JS/CSS injection logic on Windows/Linux/macOS.
- Update runtime to load optional init script and stylesheet; rebuild runtime bundle and generated docs.
Reviewed changes
Copilot reviewed 17 out of 19 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| v3/pkg/application/webview_window_windows.go | Removes Windows-specific JS/CSS injection during Chromium setup. |
| v3/pkg/application/webview_window_linux.go | Removes Linux-specific post-load JS/CSS injection hook. |
| v3/pkg/application/webview_window_darwin.go | Removes macOS-specific post-navigation JS/CSS injection and updates comment. |
| v3/pkg/application/application.go | Adds middleware to serve /wails/init.js and /wails/init.css per window based on request headers. |
| v3/internal/runtime/desktop/@wailsio/runtime/src/index.ts | Adds loadOptionalStylesheet() and triggers init JS/CSS loading at runtime startup. |
| v3/internal/runtime/desktop/@wailsio/runtime/package-lock.json | Updates lockfile metadata associated with runtime rebuild. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/modules.html | Regenerates runtime docs (module index). |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/hierarchy.html | Regenerates runtime docs (hierarchy page). |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/loadOptionalStylesheet.html | Adds generated docs page for loadOptionalStylesheet. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancelledRejectionError.html | Regenerated docs formatting/anchors. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancellablePromise.html | Regenerated docs formatting/anchors. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancelError.html | Regenerated docs formatting/anchors. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/Call.RuntimeError.html | Regenerated docs formatting/anchors. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/search.js | Regenerated docs asset bundle. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/navigation.js | Regenerated docs asset bundle. |
| v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/hierarchy.js | Regenerated docs asset bundle. |
| v3/internal/assetserver/bundledassets/runtime.js | Updates bundled runtime to load init JS/CSS and export stylesheet loader. |
| v3/UNRELEASED_CHANGELOG.md | Adds changelog entry for the JS/CSS URL-navigation fix. |
Files not reviewed (1)
- v3/internal/runtime/desktop/@wailsio/runtime/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Treat HTTP 204 as "not present" instead of loading empty resources - Add Vary header for window-id to prevent cache issues across windows - Change Cache-Control from no-cache to no-store for init assets Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
…init-scripts # Conflicts: # v3/UNRELEASED_CHANGELOG.md # v3/internal/assetserver/bundledassets/runtime.debug.js # v3/internal/assetserver/bundledassets/runtime.js # v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/hierarchy.js # v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/navigation.js # v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancelError.html # v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancellablePromise.html # v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancelledRejectionError.html # v3/internal/runtime/desktop/@wailsio/runtime/docs/hierarchy.html




Description
This PR refactors how window-specific
JSandCSSoptions fromWebviewWindowOptionsare injected into webviews. Instead of platform-specificexecJScalls, the runtime now fetches/wails/init.jsand/wails/init.cssfrom the asset server.This fixes the bug where JS/CSS options were not executed when using URL navigation (only worked when
HTMLoption was also set). This is the same bug that PR #4876 attempted to fix, but this approach is cleaner and more maintainable.How It Works
/wails/init.jsand/wails/init.cssafter signaling ready (fire-and-forget)x-wails-window-idheader (already injected by webview request wrapper)options.JS/options.CSScontentBenefits
Changes
/wails/init.jsand/wails/init.cssinapplication.gowebview_window_windows.gowebview_window_linux.gowebview_window_darwin.goindex.ts)Type of change
How Has This Been Tested?
Test plan
JSandCSSoptions setHTMLoption)🤖 Generated with Claude Code
Supersedes #4876
Summary by CodeRabbit
Bug Fixes
New Features
Documentation