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

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/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/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"}