Add tag name transformer feature to React adapter

example-project/component-library-react/src/components.ts

@@ -8,7 +8,7 @@
 /* eslint-disable */
 
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, tagNameTransformer } from '@stencil/react-output-target/runtime';
 import { type CheckboxChangeEventDetail, type IMyComponent, type InputChangeEventDetail, type MyCheckboxCustomEvent, type MyComponentCustomEvent, type MyInputCustomEvent, type MyPopoverCustomEvent, type MyRadioGroupCustomEvent, type MyRangeCustomEvent, type OverlayEventDetail, type RadioGroupChangeEventDetail, type RangeChangeEventDetail } from "component-library";
 import { MyButton as MyButtonElement, defineCustomElement as defineMyButton } from "component-library/components/my-button.js";
 import { MyCheckbox as MyCheckboxElement, defineCustomElement as defineMyCheckbox } from "component-library/components/my-checkbox.js";
@@ -38,7 +38,7 @@ export const MyButton: StencilReactComponent<MyButtonElement, MyButtonEvents> =
         onMyFocus: 'myFocus',
         onMyBlur: 'myBlur'
     } as MyButtonEvents,
-    defineCustomElement: defineMyButton
+    defineCustomElement: () => defineMyButton(tagNameTransformer),
 });
 
 type MyCheckboxEvents = {
@@ -57,7 +57,7 @@ export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEven
         onIonFocus: 'ionFocus',
         onIonBlur: 'ionBlur'
     } as MyCheckboxEvents,
-    defineCustomElement: defineMyCheckbox
+    defineCustomElement: () => defineMyCheckbox(tagNameTransformer),
 });
 
 type MyComponentEvents = {
@@ -74,7 +74,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
         onMyCustomEvent: 'myCustomEvent',
         onMyCustomNestedEvent: 'myCustomNestedEvent'
     } as MyComponentEvents,
-    defineCustomElement: defineMyComponent
+    defineCustomElement: () => defineMyComponent(tagNameTransformer),
 });
 
 type MyInputEvents = {
@@ -95,7 +95,7 @@ export const MyInput: StencilReactComponent<MyInputElement, MyInputEvents> = /*@
         onMyBlur: 'myBlur',
         onMyFocus: 'myFocus'
     } as MyInputEvents,
-    defineCustomElement: defineMyInput
+    defineCustomElement: () => defineMyInput(tagNameTransformer),
 });
 
 type MyListEvents = NonNullable<unknown>;
@@ -106,7 +106,7 @@ export const MyList: StencilReactComponent<MyListElement, MyListEvents> = /*@__P
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {} as MyListEvents,
-    defineCustomElement: defineMyList
+    defineCustomElement: () => defineMyList(tagNameTransformer),
 });
 
 type MyListItemEvents = NonNullable<unknown>;
@@ -117,7 +117,7 @@ export const MyListItem: StencilReactComponent<MyListItemElement, MyListItemEven
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {} as MyListItemEvents,
-    defineCustomElement: defineMyListItem
+    defineCustomElement: () => defineMyListItem(tagNameTransformer),
 });
 
 type MyPopoverEvents = {
@@ -138,7 +138,7 @@ export const MyPopover: StencilReactComponent<MyPopoverElement, MyPopoverEvents>
         onMyPopoverWillDismiss: 'myPopoverWillDismiss',
         onMyPopoverDidDismiss: 'myPopoverDidDismiss'
     } as MyPopoverEvents,
-    defineCustomElement: defineMyPopover
+    defineCustomElement: () => defineMyPopover(tagNameTransformer),
 });
 
 type MyRadioEvents = {
@@ -155,7 +155,7 @@ export const MyRadio: StencilReactComponent<MyRadioElement, MyRadioEvents> = /*@
         onIonFocus: 'ionFocus',
         onIonBlur: 'ionBlur'
     } as MyRadioEvents,
-    defineCustomElement: defineMyRadio
+    defineCustomElement: () => defineMyRadio(tagNameTransformer),
 });
 
 type MyRadioGroupEvents = { onMyChange: EventName<MyRadioGroupCustomEvent<RadioGroupChangeEventDetail>> };
@@ -166,7 +166,7 @@ export const MyRadioGroup: StencilReactComponent<MyRadioGroupElement, MyRadioGro
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: { onMyChange: 'myChange' } as MyRadioGroupEvents,
-    defineCustomElement: defineMyRadioGroup
+    defineCustomElement: () => defineMyRadioGroup(tagNameTransformer),
 });
 
 type MyRangeEvents = {
@@ -185,7 +185,7 @@ export const MyRange: StencilReactComponent<MyRangeElement, MyRangeEvents> = /*@
         onMyFocus: 'myFocus',
         onMyBlur: 'myBlur'
     } as MyRangeEvents,
-    defineCustomElement: defineMyRange
+    defineCustomElement: () => defineMyRange(tagNameTransformer),
 });
 
 type MyToggleEvents = NonNullable<unknown>;
@@ -196,7 +196,7 @@ export const MyToggle: StencilReactComponent<MyToggleElement, MyToggleEvents> =
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {} as MyToggleEvents,
-    defineCustomElement: defineMyToggle
+    defineCustomElement: () => defineMyToggle(tagNameTransformer),
 });
 
 type MyToggleContentEvents = NonNullable<unknown>;
@@ -207,5 +207,5 @@ export const MyToggleContent: StencilReactComponent<MyToggleContentElement, MyTo
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {} as MyToggleContentEvents,
-    defineCustomElement: defineMyToggleContent
+    defineCustomElement: () => defineMyToggleContent(tagNameTransformer),
 });

example-project/component-library-react/src/main.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import { setTagNameTransformer } from '@stencil/react-output-target/runtime';
+
+setTagNameTransformer((tagName: string) => tagName + '-modified');
+const App = lazy(() => import('./App'));
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

example-project/next-app/src/app/components.server.ts

@@ -9,7 +9,7 @@
 /* eslint-disable */
 
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent, createSSRComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, createSSRComponent, tagNameTransformer } from '@stencil/react-output-target/runtime';
 import { type CheckboxChangeEventDetail, type IMyComponent, type InputChangeEventDetail, type MyCheckboxCustomEvent, type MyComponentCustomEvent, type MyInputCustomEvent, type MyPopoverCustomEvent, type MyRadioGroupCustomEvent, type MyRangeCustomEvent, type OverlayEventDetail, type RadioGroupChangeEventDetail, type RangeChangeEventDetail } from "component-library";
 import { MyButton as MyButtonElement, defineCustomElement as defineMyButton } from "component-library/components/my-button.js";
 import { MyCheckbox as MyCheckboxElement, defineCustomElement as defineMyCheckbox } from "component-library/components/my-checkbox.js";
@@ -40,7 +40,7 @@ export const MyButton: StencilReactComponent<MyButtonElement, MyButtonEvents> =
             onMyFocus: 'myFocus',
             onMyBlur: 'myBlur'
         } as MyButtonEvents,
-        defineCustomElement: defineMyButton
+        defineCustomElement: () => defineMyButton(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyButtonElement, MyButtonEvents>({
         tagName: 'my-button',
@@ -79,7 +79,7 @@ export const MyCheckbox: StencilReactComponent<MyCheckboxElement, MyCheckboxEven
             onIonFocus: 'ionFocus',
             onIonBlur: 'ionBlur'
         } as MyCheckboxEvents,
-        defineCustomElement: defineMyCheckbox
+        defineCustomElement: () => defineMyCheckbox(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyCheckboxElement, MyCheckboxEvents>({
         tagName: 'my-checkbox',
@@ -112,7 +112,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
             onMyCustomEvent: 'myCustomEvent',
             onMyCustomNestedEvent: 'myCustomNestedEvent'
         } as MyComponentEvents,
-        defineCustomElement: defineMyComponent
+        defineCustomElement: () => defineMyComponent(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyComponentElement, MyComponentEvents>({
         tagName: 'my-component',
@@ -145,7 +145,7 @@ export const MyInput: StencilReactComponent<MyInputElement, MyInputEvents> = typ
             onMyBlur: 'myBlur',
             onMyFocus: 'myFocus'
         } as MyInputEvents,
-        defineCustomElement: defineMyInput
+        defineCustomElement: () => defineMyInput(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyInputElement, MyInputEvents>({
         tagName: 'my-input',
@@ -189,7 +189,7 @@ export const MyList: StencilReactComponent<MyListElement, MyListEvents> = typeof
         // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
         react: React,
         events: {} as MyListEvents,
-        defineCustomElement: defineMyList
+        defineCustomElement: () => defineMyList(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyListElement, MyListEvents>({
         tagName: 'my-list',
@@ -206,7 +206,7 @@ export const MyListItem: StencilReactComponent<MyListItemElement, MyListItemEven
         // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
         react: React,
         events: {} as MyListItemEvents,
-        defineCustomElement: defineMyListItem
+        defineCustomElement: () => defineMyListItem(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyListItemElement, MyListItemEvents>({
         tagName: 'my-list-item',
@@ -233,7 +233,7 @@ export const MyPopover: StencilReactComponent<MyPopoverElement, MyPopoverEvents>
             onMyPopoverWillDismiss: 'myPopoverWillDismiss',
             onMyPopoverDidDismiss: 'myPopoverDidDismiss'
         } as MyPopoverEvents,
-        defineCustomElement: defineMyPopover
+        defineCustomElement: () => defineMyPopover(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyPopoverElement, MyPopoverEvents>({
         tagName: 'my-popover',
@@ -265,7 +265,7 @@ export const MyRadio: StencilReactComponent<MyRadioElement, MyRadioEvents> = typ
             onIonFocus: 'ionFocus',
             onIonBlur: 'ionBlur'
         } as MyRadioEvents,
-        defineCustomElement: defineMyRadio
+        defineCustomElement: () => defineMyRadio(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyRadioElement, MyRadioEvents>({
         tagName: 'my-radio',
@@ -290,7 +290,7 @@ export const MyRadioGroup: StencilReactComponent<MyRadioGroupElement, MyRadioGro
         // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
         react: React,
         events: { onMyChange: 'myChange' } as MyRadioGroupEvents,
-        defineCustomElement: defineMyRadioGroup
+        defineCustomElement: () => defineMyRadioGroup(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyRadioGroupElement, MyRadioGroupEvents>({
         tagName: 'my-radio-group',
@@ -320,7 +320,7 @@ export const MyRange: StencilReactComponent<MyRangeElement, MyRangeEvents> = typ
             onMyFocus: 'myFocus',
             onMyBlur: 'myBlur'
         } as MyRangeEvents,
-        defineCustomElement: defineMyRange
+        defineCustomElement: () => defineMyRange(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyRangeElement, MyRangeEvents>({
         tagName: 'my-range',
@@ -350,7 +350,7 @@ export const MyToggle: StencilReactComponent<MyToggleElement, MyToggleEvents> =
         // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
         react: React,
         events: {} as MyToggleEvents,
-        defineCustomElement: defineMyToggle
+        defineCustomElement: () => defineMyToggle(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyToggleElement, MyToggleEvents>({
         tagName: 'my-toggle',
@@ -367,7 +367,7 @@ export const MyToggleContent: StencilReactComponent<MyToggleContentElement, MyTo
         // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
         react: React,
         events: {} as MyToggleContentEvents,
-        defineCustomElement: defineMyToggleContent
+        defineCustomElement: () => defineMyToggleContent(tagNameTransformer),
     })
     : /*@__PURE__*/ createSSRComponent<MyToggleContentElement, MyToggleContentEvents>({
         tagName: 'my-toggle-content',

packages/react/src/react-output-target/create-component-wrappers.test.ts

@@ -39,7 +39,7 @@ describe('createComponentWrappers', () => {
 /* eslint-disable */
 
 import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, tagNameTransformer } from '@stencil/react-output-target/runtime';
 import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "my-package/dist/custom-elements/my-component.js";
 import React from 'react';
 
@@ -51,7 +51,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {} as MyComponentEvents,
-    defineCustomElement: defineMyComponent
+    defineCustomElement: () => defineMyComponent(tagNameTransformer),
 });
 
 `);
@@ -93,7 +93,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
 /* eslint-disable */
 
 import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, tagNameTransformer } from '@stencil/react-output-target/runtime';
 import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "my-package/dist/custom-elements/my-component.js";
 import React from 'react';
 
@@ -105,7 +105,7 @@ const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents>
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {} as MyComponentEvents,
-    defineCustomElement: defineMyComponent
+    defineCustomElement: () => defineMyComponent(tagNameTransformer),
 });
 
 export default MyComponent;
@@ -207,7 +207,7 @@ export default MyComponent;
 /* eslint-disable */
 
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, tagNameTransformer } from '@stencil/react-output-target/runtime';
 import { type MyComponentCustomEvent } from "my-package";
 import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "my-package/dist/custom-elements/my-component.js";
 import React from 'react';
@@ -220,7 +220,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: { onMyEvent: 'myEvent' } as MyComponentEvents,
-    defineCustomElement: defineMyComponent
+    defineCustomElement: () => defineMyComponent(tagNameTransformer),
 });
 
     `);

packages/react/src/react-output-target/create-stencil-react-components.ts

@@ -50,7 +50,7 @@ export const createStencilReactComponents = ({
     'component.ts',
     `${useClientDirective}${autogeneratedComment}${disableEslint}
 import React from 'react';
-import { ${runtimeImports} } from '@stencil/react-output-target/runtime';
+import { ${runtimeImports}, tagNameTransformer } from '@stencil/react-output-target/runtime';
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
   `
   );
@@ -151,7 +151,7 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
     // @ts-ignore - React type of Stencil Output Target may differ from the React version used in the Nuxt.js project, this can be ignored.
     react: React,
     events: {${events.map((e) => `${e.name}: '${e.originalName}'`).join(',\n')}} as ${componentEventNamesType},
-    defineCustomElement: define${reactTagName}
+    defineCustomElement: () => define${reactTagName}(tagNameTransformer),
   })`;
     const serverComponentCall = `/*@__PURE__*/ createSSRComponent<${componentElement}, ${componentEventNamesType}>({
     tagName: '${tagName}',

packages/react/src/react/create-component.ts

@@ -2,6 +2,7 @@ import type { EventName, Options } from '@lit/react';
 import { createComponent as createComponentWrapper, type ReactWebComponent, WebComponentProps } from '@lit/react';
 
 import type { RenderToString } from './ssr';
+import { tagNameTransformer } from './tagNameTransformer';
 
 // A key value map matching React prop names to event names.
 type EventNames = Record<string, EventName | string>;
@@ -18,6 +19,11 @@ export const createComponent = <I extends HTMLElement, E extends EventNames = {}
   if (typeof defineCustomElement !== 'undefined') {
     defineCustomElement();
   }
+
+  if (typeof tagNameTransformer === 'function') {
+    options.tagName = tagNameTransformer(options.tagName);
+  }
+
   return createComponentWrapper<I, E>(options);
 };
 

packages/react/src/react/index.ts

@@ -1,2 +1,3 @@
 export type { EventName, Options } from '@lit/react';
 export { createComponent, createSSRComponent, type StencilReactComponent } from './create-component';
+export { setTagNameTransformer, tagNameTransformer } from './tagNameTransformer';

packages/react/src/react/tagNameTransformer.ts

@@ -0,0 +1,6 @@
+type TagNameTransformer = (tagName: string) => string;
+
+export let tagNameTransformer: TagNameTransformer | undefined;
+export const setTagNameTransformer = (_tagNameTransformer: TagNameTransformer) => {
+  tagNameTransformer = _tagNameTransformer;
+};