Version 0.5

Lens version 0.5 paves the way for better documentation of the Lens library with the introduction of the Lens Book and API docs. Version 0.5 also introduces the translations API and the setOptions and setCatalogue APIs that pose an alternative to the <lens-options></lens-options> component. Finally it comes with internal improvements such as the migration to Svelte 5 and the automatic generation of the catalogue JSON schema to keep it in sync with the TypeScript definitions. You can find the full list of changes on GitHub.

Migration guide

Version 0.5 introduces a few breaking changes that application authors should be aware of. This guide will help you to migrate your application to the new version.

CSS bundle import path

The import path of the CSS bundle has changed. If the import is processed by your bundler we recommend to use automatic module resolution:

import "@samply/lens/style.css";

If you have to refer to the file directly you can find it at node_modules/@samply/lens/dist/lens.css.

Catalogue changes

The catalogue JSON schema is a little bit stricter now. Most notably every object with the "childCategories" property now additionally requires "fieldType": "group". For example:

 {
+    "fieldType": "group",
     "key": "donor",
     "name": "Donor/Clinical Information",
     "childCategories": [
         ...
     ]
 }

You can use the following this script to update your catalogue. Afterwards open the file in your editor and reformat it.

sed -i 's/"childCategories"/"fieldType": "group", "childCategories"/' catalogue.json

Catalogue icons

Icons have been removed from the <lens-catalogue> component:

 <lens-catalogue
-    toggleIconUrl="right-arrow-svgrepo-com.svg"
-    addIconUrl="long-right-arrow-svgrepo-com.svg"
-    infoIconUrl="info-circle-svgrepo-com.svg"
     ...
 ></lens-catalogue>

Add them to the iconOptions object in the Lens options instead. Also remove the selectAll property and use the new translations API instead if you want to customize the text.

 "iconOptions": {
     "deleteUrl": "delete_icon.svg",
     "infoUrl": "info-circle-svgrepo-com.svg",
+    "toggleIconUrl": "right-arrow-svgrepo-com.svg",
+    "addIconUrl": "long-right-arrow-svgrepo-com.svg",
-    "selectAll": {
-        "text": "Alle Hinzufügen"
-    }
 }

Schema validation

JSON schema definitions for the Lens options and the catalogue are now included in the Lens release. Refer to this section in the new application guide to learn how to validate your JSON files against the JSON schema.