🐞 Bug: patchTheme funktioniert nicht mehr

[Chrisdo82]

Link to the code that reproduces this issue:

Can you categorise where the error occurs?

React

Which browser or operating system do you used to test KoliBri?

How to reproduce issue?

// initialize
import kolibriThemePatch from './kolibri-theme-patch' 

await bootstrap(BMF, [], { transformTagName: transformTagName(config?.customSuffix) }).then(KoliBriDevHelper.patchTheme('bmf', kolibriThemePatch))

// kolibriThemePath.ts
const theme = {
  'KOL-BUTTON': `
    @layer kol-theme-component {
      :is(a, button) {
        > .kol-span-wc {
          padding: 2rem;
        }
      }
    }
  `,
} 
export default theme

Current vs. Expected:

Current: es ändert sich nichts. Expected: Das Theme wird mit den gepatchten Styles aktualisiert.

Environment informations:

{
 "Operating System": {
 "platform": "darwin",
 "arch": "arm64",
 "version": "23.6.0"
 },
 "Binaries": {
 "node": "v20.15.0",
 "npm": "10.7.0",
 "pnpm": "8.12.1",
 "yarn": "N/A"
 },
 "Relevant Packages": {
 "@public-ui/components": "2.1.7",
 "@public-ui/react": "2.1.7",
 "@public-ui/themes": "2.1.7",
 "react": "^18.3.1",
 "react-dom": "^18.3.1",
 "typescript": "5.5.4"
 }
 } 

[Chrisdo82]

bei Stackblitz konnte ich es leider nicht reproduzieren, da dort das Theme überhaupt nicht geladen wird: https://stackblitz.com/edit/vitejs-vite-z1sewz?file=src%2Freact.main.tsx,package.json,index.html,src%2FApp.tsx

[laske185]

Bei Vite funktioniert die Komponentenregistrierung genau wie bei React.

In der index.html muss das Modul raus:

<script
      type="module"
      src="/node_modules/@public-ui/components/dist/kolibri/kolibri.esm.js"
    ></script>  

und in der react.main defineCustomElements in bootstrap setzen:

import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
import { BMF } from '@public-ui/themes';
import kolibriThemePatch from './kolibri-theme-patch';
import { defineCustomElements } from '@public-ui/components/dist/loader';

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

bootstrap(BMF, defineCustomElements)
  .then(() => {
    KoliBriDevHelper.patchTheme('bmf', kolibriThemePatch);
...

Aktualisiertes Beispiel: https://stackblitz.com/edit/vitejs-vite-bitfey?file=src%2Freact.main.tsx,package.json,index.html,src%2Fkolibri-theme-patch.ts

[Chrisdo82]

@laske185
ihr solltet euer Beispiel in Stackblitz dann anpassen, da kam das nämlich her mit dem import in der index.html.

---

das Problem hat mit der Verwendung von setTagNameTransformer zu tun. Den hatte ich in dem Beispiel nicht hinzugefügt, das jetzt aber nachgeholt. Die veränderten Styles werden nicht gepatched.

https://stackblitz.com/edit/vitejs-vite-h3y11f?file=src%2Freact.main.tsx,package.json,index.html,src%2FApp.tsx

Könnt ihr das Ticket bitte wieder öffnen?