The Blicca JS stack in a nutshell

1. The Blicca JS stack in a nutshell#

Before we override anything, let’s look at the moving parts. This chapter is a guided tour with the browser’s developer tools, not a slide deck.

1.1. Mockup and the Plone bundle#

Mockup is the JavaScript package behind the Plone bundle. The bundle is shipped by plone.staticresources as ++plone++static/bundle-plone/bundle.min.js, and registered in the resource registry under the name plone.

1.2. Patterns and the registry#

Patterns are registered in the Patternslib registry. During the DOM scan, each pattern initializes on the elements that match its trigger, which is a plain CSS selector such as .pat-tinymce.

The registry follows one important rule. First registration wins. A pattern name can only be registered once, and later attempts are ignored. Remember this rule for Replacing a core pattern.

1.3. Module federation#

The Plone bundle is a module federation host. Add-on bundles are remotes. The host initializes each remote automatically on document-ready and shares core modules with it, including the Patternslib registry, @plone/registry, jQuery, and Bootstrap. This way, the add-on and the core talk to the same registry instances.

1.4. Svelte components#

Newer patterns, such as pat-contentbrowser, are Svelte apps. They pull some of their sub-components from the @plone/registry component registry. That is exactly where add-ons can hook in their own components, as we do in Overriding a Svelte component.

Why Svelte, and not React? Svelte compiles components to small, plain JavaScript without a virtual DOM, so the runtime footprint stays small. That is a good fit for a server-rendered UI that is progressively enhanced with JavaScript. Components read like HTML, CSS, and JavaScript, which keeps the learning curve flat for integrators. And Blicca deliberately stays free of React dependencies: it does not need Volto’s stack to render a widget.

1.5. See it live#

Open your browser’s developer tools on any Plone page, and observe the stack at work:

  • The <body> element carries data-pat-* attributes with global pattern options.

  • The network tab shows the bundle and its lazily loaded chunks.

  • The console logs a message for every initialized module federation bundle:

Patternslib Module Federation: Loaded and initialized bundle "__patternslib_mf__bliccastaticresourceoverride".
Contents