---
title: "Upgrading Checkout Blocks app to Polaris web components"
description: "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."
---

# Upgrading Checkout Blocks app to Polaris web components

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Jul 16, 2026

**Type:** Problem & solution

## 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.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Migrations](https://yomu.fyi/topic/migration), [Performance](https://yomu.fyi/topic/performance), [Testing](https://yomu.fyi/topic/testing), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Shopify](https://shopify.engineering/upgrading-checkout-blocks-app-to-polaris-web-components)
- Source URL: https://shopify.engineering/upgrading-checkout-blocks-app-to-polaris-web-components
- Ingested by Yomu: 2026-08-30T13:17:28.215Z

[Read original post](https://shopify.engineering/upgrading-checkout-blocks-app-to-polaris-web-components)