@sitecore-jss/sitecore-jss-react 21.3.1 → 21.4.0-canary.2

package/dist/esm/components/Image.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOMServer from 'react-dom/server';
 import { addClassName, convertAttributesToReactProps } from '../utils';
+import { getAttributesString } from '../utils';
 const getEditableWrapper = (editableMarkup, ...otherProps) => (
 // create an inline wrapper and use dangerouslySetInnerHTML.
 // if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
@@ -55,7 +55,7 @@ export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps)
     if (!imgAttrs) {
         return getEditableWrapper(imageField.editable);
     }
-    const imgHtml = ReactDOMServer.renderToStaticMarkup(React.createElement("img", Object.assign({}, imgAttrs)));
+    const imgHtml = `<img ${getAttributesString(imgAttrs)} />`;
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };

package/dist/esm/components/MissingComponent.js

@@ -4,7 +4,11 @@ export const MissingComponent = (props) => {
     const componentName = props.rendering && props.rendering.componentName
         ? props.rendering.componentName
         : 'Unnamed Component';
-    console.log(`Component props for unimplemented '${componentName}' component`, props);
+    // error override would mean component is not unimplemented
+    !props.errorOverride &&
+        console.log(`Component props for unimplemented '${componentName}' component`, props);
+    const errorMessage = props.errorOverride ||
+        'JSS component is missing React implementation. See the developer console for more information.';
     return (React.createElement("div", { style: {
             background: 'darkorange',
             outline: '5px solid orange',
@@ -13,7 +17,7 @@ export const MissingComponent = (props) => {
             maxWidth: '500px',
         } },
         React.createElement("h2", null, componentName),
-        React.createElement("p", null, "JSS component is missing React implementation. See the developer console for more information.")));
+        React.createElement("p", null, errorMessage)));
 };
 MissingComponent.propTypes = {
     rendering: PropTypes.shape({

package/dist/esm/components/Placeholder.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
-import { HorizonEditor, ExperienceEditor } from '@sitecore-jss/sitecore-jss/utils';
+import { HorizonEditor } from '@sitecore-jss/sitecore-jss/utils';
 /**
  * @param {HtmlElementRendering | ComponentRendering} rendering
  */
@@ -44,36 +44,8 @@ class PlaceholderComponent extends PlaceholderCommon {
         }
         const renderingData = childProps.rendering;
         const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
-        this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
-        // This is a workaround to insert Experience Editor-specific markup on the page for empty placeholders.
-        // It makes sure the markup is inserted by react and thus avoiding hydration errors when in editing mode
-        if (this.isEmpty && ExperienceEditor.isActive()) {
-            const codePos = placeholderData.findIndex((component) => component.name === 'code' &&
-                component.attributes.kind === 'open');
-            const plhId = placeholderData[codePos].attributes.id;
-            const emptyPlaceholderMarkup = [
-                {
-                    name: 'span',
-                    contents: null,
-                    attributes: {
-                        type: 'text/sitecore',
-                        'sc-part-of': 'placeholder rendering',
-                        style: 'display: none;',
-                    },
-                },
-                {
-                    name: 'div',
-                    contents: null,
-                    attributes: {
-                        class: 'scEnabledChrome scEmptyPlaceholder',
-                        'sc-part-of': 'placeholder',
-                        'sc-placeholder-id': plhId,
-                    },
-                },
-            ];
-            placeholderData.splice(codePos + 1, 0, ...emptyPlaceholderMarkup);
-        }
         const components = this.getComponentsForRenderingData(placeholderData);
+        this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
         if (this.props.renderEmpty && this.isEmpty) {
             const rendered = this.props.renderEmpty(components);
             return components.length ? this.renderEmptyPlaceholder(rendered) : rendered;

package/dist/esm/components/PlaceholderCommon.js

@@ -15,6 +15,9 @@ import { MissingComponent } from './MissingComponent';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
 import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
+import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
+import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
+import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
 /**
  * These patterns need for right rendering Dynamic placeholders.
  * Must be distinguished Splitter components and another placeholders(containers)
@@ -97,8 +100,20 @@ export class PlaceholderCommon extends React.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
-                component = FEaaSComponent;
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            if (!component) {
+                if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
+                    component = FEaaSComponent;
+                }
+                else if (componentRendering.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
+                    component = FEaaSWrapper;
+                }
+                else if (componentRendering.componentName === BYOC_COMPONENT_RENDERING_NAME) {
+                    component = BYOCComponent;
+                }
+                else if (componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME) {
+                    component = BYOCWrapper;
+                }
             }
             if (!component) {
                 console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);

package/dist/esm/index.js

@@ -4,12 +4,16 @@ export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChi
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas';
 export { Placeholder } from './components/Placeholder';
 export { Image, getEEMarkup, } from './components/Image';
 export { RichText, RichTextPropTypes } from './components/RichText';
 export { Text } from './components/Text';
 export { DateField } from './components/Date';
 export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
+export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkPropTypes } from './components/Link';
 export { File } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';

package/dist/esm/utils.js

@@ -1,3 +1,15 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 import { parse as styleParse } from 'style-attr';
 // https://stackoverflow.com/a/10426674/9324
 export const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -45,7 +57,7 @@ export const convertAttributesToReactProps = (attributes) => {
 /**
  * "class" property will be transformed into or appended to "className" instead.
  * @param {string} otherAttrs all other props included on the image component
- * * @returns {void}
+ * @returns {void}
  */
 export const addClassName = (otherAttrs) => {
     if (otherAttrs.class) {
@@ -61,3 +73,37 @@ export const addClassName = (otherAttrs) => {
         delete otherAttrs.class;
     }
 };
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+export const getAttributesString = (attributes) => {
+    const { className } = attributes, restAttributes = __rest(attributes, ["className"]);
+    const attributesEntries = Object.entries(restAttributes).map(([key, value]) => {
+        if (typeof value === 'object') {
+            const valueString = JSON.stringify(value)
+                .replace(/"|{|}/g, '')
+                .replace(/,/g, ';');
+            return `${key}="${valueString}"`;
+        }
+        return `${key}="${value}"`;
+    });
+    if (className) {
+        attributesEntries.push(`class="${className}"`);
+    }
+    return attributesEntries.join(' ');
+};
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+export const getDataFromFields = (fields) => {
+    let data = {};
+    data = Object.entries(fields).reduce((acc, [key]) => {
+        acc[key] = getFieldValue(fields, key);
+        return acc;
+    }, data);
+    return data;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "21.3.1",
+  "version": "21.4.0-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -27,6 +27,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
+    "@sitecore-feaas/clientside": "^0.3.14",
     "@types/chai": "^4.3.4",
     "@types/chai-string": "^1.4.2",
     "@types/deep-equal": "^1.0.1",
@@ -57,19 +58,19 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
+    "@sitecore-feaas/clientside": "^0.3.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-feaas/clientside": "^0.3.0",
-    "@sitecore-jss/sitecore-jss": "21.3.1",
+    "@sitecore-jss/sitecore-jss": "^21.4.0-canary.2",
     "deep-equal": "^2.1.0",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "973fe436c7fe943ec07123b315fadbe72313a945",
+  "gitHead": "30d79c092ae7bee91d3f6a1a480a89c76e5b262c",
   "files": [
     "dist",
     "types"

package/types/components/BYOCComponent.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
+import { MissingComponentProps } from './MissingComponent';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
+/**
+ * FEaaS props for server rendering.
+ */
+type BYOCServerProps = {
+    /**
+     * Fetched data from server component props for server rendering, based on rendering params.
+     */
+    fetchedData?: FEAAS.DataScopes;
+};
+/**
+ * Data from rendering params on Sitecore's BYOC rendering
+ */
+export type BYOCComponentParams = {
+    /**
+     * Name of the component to render
+     */
+    ComponentName?: string;
+    /**
+     * JSON props to pass into rendered component
+     */
+    ComponentProps?: string;
+    /**
+     * A string with classes that can be used to apply themes, via SXA functionality
+     */
+    styles?: string;
+    RenderingIdentifier?: string;
+};
+/**
+ * Props for BYOCComponent. Includes components list to load external components from.
+ */
+export type BYOCComponentClientProps = {
+    /**
+     * rendering params
+     */
+    params?: BYOCComponentParams;
+    /**
+     * fields from datasource items to be passed as rendered child component props
+     */
+    fields?: ComponentFields;
+    /**
+     * Error component override. To be shown when Renderer or underlying component throws
+     */
+    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+    /**
+     * Override to indicate missing component situations. Would be shown when BYOC component is not registered
+     * or ComponentName is missing
+     */
+    missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
+};
+export type BYOCComponentProps = BYOCComponentClientProps & BYOCServerProps;
+type ErrorComponentProps = {
+    [prop: string]: unknown;
+    error?: Error;
+};
+/**
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
+ * missing components, and customization of error messages or alternative rendering components.
+ * @param {ByocComponentProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
+    state: Readonly<{
+        error?: Error;
+    }>;
+    constructor(props: BYOCComponentProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): JSX.Element;
+}
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
+ */
+export declare function fetchBYOCComponentServerProps(params: BYOCComponentParams): Promise<BYOCComponentProps>;
+export {};

package/types/components/BYOCWrapper.d.ts

@@ -0,0 +1,3 @@
+import { BYOCComponentProps } from './BYOCComponent';
+export declare const BYOC_WRAPPER_RENDERING_NAME = "BYOCWrapper";
+export declare const BYOCWrapper: (props: BYOCComponentProps) => JSX.Element;

package/types/components/FEaaSComponent.d.ts

@@ -1,3 +1,4 @@
+import * as FEAAS from '@sitecore-feaas/clientside/react';
 import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
 /**
@@ -24,14 +25,14 @@ type FEaaSComponentServerProps = {
      * HTML template for presentation rendered inside the component
      */
     template?: string;
-    /**
-     * the date component data was last modified
-     */
-    lastModified?: string;
     /**
      * Default revision to be fetched. Should be 'staged' for editing/preview. Can be overriden by params.ComponentRevision
      */
     revisionFallback?: RevisionType;
+    /**
+     * Fetched data from server component props for server rendering, based on rendering params.
+     */
+    fetchedData?: FEAAS.DataScopes;
 };
 /**
  * FEaaS props for client side component. Should be used as fallback when server props are not provided.

package/types/components/FEaaSWrapper.d.ts

@@ -0,0 +1,3 @@
+import { FEaaSComponentProps } from './FEaaSComponent';
+export declare const FEAAS_WRAPPER_RENDERING_NAME = "FEaaSWrapper";
+export declare const FEaaSWrapper: (props: FEaaSComponentProps) => JSX.Element;

package/types/components/MissingComponent.d.ts

@@ -3,5 +3,6 @@ export interface MissingComponentProps {
     rendering?: {
         componentName?: string;
     };
+    errorOverride?: string;
 }
 export declare const MissingComponent: React.FC<MissingComponentProps>;

package/types/index.d.ts

@@ -4,6 +4,7 @@ export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutService
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas';
 export { ComponentFactory } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
@@ -11,6 +12,9 @@ export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './com
 export { Text, TextField } from './components/Text';
 export { DateField, DateFieldProps } from './components/Date';
 export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
+export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
 export { File, FileField } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';

package/types/utils.d.ts

@@ -1,3 +1,4 @@
+import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
 export declare const convertKebabCasetoCamelCase: (str: string) => string;
 /**
  * https://facebook.github.io/react/docs/dom-elements.html
@@ -18,8 +19,24 @@ export declare const convertAttributesToReactProps: (attributes: {
 /**
  * "class" property will be transformed into or appended to "className" instead.
  * @param {string} otherAttrs all other props included on the image component
- * * @returns {void}
+ * @returns {void}
  */
 export declare const addClassName: (otherAttrs: {
     [key: string]: unknown;
 }) => void;
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+export declare const getAttributesString: (attributes: {
+    [key: string]: unknown;
+}) => string;
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+export declare const getDataFromFields: (fields: ComponentFields) => {
+    [key: string]: unknown;
+};