@sitecore-jss/sitecore-jss-react 21.4.0-canary.1 → 21.4.0-canary.2

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 (7) hide show
  1. package/dist/cjs/components/BYOCComponent.js +40 -11
  2. package/dist/cjs/index.js +2 -1
  3. package/dist/esm/components/BYOCComponent.js +38 -10
  4. package/dist/esm/index.js +1 -1
  5. package/package.json +3 -3
  6. package/types/components/BYOCComponent.d.ts +18 -2
  7. package/types/index.d.ts +1 -1
package/dist/cjs/components/BYOCComponent.js CHANGED
@@ -22,11 +22,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
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
+ };
25
34
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
35
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
36
  };
28
37
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.BYOCComponent = exports.BYOC_COMPONENT_RENDERING_NAME = void 0;
38
+ exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.BYOC_COMPONENT_RENDERING_NAME = void 0;
30
39
  const react_1 = __importDefault(require("react"));
31
40
  const utils_1 = require("../utils");
32
41
  const MissingComponent_1 = require("./MissingComponent");
@@ -77,20 +86,40 @@ class BYOCComponent extends react_1.default.Component {
77
86
  errorOverride: 'BYOC: This component was not registered.',
78
87
  };
79
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)));
80
- let componentProps = undefined;
81
- if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
82
- try {
83
- componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
89
+ const ErrorComponent = this.props.errorComponent;
90
+ const isNull = Object.keys(props.fetchedData).length === 0;
91
+ let componentProps = isNull ? null : props.fetchedData;
92
+ if (!componentProps) {
93
+ if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
94
+ try {
95
+ componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
96
+ }
97
+ catch (e) {
98
+ console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
99
+ return ErrorComponent ? (react_1.default.createElement(ErrorComponent, { error: e })) : (react_1.default.createElement(DefaultErrorComponent, { error: e }));
100
+ }
84
101
  }
85
- catch (e) {
86
- console.warn(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
87
- return this.props.errorComponent ? (react_1.default.createElement(this.props.errorComponent, { error: e })) : (react_1.default.createElement(DefaultErrorComponent, { error: e }));
102
+ else {
103
+ componentProps = props.fields ? (0, utils_1.getDataFromFields)(props.fields) : {};
88
104
  }
89
105
  }
90
- if (!componentProps) {
91
- componentProps = props.fields ? (0, utils_1.getDataFromFields)(props.fields) : {};
92
- }
93
106
  return (react_1.default.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
94
107
  }
95
108
  }
96
109
  exports.BYOCComponent = BYOCComponent;
110
+ /**
111
+ * Fetches server component props required for server rendering, based on rendering params.
112
+ * @param {BYOCComponentParams} params component params
113
+ */
114
+ function fetchBYOCComponentServerProps(params) {
115
+ return __awaiter(this, void 0, void 0, function* () {
116
+ const fetchDataOptions = params.ComponentProps
117
+ ? JSON.parse(params.ComponentProps)
118
+ : {};
119
+ const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
120
+ return {
121
+ fetchedData,
122
+ };
123
+ });
124
+ }
125
+ exports.fetchBYOCComponentServerProps = fetchBYOCComponentServerProps;
package/dist/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.getFEAASLibraryStylesheetLinks = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.constants = void 0;
3
+ exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.getFEAASLibraryStylesheetLinks = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.constants = void 0;
4
4
  var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
5
5
  Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
6
6
  Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
@@ -43,6 +43,7 @@ var FEaaSWrapper_1 = require("./components/FEaaSWrapper");
43
43
  Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
44
44
  var BYOCComponent_1 = require("./components/BYOCComponent");
45
45
  Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
46
+ Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return BYOCComponent_1.fetchBYOCComponentServerProps; } });
46
47
  var BYOCWrapper_1 = require("./components/BYOCWrapper");
47
48
  Object.defineProperty(exports, "BYOCWrapper", { enumerable: true, get: function () { return BYOCWrapper_1.BYOCWrapper; } });
48
49
  var Link_1 = require("./components/Link");
package/dist/esm/components/BYOCComponent.js CHANGED
@@ -1,3 +1,12 @@
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
+ };
1
10
  import React from 'react';
2
11
  import { getDataFromFields } from '../utils';
3
12
  import { MissingComponent } from './MissingComponent';
@@ -48,19 +57,38 @@ export class BYOCComponent extends React.Component {
48
57
  errorOverride: 'BYOC: This component was not registered.',
49
58
  };
50
59
  const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
51
- let componentProps = undefined;
52
- if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
53
- try {
54
- componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
60
+ const ErrorComponent = this.props.errorComponent;
61
+ const isNull = Object.keys(props.fetchedData).length === 0;
62
+ let componentProps = isNull ? null : props.fetchedData;
63
+ if (!componentProps) {
64
+ if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
65
+ try {
66
+ componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
67
+ }
68
+ catch (e) {
69
+ console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
70
+ return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
71
+ }
55
72
  }
56
- catch (e) {
57
- console.warn(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
58
- return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
73
+ else {
74
+ componentProps = props.fields ? getDataFromFields(props.fields) : {};
59
75
  }
60
76
  }
61
- if (!componentProps) {
62
- componentProps = props.fields ? getDataFromFields(props.fields) : {};
63
- }
64
77
  return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
65
78
  }
66
79
  }
80
+ /**
81
+ * Fetches server component props required for server rendering, based on rendering params.
82
+ * @param {BYOCComponentParams} params component params
83
+ */
84
+ export function fetchBYOCComponentServerProps(params) {
85
+ return __awaiter(this, void 0, void 0, function* () {
86
+ const fetchDataOptions = params.ComponentProps
87
+ ? JSON.parse(params.ComponentProps)
88
+ : {};
89
+ const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
90
+ return {
91
+ fetchedData,
92
+ };
93
+ });
94
+ }
package/dist/esm/index.js CHANGED
@@ -12,7 +12,7 @@ export { Text } from './components/Text';
12
12
  export { DateField } from './components/Date';
13
13
  export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
14
14
  export { FEaaSWrapper } from './components/FEaaSWrapper';
15
- export { BYOCComponent } from './components/BYOCComponent';
15
+ export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
16
16
  export { BYOCWrapper } from './components/BYOCWrapper';
17
17
  export { Link, LinkPropTypes } from './components/Link';
18
18
  export { File } from './components/File';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-jss/sitecore-jss-react",
3
- "version": "21.4.0-canary.1",
3
+ "version": "21.4.0-canary.2",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -63,14 +63,14 @@
63
63
  "react-dom": "^18.2.0"
64
64
  },
65
65
  "dependencies": {
66
- "@sitecore-jss/sitecore-jss": "^21.4.0-canary.1",
66
+ "@sitecore-jss/sitecore-jss": "^21.4.0-canary.2",
67
67
  "deep-equal": "^2.1.0",
68
68
  "prop-types": "^15.8.1",
69
69
  "style-attr": "^1.3.0"
70
70
  },
71
71
  "description": "",
72
72
  "types": "types/index.d.ts",
73
- "gitHead": "ba19b0377facf496ea5f5cbe31f724fa3fb26ebf",
73
+ "gitHead": "30d79c092ae7bee91d3f6a1a480a89c76e5b262c",
74
74
  "files": [
75
75
  "dist",
76
76
  "types"
package/types/components/BYOCComponent.d.ts CHANGED
@@ -1,7 +1,17 @@
1
1
  import React from 'react';
2
2
  import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
3
3
  import { MissingComponentProps } from './MissingComponent';
4
+ import * as FEAAS from '@sitecore-feaas/clientside/react';
4
5
  export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
6
+ /**
7
+ * FEaaS props for server rendering.
8
+ */
9
+ type BYOCServerProps = {
10
+ /**
11
+ * Fetched data from server component props for server rendering, based on rendering params.
12
+ */
13
+ fetchedData?: FEAAS.DataScopes;
14
+ };
5
15
  /**
6
16
  * Data from rendering params on Sitecore's BYOC rendering
7
17
  */
@@ -9,7 +19,7 @@ export type BYOCComponentParams = {
9
19
  /**
10
20
  * Name of the component to render
11
21
  */
12
- ComponentName: string;
22
+ ComponentName?: string;
13
23
  /**
14
24
  * JSON props to pass into rendered component
15
25
  */
@@ -23,7 +33,7 @@ export type BYOCComponentParams = {
23
33
  /**
24
34
  * Props for BYOCComponent. Includes components list to load external components from.
25
35
  */
26
- export type BYOCComponentProps = {
36
+ export type BYOCComponentClientProps = {
27
37
  /**
28
38
  * rendering params
29
39
  */
@@ -42,6 +52,7 @@ export type BYOCComponentProps = {
42
52
  */
43
53
  missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
44
54
  };
55
+ export type BYOCComponentProps = BYOCComponentClientProps & BYOCServerProps;
45
56
  type ErrorComponentProps = {
46
57
  [prop: string]: unknown;
47
58
  error?: Error;
@@ -63,4 +74,9 @@ export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
63
74
  componentDidCatch(error: Error): void;
64
75
  render(): JSX.Element;
65
76
  }
77
+ /**
78
+ * Fetches server component props required for server rendering, based on rendering params.
79
+ * @param {BYOCComponentParams} params component params
80
+ */
81
+ export declare function fetchBYOCComponentServerProps(params: BYOCComponentParams): Promise<BYOCComponentProps>;
66
82
  export {};
package/types/index.d.ts CHANGED
@@ -13,7 +13,7 @@ export { Text, TextField } from './components/Text';
13
13
  export { DateField, DateFieldProps } from './components/Date';
14
14
  export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
15
15
  export { FEaaSWrapper } from './components/FEaaSWrapper';
16
- export { BYOCComponent, BYOCComponentParams, BYOCComponentProps } from './components/BYOCComponent';
16
+ export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
17
17
  export { BYOCWrapper } from './components/BYOCWrapper';
18
18
  export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
19
19
  export { File, FileField } from './components/File';