@sitecore-feaas/clientside 0.3.11-alpha.0 → 0.3.11-alpha.1

package/src/ui/FEAASExternal.tsx

@@ -124,7 +124,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
   update() {
     const { dataExternalId: id } = this.props
     const Component = FEAASExternal.registered[id]?.component
-    if (!Component && this.childNodes.length > 0) return
+    if (!Component && this.getAttribute('hydrate') == 'false') return
     return super.update()
   }
 
@@ -132,7 +132,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     const { dataExternalId: id } = props
     const Component = FEAASExternal.registered[id]?.component
     if (!Component) {
-      console.warn('FEAASExternal: The component you requested is not registered')
+      console.warn(`FEAASExternal: \`${id}\` is not registered`)
     }
     return <>{Component && <Component {...props} />}</>
   }
@@ -278,6 +278,10 @@ declare global {
         dangerouslySetInnerHTML?: { __html: string }
         [key: string]: any
       }
+      'feaas-registration': {
+        suppressHydrationWarning?: boolean
+        components: string
+      }
     }
   }
 }

package/src/ui/react.tsx

@@ -10,7 +10,7 @@ import {
 import React from 'react'
 import { renderHTMLContent, HTMLNode, parseHTMLContent } from '../dom/html.js'
 import { DataSettings } from '../utils/settings.js'
-import { FEAASExternalPropsObject, getComponent, objectKeysToKebabCase } from './FEAASExternal.js'
+import { External, FEAASExternalPropsObject, getComponent, objectKeysToKebabCase } from './FEAASExternal.js'
 import { reverseKebabCase } from '../utils/string.js'
 export { renderHTMLContent }
 export { External, linkComponents, registerComponent, getComponent, FEAASExternalPropsObject } from './FEAASExternal.js'
@@ -58,7 +58,7 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
               const key = prop == 'data-external-id' ? 'componentName' : reverseKebabCase(prop)
               camelized[key] = attributes[prop]
             }
-            return [NextDynamicFunction ? FEAASNextExternalComponent : FEAASReactExternalComponent, camelized]
+            return [FEAASExternalComponent, camelized]
           }
         },
         index
@@ -94,7 +94,12 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
 export function FEAASReactExternalComponent(props: FEAASReactExternalComponentProps) {
   const { componentName, fallback, ...attributes } = props
   const Component = getComponent(componentName)?.component
-  if (!Component && fallback) return fallback
+  if ((!Component && fallback) || !componentName)
+    return (
+      <feaas-external data-external-id={componentName} suppressHydrationWarning hydrate={'false'}>
+        {fallback}
+      </feaas-external>
+    )
   const parsed = FEAASExternalPropsObject(componentName, attributes)
   delete parsed['suppressHydrationWarning']
   // execute component as a function to supress hydration errors inside
@@ -104,7 +109,7 @@ export function FEAASReactExternalComponent(props: FEAASReactExternalComponentPr
         {...objectKeysToKebabCase(parsed)}
         data-external-id={componentName}
         suppressHydrationWarning
-        hydrate={Component ? 'false' : null}
+        hydrate={'false'}
       >
         {Component == null ? null : <Component {...parsed} />}
       </feaas-external>
@@ -176,7 +181,19 @@ export function enableNextClientsideComponents(dynamic: any, component: any) {
   return component
 }
 
-export const ExternalComponent = FEAASReactExternalComponent
+export function FEAASExternalComponent(props: FEAASReactExternalComponentProps) {
+  if (Object.keys(props).length == 0) {
+    // Serializing server-side registrations to clientside
+    return (
+      <feaas-registration components={JSON.stringify(Object.values(External.registered))} suppressHydrationWarning />
+    )
+  }
+  if (NextDynamicFunction) return FEAASNextExternalComponent(props)
+  return FEAASReactExternalComponent(props)
+}
+
+export const ExternalComponent = FEAASExternalComponent
+export const ReactExternalComponent = FEAASReactExternalComponent
 export const NextExternalComponent = FEAASNextExternalComponent
 export const Component = FEAASReactComponent
 export const ServerComponent = FEAASReactServerComponent

package/types/ui/FEAASExternal.d.ts

@@ -101,6 +101,10 @@ declare global {
                 };
                 [key: string]: any;
             };
+            'feaas-registration': {
+                suppressHydrationWarning?: boolean;
+                components: string;
+            };
         }
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FEAASExternal.d.ts","sourceRoot":"","sources":["../../src/ui/FEAASExternal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAE3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,UAAU,EAAY,MAAM,qBAAqB,CAAA;AAiB5G,oDAAoD;AACpD,eAAO,MAAM,qBAAqB;;;;CAI1B,CAAA;AAoCR,yGAAyG;AACzG,eAAO,MAAM,UAAU,aAAc,MAAM,SAAS,MAAM,cAAc,UAAU,CAAC,YAAY,CAAC,QAyB/F,CAAA;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,GAAG,CAK7D;AAED,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,GAAG,CAUvF;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,EAAE,EAAE,MAAM,GAAG,iBAAiB,CAAA;CAChC,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnG,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,MAAM,CAAC,UAAU,EAAE,oBAAoB,CAAK;IAC5C,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAA;IAC3C,IAAI;;;;IAIJ,MAAM;IAON,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IASpE,QAAQ;IAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,MAAM,CAAC,iBAAiB,CACtB,SAAS,EAAE,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,EAClF,OAAO,EAAE,wBAAwB;IAsBnC,MAAM,CAAC,uBAAuB;IAsC9B,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAMzE,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;IAI5D,MAAM,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM;CAG/B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,gBAAgB,EAAE;gBAChB,kBAAkB,EAAE,MAAM,CAAA;gBAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;aACnB,CAAA;SACF;KACF;CACF;AAKD,eAAO,MAAQ,YAAY,qCAAE,cAAc,uCAAE,iBAAiB,wCAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"FEAASExternal.d.ts","sourceRoot":"","sources":["../../src/ui/FEAASExternal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAA;AAE3E,OAAO,EAAa,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,UAAU,EAAY,MAAM,qBAAqB,CAAA;AAiB5G,oDAAoD;AACpD,eAAO,MAAM,qBAAqB;;;;CAI1B,CAAA;AAoCR,yGAAyG;AACzG,eAAO,MAAM,UAAU,aAAc,MAAM,SAAS,MAAM,cAAc,UAAU,CAAC,YAAY,CAAC,QAyB/F,CAAA;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,GAAG,CAK7D;AAED,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,GAAG,CAUvF;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,EAAE,EAAE,MAAM,GAAG,iBAAiB,CAAA;CAChC,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnG,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,YAAY,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACvF,MAAM,CAAC,UAAU,EAAE,oBAAoB,CAAK;IAC5C,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAA;IAC3C,IAAI;;;;IAIJ,MAAM;IAON,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IASpE,QAAQ;IAIR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDG;IACH,MAAM,CAAC,iBAAiB,CACtB,SAAS,EAAE,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,EAClF,OAAO,EAAE,wBAAwB;IAsBnC,MAAM,CAAC,uBAAuB;IAsC9B,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAMzE,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG;IAI5D,MAAM,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM;CAG/B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,gBAAgB,EAAE;gBAChB,kBAAkB,EAAE,MAAM,CAAA;gBAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;aACnB,CAAA;YACD,oBAAoB,EAAE;gBACpB,wBAAwB,CAAC,EAAE,OAAO,CAAA;gBAClC,UAAU,EAAE,MAAM,CAAA;aACnB,CAAA;SACF;KACF;CACF;AAKD,eAAO,MAAQ,YAAY,qCAAE,cAAc,uCAAE,iBAAiB,wCAAkB,CAAA;AAChF,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}

package/types/ui/react.d.ts

@@ -17,12 +17,14 @@ export type FEAASReactComponentProps = FEAASComponentProps & {
 export declare const FEAASReactStylesheet: (props: FEAASStylesheetProps) => JSX.Element;
 export declare const FEAASReactServerComponent: ({ ...props }: FEAASReactComponentProps) => Promise<JSX.Element>;
 export declare function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps): JSX.Element;
-export declare function FEAASReactExternalComponent(props: FEAASReactExternalComponentProps): any;
+export declare function FEAASReactExternalComponent(props: FEAASReactExternalComponentProps): JSX.Element;
 /** Turn HTMLNode into React tree. It accepts callback to customize the behavior */
 export declare function HTMLNodeToReact(node: HTMLNode, callback?: (node: HTMLNode, attributes: Record<string, any>) => [tagName: any, attributes: Record<string, any>], key?: any): React.ReactNode;
 export declare function FEAASNextExternalComponent(props: FEAASReactExternalComponentProps): JSX.Element;
 export declare function enableNextClientsideComponents(dynamic: any, component: any): any;
-export declare const ExternalComponent: typeof FEAASReactExternalComponent;
+export declare function FEAASExternalComponent(props: FEAASReactExternalComponentProps): JSX.Element;
+export declare const ExternalComponent: typeof FEAASExternalComponent;
+export declare const ReactExternalComponent: typeof FEAASReactExternalComponent;
 export declare const NextExternalComponent: typeof FEAASNextExternalComponent;
 export declare const Component: typeof FEAASReactComponent;
 export declare const ServerComponent: ({ ...props }: FEAASReactComponentProps) => Promise<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,EACL,mBAAmB,EAMnB,oBAAoB,EACrB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAoB,MAAM,gBAAgB,CAAA;AAI9E,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AACxH,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAE9B,MAAM,MAAM,gCAAgC,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAE7G,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,oBAAoB,UAAW,oBAAoB,gBAE/D,CAAA;AAED,eAAO,MAAM,yBAAyB,iBAAwB,wBAAwB,yBAarF,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,eA8C/E;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,OAmBlF;AAED,mFAAmF;AACnF,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;AAKD,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,gCAAgC,eAgBjF;AACD,wBAAgB,8BAA8B,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,OAI1E;AAED,eAAO,MAAM,iBAAiB,oCAA8B,CAAA;AAC5D,eAAO,MAAM,qBAAqB,mCAA6B,CAAA;AAC/D,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,iBAvJkC,wBAAwB,yBAuJ9B,CAAA;AACxD,eAAO,MAAM,UAAU,UA5JqB,oBAAoB,gBA4JlB,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/ui/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EAMnB,oBAAoB,EACrB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAoB,MAAM,gBAAgB,CAAA;AAI9E,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AACxH,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAE9B,MAAM,MAAM,gCAAgC,GAAG;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAA;AAE7G,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,oBAAoB,UAAW,oBAAoB,gBAE/D,CAAA;AAED,eAAO,MAAM,yBAAyB,iBAAwB,wBAAwB,yBAarF,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,eA8C/E;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAwBlF;AAED,mFAAmF;AACnF,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;AAKD,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,gCAAgC,eAgBjF;AACD,wBAAgB,8BAA8B,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,OAI1E;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gCAAgC,eAS7E;AAED,eAAO,MAAM,iBAAiB,+BAAyB,CAAA;AACvD,eAAO,MAAM,sBAAsB,oCAA8B,CAAA;AACjE,eAAO,MAAM,qBAAqB,mCAA6B,CAAA;AAC/D,eAAO,MAAM,SAAS,4BAAsB,CAAA;AAC5C,eAAO,MAAM,eAAe,iBAxKkC,wBAAwB,yBAwK9B,CAAA;AACxD,eAAO,MAAM,UAAU,UA7KqB,oBAAoB,gBA6KlB,CAAA"}