WWDC 2025's Biggest Updates, Oxlint is Finally Stable, and pnpm's Newest Update - This Week in JS

Hello JavaScript Enthusiasts! Welcome to a new edition of "This Week in JavaScript"! This Week in JavaScript This week, we’re unpacking Safari 26 Beta’s game-changing WebKit updates, pnpm 10.12’s performance leaps, and Oxlint 1.0’s blazing-fast linting. As always, we’ll also talk about some powerful tools to elevate your development workflow. WWDC 2025 & Safari 26 Beta: WebKit in SwiftUI, WebGPU, and CSS Anchor Positioning WWDC 2025 & Safari 26 Beta: WebKit in SwiftUI, WebGPU, and CSS Anchor Positioning Apple’s Safari 26 Beta, released this week, introduces 67 new features and 107 improvements, with WebKit stealing the show. The star is a brand-new WebKit API tailored for Swift and SwiftUI, making it seamless to integrate web content into apps across iOS, iPadOS, macOS, and visionOS. Let’s break down the key additions. Apple’s Safari 26 Beta Apple’s Safari 26 Beta WebView and WebPage: A New Era for Web Integration WebView and WebPage: A New Era for Web Integration The WebView type, a native SwiftUI View, simplifies displaying web content. With just a URL, you can embed a webpage in your app: struct ContentView: View { var body: some View { WebView(url: URL(string: "https://www.webkit.org")) } } WebView supports a suite of view modifiers like webViewScrollPosition, webViewMagnificationGestures, and findNavigator, allowing fine-grained control over the user experience. For advanced use cases, connect WebView to WebPage, a new Observable class designed to manage web content. WebPage enables loading, controlling, and communicating with web content, even without displaying it directly. Its observable properties and functions make reacting to changes effortless, especially in SwiftUI’s reactive paradigm.For example, you can build a dynamic article viewer:struct ArticleView: View { @Environment(ArticleViewModel.self) private var model var body: some View { WebView(model.page) navigationTitle(model.page.title) } } The URLSchemeHandler protocol leverages Swift Concurrency to handle custom schemes, enabling local resource loading with an AsyncSequence. Meanwhile, WebPage.NavigationDeciding and WebPage.DialogPresenting protocols let you customize navigation policies and JavaScript dialog presentations, offering unparalleled control over web interactions in your app. The WebView type, a native SwiftUI View, simplifies displaying web content. With just a URL, you can embed a webpage in your app: struct ContentView: View { var body: some View { WebView(url: URL(string: "https://www.webkit.org")) } } The WebView type, a native SwiftUI View, simplifies displaying web content. With just a URL, you can embed a webpage in your app: struct ContentView: View { var body: some View { WebView(url: URL(string: "https://www.webkit.org")) } } struct ContentView: View { var body: some View { WebView(url: URL(string: "https://www.webkit.org")) } } WebView supports a suite of view modifiers like webViewScrollPosition, webViewMagnificationGestures, and findNavigator, allowing fine-grained control over the user experience. For advanced use cases, connect WebView to WebPage, a new Observable class designed to manage web content. WebPage enables loading, controlling, and communicating with web content, even without displaying it directly. Its observable properties and functions make reacting to changes effortless, especially in SwiftUI’s reactive paradigm.For example, you can build a dynamic article viewer:struct ArticleView: View { @Environment(ArticleViewModel.self) private var model var body: some View { WebView(model.page) navigationTitle(model.page.title) } } WebView supports a suite of view modifiers like webViewScrollPosition, webViewMagnificationGestures, and findNavigator, allowing fine-grained control over the user experience. For advanced use cases, connect WebView to WebPage, a new Observable class designed to manage web content. WebPage enables loading, controlling, and communicating with web content, even without displaying it directly. Its observable properties and functions make reacting to changes effortless, especially in SwiftUI’s reactive paradigm.For example, you can build a dynamic article viewer: struct ArticleView: View { @Environment(ArticleViewModel.self) private var model var body: some View { WebView(model.page) navigationTitle(model.page.title) } } struct ArticleView: View { @Environment(ArticleViewModel.self) private var model var body: some View { WebView(model.page) navigationTitle(model.page.title) } } The URLSchemeHandler protocol leverages Swift Concurrency to handle custom schemes, enabling local resource loading with an AsyncSequence. Meanwhile, WebPage.NavigationDeciding and WebPage.DialogPresenting protocols let you customize navigation policies and JavaScript dialog presentations, offering unparalleled control over web interactions in your app. The URLSchemeHandler protocol leverages Swift Concurrency to handle custom schemes, enabling local resource loading with an AsyncSequence. Meanwhile, WebPage.NavigationDeciding and WebPage.DialogPresenting protocols let you customize navigation policies and JavaScript dialog presentations, offering unparalleled control over web interactions in your app. This API empowers web developers to leverage their JavaScript and HTML skills to create native Apple apps, bridging the gap between web and native development. Whether you’re building a news reader or a web-enhanced dashboard, these tools make integration smoother than ever. This API empowers web developers to leverage their JavaScript and HTML skills to create native Apple apps, bridging the gap between web and native development. Whether you’re building a news reader or a web-enhanced dashboard, these tools make integration smoother than ever. WebGPU: GPU-Powered Computing on the Web WebGPU: GPU-Powered Computing on the Web Safari 26 Beta introduces WebGPU, a JavaScript API that revolutionizes GPU programming. Unlike WebGL, which was built on OpenGL and required heavy translation to modern GPUs, WebGPU maps directly to Apple’s Metal framework, reducing overhead and boosting performance. It supports graphics rendering and introduces compute shaders for general-purpose GPU computations—a first for the web. Safari 26 Beta introduces WebGPU, a JavaScript API that revolutionizes GPU programming. Unlike WebGL, which was built on OpenGL and required heavy translation to modern GPUs, WebGPU maps directly to Apple’s Metal framework, reducing overhead and boosting performance. It supports graphics rendering and introduces compute shaders for general-purpose GPU computations—a first for the web. WebGPU uses the WebGPU Shading Language (WGSL, pronounced “wig-sill”), a safe, verifiable language designed for the web. WGSL avoids risks like unchecked bounds accesses, ensuring security without sacrificing power. After over a year in Safari Technology Preview, WebGPU is now stable in Safari 26 Beta across Apple platforms. WebGPU uses the WebGPU Shading Language (WGSL, pronounced “wig-sill”), a safe, verifiable language designed for the web. WGSL avoids risks like unchecked bounds accesses, ensuring security without sacrificing power. After over a year in Safari Technology Preview, WebGPU is now stable in Safari 26 Beta across Apple platforms. Frameworks like Babylon.js, Three.js, Unity, and Transformers.js already support WebGPU, delivering stunning visuals and complex computations in the browser. For developers, WebGPU’s streamlined validation minimizes performance hits, approaching native app speeds. Frameworks like Babylon.js, Three.js, Unity, and Transformers.js already support WebGPU, delivering stunning visuals and complex computations in the browser. For developers, WebGPU’s streamlined validation minimizes performance hits, approaching native app speeds. CSS Anchor Positioning: Smarter Layouts CSS Anchor Positioning: Smarter Layouts Anchor positioning, a new CSS layout mechanism, simplifies anchoring elements to one another. Paired with the popover attribute (introduced in Safari 17.0), it’s perfect for responsive menus, tooltips, and overlays. The position-area syntax makes layouts intuitive: .thing-that-gets-anchored-to { anchor-name: --profile-button; } .item-that-pops-up { position-anchor: --profile-button; position: absolute; top: anchor(bottom); left: anchor(left); } The anchor() function, combined with absolute positioning, offers pixel-perfect control, ideal for animated anchors or multi-anchor layouts. This feature enhances the web’s layout capabilities, making complex designs more accessible. Safari 26 Beta’s CSS improvements cement its position as a developer-friendly browser. Anchor positioning, a new CSS layout mechanism, simplifies anchoring elements to one another. Paired with the popover attribute (introduced in Safari 17.0), it’s perfect for responsive menus, tooltips, and overlays. The position-area syntax makes layouts intuitive: .thing-that-gets-anchored-to { anchor-name: --profile-button; } .item-that-pops-up { position-anchor: --profile-button; position: absolute; top: anchor(bottom); left: anchor(left); } Anchor positioning, a new CSS layout mechanism, simplifies anchoring elements to one another. Paired with the popover attribute (introduced in Safari 17.0), it’s perfect for responsive menus, tooltips, and overlays. The position-area syntax makes layouts intuitive: .thing-that-gets-anchored-to { anchor-name: --profile-button; } .item-that-pops-up { position-anchor: --profile-button; position: absolute; top: anchor(bottom); left: anchor(left); } .thing-that-gets-anchored-to { anchor-name: --profile-button; } .item-that-pops-up { position-anchor: --profile-button; position: absolute; top: anchor(bottom); left: anchor(left); } The anchor() function, combined with absolute positioning, offers pixel-perfect control, ideal for animated anchors or multi-anchor layouts. This feature enhances the web’s layout capabilities, making complex designs more accessible. Safari 26 Beta’s CSS improvements cement its position as a developer-friendly browser. The anchor() function, combined with absolute positioning, offers pixel-perfect control, ideal for animated anchors or multi-anchor layouts. This feature enhances the web’s layout capabilities, making complex designs more accessible. Safari 26 Beta’s CSS improvements cement its position as a developer-friendly browser. pnpm 10.12: Near-Instant Installs and Enhanced Catalogs pnpm 10.12: Near-Instant Installs and Enhanced Catalogs pnpm 10.12.1, released this week, supercharges JavaScript package management with an experimental global virtual store and a revamped version catalog system. These updates make pnpm a top choice for developers managing monorepos or large projects. pnpm 10.12.1, released this week, supercharges JavaScript package management with an experimental global virtual store and a revamped version catalog system. These updates make pnpm a top choice for developers managing monorepos or large projects. pnpm 10.12.1 pnpm 10.12.1 The global virtual store slashes install times by linking dependencies to a shared /links directory, where packages are stored in folders named after their dependency graph hashes. This NixOS-inspired approach lets multiple projects reuse dependencies without redownloading, delivering near-instant installs on warm caches. Enable it with: pnpm config -g set enable-global-virtual-store true Or add to pnpm-workspace.yaml: enableGlobalVirtualStore: true pnpm auto-disables this in CI environments to avoid slowdowns on cold caches. A YouTube demo shows the speed, and PR #8190 details the tech. Zoltan Kochan, pnpm’s maintainer, highlights its graph-based isolation for robust performance. The global virtual store slashes install times by linking dependencies to a shared /links directory, where packages are stored in folders named after their dependency graph hashes. This NixOS-inspired approach lets multiple projects reuse dependencies without redownloading, delivering near-instant installs on warm caches. Enable it with: pnpm config -g set enable-global-virtual-store true Or add to pnpm-workspace.yaml: enableGlobalVirtualStore: true The global virtual store slashes install times by linking dependencies to a shared /links directory, where packages are stored in folders named after their dependency graph hashes. This NixOS-inspired approach lets multiple projects reuse dependencies without redownloading, delivering near-instant installs on warm caches. Enable it with: pnpm config -g set enable-global-virtual-store true Or add to pnpm-workspace.yaml: enableGlobalVirtualStore: true pnpm config -g set enable-global-virtual-store true Or add to pnpm-workspace.yaml: enableGlobalVirtualStore: true pnpm auto-disables this in CI environments to avoid slowdowns on cold caches. A YouTube demo shows the speed, and PR #8190 details the tech. Zoltan Kochan, pnpm’s maintainer, highlights its graph-based isolation for robust performance. pnpm auto-disables this in CI environments to avoid slowdowns on cold caches. A YouTube demo shows the speed, and PR #8190 details the tech. Zoltan Kochan, pnpm’s maintainer, highlights its graph-based isolation for robust performance. The version catalog system gains flexibility with catalogMode settings: strict enforces catalog versions, prefer allows fallbacks, and manual (default) skips auto-additions. New CLI options --save-catalog and --save-catalog-name= save dependencies to pnpm-workspace.yaml and package.json with catalog: specifiers (PR #9425). The pnpm update command now supports catalog protocols, streamlining dependency updates. The version catalog system gains flexibility with catalogMode settings: strict enforces catalog versions, prefer allows fallbacks, and manual (default) skips auto-additions. New CLI options --save-catalog and --save-catalog-name= save dependencies to pnpm-workspace.yaml and package.json with catalog: specifiers (PR #9425). The pnpm update command now supports catalog protocols, streamlining dependency updates. Minor tweaks include semantic version sorting for pnpm patch, clearer error messages for mismatched specifiers (PR #9598), and a CI setting to flag CI environments. A semi-breaking change updates side-effects cache keys, requiring a new cache (PR #9605). Check the release notes for more. Minor tweaks include semantic version sorting for pnpm patch, clearer error messages for mismatched specifiers (PR #9598), and a CI setting to flag CI environments. A semi-breaking change updates side-effects cache keys, requiring a new cache (PR #9605). Check the release notes for more. Oxlint 1.0: Redefining Linting Performance Oxlint 1.0: Redefining Linting Performance Oxlint 1.0, the first stable release of the Rust-powered JavaScript and TypeScript linter, delivers 50–100x faster performance than ESLint. Supporting over 500 rules with zero-config setup, it’s adopted by Shopify, Airbnb, and Mercedes-Benz, transforming linting workflows. Oxlint 1.0, the first stable release of the Rust-powered JavaScript and TypeScript linter, delivers 50–100x faster performance than ESLint. Supporting over 500 rules with zero-config setup, it’s adopted by Shopify, Airbnb, and Mercedes-Benz, transforming linting workflows. Oxlint 1.0 Oxlint 1.0 , Oxlint processes 10,000 files per second, linting 264,925 files in 22.5 seconds on 10 threads. Airbnb lints 126,000+ files in 7 seconds with rules like no-barrel-file, where ESLint fails. Mercedes-Benz cut lint times by 71–97%, and Shopify uses it in its admin console. Benchmarks show Oxlint at 615.3ms (multi-thread) versus ESLint’s 33.481s. Open-source projects like Bun and Preact also benefit.Start linting with: npx oxlint@latest Customize via .oxlintrc.json, based on ESLint v8’s flat config. The oxlint-migrate tool converts ESLint configs, and eslint-plugin-oxlint supports hybrid setups. Rules include ESLint, TypeScript-ESLint, and plugins like eslint-plugin-react, plus unique Oxlint rules like bad-comparison-sequence. Editor support covers VS Code, IntelliJ, and Zed. See the installation guide. Oxlint processes 10,000 files per second, linting 264,925 files in 22.5 seconds on 10 threads. Airbnb lints 126,000+ files in 7 seconds with rules like no-barrel-file, where ESLint fails. Mercedes-Benz cut lint times by 71–97%, and Shopify uses it in its admin console. Benchmarks show Oxlint at 615.3ms (multi-thread) versus ESLint’s 33.481s. Open-source projects like Bun and Preact also benefit.Start linting with: npx oxlint@latest Oxlint processes 10,000 files per second, linting 264,925 files in 22.5 seconds on 10 threads. Airbnb lints 126,000+ files in 7 seconds with rules like no-barrel-file, where ESLint fails. Mercedes-Benz cut lint times by 71–97%, and Shopify uses it in its admin console. Benchmarks show Oxlint at 615.3ms (multi-thread) versus ESLint’s 33.481s. Open-source projects like Bun and Preact also benefit.Start linting with: npx oxlint@latest npx oxlint@latest Customize via .oxlintrc.json, based on ESLint v8’s flat config. The oxlint-migrate tool converts ESLint configs, and eslint-plugin-oxlint supports hybrid setups. Rules include ESLint, TypeScript-ESLint, and plugins like eslint-plugin-react, plus unique Oxlint rules like bad-comparison-sequence. Editor support covers VS Code, IntelliJ, and Zed. See the installation guide. Customize via .oxlintrc.json, based on ESLint v8’s flat config. The oxlint-migrate tool converts ESLint configs, and eslint-plugin-oxlint supports hybrid setups. Rules include ESLint, TypeScript-ESLint, and plugins like eslint-plugin-react, plus unique Oxlint rules like bad-comparison-sequence. Editor support covers VS Code, IntelliJ, and Zed. See the installation guide. Oxlint’s semantic versioning ensures stability, with minor releases adding rules that may affect CI. Review the versioning guide. With maintainer Cameron and a growing team, Oxlint is set to evolve rapidly. Oxlint’s semantic versioning ensures stability, with minor releases adding rules that may affect CI. Review the versioning guide. With maintainer Cameron and a growing team, Oxlint is set to evolve rapidly. Tools & Releases You Should Know About Tools & Releases You Should Know About Jest 30: Faster, Leaner, Better Jest 30: Faster, Leaner, Better Jest 30 brings faster test runs and lower memory usage, with up to 37% speed improvements and 77% less memory in large projects. It drops Node 14/16/19/21 support, upgrades jsdom to v26, and requires TypeScript 5.4+. New features include expect.arrayOf for array validation, test.each with a %$ placeholder, and jest.advanceTimersToNextFrame() for animation testing. Jest 30 Jest 30 Configurable retries and jest.unstable_unmockModule() enhances control. Check the migration guide for breaking changes. Orange ORM: Seamless Database Integration Orange ORM: Seamless Database Integration Orange ORM is a powerful Object-Relational Mapper for Node.js, Bun, and Deno, supporting TypeScript and JavaScript. Its intuitive querying and Active Record pattern simplify database interactions without code generation. It works in browsers via an Express.js plugin, ensuring secure credential handling. Ideal for developers needing flexible, typed database solutions. Orange ORM Orange ORM Vue Equipment: Frontend Toolkit Vue Equipment: Frontend Toolkit Vue Equipment offers unstyled, typed plugins and composables for Vue and Nuxt apps. With a clean API, it reduces complexity using CSS variables, grouped options, and exposed state via data attributes. It’s perfect for developers building modern web apps without reinventing common solutions. Vue Equipment Vue Equipment darkmodejs: Easy Dark Mode darkmodejs: Easy Dark Mode darkmodejs simplifies dark mode on the web using the prefers-color-scheme media query and matchMedia API. It supports macOS 10.14+, iOS 13+, and Windows 10+, with v2+ using addEventListener for modern compatibility. A lightweight utility for theme-aware sites. darkmodejs darkmodejs And that's it for the thirty-ninth issue of "This Week in JavaScript", brought to you by jam.dev—the tool that makes it impossible for your team to send you bad bug reports. This Week in JavaScript jam.dev jam.dev Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates. Until next time, happy coding!