@sitecore-feaas/clientside 0.5.16-alpha.1 → 0.5.18

package/src/dom/thumbnail.ts

@@ -219,7 +219,7 @@ function render(
               scale: Math.max(1.1, 1000 / Math.min(1401, Math.max(320, breakpoint.props.minWidth))),
               width: Math.min(1401, Math.max(320, breakpoint.props.minWidth)),
               height: Math.max(1, Math.min(2000, root.offsetHeight)),
-              windowWidth: breakpoint.props.minWidth + 'px',
+              windowWidth: breakpoint.props.minWidth || breakpoint.props.maxWidth + 'px',
               windowHeight: 1000,
               proxy: sdk.backend + '/proxy/media',
               backgroundColor: '#ffffff'

package/src/ui/FEAASExternal.tsx

@@ -49,7 +49,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     if (!Component) {
       console.warn(`FEAASExternal: \`${this.getComponentName()}\` is not registered`)
     }
-    return <>{Component && <Component componentName={this.getComponentName()} {...props} />}</>
+    return <>{Component && <Component componentName={this.getComponentName()} {...this.getProps()} />}</>
   }
 
   getComponentName() {

package/src/ui/FEAASPicker.tsx

@@ -51,7 +51,7 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
     const library = useLibrary()
     // @ts-ignore temporary workaround until we release all environments
     const rules = library.stylesheets?.first?.rules || library?.stylesheet?.styles
-    const externalComponents = useSDK('externalComponents')
+    const expandedComponents = useSDK('renderingHost.expandedComponents')
     var settings = context?.getAttribute('data')
     if (settings) {
       try {
@@ -74,7 +74,7 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
         themeContext={context}
         placeholder={placeholder}
         embed={externalComponent}
-        externalComponents={externalComponents}
+        externalComponents={expandedComponents}
         datasources={datasources}
         data={settings}
         versionId={context?.getAttribute('version')}

package/src/ui/react.tsx

@@ -24,7 +24,10 @@ var ReactElementComponents: Record<string, React.Component | React.FC> = {}
  *
  * @param Component
  */
-export function setElementImplementation(tagName: string, Component: React.Component | React.FC) {
+export function setElementImplementation(
+  tagName: string,
+  Component: React.Component<Record<string, string>> | React.FC<Record<string, string>>
+) {
   ReactElementComponents[tagName] = Component
 }
 
@@ -40,6 +43,7 @@ export type FEAASReactComponentProps = FEAASComponentProps & {
   fetch?: FEEASReactComponentFetch
   preload?: boolean
   lastModified?: Date | string
+  renderNode?: (node: HTMLNode, attributes: Record<string, any>) => JSX.Element | Record<string, any> | null
 }
 
 /**
@@ -96,6 +100,7 @@ export function FEAASReactComponent({
   data,
   lastModified,
   fetchedData,
+  renderNode,
   ...props
 }: FEAASReactComponentProps & { fetchedData?: any }) {
   let preload = null
@@ -106,6 +111,17 @@ export function FEAASReactComponent({
       HTMLNodeToReact(
         node,
         (node, attributes) => {
+          // invoke customization of HTML node rendering
+          if (renderNode) {
+            const override = renderNode?.(node, attributes)
+            if (override != null && 'type' in override) {
+              return [override.type, override.props]
+            }
+            attributes = {
+              ...attributes,
+              ...override
+            }
+          }
           // Override rendering of html tag if user provided
           if (ReactElementComponents[node.localName]) {
             return [ReactElementComponents[node.localName], attributes]
@@ -197,10 +213,11 @@ export function HTMLNodeToReact(
     attributes.dangerouslySetInnerHTML = { __html: children.join('\n') }
   }
   const reactAttributes = Object.assign({ key, suppressHydrationWarning: true }, reactNode?.[1] || attributes)
+  const reactChildren = reactNode?.[1]?.children || children
   return React.createElement(
     reactName,
     reactAttributes,
-    ['img', 'br', 'input', 'style'].includes(reactName) ? null : children
+    ['img', 'br', 'input', 'style'].includes(reactName) ? null : reactChildren
   )
 }
 

package/test/FEAASComponent.react.test.tsx

@@ -338,4 +338,58 @@ Typeof superobject object, {"a":1,"b":2})</div></feaas-external></feaas-componen
       )
     })
   })
+  describe('renderNode', () => {
+    it(' should replace elements', async () => {
+      validate(
+        <section>
+          <Component
+            template={'<div data-path-src="abc">'}
+            data={{ abc: 321 }}
+            renderNode={(node, attributes) => {
+              if (node.localName == 'div') {
+                return <h2 data-as='div' {...attributes} />
+              }
+            }}
+          ></Component>
+        </section>,
+        '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><h2 data-as="div" data-path-src="abc"></h2></feaas-component></section>'
+      )
+    })
+    it(' should replace parent elements', async () => {
+      validate(
+        <section>
+          <Component
+            template={'<div data-path-src="abc"><span>123</span></h2></div>'}
+            data={{ abc: 321 }}
+            renderNode={(node, attributes) => {
+              if (node.localName == 'div') {
+                return <h2 data-as='div' {...attributes} />
+              }
+            }}
+          ></Component>
+        </section>,
+        '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><h2 data-as="div" data-path-src="abc"><span>123</span></h2></feaas-component></section>'
+      )
+    })
+    it(' should replace children elements', async () => {
+      validate(
+        <section>
+          <Component
+            template={'<div data-path-src="abc"><span>123</span></h2></div>'}
+            data={{ abc: 321 }}
+            renderNode={(node, attributes) => {
+              if (node.localName == 'div') {
+                return (
+                  <h2 data-as='div' {...attributes}>
+                    Replacement
+                  </h2>
+                )
+              }
+            }}
+          ></Component>
+        </section>,
+        '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><h2 data-as="div" data-path-src="abc">Replacement</h2></feaas-component></section>'
+      )
+    })
+  })
 })

package/types/ui/react.d.ts

@@ -12,13 +12,14 @@ export { renderHTMLContent };
  *
  * @param Component
  */
-export declare function setElementImplementation(tagName: string, Component: React.Component | React.FC): void;
+export declare function setElementImplementation(tagName: string, Component: React.Component<Record<string, string>> | React.FC<Record<string, string>>): void;
 type FEEASReactComponentFetch = string[] | string | null | undefined | boolean;
 export declare function normalizeFetchAttribute(fetch: FEEASReactComponentFetch): any[];
 export type FEAASReactComponentProps = FEAASComponentProps & {
     fetch?: FEEASReactComponentFetch;
     preload?: boolean;
     lastModified?: Date | string;
+    renderNode?: (node: HTMLNode, attributes: Record<string, any>) => JSX.Element | Record<string, any> | null;
 };
 /**
  * A component to include a stylesheet using a <link> tag. Placing one in the HEAD ensures that there will be no flash
@@ -43,7 +44,7 @@ export declare const FEAASReactServerComponent: ({ data, fetch, ...props }: FEAA
  * @param {FEAASReactComponentProps} props  - The properties for the component.
  * @returns {JSX.Element} The JSX element representing the component.
  */
-export declare function FEAASReactComponent({ data, lastModified, fetchedData, ...props }: FEAASReactComponentProps & {
+export declare function FEAASReactComponent({ data, lastModified, fetchedData, renderNode, ...props }: FEAASReactComponentProps & {
     fetchedData?: any;
 }): React.JSX.Element;
 /**

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,IAAI,MAAM,sBAAsB,CAAA;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,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,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACvF,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,CAsCjB;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,8BAtJ+C,wBAAwB,+BAsJ3C,CAAA;AACxD,eAAO,MAAM,UAAU,UArKqB,wBAAwB,GAAG,wBAAwB,sBAqKjD,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAA;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,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,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACvF,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAG5B;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAGtF;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;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAA;CAC3G,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,UAAU,EACV,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAA;CAAE,qBAgElD;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,CAuCjB;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,8BAnK+C,wBAAwB,+BAmK3C,CAAA;AACxD,eAAO,MAAM,UAAU,UAlLqB,wBAAwB,GAAG,wBAAwB,sBAkLjD,CAAA"}