@sitecore-jss/sitecore-jss-react 23.0.0-canary.8 → 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,13 +1,11 @@
1
- /// <reference types="@types/react" />
2
1
  import React from 'react';
3
2
  import { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
4
- import { SitecoreContextState, SitecoreContextValue } from '../components/SitecoreContext';
3
+ import { SitecoreContextValue } from '../components/SitecoreContext';
5
4
  export interface WithSitecoreContextOptions {
6
5
  updatable?: boolean;
7
6
  }
8
7
  export interface WithSitecoreContextProps {
9
8
  sitecoreContext: SitecoreContextValue;
10
- api?: SitecoreContextState['api'];
11
9
  updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
12
10
  }
13
11
  export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;
package/types/index.d.ts CHANGED
@@ -1,23 +1,17 @@
1
1
  export { constants, enableDebug, ClientError, CacheClient, CacheOptions, MemoryCacheClient, HttpDataFetcher, NativeDataFetcher, NativeDataFetcherError, NativeDataFetcherResponse, NativeDataFetcherConfig, } from '@sitecore-jss/sitecore-jss';
2
2
  export { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
3
3
  export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, EditFrameDataSource, FieldEditButton, WebEditButton, EditButtonTypes, } from '@sitecore-jss/sitecore-jss/editing';
4
- export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
4
+ export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
5
5
  export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
6
6
  export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
7
7
  export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
8
8
  export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
9
9
  export { ComponentFactory, JssComponentType } from './components/sharedTypes';
10
10
  export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
11
- export { Form } from './components/Form';
12
11
  export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
13
12
  export { RichText, RichTextProps, RichTextField } from './components/RichText';
14
13
  export { Text, TextField } from './components/Text';
15
14
  export { DateField, DateFieldProps } from './components/Date';
16
- export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
17
- export { FEaaSWrapper } from './components/FEaaSWrapper';
18
- export { DesignLibrary } from './components/DesignLibrary';
19
- export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
20
- export { BYOCWrapper } from './components/BYOCWrapper';
21
15
  export { Link, LinkField, LinkFieldValue, LinkProps } from './components/Link';
22
16
  export { File, FileField } from './components/File';
23
17
  export { VisitorIdentification } from './components/VisitorIdentification';
@@ -28,7 +22,3 @@ export { withPlaceholder } from './enhancers/withPlaceholder';
28
22
  export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
29
23
  export { EditFrameProps, EditFrame } from './components/EditFrame';
30
24
  export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
31
- export { withFieldMetadata } from './enhancers/withFieldMetadata';
32
- export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
33
- export { EditingScripts } from './components/EditingScripts';
34
- export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';
package/types/utils.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
2
1
  export declare const convertKebabCasetoCamelCase: (str: string) => string;
3
2
  /**
4
3
  * https://facebook.github.io/react/docs/dom-elements.html
@@ -32,11 +31,3 @@ export declare const addClassName: (otherAttrs: {
32
31
  export declare const getAttributesString: (attributes: {
33
32
  [key: string]: unknown;
34
33
  }) => string;
35
- /**
36
- * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
37
- * @param {ComponentFields} fields field collection from Sitecore
38
- * @returns JSON object that can be used as props
39
- */
40
- export declare const getDataFromFields: (fields: ComponentFields) => {
41
- [key: string]: unknown;
42
- };
@@ -1,122 +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
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
- return new (P || (P = Promise))(function (resolve, reject) {
28
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
- step((generator = generator.apply(thisArg, _arguments || [])).next());
32
- });
33
- };
34
- var __importDefault = (this && this.__importDefault) || function (mod) {
35
- return (mod && mod.__esModule) ? mod : { "default": mod };
36
- };
37
- Object.defineProperty(exports, "__esModule", { value: true });
38
- exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.BYOC_COMPONENT_RENDERING_NAME = void 0;
39
- const react_1 = __importDefault(require("react"));
40
- const utils_1 = require("../utils");
41
- const MissingComponent_1 = require("./MissingComponent");
42
- const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
43
- exports.BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
44
- const DefaultErrorComponent = (props) => {
45
- var _a;
46
- return (react_1.default.createElement("div", null,
47
- "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
48
- _a.message,
49
- "."));
50
- };
51
- /**
52
- * BYOCComponent facilitate the rendering of external components. It manages potential errors,
53
- * missing components, and customization of error messages or alternative rendering components.
54
- * @param {ByocComponentProps} props component props
55
- * @returns dynamicly rendered component or Missing Component error frame
56
- */
57
- class BYOCComponent extends react_1.default.Component {
58
- constructor(props) {
59
- super(props);
60
- this.state = {};
61
- }
62
- static getDerivedStateFromError(error) {
63
- // Update state so the next render will show the fallback UI.
64
- return { error: error };
65
- }
66
- componentDidCatch(error) {
67
- this.setState({ error });
68
- }
69
- render() {
70
- var _a, _b, _c;
71
- const props = this.props;
72
- if (this.state.error) {
73
- return this.props.errorComponent ? (react_1.default.createElement(this.props.errorComponent, { error: this.state.error })) : (react_1.default.createElement(DefaultErrorComponent, { error: this.state.error }));
74
- }
75
- const { ComponentName: componentName } = props.params || {};
76
- if (!componentName) {
77
- const noNameProps = {
78
- errorOverride: 'BYOC: The ComponentName for this rendering is missing',
79
- };
80
- return props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, noNameProps)));
81
- }
82
- const unRegisteredComponentProps = {
83
- rendering: {
84
- componentName: componentName,
85
- },
86
- errorOverride: 'BYOC: This component was not registered.',
87
- };
88
- const fallbackComponent = this.props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, unRegisteredComponentProps)));
89
- const ErrorComponent = this.props.errorComponent;
90
- let componentProps = {};
91
- if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
92
- try {
93
- componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
94
- }
95
- catch (e) {
96
- console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
97
- return ErrorComponent ? (react_1.default.createElement(ErrorComponent, { error: e })) : (react_1.default.createElement(DefaultErrorComponent, { error: e }));
98
- }
99
- }
100
- // apply props from item datasource
101
- const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: (0, utils_1.getDataFromFields)((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
102
- // we render fallback on client to avoid problems with client-only components
103
- return (react_1.default.createElement(FEAAS.ExternalComponent, Object.assign({}, props.rendering, { componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
104
- }
105
- }
106
- exports.BYOCComponent = BYOCComponent;
107
- /**
108
- * Fetches server component props required for server rendering, based on rendering params.
109
- * @param {BYOCComponentParams} params component params
110
- */
111
- function fetchBYOCComponentServerProps(params) {
112
- return __awaiter(this, void 0, void 0, function* () {
113
- const fetchDataOptions = params.ComponentDataOverride
114
- ? JSON.parse(params.ComponentDataOverride)
115
- : {};
116
- const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
117
- return {
118
- fetchedData,
119
- };
120
- });
121
- }
122
- exports.fetchBYOCComponentServerProps = fetchBYOCComponentServerProps;
@@ -1,18 +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.BYOCWrapper = exports.BYOC_WRAPPER_RENDERING_NAME = void 0;
7
- const BYOCComponent_1 = require("./BYOCComponent");
8
- const react_1 = __importDefault(require("react"));
9
- exports.BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
10
- const BYOCWrapper = (props) => {
11
- var _a, _b, _c;
12
- const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
13
- const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
14
- return (react_1.default.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
15
- react_1.default.createElement("div", { className: "component-content" },
16
- react_1.default.createElement(BYOCComponent_1.BYOCComponent, Object.assign({}, props)))));
17
- };
18
- exports.BYOCWrapper = BYOCWrapper;
@@ -1,22 +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.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const DefaultEmptyFieldEditingComponentText = (props) => {
9
- return react_1.default.createElement(props.tag || 'span', props, '[No text in field]');
10
- };
11
- exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
12
- const DefaultEmptyFieldEditingComponentImage = (props) => {
13
- const inlineStyles = {
14
- minWidth: '48px',
15
- minHeight: '48px',
16
- maxWidth: '400px',
17
- maxHeight: '400px',
18
- cursor: 'pointer',
19
- };
20
- return (react_1.default.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 || ''}` })));
21
- };
22
- exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;
@@ -1,72 +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.DesignLibrary = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const Placeholder_1 = require("./Placeholder");
29
- const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
30
- const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
31
- const DesignLibrary = (layoutData) => {
32
- const { route } = layoutData.sitecore;
33
- const isDesignLibrary = layoutData.sitecore.context.renderingType === layout_1.RenderingType.Component;
34
- if (!isDesignLibrary) {
35
- return react_1.default.createElement(react_1.default.Fragment, null);
36
- }
37
- const [renderKey, setRenderKey] = (0, react_1.useState)(0);
38
- const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
39
- const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
40
- // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
41
- let componentReady = false;
42
- // have an up-to-date layout state between re-renders (SSR re-render excluded)
43
- const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
44
- rootComponent,
45
- rootUpdate,
46
- ]);
47
- route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
48
- (0, react_1.useEffect)(() => {
49
- // useEffect will fire when components are ready - and we inform the whole wide world of it too
50
- if (!componentReady) {
51
- componentReady = true;
52
- window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
53
- }
54
- const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
55
- setRootUpdate(Object.assign({}, updatedRoot));
56
- setRenderKey((key) => key + 1);
57
- });
58
- // useEffect will cleanup event handler on re-render
59
- return unsubscribe;
60
- }, []);
61
- (0, react_1.useEffect)(() => {
62
- // Send a rendered event only as effect of a component update command
63
- if (renderKey === 0) {
64
- return;
65
- }
66
- window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
67
- }, [renderKey, rootComponent.uid]);
68
- return (react_1.default.createElement(react_1.default.Fragment, null,
69
- react_1.default.createElement("main", null,
70
- react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
71
- };
72
- exports.DesignLibrary = DesignLibrary;
@@ -1,47 +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.EditingScripts = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
9
- const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
10
- const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
11
- const editing_2 = require("@sitecore-jss/sitecore-jss/editing");
12
- /**
13
- * - Renders client scripts and data for editing/preview mode for Pages
14
- * - Renders script required for the Design Library (when RenderingType is `component`).
15
- * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
16
- * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
17
- */
18
- const EditingScripts = () => {
19
- var _a;
20
- const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = (0, withSitecoreContext_1.useSitecoreContext)();
21
- // Don't render anything if not in editing/preview mode and rendering type is not component
22
- if (renderingType !== layout_1.RenderingType.Component &&
23
- (pageState === layout_1.LayoutServicePageState.Normal || pageState === layout_1.LayoutServicePageState.Preview)) {
24
- return react_1.default.createElement(react_1.default.Fragment, null);
25
- }
26
- // In case of RenderingType.Component - render only the script for Design Libnrary
27
- if (renderingType === layout_1.RenderingType.Component) {
28
- // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
29
- const now = new Date();
30
- const hour = String(now.getUTCHours()).padStart(2, '0');
31
- const day = String(now.getUTCDate()).padStart(2, '0');
32
- const month = String(now.getUTCMonth() + 1).padStart(2, '0');
33
- const year = String(now.getUTCFullYear());
34
- const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
35
- const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
36
- return (react_1.default.createElement(react_1.default.Fragment, null,
37
- react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
38
- }
39
- if (editMode === layout_1.EditMode.Metadata) {
40
- const jssClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getJssPagesClientData)());
41
- return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
42
- clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
43
- Object.keys(jssClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
44
- }
45
- return react_1.default.createElement(react_1.default.Fragment, null);
46
- };
47
- exports.EditingScripts = EditingScripts;
@@ -1,151 +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
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
- return new (P || (P = Promise))(function (resolve, reject) {
28
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
- step((generator = generator.apply(thisArg, _arguments || [])).next());
32
- });
33
- };
34
- var __importDefault = (this && this.__importDefault) || function (mod) {
35
- return (mod && mod.__esModule) ? mod : { "default": mod };
36
- };
37
- Object.defineProperty(exports, "__esModule", { value: true });
38
- exports.composeComponentEndpoint = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.FEAAS_COMPONENT_RENDERING_NAME = void 0;
39
- const react_1 = __importDefault(require("react"));
40
- const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
41
- const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
42
- const utils_1 = require("../utils");
43
- exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
44
- /**
45
- * @param {FEaaSComponentProps} props component props
46
- */
47
- const FEaaSComponent = (props) => {
48
- var _a, _b, _c, _d, _e, _f, _g;
49
- const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
50
- if (!props.template &&
51
- (!props.params ||
52
- !props.params.LibraryId ||
53
- !props.params.ComponentId ||
54
- !props.params.ComponentVersion ||
55
- !props.params.ComponentHostName ||
56
- !computedRevision)) {
57
- // Missing FEaaS component required props
58
- return null;
59
- }
60
- // combine fetchedData from server with datasource data (if present)
61
- const data = Object.assign(Object.assign({}, props.fetchedData), { _: (0, utils_1.getDataFromFields)((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
62
- // FEaaS control would still be hydrated by client
63
- // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
64
- // this also allows component to fall back to full client-side rendering when template or src is empty
65
- // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
66
- 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, fetch: [] }));
67
- };
68
- exports.FEaaSComponent = FEaaSComponent;
69
- /**
70
- * Fetches server component props required for server rendering, based on rendering params.
71
- * Component endpoint will either be retrieved from params or from endpointOverride
72
- * @param {FEaaSComponentParams} params component params
73
- * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
74
- * @param {string} [endpointOverride] optional override for component endpoint
75
- */
76
- function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
77
- return __awaiter(this, void 0, void 0, function* () {
78
- const revisionFallback = pageState && pageState !== layout_1.LayoutServicePageState.Normal ? 'staged' : 'published';
79
- const src = endpointOverride || (0, exports.composeComponentEndpoint)(params, revisionFallback);
80
- let template = '';
81
- let fetchedData = {};
82
- const fetchDataOptions = params.ComponentDataOverride
83
- ? JSON.parse(params.ComponentDataOverride)
84
- : {};
85
- try {
86
- template = yield fetchComponentTemplate(src, params, revisionFallback);
87
- fetchedData = yield fetchData(fetchDataOptions);
88
- }
89
- catch (e) {
90
- console.error(e);
91
- }
92
- return {
93
- fetchedData,
94
- revisionFallback,
95
- template,
96
- };
97
- });
98
- }
99
- exports.fetchFEaaSComponentServerProps = fetchFEaaSComponentServerProps;
100
- /**
101
- * @param {string} src component endpoint
102
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
103
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
104
- */
105
- function fetchComponentTemplate(src, params, revisionFallback) {
106
- return __awaiter(this, void 0, void 0, function* () {
107
- try {
108
- const { template } = yield FEAAS.fetchComponent(src);
109
- return template;
110
- }
111
- catch (error) {
112
- console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
113
- revisionFallback}" is present`);
114
- throw error;
115
- }
116
- });
117
- }
118
- /**
119
- * Fetches component data based on the provided data options.
120
- * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
121
- * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
122
- * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
123
- * or rejects with an error if data fetching encounters an issue.
124
- * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
125
- */
126
- function fetchData(dataOptions) {
127
- return __awaiter(this, void 0, void 0, function* () {
128
- try {
129
- const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
130
- return fetchedData;
131
- }
132
- catch (error) {
133
- console.error('Fetch FEAAS component data settings failed');
134
- throw error;
135
- }
136
- });
137
- }
138
- /**
139
- * Build component endpoint URL from component's params
140
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
141
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
142
- * @returns component endpoint URL
143
- */
144
- const composeComponentEndpoint = (params, revisionFallback) => {
145
- const revision = params.ComponentRevision || revisionFallback;
146
- const hostname = params.ComponentHostName.startsWith('https://')
147
- ? params.ComponentHostName
148
- : `https://${params.ComponentHostName}`;
149
- return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
150
- };
151
- exports.composeComponentEndpoint = composeComponentEndpoint;
@@ -1,18 +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.FEaaSWrapper = exports.FEAAS_WRAPPER_RENDERING_NAME = void 0;
7
- const FEaaSComponent_1 = require("./FEaaSComponent");
8
- const react_1 = __importDefault(require("react"));
9
- exports.FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
10
- const FEaaSWrapper = (props) => {
11
- var _a, _b;
12
- const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
13
- const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
14
- return (react_1.default.createElement("div", { className: styles, id: id ? id : undefined },
15
- react_1.default.createElement("div", { className: "component-content" },
16
- react_1.default.createElement(FEaaSComponent_1.FEaaSComponent, Object.assign({}, props)))));
17
- };
18
- exports.FEaaSWrapper = FEaaSWrapper;
@@ -1,29 +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.FieldMetadata = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
9
- /**
10
- * The component which renders field metadata markup
11
- * @param {FieldMetadataProps} props the props of the component
12
- * @returns metadata markup wrapped around children
13
- */
14
- const FieldMetadata = (props) => {
15
- const data = JSON.stringify(props.metadata);
16
- const attributes = {
17
- type: 'text/sitecore',
18
- chrometype: 'field',
19
- className: 'scpm',
20
- };
21
- const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: editing_1.MetadataKind.Open });
22
- const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: editing_1.MetadataKind.Close });
23
- return (react_1.default.createElement(react_1.default.Fragment, null,
24
- react_1.default.createElement("code", Object.assign({}, codeOpenAttributes), data),
25
- props.children,
26
- react_1.default.createElement("code", Object.assign({}, codeCloseAttributes))));
27
- };
28
- exports.FieldMetadata = FieldMetadata;
29
- exports.FieldMetadata.displayName = 'FieldMetadata';
@@ -1,80 +0,0 @@
1
- "use strict";
2
- /* eslint-disable prefer-const */
3
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
- if (k2 === undefined) k2 = k;
5
- var desc = Object.getOwnPropertyDescriptor(m, k);
6
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
- desc = { enumerable: true, get: function() { return m[k]; } };
8
- }
9
- Object.defineProperty(o, k2, desc);
10
- }) : (function(o, m, k, k2) {
11
- if (k2 === undefined) k2 = k;
12
- o[k2] = m[k];
13
- }));
14
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
- Object.defineProperty(o, "default", { enumerable: true, value: v });
16
- }) : function(o, v) {
17
- o["default"] = v;
18
- });
19
- var __importStar = (this && this.__importStar) || function (mod) {
20
- if (mod && mod.__esModule) return mod;
21
- var result = {};
22
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
23
- __setModuleDefault(result, mod);
24
- return result;
25
- };
26
- Object.defineProperty(exports, "__esModule", { value: true });
27
- exports.Form = exports.mockFormModule = void 0;
28
- const react_1 = __importStar(require("react"));
29
- const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
30
- const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
31
- let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = sitecore_jss_1.form;
32
- /**
33
- * Mock function to replace the form module functions for `testing` purposes.
34
- * @param {any} formModule - The form module to mock
35
- */
36
- const mockFormModule = (formModule) => {
37
- executeScriptElements = formModule.executeScriptElements;
38
- loadForm = formModule.loadForm;
39
- subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
40
- };
41
- exports.mockFormModule = mockFormModule;
42
- const Form = ({ params, rendering }) => {
43
- var _a, _b, _c, _d, _e;
44
- const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
45
- const [error, setError] = (0, react_1.useState)(false);
46
- const [content, setContent] = (0, react_1.useState)('');
47
- const context = (0, withSitecoreContext_1.useSitecoreContext)();
48
- const formRef = (0, react_1.useRef)(null);
49
- const isEditing = context.sitecoreContext.pageEditing;
50
- (0, react_1.useEffect)(() => {
51
- var _a, _b, _c, _d;
52
- if (!content) {
53
- 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)
54
- .then(setContent)
55
- .catch(() => {
56
- if (isEditing) {
57
- console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
58
- }
59
- setError(true);
60
- });
61
- }
62
- }, [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]);
63
- (0, react_1.useEffect)(() => {
64
- if (!content || !formRef.current)
65
- return;
66
- formRef.current.innerHTML = content;
67
- executeScriptElements(formRef.current);
68
- // If we are in editing mode, we don't want to send any events
69
- if (!isEditing) {
70
- subscribeToFormSubmitEvent(formRef.current, rendering.uid);
71
- }
72
- }, [content, isEditing, rendering.uid]);
73
- if (isEditing) {
74
- if (error) {
75
- return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
76
- }
77
- }
78
- return react_1.default.createElement("div", { ref: formRef, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined });
79
- };
80
- exports.Form = Form;