@sitecore-jss/sitecore-jss-react 0.1.0-beta.2

package/dist/esm/components/Placeholder.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { PlaceholderCommon } from './PlaceholderCommon';
+import { withComponentFactory } from '../enhancers/withComponentFactory';
+import { HorizonEditor } from '@sitecore-jss/sitecore-jss/utils';
+/**
+ * @param {HtmlElementRendering | ComponentRendering} rendering
+ */
+function isRawRendering(rendering) {
+    return (!rendering.componentName &&
+        rendering.name !== undefined);
+}
+class PlaceholderComponent extends PlaceholderCommon {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        if (this.isEmpty && HorizonEditor.isActive()) {
+            HorizonEditor.resetChromes();
+        }
+    }
+    /**
+     * In case we need to render an empty placeholder, some part of the markup will be inserted by the EE,
+     * so we need to separate the empty placeholder's markup and allow React reconciliation to be executed correctly
+     * and retain sibling tags
+     * @param {React.ReactNode | React.ReactElement[]} node react node
+     * @returns react node
+     */
+    renderEmptyPlaceholder(node) {
+        return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+    }
+    render() {
+        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);
+        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;
+        }
+        else if (components.length && this.isEmpty) {
+            return this.renderEmptyPlaceholder(components);
+        }
+        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;
+export const Placeholder = withComponentFactory(PlaceholderComponent);

package/dist/esm/components/PlaceholderCommon.js

@@ -0,0 +1,205 @@
+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 from 'react';
+import PropTypes from 'prop-types';
+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)
+ */
+const EXCLUDE_PLACEHOLDERS_RENDER = [
+    new RegExp(/column-(\d{1})-\{\*\}/i),
+    new RegExp(/row-(\d{1})-\{\*\}/i),
+];
+export class PlaceholderCommon extends React.Component {
+    constructor(props) {
+        super(props);
+        this.nodeRefs = [];
+        this.state = {};
+        this.addRef = this.addRef.bind(this);
+        this.updateKeyAttributes = this.updateKeyAttributes.bind(this);
+        this.createRawElement = this.createRawElement.bind(this);
+    }
+    static getPlaceholderDataFromRenderingData(rendering, name) {
+        let result;
+        /** [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
+        from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing **/
+        if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
+            Object.keys(rendering.placeholders).forEach((placeholder) => {
+                if (placeholder.indexOf('{*}') !== -1 &&
+                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1) &&
+                    name.replace(/[^a-zA-Z]*/gi, '') === placeholder.replace(/[^a-zA-Z]*/gi, '')) {
+                    rendering.placeholders[name] = rendering.placeholders[placeholder];
+                    delete rendering.placeholders[placeholder];
+                }
+            });
+        }
+        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+            result = rendering.placeholders[name];
+        }
+        else {
+            result = null;
+        }
+        if (!result) {
+            console.warn(`Placeholder '${name}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
+            return [];
+        }
+        return result;
+    }
+    componentDidMount() {
+        this.updateKeyAttributes();
+    }
+    componentDidUpdate() {
+        this.updateKeyAttributes();
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    getSXAParams(rendering) {
+        if (!rendering.params)
+            return {};
+        return (rendering.params.FieldNames && {
+            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        });
+    }
+    getComponentsForRenderingData(placeholderData) {
+        const _a = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _a, placeholderProps = __rest(_a, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
+        return placeholderData
+            .map((rendering, index) => {
+            const key = rendering.uid
+                ? rendering.uid
+                : `component-${index}`;
+            const commonProps = { key };
+            // if the element is not a 'component rendering', render it 'raw'
+            if (!rendering.componentName &&
+                rendering.name) {
+                return this.createRawElement(rendering, commonProps);
+            }
+            const componentRendering = rendering;
+            let component;
+            if (componentRendering.componentName === HIDDEN_RENDERING_NAME) {
+                component = hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering;
+            }
+            else if (!componentRendering.componentName) {
+                component = () => React.createElement(React.Fragment, null);
+            }
+            else {
+                component = this.getComponentForRendering(componentRendering);
+            }
+            // 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.`);
+                component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent;
+            }
+            const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
+                fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
+            })), ((placeholderParams || componentRendering.params) && {
+                params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
+            })), { rendering: componentRendering });
+            return React.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+        })
+            .filter((element) => element); // remove nulls
+    }
+    getComponentForRendering(renderingDefinition) {
+        var _a;
+        const componentFactory = this.props.componentFactory;
+        if (!componentFactory || typeof componentFactory !== 'function') {
+            console.warn(`No componentFactory was available to service request for component ${renderingDefinition}`);
+            return null;
+        }
+        // Render SXA Rendering Variant
+        if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames) {
+            return componentFactory(renderingDefinition.componentName, renderingDefinition.params.FieldNames);
+        }
+        return componentFactory(renderingDefinition.componentName);
+    }
+    addRef(nodeRef) {
+        this.nodeRefs.push(nodeRef);
+    }
+    createRawElement(elem, baseProps) {
+        if (!elem.name) {
+            console.error('"elem.name" is undefined in "createRawElement". Something is likely wrong with your component data. Ensure that your components have a name.');
+            return null;
+        }
+        const attributes = convertAttributesToReactProps(elem.attributes);
+        const props = Object.assign(Object.assign(Object.assign({}, baseProps), attributes), { dangerouslySetInnerHTML: elem.contents ? { __html: elem.contents } : undefined });
+        /* Since we can't set the "key" attribute via React, stash it
+         * so we can set in the DOM after render.
+         */
+        if (!Array.isArray(attributes) && attributes && attributes.chrometype === 'placeholder') {
+            props.phkey = elem.attributes.key; // props that get rendered as dom attribute names need to be lowercase, otherwise React complains.
+            props.ref = this.addRef; // only need ref for placeholder containers, trying to add it to other components (e.g. stateless components) may result in a warning.
+        }
+        return React.createElement(elem.name, props);
+    }
+    updateKeyAttributes() {
+        if (!this.nodeRefs) {
+            return;
+        }
+        this.nodeRefs.forEach((ref) => {
+            if (ref && ref.getAttribute) {
+                // ref might be a wrapped component, so check for existence of getAttribute method
+                const key = ref.getAttribute('phkey');
+                if (key) {
+                    // need to manually set the 'key' attribute after component mount because
+                    // 'key' is a reserved attribute/prop in React. so it will never be rendered
+                    // as an html attribute.
+                    ref.setAttribute('key', key);
+                }
+            }
+        });
+    }
+}
+PlaceholderCommon.propTypes = {
+    rendering: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.object,
+    ]).isRequired,
+    fields: PropTypes.objectOf(PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.object,
+    ]).isRequired),
+    params: PropTypes.objectOf(PropTypes.string.isRequired),
+    missingComponentComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    hiddenRenderingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    errorComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    modifyComponentProps: PropTypes.func,
+};

package/dist/esm/components/RichText.js

@@ -0,0 +1,37 @@
+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';
+export const RichText = forwardRef((_a, ref) => {
+    var { field, tag, editable } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+    if (!field || (!field.editable && !field.value)) {
+        return null;
+    }
+    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
+            __html: field.editable && editable ? field.editable : field.value,
+        }, ref }, otherProps);
+    return React.createElement(tag || 'div', htmlProps);
+});
+export const RichTextPropTypes = {
+    field: PropTypes.shape({
+        value: PropTypes.string,
+        editable: PropTypes.string,
+    }),
+    tag: PropTypes.string,
+    editable: PropTypes.bool,
+};
+RichText.propTypes = RichTextPropTypes;
+RichText.defaultProps = {
+    tag: 'div',
+    editable: true,
+};
+RichText.displayName = 'RichText';

package/dist/esm/components/SitecoreContext.js

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import PropTypes from 'prop-types';
+import fastDeepEqual from 'fast-deep-equal/es6/react';
+export const SitecoreContextReactContext = React.createContext({});
+export const ComponentFactoryReactContext = React.createContext({});
+export class SitecoreContext extends React.Component {
+    constructor(props) {
+        super(props);
+        /**
+         * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
+         * or you can provide exact @type {SitecoreContextValue}
+         * @param {SitecoreContextValue | LayoutServiceData} value New context value
+         */
+        this.setContext = (value) => {
+            this.setState({
+                context: value.sitecore
+                    ? this.constructContext(value)
+                    : Object.assign({}, value),
+            });
+        };
+        const context = this.constructContext(props.layoutData);
+        this.state = {
+            context,
+            setContext: this.setContext,
+        };
+    }
+    constructContext(layoutData) {
+        var _a;
+        if (!layoutData) {
+            return {
+                pageEditing: false,
+            };
+        }
+        return Object.assign({ route: layoutData.sitecore.route, itemId: (_a = layoutData.sitecore.route) === null || _a === void 0 ? void 0 : _a.itemId }, layoutData.sitecore.context);
+    }
+    componentDidUpdate(prevProps) {
+        // In case if somebody will manage SitecoreContext state by passing fresh `layoutData` prop
+        // instead of using `updateSitecoreContext`
+        if (!fastDeepEqual(prevProps.layoutData, this.props.layoutData)) {
+            this.setContext(this.props.layoutData);
+            return;
+        }
+    }
+    render() {
+        return (React.createElement(ComponentFactoryReactContext.Provider, { value: this.props.componentFactory },
+            React.createElement(SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
+    }
+}
+SitecoreContext.propTypes = {
+    children: PropTypes.any.isRequired,
+    componentFactory: PropTypes.func,
+    layoutData: PropTypes.shape({
+        sitecore: PropTypes.shape({
+            context: PropTypes.any,
+            route: PropTypes.any,
+        }),
+    }),
+};
+SitecoreContext.displayName = 'SitecoreContext';

package/dist/esm/components/Text.js

@@ -0,0 +1,76 @@
+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 from 'react';
+import PropTypes from 'prop-types';
+export const Text = (_a) => {
+    var { field, tag, editable, encode } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
+    if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+        return null;
+    }
+    // can't use editable value if we want to output unencoded
+    if (!encode) {
+        // eslint-disable-next-line no-param-reassign
+        editable = false;
+    }
+    const isEditable = field.editable && editable;
+    let output = isEditable
+        ? field.editable || ''
+        : field.value === undefined
+            ? ''
+            : field.value;
+    // when string value isn't formatted, we should format line breaks
+    if (!field.editable && typeof output === 'string') {
+        const splitted = String(output).split('\n');
+        if (splitted.length) {
+            const formatted = [];
+            splitted.forEach((str, i) => {
+                const isLast = i === splitted.length - 1;
+                formatted.push(str);
+                if (!isLast) {
+                    formatted.push(React.createElement("br", { key: i }));
+                }
+            });
+            output = formatted;
+        }
+    }
+    const setDangerously = isEditable || !encode;
+    let children = null;
+    const htmlProps = Object.assign({}, otherProps);
+    if (setDangerously) {
+        htmlProps.dangerouslySetInnerHTML = {
+            __html: output,
+        };
+    }
+    else {
+        children = output;
+    }
+    if (tag || setDangerously) {
+        return React.createElement(tag || 'span', htmlProps, children);
+    }
+    else {
+        return React.createElement(React.Fragment, null, children);
+    }
+};
+Text.propTypes = {
+    field: PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        editable: PropTypes.string,
+    }),
+    tag: PropTypes.string,
+    editable: PropTypes.bool,
+    encode: PropTypes.bool,
+};
+Text.defaultProps = {
+    editable: true,
+    encode: true,
+};
+Text.displayName = 'Text';

package/dist/esm/components/sharedTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/enhancers/withComponentFactory.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentFactoryReactContext } from '../components/SitecoreContext';
+import { useContext } from 'react';
+/**
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
+ */
+export function withComponentFactory(Component) {
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentFactory(props) {
+        const context = useContext(ComponentFactoryReactContext);
+        return React.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
+    }
+    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+        Component.name ||
+        'Anonymous'})`;
+    return WithComponentFactory;
+}

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSitecoreContext } from './withSitecoreContext';
+export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
+/**
+ * Checks whether a Sitecore datasource is present and renders appropriately depending on page mode (normal vs editing).
+ * @param {WithDatasourceCheckOptions} [options]
+ * @returns
+ *  The wrapped component, if a datasource is present.
+ *  A null component (in normal mode) or an error component (in editing mode), if a datasource is not present.
+ */
+export function withDatasourceCheck(options) {
+    return function withDatasourceCheckHoc(Component) {
+        return function WithDatasourceCheck(props) {
+            var _a, _b;
+            const { sitecoreContext } = useSitecoreContext();
+            const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;
+            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
+        };
+    };
+}

package/dist/esm/enhancers/withEditorChromes.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { resetEditorChromes } from '..';
+export const withEditorChromes = (WrappedComponent) => {
+    class Enhancer extends React.Component {
+        constructor() {
+            super(...arguments);
+            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+        }
+        componentDidUpdate() {
+            resetEditorChromes();
+        }
+        render() {
+            return React.createElement(WrappedComponent, Object.assign({}, this.props));
+        }
+    }
+    return Enhancer;
+};

package/dist/esm/enhancers/withPlaceholder.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { PlaceholderCommon } from '../components/PlaceholderCommon';
+import { withComponentFactory } from './withComponentFactory';
+/**
+ * @param {WithPlaceholderSpec} placeholders
+ * @param {WithPlaceholderOptions} [options]
+ */
+export function withPlaceholder(placeholders, options) {
+    return (WrappedComponent) => {
+        class WithPlaceholder extends PlaceholderCommon {
+            constructor(props) {
+                super(props);
+            }
+            render() {
+                let childProps = Object.assign({}, this.props);
+                delete childProps.componentFactory;
+                if (options && options.propsTransformer) {
+                    childProps = options.propsTransformer(childProps);
+                }
+                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 = options && options.resolvePlaceholderDataFromProps
+                    ? options.resolvePlaceholderDataFromProps(childProps)
+                    : childProps.rendering;
+                const definitelyArrayPlacholders = !Array.isArray(placeholders)
+                    ? [placeholders]
+                    : placeholders;
+                definitelyArrayPlacholders.forEach((placeholder) => {
+                    let placeholderData;
+                    if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder);
+                        if (placeholderData) {
+                            childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                    else {
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder);
+                        if (placeholderData) {
+                            childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                });
+                return React.createElement(WrappedComponent, Object.assign({}, childProps));
+            }
+        }
+        WithPlaceholder.propTypes = PlaceholderCommon.propTypes;
+        return withComponentFactory(WithPlaceholder);
+    };
+}

package/dist/esm/enhancers/withSitecoreContext.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { SitecoreContextReactContext } from '../components/SitecoreContext';
+/**
+ * @param {WithSitecoreContextOptions} [options]
+ */
+export function withSitecoreContext(options) {
+    return function withSitecoreContextHoc(Component) {
+        return function WithSitecoreContext(props) {
+            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, updateSitecoreContext: options && options.updatable && context.setContext })))));
+        };
+    };
+}
+/**
+ * This hook grants acсess to the current Sitecore page context
+ * by default JSS includes the following properties in this context:
+ * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
+ * - pageState - Like pageEditing, but a string: normal, preview or edit.
+ * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.
+ *
+ * @see https://jss.sitecore.com/docs/techniques/extending-layout-service/layoutservice-extending-context
+ *
+ * @param {WithSitecoreContextOptions} [options] hook options
+ *
+ * @example
+ * const EditMode = () => {
+ *    const { sitecoreContext } = useSitecoreContext();
+ *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ *
+ * @example
+ * const EditMode = () => {
+ *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
+ *    const onClick = () => updateSitecoreContext({ pageEditing: true });
+ *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @returns {Object} { sitecoreContext, updateSitecoreContext }
+ */
+export function useSitecoreContext(options) {
+    const reactContext = React.useContext(SitecoreContextReactContext);
+    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
+    return {
+        sitecoreContext: reactContext.context,
+        updateSitecoreContext: updatable ? reactContext.setContext : undefined,
+    };
+}

package/dist/esm/index.js

@@ -0,0 +1,23 @@
+export { constants, NativeDataFetcher, enableDebug, } from '@sitecore-jss/sitecore-jss';
+export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/utils';
+export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
+export { GraphQLDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
+export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+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 { SitecoreContext, SitecoreContextReactContext, } from './components/SitecoreContext';
+export { withSitecoreContext, useSitecoreContext, } from './enhancers/withSitecoreContext';
+export { withEditorChromes } from './enhancers/withEditorChromes';
+export { withPlaceholder } from './enhancers/withPlaceholder';
+export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
+export { EditFrame } from './components/EditFrame';
+export { ComponentBuilder } from './ComponentBuilder';