@sitecore-feaas/clientside 0.5.11 → 0.5.13-alpha.1

package/src/components/FEAASComponent.tsx

@@ -236,6 +236,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
       this.needsToFetchTemplate = false
       var templatePromise = fetchAndRevalidateComponent(this.props, (html) => {
         this.payload = html
+        this.needsRefresh = true
         advanceIfEverythingIsReady()
       })
     } else {

package/src/ui/react.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactComponentElement } from 'react'
 import * as BYOC from '@sitecore/byoc/react'
 import { HTMLNode, parseHTMLContent, renderHTMLContent } from '../dom/html.js'
 import { DataSettings } from '../utils/settings.js'
@@ -18,6 +18,16 @@ export { External, FEAASExternalPropsObject, getComponent, linkComponents, regis
 export * from './index.js'
 export { renderHTMLContent }
 
+var ReactElementComponents: Record<string, React.Component | React.FC> = {}
+/**
+ * Set custom implementation for a HTML tag name. Useful for Next.js Image component, handling image optimization.
+ *
+ * @param Component
+ */
+export function setElementImplementation(tagName: string, Component: React.Component | React.FC) {
+  ReactElementComponents[tagName] = Component
+}
+
 type FEEASReactComponentFetch = string[] | string | null | undefined | boolean
 export function normalizeFetchAttribute(fetch: FEEASReactComponentFetch) {
   if (fetch == null || fetch === true) {
@@ -96,6 +106,10 @@ export function FEAASReactComponent({
       HTMLNodeToReact(
         node,
         (node, attributes) => {
+          // Override rendering of html tag if user provided
+          if (ReactElementComponents[node.localName]) {
+            return [ReactElementComponents[node.localName], attributes]
+          }
           if (node.localName == 'feaas-external') {
             const camelized = {} as any
             for (var prop in attributes) {

package/test/FEAASComponent.react.test.tsx

@@ -1,7 +1,14 @@
 import React, { useContext } from 'react'
 import ReactDOM from 'react-dom'
-import { describe, expect, it, spy } from 'vitest'
-import { Component, registerComponent, ExternalComponent } from '../src/ui/react.js'
+import { describe, expect, it, beforeEach, vi } from 'vitest'
+import {
+  Component,
+  ExternalComponent,
+  FEAASElement,
+  registerComponent,
+  setElementImplementation
+} from '../src/ui/react.js'
+import { afterEach } from 'node:test'
 
 function Hello(props: { firstName: string; telephone: string }) {
   const context = useContext(DataContext)
@@ -88,7 +95,7 @@ describe('React', () => {
   it('render react component', async () => {
     await validate(
       <section>
-        <Component src='library/test'></Component>
+        <Component src='library/test' />
       </section>,
       '<section><feaas-component class="-feaas" library="library" component="test" src="library/test"></feaas-component></section>'
     )
@@ -283,8 +290,8 @@ Typeof superobject object, {"a":1,"b":2})</div></feaas-external></feaas-componen
       '<section><feaas-component class="-feaas" library="a" component="b" src="a/b" fetch="template" data="{&quot;_&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;1&quot;:2}}}"></feaas-component></section>'
     )
 
-    await document.querySelector('feaas-component')?.whenRendered
-    await document.querySelector('feaas-external')?.whenRendered
+    await (document.querySelector('feaas-component') as FEAASElement)?.whenRendered
+    await (document.querySelector('feaas-external') as FEAASElement)?.whenRendered
 
     expect(document.querySelector('feaas-component').outerHTML).toEqual(
       '<feaas-component class="-feaas" library="a" component="b" src="a/b" fetch="template" data="{&quot;_&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;1&quot;:2}}}"><feaas-external data-external-id="MyTestDataComponent" first-name="Yarik" data-path-attributes="_" telephone="321" superobject="{&quot;1&quot;:2}" data-attributes-keys="telephone,superobject" datasources="{&quot;_&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;1&quot;:2}}}"><div>\n' +
@@ -312,4 +319,24 @@ Typeof superobject object, {"a":1,"b":2})</div></feaas-external></feaas-componen
         'And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
+
+  describe('setImageComponent', () => {
+    afterEach(() => {
+      setElementImplementation('img', null)
+    })
+    it('allow component customization', async () => {
+      const ImageComponent = (props: any) => React.createElement('x-img', props)
+      setElementImplementation('img', ImageComponent)
+      await validate(
+        <section>
+          <Component
+            src='library/test'
+            template={'<img data-path-src="abc" alt="test">'}
+            data={{ abc: 321 }}
+          ></Component>
+        </section>,
+        '<section><feaas-component class="-feaas" library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><x-img data-path-src="abc" alt="test" src="321"></x-img></feaas-component></section>'
+      )
+    })
+  })
 })

package/test/FEAASComponent.test.tsx

@@ -25,7 +25,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('CDN/components/L/C/V/R')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -43,7 +43,7 @@ describe('Components', () => {
     await expect(component.whenRendered).resolves.toEqual(component)
     expect(spy).toHaveBeenCalledTimes(1)
 
-    expect(component.innerHTML).toContain('FRESH')
+    expect(component.innerHTML).toContain('<p>FRESH</p>')
   })
 
   describe('fetch control', () => {
@@ -116,7 +116,7 @@ describe('Components', () => {
       const spy = vi.spyOn(global, 'fetch')
       spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
         if (url.match('CDN/components/L/C/V/R')) {
-          return new Response('FRESH', {
+          return new Response('<p>FRESH</p>', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -139,7 +139,7 @@ describe('Components', () => {
 
       await expect(component.whenRendered).resolves.toEqual(component)
       expect(spy).toHaveBeenCalledTimes(2)
-      expect(component.innerHTML).toBe('FRESH')
+      expect(component.innerHTML).toBe('<p>FRESH</p>')
       expect(document.head.querySelectorAll('style').length).toEqual(1)
     })
     it('should make data/css requests when fetch="stylesheet data"', async () => {
@@ -208,7 +208,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -226,7 +226,7 @@ describe('Components', () => {
     expect(spy).toHaveBeenCalledTimes(1)
 
     expect(component.outerHTML).toBe(
-      `<feaas-component fetch="template data" src="http://a/components/b/c/d/1.html" cdn="http://a" library="b" component="c" version="d" revision="1" class="-feaas">FRESH</feaas-component>`
+      `<feaas-component fetch="template data" src="http://a/components/b/c/d/1.html" cdn="http://a" library="b" component="c" version="d" revision="1" class="-feaas"><p>FRESH</p></feaas-component>`
     )
   })
 
@@ -234,7 +234,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -264,14 +264,14 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
           }
         })
       } else if (url.match('.css')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: /*String(options?.method).toLowerCase() == 'head' ? */ now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -293,7 +293,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -337,7 +337,7 @@ describe('Components', () => {
     const spy = vi.spyOn(global, 'fetch')
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (url.match('http://a/components/b/c/d/1.html')) {
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -355,7 +355,7 @@ describe('Components', () => {
         } else {
           if (String(options?.method).toLowerCase() == 'head') await new Promise((r) => setTimeout(r, 50))
           // respond with up to date
-          return new Response('FRESH', {
+          return new Response('<p>FRESH</p>', {
             headers: {
               date: now.toUTCString(),
               'last-modified': now.toUTCString()
@@ -416,7 +416,7 @@ describe('Components', () => {
     spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
       if (options.method != 'HEAD' && options['cache'] != 'reload') {
         // Here's cached component
-        return new Response('YESTERDAY', {
+        return new Response('<p>YESTERDAY</p>', {
           headers: {
             date: earlier.toUTCString(),
             'last-modified': earliest.toUTCString()
@@ -432,7 +432,7 @@ describe('Components', () => {
         })
       } else {
         // Up to date version
-        return new Response('FRESH', {
+        return new Response('<p>FRESH</p>', {
           headers: {
             date: now.toUTCString(),
             'last-modified': earlier.toUTCString()
@@ -447,13 +447,13 @@ describe('Components', () => {
     const component = document.body.firstElementChild as FEAASComponent
     // Renders cached version initially
     await expect(component.whenRendered).resolves.toEqual(component)
-    expect(component.innerHTML).toContain('YESTERDAY')
+    expect(component.innerHTML).toContain('<p>YESTERDAY</p>')
     expect(spy).toHaveBeenCalledTimes(2)
 
     // whenLoaded only fires when ensures that up-to-date version is loaded
     await expect(component.whenLoaded).resolves.toBeTruthy()
     expect(spy).toHaveBeenCalledTimes(3)
-    expect(component.innerHTML).toContain('FRESH')
+    expect(component.innerHTML).toContain('<p>FRESH</p>')
   })
 
   it('should re-fetch component when attributes change', async () => {
@@ -525,7 +525,7 @@ describe('Components', () => {
       } else {
         if (options.method != 'HEAD' && options['cache'] != 'reload') {
           // Here's cached component
-          return new Response('YESTERDAY', {
+          return new Response('<p>YESTERDAY</p>', {
             headers: {
               date: earlier.toUTCString(),
               'last-modified': earliest.toUTCString()
@@ -542,7 +542,7 @@ describe('Components', () => {
         } else {
           //  Latest
           await new Promise((resolve) => setTimeout(resolve, 100))
-          return new Response('FRESH', {
+          return new Response('<p>FRESH</p>', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -562,11 +562,11 @@ describe('Components', () => {
     await expect(component.whenRendered).resolves.toEqual(component)
     const stylesheet = document.head.querySelector('style') as HTMLStyleElement
     expect(stylesheet.innerHTML).toEqual('YESTERDAY {}')
-    expect(component.innerHTML).toEqual('YESTERDAY')
+    expect(component.innerHTML).toEqual('<p>YESTERDAY</p>')
     // Component will update itself with stale cached stylesheet
-    await expect(component.whenLoaded).resolves.toEqual('FRESH')
+    await expect(component.whenLoaded).resolves.toEqual('<p>FRESH</p>')
     expect(stylesheet.innerHTML).toEqual('YESTERDAY {}')
-    expect(component.innerHTML).toEqual('FRESH')
+    expect(component.innerHTML).toEqual('<p>FRESH</p>')
     await new Promise((resolve) => setTimeout(resolve, 200))
     // Stylesheet will update later
     expect(stylesheet.innerHTML).toEqual('FRESH {}')

package/test/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "types": ["react", "react-dom", "node"],
+    "types": ["react", "react-dom", "node", "vitest"],
     "rootDir": ".",
     "noEmit": true
   },

package/types/components/FEAASComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAgB,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY;;;;;;;;;;;;;;EAwCzD;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,cAAe,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC5E,SAAS,EAAE,GAAG,CAAK;IACnB,aAAa,yBAGZ;IAED,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,oBAAoB,EAAE,OAAO,CAAA;IAE7B,OAAO,CAAC,IAAI,EAAE,WAAW;IAIzB,QAAQ;;;;;;;;;;;;;;;IAIR,eAAe,CAAC,IAAI,EAAE,MAAM,oBAAoB;IAIhD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAuB1E,SAAS;IAef,SAAS,IAAI,GAAG;;IAmBhB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAyCV,eAAe,EAAE,OAAO,CAAA;IAExB,KAAK;IAML,MAAM;CAqBP;AAED,KAAK,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,CAAA;AAEtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,KAAK,CAAC,EAAE,MAAM,CAAA;gBACd,wBAAwB,CAAC,EAAE,OAAO,CAAA;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,KAAK,CAAC,EACF,GAAG,YAAY,IAAI,YAAY,IAAI,YAAY,EAAE,GACjD,GAAG,YAAY,IAAI,YAAY,EAAE,GACjC,GAAG,YAAY,EAAE,GACjB,EAAE,CAAA;aACP,GAAG,CACA;gBACE;;mBAEG;gBACH,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAgB,MAAM,sBAAsB,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY;;;;;;;;;;;;;;EAwCzD;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,cAAe,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC5E,SAAS,EAAE,GAAG,CAAK;IACnB,aAAa,yBAGZ;IAED,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,oBAAoB,EAAE,OAAO,CAAA;IAE7B,OAAO,CAAC,IAAI,EAAE,WAAW;IAIzB,QAAQ;;;;;;;;;;;;;;;IAIR,eAAe,CAAC,IAAI,EAAE,MAAM,oBAAoB;IAIhD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAuB1E,SAAS;IAef,SAAS,IAAI,GAAG;;IAmBhB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IA0CV,eAAe,EAAE,OAAO,CAAA;IAExB,KAAK;IAML,MAAM;CAqBP;AAED,KAAK,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,CAAA;AAEtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,KAAK,CAAC,EAAE,MAAM,CAAA;gBACd,wBAAwB,CAAC,EAAE,OAAO,CAAA;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,KAAK,CAAC,EACF,GAAG,YAAY,IAAI,YAAY,IAAI,YAAY,EAAE,GACjD,GAAG,YAAY,IAAI,YAAY,EAAE,GACjC,GAAG,YAAY,EAAE,GACjB,EAAE,CAAA;aACP,GAAG,CACA;gBACE;;mBAEG;gBACH,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}

package/types/components/FEAASElement.d.ts

@@ -281,7 +281,7 @@ export declare class FEAASElement<Props = any, Payload = any> extends WebCompone
         };
         contextType?: React.Context<any>;
     };
-    getReactElement(target?: FEAASElement, props?: any): JSX.Element;
+    getReactElement(target?: FEAASElement, props?: any): React.JSX.Element;
     getReactWrapper(target?: FEAASElement, displayName?: string): React.FunctionComponent<{}>;
     uid: string;
     getUID(): string;

package/types/ui/FEAASContext.d.ts

@@ -54,7 +54,7 @@ export declare class FEAASContext extends FEAASElement<FEAASContextProps, typeof
     onStatusChange: FEAASContextImports.SDKStatusCallback;
     whenSDKReady: ControlledPromise<FEAASContextImports.SDK>;
     getPortalRoot(): HTMLElement | ShadowRoot | FEAASElement<any, any>;
-    render({ children, library }: React.PropsWithChildren<FEAASContextProps>, { AppContext, Chakra: { Button, Tooltip }, React }: typeof this.payload): JSX.Element;
+    render({ children, library }: React.PropsWithChildren<FEAASContextProps>, { AppContext, Chakra: { Button, Tooltip }, React }: typeof this.payload): FEAASContextImports.React.JSX.Element;
 }
 declare global {
     namespace JSX {

package/types/ui/FEAASExternal.d.ts

@@ -23,7 +23,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     getProps(): FEAASExternalProps;
     static Preview(props: Partial<FEAASComponentProps<any>> & {
         src: string;
-    }): JSX.Element;
+    }): React.JSX.Element;
     static linkComponents(components: Promise<any>[]): () => any;
     static registered: BYOC.RegisteredComponents;
     static registerComponent: typeof BYOC.registerComponent;

package/types/ui/FEAASPicker.d.ts

@@ -51,7 +51,7 @@ export declare class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof F
     };
     load(): Promise<typeof FEAASPickerImports>;
     connectedCallback(): void;
-    render({ placeholder, context, mode, dialog, children, variant }: React.PropsWithChildren<FEAASPickerProps>, { Picker, React, useContext, EnvironmentContext, useLibrary, useSDK, BYOC }: typeof FEAASPickerImports): JSX.Element;
+    render({ placeholder, context, mode, dialog, children, variant }: React.PropsWithChildren<FEAASPickerProps>, { Picker, React, useContext, EnvironmentContext, useLibrary, useSDK, BYOC }: typeof FEAASPickerImports): FEAASPickerImports.React.JSX.Element;
 }
 declare global {
     namespace JSX {

package/types/ui/react.d.ts

@@ -6,6 +6,12 @@ export * from '../headless.js';
 export { External, FEAASExternalPropsObject, getComponent, linkComponents, registerComponent } from './FEAASExternal.js';
 export * from './index.js';
 export { renderHTMLContent };
+/**
+ * Set custom implementation for a HTML tag name. Useful for Next.js Image component, handling image optimization.
+ *
+ * @param Component
+ */
+export declare function setElementImplementation(tagName: string, Component: React.Component | React.FC): void;
 type FEEASReactComponentFetch = string[] | string | null | undefined | boolean;
 export declare function normalizeFetchAttribute(fetch: FEEASReactComponentFetch): any[];
 export type FEAASReactComponentProps = FEAASComponentProps & {
@@ -20,7 +26,7 @@ export type FEAASReactComponentProps = FEAASComponentProps & {
  * @param {FEAASCDNStylesheetParams | FEAASCDNStylesheetSource} props  - The properties for including the stylesheet.
  * @returns {JSX.Element} The <link> element for the stylesheet.
  */
-export declare const FEAASReactStylesheet: (props: FEAASCDNStylesheetParams | FEAASCDNStylesheetSource) => JSX.Element;
+export declare const FEAASReactStylesheet: (props: FEAASCDNStylesheetParams | FEAASCDNStylesheetSource) => React.JSX.Element;
 /**
  * An asynchronous wrapper over FEAAS.Component for use in React, especially suited for Next.js.
  * This component fetches HTML and data asynchronously for server-side rendering with data mapping.
@@ -28,7 +34,7 @@ export declare const FEAASReactStylesheet: (props: FEAASCDNStylesheetParams | FE
  * @param {FEAASReactComponentProps} props  - The properties for the component.
  * @returns {Promise<JSX.Element>} The JSX element representing the component.
  */
-export declare const FEAASReactServerComponent: ({ data, fetch, ...props }: FEAASReactComponentProps) => Promise<JSX.Element>;
+export declare const FEAASReactServerComponent: ({ data, fetch, ...props }: FEAASReactComponentProps) => Promise<React.JSX.Element>;
 /**
  * A wrapper over FEAAS.Component for use in React. It converts a passed template HTML into React,
  * allowing external components in the render tree. Data can be provided in JSON format.
@@ -38,7 +44,7 @@ export declare const FEAASReactServerComponent: ({ data, fetch, ...props }: FEAA
  */
 export declare function FEAASReactComponent({ data, lastModified, fetchedData, ...props }: FEAASReactComponentProps & {
     fetchedData?: any;
-}): JSX.Element;
+}): React.JSX.Element;
 /**
  * Converts an HTMLNode into a React tree, ensuring proper context access for external components.
  *
@@ -57,6 +63,6 @@ export declare const ExternalComponent: typeof BYOC.Component;
 export declare const ReactExternalComponent: typeof BYOC.RegularComponent;
 export declare const NextExternalComponent: typeof BYOC.NextComponent;
 export declare const Component: typeof FEAASReactComponent;
-export declare const ServerComponent: ({ data, fetch, ...props }: FEAASReactComponentProps) => Promise<JSX.Element>;
-export declare const Stylesheet: (props: FEAASCDNStylesheetParams | FEAASCDNStylesheetSource) => JSX.Element;
+export declare const ServerComponent: ({ data, fetch, ...props }: FEAASReactComponentProps) => Promise<React.JSX.Element>;
+export declare const Stylesheet: (props: FEAASCDNStylesheetParams | FEAASCDNStylesheetSource) => React.JSX.Element;
 //# sourceMappingURL=react.d.ts.map

package/types/ui/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EAOpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACxH,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,KAAK,wBAAwB,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC9E,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,wBAAwB,SAKtE;AAED,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,wBAAwB,GAAG,wBAAwB,gBAK9F,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,8BAAqC,wBAAwB,yBAqBlG,CAAA;AACD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAA;CAAE,eAiDlD;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC/G,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CA+BjB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAA;AACxD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAA;AACtD,eAAO,MAAM,8BAA8B,4CAAsC,CAAA;AACjF,eAAO,MAAM,oBAAoB,kCAA4B,CAAA;AAC7D,eAAO,MAAM,uBAAuB,oBAAc,CAAA;AAClD,eAAO,MAAM,iBAAiB,uBAAiB,CAAA;AAC/C,eAAO,MAAM,sBAAsB,8BAAwB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,2BAAqB,CAAA;AACvD,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,8BA3I+C,wBAAwB,yBA2I3C,CAAA;AACxD,eAAO,MAAM,UAAU,UA1JqB,wBAAwB,GAAG,wBAAwB,gBA0JjD,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EAOpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACxH,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAG5B;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,QAE9F;AAED,KAAK,wBAAwB,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC9E,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,wBAAwB,SAKtE;AAED,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,KAAK,CAAC,EAAE,wBAAwB,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,UAAW,wBAAwB,GAAG,wBAAwB,sBAK9F,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,8BAAqC,wBAAwB,+BAqBlG,CAAA;AACD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAA;CAAE,qBAqDlD;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,EACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC/G,GAAG,CAAC,EAAE,GAAG,GACR,KAAK,CAAC,SAAS,CA+BjB;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAA;AACxD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAA;AACtD,eAAO,MAAM,8BAA8B,4CAAsC,CAAA;AACjF,eAAO,MAAM,oBAAoB,kCAA4B,CAAA;AAC7D,eAAO,MAAM,uBAAuB,oBAAc,CAAA;AAClD,eAAO,MAAM,iBAAiB,uBAAiB,CAAA;AAC/C,eAAO,MAAM,sBAAsB,8BAAwB,CAAA;AAC3D,eAAO,MAAM,qBAAqB,2BAAqB,CAAA;AACvD,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,8BA/I+C,wBAAwB,+BA+I3C,CAAA;AACxD,eAAO,MAAM,UAAU,UA9JqB,wBAAwB,GAAG,wBAAwB,sBA8JjD,CAAA"}