📄️ Documentation Playground Code Jumping
The code jumping feature in the documentation Playground has been improved. Previously, using CTRL (CMD on Mac) + Click on an imported symbol would navigate to the top of the target file. Now, it properly jumps to the exact definition of the symbol within the file, making it easier to navigate and explore the codebase directly from the playground.
📄️ Event Batching
HAPI Elements widgets use web components that inject iframes under the hood and rely on an event-driven architecture to communicate between the parent page and widget iframes. Every interaction -- from mounting a DOM element to applying a style change -- is transmitted as an event via postMessage.
📄️ Iframe Load Batching
HAPI Elements now queues widget iframe loading and processes them in batches instead of loading all iframes simultaneously. Previously, mounting many widgets at once could create a CPU bottleneck as every iframe competed for resources in parallel. With load batching enabled, iframes are placed in a queue and only a limited number are allowed to load concurrently, reducing resource contention and improving overall page responsiveness.
📄️ Iframe Loading UI
A new skeleton loading UI has been introduced as an alternative to the default loading spinner for HAPI Elements iframes. When enabled, a pulsing skeleton block is displayed while the iframe content loads, providing a smoother visual experience.
📄️ Improper Widget Placement Detection Warnings
In non-production environments, HAPI Elements now automatically detects when a widget is placed inside a hidden or non-visible container and logs a [HAPI] WIDGET VISIBILITY WARNING to the browser console. Loading widget iframes when they are not visible to the end user impacts performance, and this warning helps developers catch common integration pitfalls early during development.
📄️ Internal Tool Updates
The entire internal tooling stack and the Node.js runtime have been updated to their latest versions.
📄️ Lazily Loaded Stripe
The Stripe.js library (@stripe/stripe-js) is now lazily loaded using a dynamic import. Previously, the Stripe client was included in the main bundle and loaded on every page, even when no wallet widget was present. Now, the library is only fetched when a wallet widget that requires Stripe is actually mounted, reducing the initial bundle size and improving page load performance for integrations that do not use wallet functionality.
📄️ Performance Improvements
This release delivers significant performance improvements for all end users, regardless of operating system or browser. Widget load times have been reduced by up to ~7x on average across the board through a combination of load batching, event batching, caching, bundle size reductions, runtime optimizations, and internal tooling and Node.js runtime updates.
📄️ UI Service Functions Spam Call Detection
We have added spam call detection to the UI service functions. When the same function is called with the same arguments 3 or more times within a 500ms window, a warning is logged to the browser console in non-production environments.
📄️ UI Submodule Improvements
These new functions have been added to the UI submodule: hideElements, showElements, setStyles, setStyleAttributes, setAttributes, addClasses, removeClasses.
📄️ Widget Iframe Page Caching
Widget iframe pages are now statically generated at build time and served with aggressive HTTP caching headers. This significantly improves widget load times, allowing end users to experience near-instant iframe rendering on repeat visits.