<p><strong>TLDR:</strong> Vite 8 dropped today with Rolldown replacing the esbuild/Rollup split, delivering real-world build time cuts of up to 8x. A coordinated npm supply chain attack compromised hundreds of @antv packages yesterday, and if you have those in your dependency tree you need to rotate credentials now. Google I/O 2026 pushed hard on the “Agentic Web” framing, with WebMCP and Chrome DevTools agent integration as the headline features. Storybook 10.4 also landed with TanStack React support and AI-assisted setup.</p>
<hr>
<h2>Vite 8 replaces esbuild and Rollup with Rolldown</h2>
<p>Vite 8 swaps the dual-bundler setup for Rolldown, a single Rust-based bundler. Build times in real projects dropped anywhere from 57% to 8x — one benchmark went from 46 seconds to 6. Plugin API compatibility is maintained, and there’s a built-in migration layer for existing esbuild and Rollup options. The new plugin-react v6 also swaps Babel for Oxc. There’s a known issue with Yarn PnP on Windows, but otherwise this is a straightforward upgrade for most projects.</p>
<h2>Mini Shai-Hulud worm hits @antv npm packages</h2>
<p>On May 19, a compromised maintainer account published 637 malicious versions across 317-323 packages in roughly 22 minutes. High-download packages hit include size-sensor (4.2M downloads/month) and echarts-for-react (3.8M). The payload harvests AWS, GCP, Azure, GitHub, npm, Kubernetes, SSH, and Docker credentials, then exfiltrates them via encrypted channels. It also writes backdoors into Claude Code and VS Code configs, meaning removing the bad package version is not enough — you need to check those config files too. If you installed any affected @antv packages after May 18, rotate everything and audit your CI/CD environment. Pin to pre-May-18 versions.</p>
<h2>Google I/O 2026 bets on the Agentic Web</h2>
<p>The big theme from I/O was making the web legible to AI agents. WebMCP is a proposed open standard, currently in trial in Chrome 149, that lets sites expose JavaScript functions and HTML forms directly to browser-based agents. Shopify, <a href="http://Booking.com" target="_blank" rel="noopener nofollow">Booking.com</a>, and Expedia are already on board. Chrome DevTools 1.0 agent integration gives coding agents direct access to console logs, network traffic, and accessibility trees. Chrome 148 also ships the stable Prompt API with Gemini Nano for on-device summarization, and declarative partial updates land with out-of-order HTML streaming that doesn’t require JavaScript.</p>
<h2>Storybook 10.4</h2>
<p>Storybook 10.4 adds first-class TanStack React support via @storybook/tanstack-react with zero-config routing and server functions. AI agents can now auto-configure Storybook by analyzing project structure and writing stories. A new sidebar filter highlights stories affected by recent code changes, and a quick-share button publishes directly to Chromatic without needing a PR or CI run. There’s also an experimental react-component-meta docgen analyzer powered by Volar and the TypeScript Language Server.</p>
<hr>
<h2>Also notable</h2>
<ul>
<li><strong>CSS <code>border-shape</code> property:</strong> Upcoming CSS property lets you define custom border shapes without losing box-shadow styling — a real limitation of the current <code>clip-path</code> workaround. Uses the <code>shape()</code> function for things like speech bubbles.</li>
<li><strong>Chrome HTML-in-Canvas:</strong> Experimental flag in Chrome lets real DOM elements render inside canvas with <code>layoutsubtree</code> and <code>drawElementImage</code>, enabling CSS flexbox/grid inside canvas and GPU shader effects on actual HTML. Useful now for video rendering tools.</li>
<li><strong>Oxlint Vue and Svelte support:</strong> An RFC is in progress to add Oxlint language plugins for Vue, Svelte, Angular, and Astro template linting beyond just script sections.</li>
<li><strong>React render boundaries:</strong> A well-argued piece making the case that React performance problems are almost always about state lifted too high, not missing <code>useMemo</code> calls — worth reading before reaching for the React Compiler.</li>
<li><strong>XSS and passkeys:</strong> A single XSS vulnerability can silently register an attacker-controlled passkey on a victim account when services use <code>attestation: &quot;none&quot;</code>, which most do to support synced passkeys from 1Password and iCloud Keychain. Defenses include step-up auth before passkey registration and a strong CSP.</li>
<li><strong>Gemini 3.5 Flash on Vercel AI Gateway:</strong> Now available via <code>google/gemini-3.5-flash</code> in the AI SDK with improved coding and multi-turn coherence. Note: temperature, topP, topK, and thinking_budget are not supported.</li>
<li><strong>Vercel Flat Rate CDN:</strong> Limited beta for Pro teams replaces usage-based CDN pricing with a fixed monthly fee covering Edge Requests and Fast Data Transfer.</li>
<li><strong>Firefox 151:</strong> Built-in VPN now supports location selection across five countries; AI feature controls expand to iOS and Android; Shake to Summarize rolls out to Android in English.</li>
<li><strong>Appwrite Sites adds Bun and Deno runtimes:</strong> Bun 1.0-1.3 and Deno 1.40-2.6 are now selectable build runtimes alongside Node, with no changes to project files required.</li>
<li><strong>Shopify Next Generation Events:</strong> Developer preview of field-level webhook triggers that only fire when specific fields change, with custom payload definitions via Admin GraphQL — eliminates the need to diff state after a webhook lands.</li>
<li><strong><code>useOptimistic</code> production patterns:</strong> A solid writeup on React 19’s <code>useOptimistic</code> hook covering list appending, boolean toggles, and inline editing with partial field merges, plus when not to use it (destructive actions, financial data).</li>
<li><strong><code>:user-invalid</code> and <code>:user-valid</code>:</strong> Drop <code>:invalid</code> and <code>:valid</code> on form inputs — they fire on page load before any interaction. The newer <code>:user-invalid</code> and <code>:user-valid</code> pseudo-classes only activate after the user has touched the field.</li>
</ul>


Frontend development news, CSS techniques, framework updates, and browser API changes.

Web Digest

Vite 8 has launched, replacing the esbuild/Rollup dual-bundler setup with Rolldown, a Rust-based bundler that delivers build time reductions of up to 8x in real projects. A serious npm supply chain attack compromised 637 malicious versions across 317+ @antv packages, harvesting cloud and developer credentials and writing backdoors into Claude Code and VS Code configs — affected users must rotate all credentials and audit config files immediately. Google I/O 2026 introduced the 'Agentic Web' concept with WebMCP (a proposed standard for exposing site functions to browser agents), Chrome DevTools agent integration, and a stable on-device Prompt API with Gemini Nano. Storybook 10.4 adds TanStack React support, AI-assisted setup, and direct Chromatic publishing. Additional notable items include a new CSS border-shape property, Chrome HTML-in-Canvas experiments, Oxlint Vue/Svelte support, XSS passkey hijacking risks, and Gemini 3.5 Flash availability on Vercel AI Gateway.

Vite 8 ships Rolldown, npm supply chain attack hits @antv ecosystem