@sitecore/byoc - npm Package Compare versions

Comparing version 0.2.3 to 0.2.5

build/react.js

@@ -30,9 +30,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     const Component = (_a = getComponent(componentName)) === null || _a === void 0 ? void 0 : _a.component;
+    // Render component as is on the server
+    const Regular = React.useMemo(() => React.createElement(RegularComponent, Object.assign({}, attributes, { componentName: componentName })), []);
     // maintain identity of wrapped component
     const External = React.useMemo(() => NextDynamicFunction(() => Promise.resolve(NextClientsideRenderer), {
         ssr: false,
-        loading: () => React.createElement(RegularComponent, Object.assign({}, attributes, { componentName: componentName }))
+        // Show server-rendered component during page load
+        loading: () => Regular
     }), []);
-    return (React.createElement(External, Object.assign({}, props, { fallback: Component ? (React.createElement(Component, Object.assign({}, props))) : // wrap clientFallback into a dynamic() call to make it render clientside hydration
-            clientFallback ? (React.createElement(NextDynamicFunction(() => Promise.resolve(() => clientFallback), { ssr: false }))) : (props.fallback) })));
+    // remove functions from props to avoid them to be passed from server to client which is illegal
+    var sanitizedAttributes = typeof window == 'undefined' ? JSON.parse(JSON.stringify(attributes)) : attributes;
+    return (React.createElement(External, Object.assign({}, sanitizedAttributes, { componentName: componentName, fallbackWrapper: !Component, fallback: Component
+            ? // If there's no client component, keep the server-rendered component displayed
+                Regular
+            : // wrap clientFallback into a dynamic() call to make it render clientside hydration
+                clientFallback
+                    ? React.createElement(NextDynamicFunction(() => Promise.resolve(() => clientFallback), { ssr: false }))
+                    : props.fallback })));
 }
@@ -79,38 +89,59 @@ /**
 /**
- * A wrapper over External component that accepts a fallback for rendering in case of a missing component.
- * It accepts properties in camelcase format and ensures no hydration errors on the client-side.
+ * Retrieves properties for a component, including context properties component's defaults
  *
- * @param {ComponentProps} props  - The properties for the component.
- * @returns {JSX.Element} The JSX element representing the component.
+ * @param props - The component props.
+ * @returns An object containing the attributes, properties, and merged properties.
  */
-export function RegularComponent(props) {
-    const { componentName, className, clientFallback, fallback, suppressHydrationWarning, _dynamic, datasources } = props, attributes = __rest(props, ["componentName", "className", "clientFallback", "fallback", "suppressHydrationWarning", "_dynamic", "datasources"]);
-    const definition = getComponent(componentName);
-    const Component = definition === null || definition === void 0 ? void 0 : definition.component;
-    const parsed = getComponentProperties(componentName, attributes);
+export function getMergedComponentProperties(props) {
+    const { componentName, className, fallbackWrapper, fallback, suppressHydrationWarning, _dynamic, datasources } = props, givenProps = __rest(props, ["componentName", "className", "fallbackWrapper", "fallback", "suppressHydrationWarning", "_dynamic", "datasources"]);
     const dataProperties = Object.values(datasources || {}).find((v) => v && !Array.isArray(v));
-    const componentProperties = Object.assign(Object.assign(Object.assign({ 'data-external-id': componentName }, objectKeysToKebabCase(dataProperties)), objectKeysToKebabCase(parsed)), { datasources, suppressHydrationWarning: true, class: className });
+    const properties = Object.assign(Object.assign(Object.assign({}, dataProperties), getComponentProperties(componentName, givenProps)), (datasources ? { datasources } : {}));
+    const attributes = Object.assign(Object.assign({ 'data-external-id': componentName }, objectKeysToKebabCase(properties)), { suppressHydrationWarning: true, class: className });
     serializedContextProperties.forEach((key) => {
-        Object.assign(componentProperties, { [toKebabCase(key)]: contextProperties[key] });
+        Object.assign(attributes, { [toKebabCase(key)]: contextProperties[key] });
     });
     // serialize json properties
-    Object.keys(componentProperties).forEach((key) => {
-        const value = componentProperties[key];
+    Object.keys(attributes).forEach((key) => {
+        const value = attributes[key];
         if (value && typeof value == 'object' && key != 'class' && key != 'children') {
             try {
-                Object.assign(componentProperties, { [key]: JSON.stringify(value) });
+                Object.assign(attributes, { [key]: JSON.stringify(value) });
             }
             catch (e) {
-                delete componentProperties[key];
+                delete attributes[key];
             }
         }
         if (typeof value == 'function' || value == null) {
-            delete componentProperties[key];
+            delete attributes[key];
         }
     });
-    if ((!Component && fallback) || !componentName)
-        return (React.createElement("feaas-external", Object.assign({}, componentProperties, { hydrate: 'false' }), fallback));
+    return {
+        /** HTML attributes in kebab case, including strings and explicitly passed objects in json format */
+        attributes,
+        /** React properties combined with datasources */
+        properties,
+        /** React properties combined with datasources and context properties */
+        merged: Object.assign(Object.assign({}, contextProperties), properties)
+    };
+}
+/**
+ * A wrapper over External component that accepts a fallback for rendering in case of a missing component.
+ * It accepts properties in camelcase format and ensures no hydration errors on the client-side.
+ *
+ * @param {ComponentProps} props  - The properties for the component.
+ * @returns {JSX.Element} The JSX element representing the component.
+ */
+export function RegularComponent(props) {
+    const { componentName, fallback, fallbackWrapper } = props;
+    const definition = getComponent(componentName);
+    const Component = definition === null || definition === void 0 ? void 0 : definition.component;
+    const { attributes, properties, merged } = getMergedComponentProperties(props);
+    if ((!Component && fallback) || !componentName) {
+        if (fallbackWrapper === false)
+            return React.createElement(React.Fragment, null, fallback);
+        return (React.createElement("feaas-external", Object.assign({}, attributes, { hydrate: 'false' }), fallback));
+    }
     if (Component && isWebComponent(Component)) {
         const webComponentName = 'byoc-' + toKebabCase(definition.id);
-        return React.createElement(webComponentName, Object.assign(Object.assign({}, componentProperties), { ref: (el) => {
+        return React.createElement(webComponentName, Object.assign(Object.assign({}, attributes), { ref: (el) => {
                 var _a;
@@ -121,3 +152,3 @@ if (el && typeof window != 'undefined') {
                         var _a;
-                        (_a = el.sitecoreContextCallback) === null || _a === void 0 ? void 0 : _a.call(el, Object.assign(Object.assign({}, contextProperties), parsed));
+                        (_a = el.sitecoreContextCallback) === null || _a === void 0 ? void 0 : _a.call(el, Object.assign({}, merged));
                     });
@@ -128,4 +159,4 @@ }
     return (React.createElement(React.Fragment, null,
-        React.createElement("feaas-external", Object.assign({}, componentProperties, { hydrate: 'false' }), Component == null ? null : React.createElement(Component, Object.assign({}, contextProperties, parsed)))));
+        React.createElement("feaas-external", Object.assign({}, attributes, { hydrate: 'false' }), Component == null ? null : React.createElement(Component, Object.assign({}, merged)))));
 }
 //# sourceMappingURL=react.js.map

dist/browser/react.esm.js

@@ -1,2 +0,2 @@
-import t from"react";import{getComponent as C,getComponentProperties as P,isWebComponent as w,registered as F,serializedContextProperties as k}from"@sitecore/byoc";import{objectKeysToKebabCase as v,toKebabCase as x,contextProperties as g}from"@sitecore/byoc";export*from"@sitecore/byoc";var E=function(e,a){var i={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&a.indexOf(r)<0&&(i[r]=e[r]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)a.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(i[r[o]]=e[r[o]]);return i},O=null,b=null;function W(e){var a;let{componentName:i,clientFallback:r}=e,o=E(e,["componentName","clientFallback"]),f=(a=C(i))===null||a===void 0?void 0:a.component,y=t.useMemo(()=>b(()=>Promise.resolve(O),{ssr:!1,loading:()=>t.createElement(N,Object.assign({},o,{componentName:i}))}),[]);return t.createElement(y,Object.assign({},e,{fallback:f?t.createElement(f,Object.assign({},e)):r?t.createElement(b(()=>Promise.resolve(()=>r),{ssr:!1})):e.fallback}))}function R(e,a){return b=e,O=a,a}function A(e){return Object.keys(e).length==0?t.createElement(t.Fragment,null):b&&!e._dynamic?W(Object.assign({_dynamic:!0},e)):N(e)}function D(){return t.createElement(t.Fragment,null,t.createElement("byoc-registration",{components:JSON.stringify(Object.values(F)),suppressHydrationWarning:!0}),t.createElement(O,null))}function N(e){let{componentName:a,className:i,clientFallback:r,fallback:o,suppressHydrationWarning:f,_dynamic:y,datasources:j}=e,h=E(e,["componentName","className","clientFallback","fallback","suppressHydrationWarning","_dynamic","datasources"]),m=C(a),l=m==null?void 0:m.component,d=P(a,h),_=Object.values(j||{}).find(n=>n&&!Array.isArray(n)),c=Object.assign(Object.assign(Object.assign({"data-external-id":a},v(_)),v(d)),{datasources:j,suppressHydrationWarning:!0,class:i});if(k.forEach(n=>{Object.assign(c,{[x(n)]:g[n]})}),Object.keys(c).forEach(n=>{let s=c[n];if(s&&typeof s=="object"&&n!="class"&&n!="children")try{Object.assign(c,{[n]:JSON.stringify(s)})}catch(u){delete c[n]}(typeof s=="function"||s==null)&&delete c[n]}),!l&&o||!a)return t.createElement("feaas-external",Object.assign({},c,{hydrate:"false"}),o);if(l&&w(l)){let n="byoc-"+x(m.id);return t.createElement(n,Object.assign(Object.assign({},c),{ref:s=>{var u;s&&typeof window!="undefined"&&((u=window.customElements)===null||u===void 0||u.whenDefined(n).then(()=>{var p;(p=s.sitecoreContextCallback)===null||p===void 0||p.call(s,Object.assign(Object.assign({},g),d))}))}}))}return t.createElement(t.Fragment,null,t.createElement("feaas-external",Object.assign({},c,{hydrate:"false"}),l==null?null:t.createElement(l,Object.assign({},g,d))))}export{D as Bundle,A as Component,W as NextComponent,N as RegularComponent,R as enableNextClientsideComponents};
+import t from"react";import{getComponent as j,getComponentProperties as C,isWebComponent as E,registered as N,serializedContextProperties as h}from"@sitecore/byoc";import{objectKeysToKebabCase as w,toKebabCase as v,contextProperties as O}from"@sitecore/byoc";export*from"@sitecore/byoc";var y=function(e,o){var s={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(s[n]=e[n]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var a=0,n=Object.getOwnPropertySymbols(e);a<n.length;a++)o.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(s[n[a]]=e[n[a]]);return s},g=null,d=null;function P(e){var o;let{componentName:s,clientFallback:n}=e,a=y(e,["componentName","clientFallback"]),i=(o=j(s))===null||o===void 0?void 0:o.component,l=t.useMemo(()=>t.createElement(x,Object.assign({},a,{componentName:s})),[]),u=t.useMemo(()=>d(()=>Promise.resolve(g),{ssr:!1,loading:()=>l}),[]);var f=typeof window=="undefined"?JSON.parse(JSON.stringify(a)):a;return t.createElement(u,Object.assign({},f,{componentName:s,fallbackWrapper:!i,fallback:i?l:n?t.createElement(d(()=>Promise.resolve(()=>n),{ssr:!1})):e.fallback}))}function H(e,o){return d=e,g=o,o}function J(e){return Object.keys(e).length==0?t.createElement(t.Fragment,null):d&&!e._dynamic?P(Object.assign({_dynamic:!0},e)):x(e)}function R(){return t.createElement(t.Fragment,null,t.createElement("byoc-registration",{components:JSON.stringify(Object.values(N)),suppressHydrationWarning:!0}),t.createElement(g,null))}function _(e){let{componentName:o,className:s,fallbackWrapper:n,fallback:a,suppressHydrationWarning:i,_dynamic:l,datasources:u}=e,f=y(e,["componentName","className","fallbackWrapper","fallback","suppressHydrationWarning","_dynamic","datasources"]),p=Object.values(u||{}).find(r=>r&&!Array.isArray(r)),m=Object.assign(Object.assign(Object.assign({},p),C(o,f)),u?{datasources:u}:{}),c=Object.assign(Object.assign({"data-external-id":o},w(m)),{suppressHydrationWarning:!0,class:s});return h.forEach(r=>{Object.assign(c,{[v(r)]:O[r]})}),Object.keys(c).forEach(r=>{let b=c[r];if(b&&typeof b=="object"&&r!="class"&&r!="children")try{Object.assign(c,{[r]:JSON.stringify(b)})}catch(W){delete c[r]}(typeof b=="function"||b==null)&&delete c[r]}),{attributes:c,properties:m,merged:Object.assign(Object.assign({},O),m)}}function x(e){let{componentName:o,fallback:s,fallbackWrapper:n}=e,a=j(o),i=a==null?void 0:a.component,{attributes:l,properties:u,merged:f}=_(e);if(!i&&s||!o)return n===!1?t.createElement(t.Fragment,null,s):t.createElement("feaas-external",Object.assign({},l,{hydrate:"false"}),s);if(i&&E(i)){let p="byoc-"+v(a.id);return t.createElement(p,Object.assign(Object.assign({},l),{ref:m=>{var c;m&&typeof window!="undefined"&&((c=window.customElements)===null||c===void 0||c.whenDefined(p).then(()=>{var r;(r=m.sitecoreContextCallback)===null||r===void 0||r.call(m,Object.assign({},f))}))}}))}return t.createElement(t.Fragment,null,t.createElement("feaas-external",Object.assign({},l,{hydrate:"false"}),i==null?null:t.createElement(i,Object.assign({},f))))}export{R as Bundle,J as Component,P as NextComponent,x as RegularComponent,H as enableNextClientsideComponents,_ as getMergedComponentProperties};
 //# sourceMappingURL=react.esm.js.map

dist/node/react.esm.js

@@ -1,2 +0,2 @@
-import t from"react";import{getComponent as C,getComponentProperties as P,isWebComponent as w,registered as F,serializedContextProperties as k}from"@sitecore/byoc";import{objectKeysToKebabCase as v,toKebabCase as x,contextProperties as g}from"@sitecore/byoc";export*from"@sitecore/byoc";var E=function(e,a){var i={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&a.indexOf(r)<0&&(i[r]=e[r]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)a.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(i[r[o]]=e[r[o]]);return i},O=null,b=null;function W(e){var a;let{componentName:i,clientFallback:r}=e,o=E(e,["componentName","clientFallback"]),f=(a=C(i))===null||a===void 0?void 0:a.component,y=t.useMemo(()=>b(()=>Promise.resolve(O),{ssr:!1,loading:()=>t.createElement(N,Object.assign({},o,{componentName:i}))}),[]);return t.createElement(y,Object.assign({},e,{fallback:f?t.createElement(f,Object.assign({},e)):r?t.createElement(b(()=>Promise.resolve(()=>r),{ssr:!1})):e.fallback}))}function R(e,a){return b=e,O=a,a}function A(e){return Object.keys(e).length==0?t.createElement(t.Fragment,null):b&&!e._dynamic?W(Object.assign({_dynamic:!0},e)):N(e)}function D(){return t.createElement(t.Fragment,null,t.createElement("byoc-registration",{components:JSON.stringify(Object.values(F)),suppressHydrationWarning:!0}),t.createElement(O,null))}function N(e){let{componentName:a,className:i,clientFallback:r,fallback:o,suppressHydrationWarning:f,_dynamic:y,datasources:j}=e,h=E(e,["componentName","className","clientFallback","fallback","suppressHydrationWarning","_dynamic","datasources"]),m=C(a),l=m==null?void 0:m.component,d=P(a,h),_=Object.values(j||{}).find(n=>n&&!Array.isArray(n)),c=Object.assign(Object.assign(Object.assign({"data-external-id":a},v(_)),v(d)),{datasources:j,suppressHydrationWarning:!0,class:i});if(k.forEach(n=>{Object.assign(c,{[x(n)]:g[n]})}),Object.keys(c).forEach(n=>{let s=c[n];if(s&&typeof s=="object"&&n!="class"&&n!="children")try{Object.assign(c,{[n]:JSON.stringify(s)})}catch(u){delete c[n]}(typeof s=="function"||s==null)&&delete c[n]}),!l&&o||!a)return t.createElement("feaas-external",Object.assign({},c,{hydrate:"false"}),o);if(l&&w(l)){let n="byoc-"+x(m.id);return t.createElement(n,Object.assign(Object.assign({},c),{ref:s=>{var u;s&&typeof window!="undefined"&&((u=window.customElements)===null||u===void 0||u.whenDefined(n).then(()=>{var p;(p=s.sitecoreContextCallback)===null||p===void 0||p.call(s,Object.assign(Object.assign({},g),d))}))}}))}return t.createElement(t.Fragment,null,t.createElement("feaas-external",Object.assign({},c,{hydrate:"false"}),l==null?null:t.createElement(l,Object.assign({},g,d))))}export{D as Bundle,A as Component,W as NextComponent,N as RegularComponent,R as enableNextClientsideComponents};
+import t from"react";import{getComponent as j,getComponentProperties as C,isWebComponent as E,registered as N,serializedContextProperties as h}from"@sitecore/byoc";import{objectKeysToKebabCase as w,toKebabCase as v,contextProperties as O}from"@sitecore/byoc";export*from"@sitecore/byoc";var y=function(e,o){var s={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(s[n]=e[n]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var a=0,n=Object.getOwnPropertySymbols(e);a<n.length;a++)o.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(s[n[a]]=e[n[a]]);return s},g=null,d=null;function P(e){var o;let{componentName:s,clientFallback:n}=e,a=y(e,["componentName","clientFallback"]),i=(o=j(s))===null||o===void 0?void 0:o.component,l=t.useMemo(()=>t.createElement(x,Object.assign({},a,{componentName:s})),[]),u=t.useMemo(()=>d(()=>Promise.resolve(g),{ssr:!1,loading:()=>l}),[]);var f=typeof window=="undefined"?JSON.parse(JSON.stringify(a)):a;return t.createElement(u,Object.assign({},f,{componentName:s,fallbackWrapper:!i,fallback:i?l:n?t.createElement(d(()=>Promise.resolve(()=>n),{ssr:!1})):e.fallback}))}function H(e,o){return d=e,g=o,o}function J(e){return Object.keys(e).length==0?t.createElement(t.Fragment,null):d&&!e._dynamic?P(Object.assign({_dynamic:!0},e)):x(e)}function R(){return t.createElement(t.Fragment,null,t.createElement("byoc-registration",{components:JSON.stringify(Object.values(N)),suppressHydrationWarning:!0}),t.createElement(g,null))}function _(e){let{componentName:o,className:s,fallbackWrapper:n,fallback:a,suppressHydrationWarning:i,_dynamic:l,datasources:u}=e,f=y(e,["componentName","className","fallbackWrapper","fallback","suppressHydrationWarning","_dynamic","datasources"]),p=Object.values(u||{}).find(r=>r&&!Array.isArray(r)),m=Object.assign(Object.assign(Object.assign({},p),C(o,f)),u?{datasources:u}:{}),c=Object.assign(Object.assign({"data-external-id":o},w(m)),{suppressHydrationWarning:!0,class:s});return h.forEach(r=>{Object.assign(c,{[v(r)]:O[r]})}),Object.keys(c).forEach(r=>{let b=c[r];if(b&&typeof b=="object"&&r!="class"&&r!="children")try{Object.assign(c,{[r]:JSON.stringify(b)})}catch(W){delete c[r]}(typeof b=="function"||b==null)&&delete c[r]}),{attributes:c,properties:m,merged:Object.assign(Object.assign({},O),m)}}function x(e){let{componentName:o,fallback:s,fallbackWrapper:n}=e,a=j(o),i=a==null?void 0:a.component,{attributes:l,properties:u,merged:f}=_(e);if(!i&&s||!o)return n===!1?t.createElement(t.Fragment,null,s):t.createElement("feaas-external",Object.assign({},l,{hydrate:"false"}),s);if(i&&E(i)){let p="byoc-"+v(a.id);return t.createElement(p,Object.assign(Object.assign({},l),{ref:m=>{var c;m&&typeof window!="undefined"&&((c=window.customElements)===null||c===void 0||c.whenDefined(p).then(()=>{var r;(r=m.sitecoreContextCallback)===null||r===void 0||r.call(m,Object.assign({},f))}))}}))}return t.createElement(t.Fragment,null,t.createElement("feaas-external",Object.assign({},l,{hydrate:"false"}),i==null?null:t.createElement(i,Object.assign({},f))))}export{R as Bundle,J as Component,P as NextComponent,x as RegularComponent,H as enableNextClientsideComponents,_ as getMergedComponentProperties};
 //# sourceMappingURL=react.esm.js.map

package.json

@@ -5,3 +5,3 @@ {
   "description": "Bring-Your-Own-Components runtime to register and retrieve react components",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "scripts": {
@@ -8,0 +8,0 @@ "test": "npx vitest",

react.js

@@ -1,2 +0,2 @@
-"use strict";var k=Object.create;var O=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var n in t)O(e,n,{get:t[n],enumerable:!0})},g=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of H(t))!K.call(e,o)&&o!==n&&O(e,o,{get:()=>t[o],enumerable:!(r=W(t,o))||r.enumerable});return e},i=(e,t,n)=>(g(e,t,"default"),n&&g(n,t,"default")),A=(e,t,n)=>(n=e!=null?k(S(e)):{},g(t||!e||!e.__esModule?O(n,"default",{value:e,enumerable:!0}):n,e)),D=e=>g(O({},"__esModule",{value:!0}),e);var s={};R(s,{Bundle:()=>B,Component:()=>z,NextComponent:()=>P,RegularComponent:()=>C,enableNextClientsideComponents:()=>J});module.exports=D(s);var a=A(require("react"),1),l=require("@sitecore/byoc"),m=require("@sitecore/byoc");i(s,require("@sitecore/byoc"),module.exports);var _=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n},E=null,y=null;function P(e){var t;let{componentName:n,clientFallback:r}=e,o=_(e,["componentName","clientFallback"]),j=(t=(0,l.getComponent)(n))===null||t===void 0?void 0:t.component,N=a.default.useMemo(()=>y(()=>Promise.resolve(E),{ssr:!1,loading:()=>a.default.createElement(C,Object.assign({},o,{componentName:n}))}),[]);return a.default.createElement(N,Object.assign({},e,{fallback:j?a.default.createElement(j,Object.assign({},e)):r?a.default.createElement(y(()=>Promise.resolve(()=>r),{ssr:!1})):e.fallback}))}function J(e,t){return y=e,E=t,t}function z(e){return Object.keys(e).length==0?a.default.createElement(a.default.Fragment,null):y&&!e._dynamic?P(Object.assign({_dynamic:!0},e)):C(e)}function B(){return a.default.createElement(a.default.Fragment,null,a.default.createElement("byoc-registration",{components:JSON.stringify(Object.values(l.registered)),suppressHydrationWarning:!0}),a.default.createElement(E,null))}function C(e){let{componentName:t,className:n,clientFallback:r,fallback:o,suppressHydrationWarning:j,_dynamic:N,datasources:h}=e,w=_(e,["componentName","className","clientFallback","fallback","suppressHydrationWarning","_dynamic","datasources"]),d=(0,l.getComponent)(t),f=d==null?void 0:d.component,v=(0,l.getComponentProperties)(t,w),F=Object.values(h||{}).find(c=>c&&!Array.isArray(c)),u=Object.assign(Object.assign(Object.assign({"data-external-id":t},(0,m.objectKeysToKebabCase)(F)),(0,m.objectKeysToKebabCase)(v)),{datasources:h,suppressHydrationWarning:!0,class:n});if(l.serializedContextProperties.forEach(c=>{Object.assign(u,{[(0,m.toKebabCase)(c)]:m.contextProperties[c]})}),Object.keys(u).forEach(c=>{let b=u[c];if(b&&typeof b=="object"&&c!="class"&&c!="children")try{Object.assign(u,{[c]:JSON.stringify(b)})}catch(p){delete u[c]}(typeof b=="function"||b==null)&&delete u[c]}),!f&&o||!t)return a.default.createElement("feaas-external",Object.assign({},u,{hydrate:"false"}),o);if(f&&(0,l.isWebComponent)(f)){let c="byoc-"+(0,m.toKebabCase)(d.id);return a.default.createElement(c,Object.assign(Object.assign({},u),{ref:b=>{var p;b&&typeof window!="undefined"&&((p=window.customElements)===null||p===void 0||p.whenDefined(c).then(()=>{var x;(x=b.sitecoreContextCallback)===null||x===void 0||x.call(b,Object.assign(Object.assign({},m.contextProperties),v))}))}}))}return a.default.createElement(a.default.Fragment,null,a.default.createElement("feaas-external",Object.assign({},u,{hydrate:"false"}),f==null?null:a.default.createElement(f,Object.assign({},m.contextProperties,v))))}
+"use strict";var P=Object.create;var v=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},j=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of W(t))!F.call(e,a)&&a!==n&&v(e,a,{get:()=>t[a],enumerable:!(o=_(t,a))||o.enumerable});return e},i=(e,t,n)=>(j(e,t,"default"),n&&j(n,t,"default")),H=(e,t,n)=>(n=e!=null?P(k(e)):{},j(t||!e||!e.__esModule?v(n,"default",{value:e,enumerable:!0}):n,e)),J=e=>j(v({},"__esModule",{value:!0}),e);var c={};S(c,{Bundle:()=>K,Component:()=>A,NextComponent:()=>h,RegularComponent:()=>E,enableNextClientsideComponents:()=>R,getMergedComponentProperties:()=>w});module.exports=J(c);var r=H(require("react"),1),m=require("@sitecore/byoc"),f=require("@sitecore/byoc");i(c,require("@sitecore/byoc"),module.exports);var N=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var a=0,o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(n[o[a]]=e[o[a]]);return n},C=null,x=null;function h(e){var t;let{componentName:n,clientFallback:o}=e,a=N(e,["componentName","clientFallback"]),u=(t=(0,m.getComponent)(n))===null||t===void 0?void 0:t.component,b=r.default.useMemo(()=>r.default.createElement(E,Object.assign({},a,{componentName:n})),[]),d=r.default.useMemo(()=>x(()=>Promise.resolve(C),{ssr:!1,loading:()=>b}),[]);var g=typeof window=="undefined"?JSON.parse(JSON.stringify(a)):a;return r.default.createElement(d,Object.assign({},g,{componentName:n,fallbackWrapper:!u,fallback:u?b:o?r.default.createElement(x(()=>Promise.resolve(()=>o),{ssr:!1})):e.fallback}))}function R(e,t){return x=e,C=t,t}function A(e){return Object.keys(e).length==0?r.default.createElement(r.default.Fragment,null):x&&!e._dynamic?h(Object.assign({_dynamic:!0},e)):E(e)}function K(){return r.default.createElement(r.default.Fragment,null,r.default.createElement("byoc-registration",{components:JSON.stringify(Object.values(m.registered)),suppressHydrationWarning:!0}),r.default.createElement(C,null))}function w(e){let{componentName:t,className:n,fallbackWrapper:o,fallback:a,suppressHydrationWarning:u,_dynamic:b,datasources:d}=e,g=N(e,["componentName","className","fallbackWrapper","fallback","suppressHydrationWarning","_dynamic","datasources"]),y=Object.values(d||{}).find(s=>s&&!Array.isArray(s)),p=Object.assign(Object.assign(Object.assign({},y),(0,m.getComponentProperties)(t,g)),d?{datasources:d}:{}),l=Object.assign(Object.assign({"data-external-id":t},(0,f.objectKeysToKebabCase)(p)),{suppressHydrationWarning:!0,class:n});return m.serializedContextProperties.forEach(s=>{Object.assign(l,{[(0,f.toKebabCase)(s)]:f.contextProperties[s]})}),Object.keys(l).forEach(s=>{let O=l[s];if(O&&typeof O=="object"&&s!="class"&&s!="children")try{Object.assign(l,{[s]:JSON.stringify(O)})}catch(M){delete l[s]}(typeof O=="function"||O==null)&&delete l[s]}),{attributes:l,properties:p,merged:Object.assign(Object.assign({},f.contextProperties),p)}}function E(e){let{componentName:t,fallback:n,fallbackWrapper:o}=e,a=(0,m.getComponent)(t),u=a==null?void 0:a.component,{attributes:b,properties:d,merged:g}=w(e);if(!u&&n||!t)return o===!1?r.default.createElement(r.default.Fragment,null,n):r.default.createElement("feaas-external",Object.assign({},b,{hydrate:"false"}),n);if(u&&(0,m.isWebComponent)(u)){let y="byoc-"+(0,f.toKebabCase)(a.id);return r.default.createElement(y,Object.assign(Object.assign({},b),{ref:p=>{var l;p&&typeof window!="undefined"&&((l=window.customElements)===null||l===void 0||l.whenDefined(y).then(()=>{var s;(s=p.sitecoreContextCallback)===null||s===void 0||s.call(p,Object.assign({},g))}))}}))}return r.default.createElement(r.default.Fragment,null,r.default.createElement("feaas-external",Object.assign({},b,{hydrate:"false"}),u==null?null:r.default.createElement(u,Object.assign({},g))))}
 //# sourceMappingURL=react.js.map

types/react.d.ts

@@ -6,2 +6,3 @@ /// <reference types="@types/react" />
     componentName: string;
+    fallbackWrapper?: boolean;
     fallback?: any;
@@ -43,2 +44,20 @@ clientFallback?: any;
 /**
+ * Retrieves properties for a component, including context properties component's defaults
+ *
+ * @param props - The component props.
+ * @returns An object containing the attributes, properties, and merged properties.
+ */
+export declare function getMergedComponentProperties(props: ComponentProps): {
+    /** HTML attributes in kebab case, including strings and explicitly passed objects in json format */
+    attributes: {
+        suppressHydrationWarning: boolean;
+        class: any;
+        'data-external-id': string;
+    };
+    /** React properties combined with datasources */
+    properties: any;
+    /** React properties combined with datasources and context properties */
+    merged: any;
+};
+/**
  * A wrapper over External component that accepts a fallback for rendering in case of a missing component.
@@ -45,0 +64,0 @@ * It accepts properties in camelcase format and ensures no hydration errors on the client-side.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

407426

increased by4.38%

Lines of code

2008

increased by4.58%

No dependency changes