@sitecore-content-sdk/react 0.1.0-beta.1

package/dist/esm/components/ErrorBoundary.js

@@ -0,0 +1,60 @@
+import React, { Suspense } from 'react';
+import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
+import { withSitecoreContext } from '../enhancers/withSitecoreContext';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.defaultErrorMessage = 'There was a problem loading this section.';
+        this.defaultLoadingMessage = 'Loading component...';
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        var _a, _b;
+        if (this.showErrorDetails()) {
+            console.error(`An error occurred in component ${(_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName} (${(_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.uid}): `);
+        }
+        console.error({ error, errorInfo });
+    }
+    isInDevMode() {
+        return process.env.NODE_ENV === 'development';
+    }
+    showErrorDetails() {
+        var _a, _b;
+        return (this.isInDevMode() ||
+            ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === LayoutServicePageState.Edit ||
+            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Preview);
+    }
+    render() {
+        var _a;
+        if (this.state.error) {
+            if (this.props.errorComponent) {
+                return React.createElement(this.props.errorComponent, { error: this.state.error });
+            }
+            else {
+                if (this.showErrorDetails()) {
+                    return (React.createElement("div", null,
+                        React.createElement("div", { className: "sc-jss-placeholder-error" },
+                            "A rendering error occurred in component",
+                            ' ',
+                            React.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
+                            React.createElement("br", null),
+                            "Error: ",
+                            React.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
+                }
+                else {
+                    return (React.createElement("div", null,
+                        React.createElement("div", { className: "sc-jss-placeholder-error" }, this.defaultErrorMessage)));
+                }
+            }
+        }
+        // do not apply suspense on already dynamic components
+        if (this.props.isDynamic) {
+            return this.props.children;
+        }
+        return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+    }
+}
+export default withSitecoreContext()(ErrorBoundary);

package/dist/esm/components/FEaaSComponent.js

@@ -0,0 +1,119 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
+import { getDataFromFields } from '../utils';
+export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+/**
+ * @param {FEaaSComponentProps} props component props
+ */
+export const FEaaSComponent = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
+    if (!props.template &&
+        (!props.params ||
+            !props.params.LibraryId ||
+            !props.params.ComponentId ||
+            !props.params.ComponentVersion ||
+            !props.params.ComponentHostName ||
+            !computedRevision)) {
+        // Missing FEaaS component required props
+        return null;
+    }
+    // combine fetchedData from server with datasource data (if present)
+    const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
+    // FEaaS control would still be hydrated by client
+    // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
+    // this also allows component to fall back to full client-side rendering when template or src is empty
+    // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
+    return (React.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
+};
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * Component endpoint will either be retrieved from params or from endpointOverride
+ * @param {FEaaSComponentParams} params component params
+ * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
+ * @param {string} [endpointOverride] optional override for component endpoint
+ */
+export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
+        const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
+        let template = '';
+        let fetchedData = {};
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
+        try {
+            template = yield fetchComponentTemplate(src, params, revisionFallback);
+            fetchedData = yield fetchData(fetchDataOptions);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return {
+            fetchedData,
+            revisionFallback,
+            template,
+        };
+    });
+}
+/**
+ * @param {string} src component endpoint
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ */
+function fetchComponentTemplate(src, params, revisionFallback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { template } = yield FEAAS.fetchComponent(src);
+            return template;
+        }
+        catch (error) {
+            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
+                revisionFallback}" is present`);
+            throw error;
+        }
+    });
+}
+/**
+ * Fetches component data based on the provided data options.
+ * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
+ * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
+ * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
+ * or rejects with an error if data fetching encounters an issue.
+ * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
+ */
+function fetchData(dataOptions) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
+            return fetchedData;
+        }
+        catch (error) {
+            console.error('Fetch FEAAS component data settings failed');
+            throw error;
+        }
+    });
+}
+/**
+ * Build component endpoint URL from component's params
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ * @returns component endpoint URL
+ */
+export const composeComponentEndpoint = (params, revisionFallback) => {
+    const revision = params.ComponentRevision || revisionFallback;
+    const hostname = params.ComponentHostName.startsWith('https://')
+        ? params.ComponentHostName
+        : `https://${params.ComponentHostName}`;
+    return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
+};

package/dist/esm/components/FEaaSWrapper.js

@@ -0,0 +1,11 @@
+import { FEaaSComponent } from './FEaaSComponent';
+import React from 'react';
+export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+export const FEaaSWrapper = (props) => {
+    var _a, _b;
+    const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
+    const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
+    return (React.createElement("div", { className: styles, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(FEaaSComponent, Object.assign({}, props)))));
+};

package/dist/esm/components/FieldMetadata.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MetadataKind } from '@sitecore-content-sdk/core/editing';
+/**
+ * The component which renders field metadata markup
+ * @param {FieldMetadataProps} props the props of the component
+ * @returns metadata markup wrapped around children
+ */
+export const FieldMetadata = (props) => {
+    const data = JSON.stringify(props.metadata);
+    const attributes = {
+        type: 'text/sitecore',
+        chrometype: 'field',
+        className: 'scpm',
+    };
+    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
+    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("code", Object.assign({}, codeOpenAttributes), data),
+        props.children,
+        React.createElement("code", Object.assign({}, codeCloseAttributes))));
+};
+FieldMetadata.displayName = 'FieldMetadata';
+FieldMetadata.propTypes = {
+    metadata: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
+};

package/dist/esm/components/File.js

@@ -0,0 +1,44 @@
+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 { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+import PropTypes from 'prop-types';
+import React from 'react';
+export const File = (_a) => {
+    var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
+    const dynamicField = field;
+    if (isFieldValueEmpty(dynamicField)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const file = (dynamicField.src
+        ? field
+        : dynamicField.value);
+    if (!file) {
+        return null;
+    }
+    const linkText = !children ? file.title || file.displayName : null;
+    const anchorAttrs = {
+        href: file.src,
+    };
+    return React.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+};
+File.propTypes = {
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            src: PropTypes.string,
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+        }),
+    ]).isRequired,
+};
+File.displayName = 'File';

package/dist/esm/components/HiddenRendering.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const styles = {
+    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+    backgroundSize: '3px 3px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '30px',
+    color: '#aaa',
+};
+export const HiddenRendering = () => React.createElement("div", { style: styles }, "The component is hidden");

package/dist/esm/components/Image.js

@@ -0,0 +1,77 @@
+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 { mediaApi } from '@sitecore-content-sdk/core/media';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { addClassName } from '../utils';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentImage } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
+    var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
+    if (!src) {
+        return null;
+    }
+    addClassName(otherAttrs);
+    const newAttrs = Object.assign({}, otherAttrs);
+    // update image URL for jss handler and image rendering params
+    const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
+    if (srcSet) {
+        // replace with HTML-formatted srcset, including updated image URLs
+        newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);
+    }
+    // always output original src as fallback for older browsers
+    newAttrs.src = resolvedSrc;
+    return newAttrs;
+};
+export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+    var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+    const dynamicMedia = field;
+    if (isFieldValueEmpty(dynamicMedia)) {
+        return null;
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    if (!img) {
+        return null;
+    }
+    // prevent metadata from being passed to the img tag
+    if (img.metadata) {
+        delete img.metadata;
+    }
+    const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
+    if (attrs) {
+        return React.createElement("img", Object.assign({}, attrs));
+    }
+    return null; // we can't handle the truth
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
+Image.propTypes = {
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            src: PropTypes.string,
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+        }),
+    ]),
+    editable: PropTypes.bool,
+    mediaUrlPrefix: PropTypes.instanceOf(RegExp),
+    imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+};
+Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -0,0 +1,67 @@
+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 React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+export const Link = withFieldMetadata(withEmptyFieldEditingComponent(
+// eslint-disable-next-line react/display-name
+forwardRef((_a, ref) => {
+    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    const children = otherProps.children;
+    const dynamicField = field;
+    if (isFieldValueEmpty(dynamicField)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const link = dynamicField.href
+        ? field
+        : dynamicField.value;
+    if (!link) {
+        return null;
+    }
+    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+    const anchorAttrs = {
+        href: `${link.href}${querystring}${anchor}`,
+        className: link.class,
+        title: link.title,
+        target: link.target,
+    };
+    if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) {
+        // information disclosure attack prevention keeps target blank site from getting ref to window.opener
+        anchorAttrs.rel = 'noopener noreferrer';
+    }
+    const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
+    const element = React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children);
+    return React.createElement(React.Fragment, null, element);
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+export const LinkPropTypes = {
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            href: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.oneOf([null]).isRequired]),
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+        }),
+    ]).isRequired,
+    editable: PropTypes.bool,
+    showLinkTextWithChildrenPresent: PropTypes.bool,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+};
+Link.propTypes = LinkPropTypes;
+Link.displayName = 'Link';

package/dist/esm/components/MissingComponent.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+export const MissingComponent = (props) => {
+    const componentName = props.rendering && props.rendering.componentName
+        ? props.rendering.componentName
+        : 'Unnamed Component';
+    // 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',
+            padding: '10px',
+            color: 'white',
+            maxWidth: '500px',
+        } },
+        React.createElement("h2", null, componentName),
+        React.createElement("p", null, errorMessage)));
+};
+MissingComponent.propTypes = {
+    rendering: PropTypes.shape({
+        componentName: PropTypes.string,
+    }),
+};
+MissingComponent.displayName = 'MissingComponent';

package/dist/esm/components/Placeholder.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { PlaceholderCommon } from './PlaceholderCommon';
+import { withComponentFactory } from '../enhancers/withComponentFactory';
+import { PagesEditor } from '@sitecore-content-sdk/core/editing';
+import { withSitecoreContext } from '../enhancers/withSitecoreContext';
+class PlaceholderComponent extends PlaceholderCommon {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+    }
+    componentDidMount() {
+        if (this.isEmpty && PagesEditor.isActive()) {
+            PagesEditor.resetChromes();
+        }
+    }
+    /**
+     * Renders the placeholder when it is empty. The required CSS styles are applied to the placeholder in edit mode.
+     * @param {React.ReactNode | React.ReactElement[]} node react node
+     * @returns react node
+     */
+    renderEmptyPlaceholder(node) {
+        return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+    }
+    render() {
+        var _a, _b;
+        const childProps = Object.assign({}, this.props);
+        delete childProps.componentFactory;
+        if (this.state.error) {
+            if (childProps.errorComponent) {
+                return React.createElement(childProps.errorComponent, { error: this.state.error });
+            }
+            return (React.createElement("div", { className: "sc-jss-placeholder-error" },
+                "A rendering error occurred: ",
+                this.state.error.message,
+                "."));
+        }
+        const renderingData = childProps.rendering;
+        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing);
+        this.isEmpty = !placeholderData.length;
+        const components = this.getComponentsForRenderingData(placeholderData);
+        if (this.isEmpty) {
+            const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
+            return ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
+                ? this.renderEmptyPlaceholder(rendered)
+                : rendered;
+        }
+        else if (this.props.render) {
+            return this.props.render(components, placeholderData, childProps);
+        }
+        else if (this.props.renderEach) {
+            const renderEach = this.props.renderEach;
+            return components.map((component, index) => {
+                if (component && component.props && component.props.type === 'text/sitecore') {
+                    return component;
+                }
+                return renderEach(component, index);
+            });
+        }
+        else {
+            return components;
+        }
+    }
+}
+PlaceholderComponent.propTypes = PlaceholderCommon.propTypes;
+const PlaceholderWithComponentFactory = withComponentFactory(PlaceholderComponent);
+export const Placeholder = withSitecoreContext()(PlaceholderWithComponentFactory);