Getting started with PWA Studio Extensibility

The 7.0 release improves on the extensibility framework. I want to prove if we can already build a real PWA extension or where we run in limitation. This blogpost contains two parts. The first part is about the technical strategies behind the Extensibility Apis. In the second part, we will write a small extension.

Technical strategies

The new extensibility Apis allows extending Build pack, Peregrine, and Venia UI library components. The main goal is developers can make changes in storefront projects or standalone extensions without duplicating or maintaining the PWA-Studio code. The PageBuilder is integrated via targets. It is the first Magento Content plugin. Also, it is an excellent example of your plugins. For replacing or extend already existing ui components, we need a workaround currently. Replacing a part can be dangerous. It is not a compound change, so if two extensions both want to replace the same file, it can lead to errors. Currently, the Core Team doesn't want to support a fallback structure by default. From my perspective, we need a way how a plugin can register its new components to already existing ui components. PWA Studio packages should declare which of their ui-components are safe to replace and make them replaceable. A reliable replacement strategy will help that vendors can build Standalone Marketplace Extensions.

Venia UI extension points

Currently, it is allowed to add new routes or create a new richContentRenderers to create new blog plugin based on CMS like NEOS. The richContentRenderers are used to integrate the Magento Page Builder Plugin in PWA Studio.

Dokumentation Link: https://github.com/magento/pwa-studio/blob/release/7.0/packages/venia-ui/lib/targets/venia-ui-declare.js

Peregrine extension points

We can now wrap any individual Peregrine talons when Peregrine talons are invoked, and/or to modify the behavior and output of those talons. Like the around plugin concept knowen as interceptor pattern of Magento.

targets.of('@magento/peregrine').talons.tap(talons => {
    talons.App.useApp.wrapWith('./log-wrapper');
})

log-wrapper.js

export default function wrapUseApp(original) {
    return function useApp(...args) {
        console.log('calling useApp with', ...args);
        return original(...args);
    }
}

Build pack extension points

These extension points are based on the Webpack Compiler Hooks. This the Webpack API is very well documented and often used to build plugins.

Dokumentation Link: https://github.com/magento/pwa-studio/blob/release/7.0/packages/peregrine/lib/targets/peregrine-declare.js

This post contains interactive elements that are cannot be displayed on dev.to view it: https://larsroettig.dev/getting-started-with-pwa-studio-extensibility/