@sitecore-jss/sitecore-jss-react 23.0.0-canary.9 → 23.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/LICENSE.txt +202 -202
  2. package/README.md +10 -10
  3. package/dist/cjs/components/Date.js +3 -5
  4. package/dist/cjs/components/ErrorBoundary.js +18 -2
  5. package/dist/cjs/components/Image.js +5 -10
  6. package/dist/cjs/components/Link.js +5 -8
  7. package/dist/cjs/components/Placeholder.js +3 -10
  8. package/dist/cjs/components/PlaceholderCommon.js +8 -44
  9. package/dist/cjs/components/RichText.js +10 -11
  10. package/dist/cjs/components/SitecoreContext.js +0 -8
  11. package/dist/cjs/components/Text.js +3 -6
  12. package/dist/cjs/enhancers/withDatasourceCheck.js +1 -4
  13. package/dist/cjs/enhancers/withPlaceholder.js +2 -2
  14. package/dist/cjs/enhancers/withSitecoreContext.js +1 -2
  15. package/dist/cjs/index.js +1 -28
  16. package/dist/cjs/utils.js +1 -16
  17. package/dist/esm/components/Date.js +2 -5
  18. package/dist/esm/components/ErrorBoundary.js +18 -2
  19. package/dist/esm/components/Image.js +4 -10
  20. package/dist/esm/components/Link.js +5 -8
  21. package/dist/esm/components/Placeholder.js +3 -10
  22. package/dist/esm/components/PlaceholderCommon.js +9 -45
  23. package/dist/esm/components/RichText.js +11 -12
  24. package/dist/esm/components/SitecoreContext.js +0 -8
  25. package/dist/esm/components/Text.js +2 -6
  26. package/dist/esm/enhancers/withDatasourceCheck.js +1 -4
  27. package/dist/esm/enhancers/withPlaceholder.js +2 -2
  28. package/dist/esm/enhancers/withSitecoreContext.js +2 -3
  29. package/dist/esm/index.js +1 -11
  30. package/dist/esm/utils.js +0 -14
  31. package/package.json +3 -6
  32. package/types/ComponentBuilder.d.ts +0 -1
  33. package/types/components/Date.d.ts +2 -4
  34. package/types/components/EditFrame.d.ts +0 -1
  35. package/types/components/ErrorBoundary.d.ts +0 -1
  36. package/types/components/File.d.ts +0 -1
  37. package/types/components/HiddenRendering.d.ts +0 -1
  38. package/types/components/Image.d.ts +2 -4
  39. package/types/components/Link.d.ts +3 -5
  40. package/types/components/MissingComponent.d.ts +0 -1
  41. package/types/components/Placeholder.d.ts +0 -1
  42. package/types/components/PlaceholderCommon.d.ts +5 -4
  43. package/types/components/RichText.d.ts +3 -5
  44. package/types/components/SitecoreContext.d.ts +0 -21
  45. package/types/components/Text.d.ts +2 -4
  46. package/types/components/VisitorIdentification.d.ts +0 -1
  47. package/types/components/sharedTypes.d.ts +1 -8
  48. package/types/enhancers/withComponentFactory.d.ts +0 -1
  49. package/types/enhancers/withDatasourceCheck.d.ts +0 -1
  50. package/types/enhancers/withEditorChromes.d.ts +0 -1
  51. package/types/enhancers/withPlaceholder.d.ts +0 -1
  52. package/types/enhancers/withSitecoreContext.d.ts +1 -3
  53. package/types/index.d.ts +1 -11
  54. package/types/utils.d.ts +0 -9
  55. package/dist/cjs/components/BYOCComponent.js +0 -122
  56. package/dist/cjs/components/BYOCWrapper.js +0 -18
  57. package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js +0 -22
  58. package/dist/cjs/components/DesignLibrary.js +0 -72
  59. package/dist/cjs/components/EditingScripts.js +0 -47
  60. package/dist/cjs/components/FEaaSComponent.js +0 -151
  61. package/dist/cjs/components/FEaaSWrapper.js +0 -18
  62. package/dist/cjs/components/FieldMetadata.js +0 -29
  63. package/dist/cjs/components/Form.js +0 -80
  64. package/dist/cjs/components/PlaceholderMetadata.js +0 -63
  65. package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js +0 -63
  66. package/dist/cjs/enhancers/withFieldMetadata.js +0 -60
  67. package/dist/esm/components/BYOCComponent.js +0 -91
  68. package/dist/esm/components/BYOCWrapper.js +0 -11
  69. package/dist/esm/components/DefaultEmptyFieldEditingComponents.js +0 -14
  70. package/dist/esm/components/DesignLibrary.js +0 -45
  71. package/dist/esm/components/EditingScripts.js +0 -40
  72. package/dist/esm/components/FEaaSComponent.js +0 -119
  73. package/dist/esm/components/FEaaSWrapper.js +0 -11
  74. package/dist/esm/components/FieldMetadata.js +0 -22
  75. package/dist/esm/components/Form.js +0 -52
  76. package/dist/esm/components/PlaceholderMetadata.js +0 -56
  77. package/dist/esm/enhancers/withEmptyFieldEditingComponent.js +0 -36
  78. package/dist/esm/enhancers/withFieldMetadata.js +0 -33
  79. package/types/components/BYOCComponent.d.ts +0 -91
  80. package/types/components/BYOCWrapper.d.ts +0 -4
  81. package/types/components/DefaultEmptyFieldEditingComponents.d.ts +0 -10
  82. package/types/components/DesignLibrary.d.ts +0 -3
  83. package/types/components/EditingScripts.d.ts +0 -8
  84. package/types/components/FEaaSComponent.d.ts +0 -72
  85. package/types/components/FEaaSWrapper.d.ts +0 -4
  86. package/types/components/FieldMetadata.d.ts +0 -18
  87. package/types/components/Form.d.ts +0 -30
  88. package/types/components/PlaceholderMetadata.d.ts +0 -29
  89. package/types/enhancers/withEmptyFieldEditingComponent.d.ts +0 -28
  90. package/types/enhancers/withFieldMetadata.d.ts +0 -17
@@ -1,63 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.PlaceholderMetadata = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
9
- const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
10
- /**
11
- * A React component to generate metadata blocks for a placeholder or rendering.
12
- * It utilizes dynamic attributes based on whether the component acts as a placeholder
13
- * or as a rendering to properly render the surrounding code blocks.
14
- * @param {object} props The properties passed to the component.
15
- * @param {ComponentRendering} props.rendering The rendering data.
16
- * @param {string} [props.placeholderName] The name of the placeholder.
17
- * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
18
- * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
19
- */
20
- const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
21
- const getCodeBlockAttributes = (kind, id, placeholderName) => {
22
- const chrometype = placeholderName ? 'placeholder' : 'rendering';
23
- const attributes = {
24
- type: 'text/sitecore',
25
- chrometype: chrometype,
26
- className: 'scpm',
27
- kind: kind,
28
- };
29
- if (kind === editing_1.MetadataKind.Open) {
30
- if (chrometype === 'placeholder' && placeholderName) {
31
- let phId = '';
32
- for (const placeholder of Object.keys(rendering.placeholders)) {
33
- if (placeholderName === placeholder) {
34
- phId = id
35
- ? `${placeholderName}_${id}`
36
- : `${placeholderName}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
37
- break;
38
- }
39
- // Check if the placeholder is a dynamic placeholder
40
- if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
41
- const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
42
- // Check if the placeholder matches the dynamic placeholder pattern
43
- if (pattern.test(placeholderName)) {
44
- phId = id ? `${placeholder}_${id}` : `${placeholder}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
45
- break;
46
- }
47
- }
48
- }
49
- attributes.id = phId;
50
- }
51
- else {
52
- attributes.id = id;
53
- }
54
- }
55
- return attributes;
56
- };
57
- const renderComponent = (uid, placeholderName) => (react_1.default.createElement(react_1.default.Fragment, null,
58
- react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Open, uid, placeholderName))),
59
- children,
60
- react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Close, uid, placeholderName)))));
61
- return react_1.default.createElement(react_1.default.Fragment, null, renderComponent(rendering.uid, placeholderName));
62
- };
63
- exports.PlaceholderMetadata = PlaceholderMetadata;
@@ -1,63 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.withEmptyFieldEditingComponent = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
29
- /**
30
- * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
31
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
32
- * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
33
- */
34
- function withEmptyFieldEditingComponent(FieldComponent, options) {
35
- const getEmptyFieldEditingComponent = (props) => {
36
- var _a;
37
- const { editable = true } = props;
38
- if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && (0, layout_1.isFieldValueEmpty)(props.field)) {
39
- const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
40
- let resolvedProps = props;
41
- // If no custom empty field editing component is provided, we can omit unnecessary props
42
- // to do not insert them to html
43
- if (!props.emptyFieldEditingComponent) {
44
- resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
45
- }
46
- return react_1.default.createElement(Component, Object.assign({}, resolvedProps));
47
- }
48
- return null;
49
- };
50
- if (options.isForwardRef) {
51
- // eslint-disable-next-line react/display-name
52
- return (0, react_1.forwardRef)((props, ref) => {
53
- const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
54
- return (emptyFieldEditingComponent || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
55
- });
56
- }
57
- // eslint-disable-next-line react/display-name
58
- return (props) => {
59
- const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
60
- return emptyFieldEditingComponent || react_1.default.createElement(FieldComponent, Object.assign({}, props));
61
- };
62
- }
63
- exports.withEmptyFieldEditingComponent = withEmptyFieldEditingComponent;
@@ -1,60 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.withFieldMetadata = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const FieldMetadata_1 = require("../components/FieldMetadata");
29
- /**
30
- * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
31
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
32
- * @param {boolean} isForwardRef set to 'true' if forward reference is needed
33
- */
34
- function withFieldMetadata(FieldComponent, isForwardRef = false) {
35
- if (isForwardRef) {
36
- // eslint-disable-next-line react/display-name
37
- return (0, react_1.forwardRef)((props, ref) => {
38
- var _a;
39
- const { editable = true } = props;
40
- const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
41
- if (!metadata || !editable) {
42
- return react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
43
- }
44
- return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
45
- react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
46
- });
47
- }
48
- // eslint-disable-next-line react/display-name
49
- return (props) => {
50
- var _a;
51
- const { editable = true } = props;
52
- const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
53
- if (!metadata || !editable) {
54
- return react_1.default.createElement(FieldComponent, Object.assign({}, props));
55
- }
56
- return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
57
- react_1.default.createElement(FieldComponent, Object.assign({}, props))));
58
- };
59
- }
60
- exports.withFieldMetadata = withFieldMetadata;
@@ -1,91 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import React from 'react';
11
- import { getDataFromFields } from '../utils';
12
- import { MissingComponent } from './MissingComponent';
13
- import * as FEAAS from '@sitecore-feaas/clientside/react';
14
- export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
15
- const DefaultErrorComponent = (props) => {
16
- var _a;
17
- return (React.createElement("div", null,
18
- "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
19
- _a.message,
20
- "."));
21
- };
22
- /**
23
- * BYOCComponent facilitate the rendering of external components. It manages potential errors,
24
- * missing components, and customization of error messages or alternative rendering components.
25
- * @param {ByocComponentProps} props component props
26
- * @returns dynamicly rendered component or Missing Component error frame
27
- */
28
- export class BYOCComponent extends React.Component {
29
- constructor(props) {
30
- super(props);
31
- this.state = {};
32
- }
33
- static getDerivedStateFromError(error) {
34
- // Update state so the next render will show the fallback UI.
35
- return { error: error };
36
- }
37
- componentDidCatch(error) {
38
- this.setState({ error });
39
- }
40
- render() {
41
- var _a, _b, _c;
42
- const props = this.props;
43
- if (this.state.error) {
44
- return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
45
- }
46
- const { ComponentName: componentName } = props.params || {};
47
- if (!componentName) {
48
- const noNameProps = {
49
- errorOverride: 'BYOC: The ComponentName for this rendering is missing',
50
- };
51
- return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (React.createElement(MissingComponent, Object.assign({}, noNameProps)));
52
- }
53
- const unRegisteredComponentProps = {
54
- rendering: {
55
- componentName: componentName,
56
- },
57
- errorOverride: 'BYOC: This component was not registered.',
58
- };
59
- const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
60
- const ErrorComponent = this.props.errorComponent;
61
- let componentProps = {};
62
- if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
63
- try {
64
- componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
65
- }
66
- catch (e) {
67
- console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
68
- return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
69
- }
70
- }
71
- // apply props from item datasource
72
- const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
73
- // we render fallback on client to avoid problems with client-only components
74
- return (React.createElement(FEAAS.ExternalComponent, Object.assign({}, props.rendering, { componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
75
- }
76
- }
77
- /**
78
- * Fetches server component props required for server rendering, based on rendering params.
79
- * @param {BYOCComponentParams} params component params
80
- */
81
- export function fetchBYOCComponentServerProps(params) {
82
- return __awaiter(this, void 0, void 0, function* () {
83
- const fetchDataOptions = params.ComponentDataOverride
84
- ? JSON.parse(params.ComponentDataOverride)
85
- : {};
86
- const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
87
- return {
88
- fetchedData,
89
- };
90
- });
91
- }
@@ -1,11 +0,0 @@
1
- import { BYOCComponent } from './BYOCComponent';
2
- import React from 'react';
3
- export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
4
- export const BYOCWrapper = (props) => {
5
- var _a, _b, _c;
6
- const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
7
- const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
8
- return (React.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
9
- React.createElement("div", { className: "component-content" },
10
- React.createElement(BYOCComponent, Object.assign({}, props)))));
11
- };
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- export const DefaultEmptyFieldEditingComponentText = (props) => {
3
- return React.createElement(props.tag || 'span', props, '[No text in field]');
4
- };
5
- export const DefaultEmptyFieldEditingComponentImage = (props) => {
6
- const inlineStyles = {
7
- minWidth: '48px',
8
- minHeight: '48px',
9
- maxWidth: '400px',
10
- maxHeight: '400px',
11
- cursor: 'pointer',
12
- };
13
- return (React.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', style: inlineStyles, className: `scEmptyImage ${props.className || ''}` })));
14
- };
@@ -1,45 +0,0 @@
1
- import React, { useEffect, useMemo, useState } from 'react';
2
- import { Placeholder } from './Placeholder';
3
- import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, RenderingType, } from '@sitecore-jss/sitecore-jss/layout';
4
- import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-jss/sitecore-jss/editing';
5
- export const DesignLibrary = (layoutData) => {
6
- const { route } = layoutData.sitecore;
7
- const isDesignLibrary = layoutData.sitecore.context.renderingType === RenderingType.Component;
8
- if (!isDesignLibrary) {
9
- return React.createElement(React.Fragment, null);
10
- }
11
- const [renderKey, setRenderKey] = useState(0);
12
- const [rootUpdate, setRootUpdate] = useState(null);
13
- const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
14
- // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
15
- let componentReady = false;
16
- // have an up-to-date layout state between re-renders (SSR re-render excluded)
17
- const persistedRoot = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
18
- rootComponent,
19
- rootUpdate,
20
- ]);
21
- route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
22
- useEffect(() => {
23
- // useEffect will fire when components are ready - and we inform the whole wide world of it too
24
- if (!componentReady) {
25
- componentReady = true;
26
- window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rootComponent.uid), '*');
27
- }
28
- const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
29
- setRootUpdate(Object.assign({}, updatedRoot));
30
- setRenderKey((key) => key + 1);
31
- });
32
- // useEffect will cleanup event handler on re-render
33
- return unsubscribe;
34
- }, []);
35
- useEffect(() => {
36
- // Send a rendered event only as effect of a component update command
37
- if (renderKey === 0) {
38
- return;
39
- }
40
- window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
41
- }, [renderKey, rootComponent.uid]);
42
- return (React.createElement(React.Fragment, null,
43
- React.createElement("main", null,
44
- React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
45
- };
@@ -1,40 +0,0 @@
1
- import React from 'react';
2
- import { EditMode, LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
3
- import { useSitecoreContext } from '../enhancers/withSitecoreContext';
4
- import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
5
- import { getDesignLibraryScriptLink } from '@sitecore-jss/sitecore-jss/editing';
6
- /**
7
- * - Renders client scripts and data for editing/preview mode for Pages
8
- * - Renders script required for the Design Library (when RenderingType is `component`).
9
- * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
10
- * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
11
- */
12
- export const EditingScripts = () => {
13
- var _a;
14
- const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = useSitecoreContext();
15
- // Don't render anything if not in editing/preview mode and rendering type is not component
16
- if (renderingType !== RenderingType.Component &&
17
- (pageState === LayoutServicePageState.Normal || pageState === LayoutServicePageState.Preview)) {
18
- return React.createElement(React.Fragment, null);
19
- }
20
- // In case of RenderingType.Component - render only the script for Design Libnrary
21
- if (renderingType === RenderingType.Component) {
22
- // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
23
- const now = new Date();
24
- const hour = String(now.getUTCHours()).padStart(2, '0');
25
- const day = String(now.getUTCDate()).padStart(2, '0');
26
- const month = String(now.getUTCMonth() + 1).padStart(2, '0');
27
- const year = String(now.getUTCFullYear());
28
- const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
29
- const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
30
- return (React.createElement(React.Fragment, null,
31
- React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
32
- }
33
- if (editMode === EditMode.Metadata) {
34
- const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
35
- return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
36
- clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
37
- Object.keys(jssClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
38
- }
39
- return React.createElement(React.Fragment, null);
40
- };
@@ -1,119 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import React from 'react';
11
- import * as FEAAS from '@sitecore-feaas/clientside/react';
12
- import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
13
- import { getDataFromFields } from '../utils';
14
- export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
15
- /**
16
- * @param {FEaaSComponentProps} props component props
17
- */
18
- export const FEaaSComponent = (props) => {
19
- var _a, _b, _c, _d, _e, _f, _g;
20
- const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
21
- if (!props.template &&
22
- (!props.params ||
23
- !props.params.LibraryId ||
24
- !props.params.ComponentId ||
25
- !props.params.ComponentVersion ||
26
- !props.params.ComponentHostName ||
27
- !computedRevision)) {
28
- // Missing FEaaS component required props
29
- return null;
30
- }
31
- // combine fetchedData from server with datasource data (if present)
32
- const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
33
- // FEaaS control would still be hydrated by client
34
- // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
35
- // this also allows component to fall back to full client-side rendering when template or src is empty
36
- // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
37
- 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: [] }));
38
- };
39
- /**
40
- * Fetches server component props required for server rendering, based on rendering params.
41
- * Component endpoint will either be retrieved from params or from endpointOverride
42
- * @param {FEaaSComponentParams} params component params
43
- * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
44
- * @param {string} [endpointOverride] optional override for component endpoint
45
- */
46
- export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
47
- return __awaiter(this, void 0, void 0, function* () {
48
- const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
49
- const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
50
- let template = '';
51
- let fetchedData = {};
52
- const fetchDataOptions = params.ComponentDataOverride
53
- ? JSON.parse(params.ComponentDataOverride)
54
- : {};
55
- try {
56
- template = yield fetchComponentTemplate(src, params, revisionFallback);
57
- fetchedData = yield fetchData(fetchDataOptions);
58
- }
59
- catch (e) {
60
- console.error(e);
61
- }
62
- return {
63
- fetchedData,
64
- revisionFallback,
65
- template,
66
- };
67
- });
68
- }
69
- /**
70
- * @param {string} src component endpoint
71
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
72
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
73
- */
74
- function fetchComponentTemplate(src, params, revisionFallback) {
75
- return __awaiter(this, void 0, void 0, function* () {
76
- try {
77
- const { template } = yield FEAAS.fetchComponent(src);
78
- return template;
79
- }
80
- catch (error) {
81
- console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
82
- revisionFallback}" is present`);
83
- throw error;
84
- }
85
- });
86
- }
87
- /**
88
- * Fetches component data based on the provided data options.
89
- * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
90
- * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
91
- * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
92
- * or rejects with an error if data fetching encounters an issue.
93
- * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
94
- */
95
- function fetchData(dataOptions) {
96
- return __awaiter(this, void 0, void 0, function* () {
97
- try {
98
- const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
99
- return fetchedData;
100
- }
101
- catch (error) {
102
- console.error('Fetch FEAAS component data settings failed');
103
- throw error;
104
- }
105
- });
106
- }
107
- /**
108
- * Build component endpoint URL from component's params
109
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
110
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
111
- * @returns component endpoint URL
112
- */
113
- export const composeComponentEndpoint = (params, revisionFallback) => {
114
- const revision = params.ComponentRevision || revisionFallback;
115
- const hostname = params.ComponentHostName.startsWith('https://')
116
- ? params.ComponentHostName
117
- : `https://${params.ComponentHostName}`;
118
- return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
119
- };
@@ -1,11 +0,0 @@
1
- import { FEaaSComponent } from './FEaaSComponent';
2
- import React from 'react';
3
- export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
4
- export const FEaaSWrapper = (props) => {
5
- var _a, _b;
6
- const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
7
- const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
8
- return (React.createElement("div", { className: styles, id: id ? id : undefined },
9
- React.createElement("div", { className: "component-content" },
10
- React.createElement(FEaaSComponent, Object.assign({}, props)))));
11
- };
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- import { MetadataKind } from '@sitecore-jss/sitecore-jss/editing';
3
- /**
4
- * The component which renders field metadata markup
5
- * @param {FieldMetadataProps} props the props of the component
6
- * @returns metadata markup wrapped around children
7
- */
8
- export const FieldMetadata = (props) => {
9
- const data = JSON.stringify(props.metadata);
10
- const attributes = {
11
- type: 'text/sitecore',
12
- chrometype: 'field',
13
- className: 'scpm',
14
- };
15
- const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
16
- const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
17
- return (React.createElement(React.Fragment, null,
18
- React.createElement("code", Object.assign({}, codeOpenAttributes), data),
19
- props.children,
20
- React.createElement("code", Object.assign({}, codeCloseAttributes))));
21
- };
22
- FieldMetadata.displayName = 'FieldMetadata';
@@ -1,52 +0,0 @@
1
- /* eslint-disable prefer-const */
2
- import React, { useEffect, useRef, useState } from 'react';
3
- import { form } from '@sitecore-jss/sitecore-jss';
4
- import { useSitecoreContext } from '../enhancers/withSitecoreContext';
5
- let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
6
- /**
7
- * Mock function to replace the form module functions for `testing` purposes.
8
- * @param {any} formModule - The form module to mock
9
- */
10
- export const mockFormModule = (formModule) => {
11
- executeScriptElements = formModule.executeScriptElements;
12
- loadForm = formModule.loadForm;
13
- subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
14
- };
15
- export const Form = ({ params, rendering }) => {
16
- var _a, _b, _c, _d, _e;
17
- const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
18
- const [error, setError] = useState(false);
19
- const [content, setContent] = useState('');
20
- const context = useSitecoreContext();
21
- const formRef = useRef(null);
22
- const isEditing = context.sitecoreContext.pageEditing;
23
- useEffect(() => {
24
- var _a, _b, _c, _d;
25
- if (!content) {
26
- loadForm((_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
27
- .then(setContent)
28
- .catch(() => {
29
- if (isEditing) {
30
- console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
31
- }
32
- setError(true);
33
- });
34
- }
35
- }, [content, params.FormId, (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl, isEditing]);
36
- useEffect(() => {
37
- if (!content || !formRef.current)
38
- return;
39
- formRef.current.innerHTML = content;
40
- executeScriptElements(formRef.current);
41
- // If we are in editing mode, we don't want to send any events
42
- if (!isEditing) {
43
- subscribeToFormSubmitEvent(formRef.current, rendering.uid);
44
- }
45
- }, [content, isEditing, rendering.uid]);
46
- if (isEditing) {
47
- if (error) {
48
- return (React.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
49
- }
50
- }
51
- return React.createElement("div", { ref: formRef, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined });
52
- };