Upgrading Checkout Blocks app to Polaris web components

Summary

Checkout Blocks upgraded all five UI extensions from React and Shopify’s legacy Remote UI bridge to remote-dom with Preact and Polaris web components, while moving from JavaScript to TypeScript and API version 2026-01. The migration addressed checkout’s performance sensitivity and Shopify’s requirement that deployments move off versions earlier than 2026-01. A parallel core-next library allowed extensions to transition incrementally, with shared providers, telemetry, hooks, helpers, and rules adapted before legacy core was removed. To meet the remote-dom CLI’s 64KB gzip limit, the team dropped react-reconciler, replaced liquidjs with a smaller parser validated against more than 42,000 lines of merchant configurations, replaced dayjs, and retained markdown-to-jsx through Preact compatibility. Transferred bundles fell 40% to 85%, while weighted ELT improved 8% at P50 and 7% at P90.

Context

Checkout UI extensions ran on React, Shopify’s legacy Remote UI bridge, and API versions that were being sunset. Checkout is performance-sensitive because extension code adds buyer-facing download, parsing, and execution work. The remote-dom CLI also enforced a 64KB gzip limit per extension, while the existing bundles were approximately 100–112KB gzipped. Deployments containing extension versions earlier than 2026-01 were scheduled to be blocked starting October 1, 2026.

Approach / What changed

The team created a parallel core-next shared library using Preact, TypeScript, remote-dom, and Polaris web components, then migrated the five extensions incrementally from smallest and lowest-risk to more complex cases. They reduced bundle weight by removing react-reconciler, replacing liquidjs with a compact Liquid parser validated against more than 42,000 real merchant configurations, replacing dayjs with an in-house date utility, and aliasing markdown-to-jsx through Preact compatibility. Production parity tests, monitoring, and releases of at most one extension per day supported validation and rollback.

Takeaways

• Transferred bundle sizes fell between 40% and 85% across the five extensions, with payment-icons showing the largest reduction at 84.4%.
• The custom Liquid parser, nicknamed droplet, was 13KB gzipped versus approximately 22KB for liquidjs and was tested against a corpus of real merchant configurations.
• Aggregated extension load performance improved by 8% at ELT P50 and 7% at ELT P90, weighted by checkout volume.

Related reading