@sitecore-jss/sitecore-jss-react 21.3.0-canary.2 → 21.3.0-canary.20

package/README.md

@@ -3,8 +3,8 @@
 This module is provided as a part of Sitecore JavaScript Rendering SDK (JSS). It contains React components and integration for JSS.
 
 <!---
-@TODO: Update to version 20.0.0 docs before release
+@TODO: Update to next version docs before release
 -->
-[Documentation](https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
 
-[API reference documentation](/ref-docs/sitecore-jss-react/).
+[API reference documentation](/ref-docs/sitecore-jss-react/)

package/dist/cjs/components/FEaaSComponent.js

@@ -44,9 +44,9 @@ exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
  * @param {FEaaSComponentProps} props component props
  */
 const FEaaSComponent = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    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.lastModified || !props.template) &&
+    if (!props.template &&
         (!props.params ||
             !props.params.LibraryId ||
             !props.params.ComponentId ||
@@ -59,17 +59,21 @@ const FEaaSComponent = (props) => {
     let data = null;
     if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentDataOverride) {
         // Use override data if provided
-        data = props.params.ComponentDataOverride;
+        try {
+            data = JSON.parse(props.params.ComponentDataOverride);
+        }
+        catch (e) {
+            data = null;
+        }
     }
     else if (props.fields) {
         // Otherwise use datasource data (provided in fields)
-        // FEaaS expects wrapping "_" as catch-all datasource template id
-        data = JSON.stringify({ _: getDataFromFields(props.fields) });
+        data = getDataFromFields(props.fields);
     }
     // 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
-    return (react_1.default.createElement(FEAAS.Component, { data: data, template: props.template || '', "last-modified": props.lastModified, 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, revision: computedRevision }));
+    return (react_1.default.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 }));
 };
 exports.FEaaSComponent = FEaaSComponent;
 /**
@@ -84,11 +88,10 @@ function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
         const revisionFallback = pageState && pageState !== layout_1.LayoutServicePageState.Normal ? 'staged' : 'published';
         const src = endpointOverride || (0, exports.composeComponentEndpoint)(params, revisionFallback);
         try {
-            const { template, lastModified } = yield FEAAS.fetchComponent(src);
+            const { template } = yield FEAAS.fetchComponent(src);
             return {
                 revisionFallback,
                 template,
-                lastModified,
             };
         }
         catch (e) {

package/dist/cjs/components/Image.js

@@ -18,8 +18,8 @@ exports.Image = exports.getEEMarkup = void 0;
 const media_1 = require("@sitecore-jss/sitecore-jss/media");
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
-const server_1 = __importDefault(require("react-dom/server"));
 const utils_1 = require("../utils");
+const utils_2 = require("../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
@@ -61,7 +61,7 @@ const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
     if (!imgAttrs) {
         return getEditableWrapper(imageField.editable);
     }
-    const imgHtml = server_1.default.renderToStaticMarkup(react_1.default.createElement("img", Object.assign({}, imgAttrs)));
+    const imgHtml = `<img ${(0, utils_2.getAttributesString)(imgAttrs)} />`;
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };

package/dist/cjs/components/Placeholder.js

@@ -50,36 +50,8 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
         }
         const renderingData = childProps.rendering;
         const placeholderData = PlaceholderCommon_1.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 && utils_1.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/cjs/utils.js

@@ -1,6 +1,17 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
+exports.getAttributesString = exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
 const style_attr_1 = require("style-attr");
 // https://stackoverflow.com/a/10426674/9324
 const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -51,7 +62,7 @@ exports.convertAttributesToReactProps = convertAttributesToReactProps;
 /**
  * "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}
  */
 const addClassName = (otherAttrs) => {
     if (otherAttrs.class) {
@@ -68,3 +79,25 @@ const addClassName = (otherAttrs) => {
     }
 };
 exports.addClassName = addClassName;
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+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(' ');
+};
+exports.getAttributesString = getAttributesString;

package/dist/esm/components/FEaaSComponent.js

@@ -15,9 +15,9 @@ export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
  * @param {FEaaSComponentProps} props component props
  */
 export const FEaaSComponent = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    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.lastModified || !props.template) &&
+    if (!props.template &&
         (!props.params ||
             !props.params.LibraryId ||
             !props.params.ComponentId ||
@@ -30,17 +30,21 @@ export const FEaaSComponent = (props) => {
     let data = null;
     if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentDataOverride) {
         // Use override data if provided
-        data = props.params.ComponentDataOverride;
+        try {
+            data = JSON.parse(props.params.ComponentDataOverride);
+        }
+        catch (e) {
+            data = null;
+        }
     }
     else if (props.fields) {
         // Otherwise use datasource data (provided in fields)
-        // FEaaS expects wrapping "_" as catch-all datasource template id
-        data = JSON.stringify({ _: getDataFromFields(props.fields) });
+        data = getDataFromFields(props.fields);
     }
     // 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
-    return (React.createElement(FEAAS.Component, { data: data, template: props.template || '', "last-modified": props.lastModified, 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, revision: computedRevision }));
+    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 }));
 };
 /**
  * Fetches server component props required for server rendering, based on rendering params.
@@ -54,11 +58,10 @@ export function fetchFEaaSComponentServerProps(params, pageState, endpointOverri
         const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
         const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
         try {
-            const { template, lastModified } = yield FEAAS.fetchComponent(src);
+            const { template } = yield FEAAS.fetchComponent(src);
             return {
                 revisionFallback,
                 template,
-                lastModified,
             };
         }
         catch (e) {

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/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/utils.js

@@ -1,3 +1,14 @@
+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 { 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 +56,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 +72,24 @@ 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(' ');
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "21.3.0-canary.2",
+  "version": "21.3.0-canary.20",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -62,14 +62,14 @@
   },
   "dependencies": {
     "@sitecore-feaas/clientside": "^0.3.0",
-    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.2",
+    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.20",
     "deep-equal": "^2.1.0",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "a498d1b8b6bab066a58907a2a01a554b9d20bd42",
+  "gitHead": "3a9baacdffce61e550e640459137e1adaee16026",
   "files": [
     "dist",
     "types"

package/types/components/FEaaSComponent.d.ts

@@ -24,10 +24,6 @@ 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
      */

package/types/utils.d.ts

@@ -18,8 +18,16 @@ 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;