🐞 Bug: patchTheme funktioniert nicht in Verbindung mit setTagNameTransformer

[Chrisdo82]

Link to the code that reproduces this issue:

https://stackblitz.com/edit/vitejs-vite-h3y11f

Can you categorise where the error occurs?

React

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

How to reproduce issue?

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';
import { setTagNameTransformer } from '@public-ui/react';

function transformTagName(customSuffix?: string) {
  return (tagName: string) => `${tagName}-test`;
}

export function updateKoliBriTheme() {
  KoliBriDevHelper.patchTheme('bmf', kolibriThemePatch);
}

export async function initialize(config?: { customSuffix?: string }) {
  setTagNameTransformer(transformTagName(config?.customSuffix));
  await bootstrap(BMF, [], {
    transformTagName: transformTagName(config?.customSuffix),
  }).then(updateKoliBriTheme);

  // https://github.com/ionic-team/stencil/issues/2847
  defineCustomElements(window, {
    transformTagName: transformTagName(config?.customSuffix),
  } as never);
}

await initialize().then(() => {
  const htmlElement: HTMLElement | null =
    document.querySelector<HTMLDivElement>('div#app');
  if (htmlElement instanceof HTMLElement) {
    const root = createRoot(htmlElement);
    root.render(
      <StrictMode>
        <App />
      </StrictMode>
    );
  }
});

Wenn wir die Registrierung wie in der Dokumentation angegeben nutzen, dann funktioniert es. Allerdings benötigen wir den setTagNameTransformer und den nutzen wir so wie im Beispiel Repo von euch angegeben. In Verbindung damit, wird das Theme nicht gepatched.

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]

da #6797 geschlossen wurde ohne dass ich darauf reagieren konnte, habe ich ein erneutes Ticket eröffnet.

[laske185]

Umsetzung muss in adopted-style-sheets in der patch-theme-Methode geschehen. Dort muss auch der Tagname-Transformer mit übergeben werden.

[deleonio]

@Chrisdo82 done - https://stackblitz.com/edit/vitejs-vite-sokywz?file=src%2Freact.main.tsx