Johannes Raggam and Peter Mathis: What’s Up, Mockup? News from Mockup and Patternslib

Mockup is the JavaScript behind Plone Blicca (formerly known as Classic UI). It is a collection of patterns: declare behavior in HTML. It is built on top of Patternslib. It is shipped to Plone via the plone.staticresources Python package.

In Mockup we started introducing Svelte app. Some patterns were still using jQuery or the even older Backbone library, or Underscore. The related items widget was using an old, patched version of select2. So we came up with pat-contentbrowser, using "Miller columns". This is now used by the related items field, and links/images in the TinyMCE editor. And this is build using Svelte 5.

We introduced a way to extend it. You can register your own Svelte component for the selected items. This uses @plone/registry, which is used by Volto. This was shown in the training earlier this week. See this section.

Next: pat-filemanager. This is the replacement for the structure pattern, so the folder contents view. We wrote down the specification of we wanted, how we wanted it, asked an AI, and it came up with pat-filemanager. Obviously we reviewed. We have some new features now. You can drag and drop an existing item into a sub folder. You can drag and drop a new file or image into the folder contents area. We built this at the Buschenschanksprint in five days. This would not have been possible without AI. It uses plone.restapi only, instead of the legacy views for this.

You can try this with plone.staticresources 3.1.0a3 plus a z3c.jbot override for the folder contents view, and replace pat-structure with pat-filemanager.

Now Johannes will talk about Patternslib.

We needed a data binding pattern: pat-bind. Why? Update the UI without pat-inject.

Internals: we switched to pnpm for dependency management. Vite instead of webpack as build framework, Vitest as test framework. We want to separate Module Federation from webpack, to not be dependent on this framework. We want to split the core from the patterns, so you don't need to include all existing patterns if you just want to create your own.

If something is added in Patternslib, we can add it in Mockup.