Technischer Durchstich - KoliBri CMS SSR mit z.B. Typo3

[deleonio]

Die im Projekt KoliBri erarbeiteten Web Components und deren semantische Struktur und Verhalten sollen bestmöglich auch in Content-Management-Systemen und anderen SSR-Szenarien wiederverwendet werden können.

Hier zugibt es aktuell folgende Vorarbeiten:

• https://github.com/public-ui/kolibri/discussions/3019
• https://github.com/fgeierst/typo3-publicui-demo
• https://github.com/public-ui/kolibri/tree/develop/packages/adapters/hydrate
• https://www.npmjs.com/package/@public-ui/hydrate
• https://github.com/public-ui/kolibri/tree/develop/packages/samples/ssr
• Twig, Mustache etc.

Knowledgement:

• https://developer.chrome.com/articles/declarative-shadow-dom/

Ziel

Wir wollen optimalerweise dieselben Komponenten auch im CMS wiederverwenden und vorgerendert zum Client senden. Auf diese Weise erhält der Nutzende und die Suchmaschinen direkt das korrekte Markup. Auch das Styling soll nach Möglichkeit direkt mitkommen.

Vite + Typo3

Es sollte mittels der hydrated KoliBri-Komponenten möglich sein, SSR mittels Typo3 und dem Vite-Plugin umzusetzen. Die render-Methode muss ggf. weiter optimiert werden.

Todo

• [ ] Typo3 Repo auschecken und zum Laufen bekommen
• [ ] Hydrated-Komponenten statt der CSR-Komponenten verwenden
• [ ] ggf. notwendige Optimierungen an der Implementierung vornehmen, damit die relevanten Komponenten SSR-fähig sind

[fgeierst]

See also https://github.com/fgeierst/typo3-lit-demo.

In order to use web components in TYPO3 content elements, you need a custom HTML Sanatizer.