@sitecore-jss/sitecore-jss-react 21.3.0-canary.46 → 21.3.0-canary.48

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/{BYOCRenderer.js → BYOCComponent.js} +41 -23
  2. package/dist/cjs/index.js +3 -3
  3. package/dist/esm/components/{BYOCRenderer.js → BYOCComponent.js} +16 -21
  4. package/dist/esm/index.js +1 -1
  5. package/package.json +4 -4
  6. package/types/components/{BYOCRenderer.d.ts → BYOCComponent.d.ts} +9 -19
  7. package/types/index.d.ts +1 -1
package/dist/cjs/components/{BYOCRenderer.js → BYOCComponent.js} RENAMED
@@ -1,12 +1,36 @@
1
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
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.BYOCRenderer = void 0;
29
+ exports.BYOCComponent = void 0;
7
30
  const react_1 = __importDefault(require("react"));
8
31
  const utils_1 = require("../utils");
9
32
  const MissingComponent_1 = require("./MissingComponent");
33
+ const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
10
34
  const DefaultErrorComponent = (props) => {
11
35
  var _a;
12
36
  return (react_1.default.createElement("div", null,
@@ -15,12 +39,12 @@ const DefaultErrorComponent = (props) => {
15
39
  "."));
16
40
  };
17
41
  /**
18
- * BYOCRenderer helps rendering BYOC components - that can be taken from anywhere
19
- * and registered without being deployed as Sitecore renderings
20
- * @param {ByocRendererProps} props component props
42
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
43
+ * missing components, and customization of error messages or alternative rendering components.
44
+ * @param {ByocComponentProps} props component props
21
45
  * @returns dynamicly rendered component or Missing Component error frame
22
46
  */
23
- class BYOCRenderer extends react_1.default.Component {
47
+ class BYOCComponent extends react_1.default.Component {
24
48
  constructor(props) {
25
49
  super(props);
26
50
  this.state = {};
@@ -33,7 +57,7 @@ class BYOCRenderer extends react_1.default.Component {
33
57
  this.setState({ error });
34
58
  }
35
59
  render() {
36
- var _a, _b, _c;
60
+ var _a, _b;
37
61
  const props = this.props;
38
62
  if (this.state.error) {
39
63
  return this.props.errorComponent ? (react_1.default.createElement(this.props.errorComponent, { error: this.state.error })) : (react_1.default.createElement(DefaultErrorComponent, { error: this.state.error }));
@@ -45,23 +69,17 @@ class BYOCRenderer extends react_1.default.Component {
45
69
  };
46
70
  return props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, noNameProps)));
47
71
  }
48
- // props.components would contain component from internal FEAAS regsitered component collection (registered in app)
49
- // we can't access this collection here directly, as the collection from packages's dependency would be different from the one in app
50
- const Component = (_a = props.components[componentName]) === null || _a === void 0 ? void 0 : _a.component;
51
- if (!Component) {
52
- console.warn(`Component "${componentName}" was not registered, please ensure the FEEAS.External.registerComponent call is made.`);
53
- const missingProps = {
54
- rendering: {
55
- componentName: componentName,
56
- },
57
- errorOverride: 'BYOC: This component was not registered.',
58
- };
59
- return props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, missingProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, missingProps)));
60
- }
72
+ const unRegisteredComponentProps = {
73
+ rendering: {
74
+ componentName: componentName,
75
+ },
76
+ errorOverride: 'BYOC: This component was not registered.',
77
+ };
78
+ 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)));
61
79
  let componentProps = undefined;
62
- if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentProps) {
80
+ if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
63
81
  try {
64
- componentProps = (_c = JSON.parse(props.params.ComponentProps)) !== null && _c !== void 0 ? _c : {};
82
+ componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
65
83
  }
66
84
  catch (e) {
67
85
  console.warn(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
@@ -71,7 +89,7 @@ class BYOCRenderer extends react_1.default.Component {
71
89
  if (!componentProps) {
72
90
  componentProps = props.fields ? (0, utils_1.getDataFromFields)(props.fields) : {};
73
91
  }
74
- return react_1.default.createElement(Component, Object.assign({}, componentProps));
92
+ return (react_1.default.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
75
93
  }
76
94
  }
77
- exports.BYOCRenderer = BYOCRenderer;
95
+ exports.BYOCComponent = BYOCComponent;
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.BYOCRenderer = 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.BYOCComponent = 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; } });
@@ -39,8 +39,8 @@ Object.defineProperty(exports, "DateField", { enumerable: true, get: function ()
39
39
  var FEaaSComponent_1 = require("./components/FEaaSComponent");
40
40
  Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaSComponent_1.FEaaSComponent; } });
41
41
  Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaSComponent_1.fetchFEaaSComponentServerProps; } });
42
- var BYOCRenderer_1 = require("./components/BYOCRenderer");
43
- Object.defineProperty(exports, "BYOCRenderer", { enumerable: true, get: function () { return BYOCRenderer_1.BYOCRenderer; } });
42
+ var BYOCComponent_1 = require("./components/BYOCComponent");
43
+ Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
44
44
  var Link_1 = require("./components/Link");
45
45
  Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
46
46
  Object.defineProperty(exports, "LinkPropTypes", { enumerable: true, get: function () { return Link_1.LinkPropTypes; } });
package/dist/esm/components/{BYOCRenderer.js → BYOCComponent.js} RENAMED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { getDataFromFields } from '../utils';
3
3
  import { MissingComponent } from './MissingComponent';
4
+ import * as FEAAS from '@sitecore-feaas/clientside/react';
4
5
  const DefaultErrorComponent = (props) => {
5
6
  var _a;
6
7
  return (React.createElement("div", null,
@@ -9,12 +10,12 @@ const DefaultErrorComponent = (props) => {
9
10
  "."));
10
11
  };
11
12
  /**
12
- * BYOCRenderer helps rendering BYOC components - that can be taken from anywhere
13
- * and registered without being deployed as Sitecore renderings
14
- * @param {ByocRendererProps} props component props
13
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
14
+ * missing components, and customization of error messages or alternative rendering components.
15
+ * @param {ByocComponentProps} props component props
15
16
  * @returns dynamicly rendered component or Missing Component error frame
16
17
  */
17
- export class BYOCRenderer extends React.Component {
18
+ export class BYOCComponent extends React.Component {
18
19
  constructor(props) {
19
20
  super(props);
20
21
  this.state = {};
@@ -27,7 +28,7 @@ export class BYOCRenderer extends React.Component {
27
28
  this.setState({ error });
28
29
  }
29
30
  render() {
30
- var _a, _b, _c;
31
+ var _a, _b;
31
32
  const props = this.props;
32
33
  if (this.state.error) {
33
34
  return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
@@ -39,23 +40,17 @@ export class BYOCRenderer extends React.Component {
39
40
  };
40
41
  return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (React.createElement(MissingComponent, Object.assign({}, noNameProps)));
41
42
  }
42
- // props.components would contain component from internal FEAAS regsitered component collection (registered in app)
43
- // we can't access this collection here directly, as the collection from packages's dependency would be different from the one in app
44
- const Component = (_a = props.components[componentName]) === null || _a === void 0 ? void 0 : _a.component;
45
- if (!Component) {
46
- console.warn(`Component "${componentName}" was not registered, please ensure the FEEAS.External.registerComponent call is made.`);
47
- const missingProps = {
48
- rendering: {
49
- componentName: componentName,
50
- },
51
- errorOverride: 'BYOC: This component was not registered.',
52
- };
53
- return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, missingProps))) : (React.createElement(MissingComponent, Object.assign({}, missingProps)));
54
- }
43
+ const unRegisteredComponentProps = {
44
+ rendering: {
45
+ componentName: componentName,
46
+ },
47
+ errorOverride: 'BYOC: This component was not registered.',
48
+ };
49
+ const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
55
50
  let componentProps = undefined;
56
- if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentProps) {
51
+ if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
57
52
  try {
58
- componentProps = (_c = JSON.parse(props.params.ComponentProps)) !== null && _c !== void 0 ? _c : {};
53
+ componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
59
54
  }
60
55
  catch (e) {
61
56
  console.warn(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
@@ -65,6 +60,6 @@ export class BYOCRenderer extends React.Component {
65
60
  if (!componentProps) {
66
61
  componentProps = props.fields ? getDataFromFields(props.fields) : {};
67
62
  }
68
- return React.createElement(Component, Object.assign({}, componentProps));
63
+ return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
69
64
  }
70
65
  }
package/dist/esm/index.js CHANGED
@@ -11,7 +11,7 @@ export { RichText, RichTextPropTypes } from './components/RichText';
11
11
  export { Text } from './components/Text';
12
12
  export { DateField } from './components/Date';
13
13
  export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
14
- export { BYOCRenderer, } from './components/BYOCRenderer';
14
+ export { BYOCComponent } from './components/BYOCComponent';
15
15
  export { Link, LinkPropTypes } from './components/Link';
16
16
  export { File } from './components/File';
17
17
  export { VisitorIdentification } from './components/VisitorIdentification';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-jss/sitecore-jss-react",
3
- "version": "21.3.0-canary.46",
3
+ "version": "21.3.0-canary.48",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -61,15 +61,15 @@
61
61
  "react-dom": "^18.2.0"
62
62
  },
63
63
  "dependencies": {
64
- "@sitecore-feaas/clientside": "^0.3.0",
65
- "@sitecore-jss/sitecore-jss": "^21.3.0-canary.46",
64
+ "@sitecore-feaas/clientside": "^0.3.12",
65
+ "@sitecore-jss/sitecore-jss": "^21.3.0-canary.48",
66
66
  "deep-equal": "^2.1.0",
67
67
  "prop-types": "^15.8.1",
68
68
  "style-attr": "^1.3.0"
69
69
  },
70
70
  "description": "",
71
71
  "types": "types/index.d.ts",
72
- "gitHead": "89969f9c9d9577a7e7c367691ca33db9e041e68b",
72
+ "gitHead": "42607e2b5b60ff0dba437a593dda4038dfbb613b",
73
73
  "files": [
74
74
  "dist",
75
75
  "types"
package/types/components/{BYOCRenderer.d.ts → BYOCComponent.d.ts} RENAMED
@@ -1,11 +1,10 @@
1
1
  import React from 'react';
2
2
  import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
3
3
  import { MissingComponentProps } from './MissingComponent';
4
- import { RegisteredComponents } from '@sitecore-feaas/clientside/types/ui/FEAASExternal';
5
4
  /**
6
5
  * Data from rendering params on Sitecore's BYOC rendering
7
6
  */
8
- export type BYOCRenderingParams = {
7
+ export type BYOCComponentParams = {
9
8
  /**
10
9
  * Name of the component to render
11
10
  */
@@ -21,26 +20,17 @@ export type BYOCRenderingParams = {
21
20
  RenderingIdentifier?: string;
22
21
  };
23
22
  /**
24
- * Props for BYOC wrapper component
23
+ * Props for BYOCComponent. Includes components list to load external components from.
25
24
  */
26
- export type BYOCProps = {
25
+ export type BYOCComponentProps = {
27
26
  /**
28
27
  * rendering params
29
28
  */
30
- params?: BYOCRenderingParams;
29
+ params?: BYOCComponentParams;
31
30
  /**
32
31
  * fields from datasource items to be passed as rendered child component props
33
32
  */
34
33
  fields?: ComponentFields;
35
- };
36
- /**
37
- * Props for BYOCRenderer component. Includes components list to load external components from.
38
- */
39
- export type BYOCRendererProps = BYOCProps & {
40
- /**
41
- * Registered component collection. Would be taken from FEAAS.External.registered
42
- */
43
- components: RegisteredComponents;
44
34
  /**
45
35
  * Error component override. To be shown when Renderer or underlying component throws
46
36
  */
@@ -56,16 +46,16 @@ type ErrorComponentProps = {
56
46
  error?: Error;
57
47
  };
58
48
  /**
59
- * BYOCRenderer helps rendering BYOC components - that can be taken from anywhere
60
- * and registered without being deployed as Sitecore renderings
61
- * @param {ByocRendererProps} props component props
49
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
50
+ * missing components, and customization of error messages or alternative rendering components.
51
+ * @param {ByocComponentProps} props component props
62
52
  * @returns dynamicly rendered component or Missing Component error frame
63
53
  */
64
- export declare class BYOCRenderer extends React.Component<BYOCRendererProps> {
54
+ export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
65
55
  state: Readonly<{
66
56
  error?: Error;
67
57
  }>;
68
- constructor(props: BYOCRendererProps);
58
+ constructor(props: BYOCComponentProps);
69
59
  static getDerivedStateFromError(error: Error): {
70
60
  error: Error;
71
61
  };
package/types/index.d.ts CHANGED
@@ -12,7 +12,7 @@ export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './com
12
12
  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
- export { BYOCProps, BYOCRenderer, BYOCRenderingParams, BYOCRendererProps, } from './components/BYOCRenderer';
15
+ export { BYOCComponent, BYOCComponentParams, BYOCComponentProps } from './components/BYOCComponent';
16
16
  export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
17
17
  export { File, FileField } from './components/File';
18
18
  export { VisitorIdentification } from './components/VisitorIdentification';