@sitecore-jss/sitecore-jss-react 21.0.5 → 21.0.7
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.
- package/dist/cjs/components/FEaaSComponent.js +87 -0
- package/dist/cjs/components/PlaceholderCommon.js +4 -0
- package/dist/cjs/index.js +3 -1
- package/dist/esm/components/FEaaSComponent.js +64 -0
- package/dist/esm/components/PlaceholderCommon.js +4 -0
- package/dist/esm/index.js +1 -0
- package/package.json +5 -4
- package/types/components/FEaaSComponent.d.ts +18 -0
- package/types/index.d.ts +2 -1
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.FEaaSComponent = exports.FEAAS_MODULE_SRC = exports.FEAAS_COMPONENT_RENDERING_NAME = void 0;
|
|
23
|
+
/* eslint-disable react/prop-types */
|
|
24
|
+
const react_1 = __importStar(require("react"));
|
|
25
|
+
const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
|
|
26
|
+
exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
|
|
27
|
+
exports.FEAAS_MODULE_SRC = 'https://feaasstatic.blob.core.windows.net/packages/clientside/latest/browser/index.esm.js';
|
|
28
|
+
const getDataFromFields = (fields) => {
|
|
29
|
+
let data = {};
|
|
30
|
+
data = Object.entries(fields).reduce((acc, [key]) => {
|
|
31
|
+
acc[key] = layout_1.getFieldValue(fields, key);
|
|
32
|
+
return acc;
|
|
33
|
+
}, data);
|
|
34
|
+
return data;
|
|
35
|
+
};
|
|
36
|
+
const FEaaSComponent = ({ params, fields }) => {
|
|
37
|
+
if (!params ||
|
|
38
|
+
!params.LibraryId ||
|
|
39
|
+
!params.ComponentId ||
|
|
40
|
+
!params.ComponentVersion ||
|
|
41
|
+
!params.ComponentRevision ||
|
|
42
|
+
!params.ComponentHostName) {
|
|
43
|
+
// Missing FEaaS component required props
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
// Load script asynchronously on the page once, only if FEAAS component is used
|
|
47
|
+
react_1.useEffect(() => {
|
|
48
|
+
var _a;
|
|
49
|
+
(_a = window.FEAASLoading) !== null && _a !== void 0 ? _a : (window.FEAASLoading = new Promise((resolve) => {
|
|
50
|
+
const script = document.createElement('script');
|
|
51
|
+
script.src = exports.FEAAS_MODULE_SRC;
|
|
52
|
+
script.type = 'module';
|
|
53
|
+
script.onload = resolve;
|
|
54
|
+
document.head.appendChild(script);
|
|
55
|
+
}));
|
|
56
|
+
}, []);
|
|
57
|
+
let data = '';
|
|
58
|
+
if (params === null || params === void 0 ? void 0 : params.ComponentDataOverride) {
|
|
59
|
+
// Use override data if provided
|
|
60
|
+
data = params.ComponentDataOverride;
|
|
61
|
+
}
|
|
62
|
+
else if (fields) {
|
|
63
|
+
// Otherwise use datasource data (provided in fields)
|
|
64
|
+
// FEaaS expects wrapping "_" as catch-all datasource template id
|
|
65
|
+
data = JSON.stringify({ _: getDataFromFields(fields) });
|
|
66
|
+
}
|
|
67
|
+
const reqProps = {
|
|
68
|
+
library: params.LibraryId,
|
|
69
|
+
cdn: params.ComponentHostName,
|
|
70
|
+
component: params.ComponentId,
|
|
71
|
+
version: params.ComponentVersion,
|
|
72
|
+
revision: params.ComponentRevision,
|
|
73
|
+
data,
|
|
74
|
+
};
|
|
75
|
+
const optProps = {};
|
|
76
|
+
if (params.ComponentInstanceId) {
|
|
77
|
+
optProps.instance = params.ComponentInstanceId;
|
|
78
|
+
}
|
|
79
|
+
if (params.ComponentHTMLOverride) {
|
|
80
|
+
optProps.dangerouslySetInnerHTML = { __html: params.ComponentHTMLOverride };
|
|
81
|
+
}
|
|
82
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
83
|
+
react_1.default.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn },
|
|
84
|
+
react_1.default.createElement("link", { rel: "stylesheet", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` })),
|
|
85
|
+
react_1.default.createElement("feaas-component", Object.assign({}, reqProps, optProps))));
|
|
86
|
+
};
|
|
87
|
+
exports.FEaaSComponent = FEaaSComponent;
|
|
@@ -20,6 +20,7 @@ const prop_types_1 = __importDefault(require("prop-types"));
|
|
|
20
20
|
const MissingComponent_1 = require("./MissingComponent");
|
|
21
21
|
const utils_1 = require("../utils");
|
|
22
22
|
const HiddenRendering_1 = require("./HiddenRendering");
|
|
23
|
+
const FEaaSComponent_1 = require("./FEaaSComponent");
|
|
23
24
|
/**
|
|
24
25
|
* These patterns need for right rendering Dynamic placeholders.
|
|
25
26
|
* Must be distinguished Splitter components and another placeholders(containers)
|
|
@@ -97,6 +98,9 @@ class PlaceholderCommon extends react_1.default.Component {
|
|
|
97
98
|
else {
|
|
98
99
|
component = this.getComponentForRendering(componentRendering);
|
|
99
100
|
}
|
|
101
|
+
if (componentRendering.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
|
|
102
|
+
component = FEaaSComponent_1.FEaaSComponent;
|
|
103
|
+
}
|
|
100
104
|
if (!component) {
|
|
101
105
|
console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
|
|
102
106
|
component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent_1.MissingComponent;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.constants = void 0;
|
|
3
|
+
exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = 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; } });
|
|
@@ -32,6 +32,8 @@ var Text_1 = require("./components/Text");
|
|
|
32
32
|
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
|
|
33
33
|
var Date_1 = require("./components/Date");
|
|
34
34
|
Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return Date_1.DateField; } });
|
|
35
|
+
var FEaaSComponent_1 = require("./components/FEaaSComponent");
|
|
36
|
+
Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaSComponent_1.FEaaSComponent; } });
|
|
35
37
|
var Link_1 = require("./components/Link");
|
|
36
38
|
Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
|
|
37
39
|
Object.defineProperty(exports, "LinkPropTypes", { enumerable: true, get: function () { return Link_1.LinkPropTypes; } });
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/* eslint-disable react/prop-types */
|
|
2
|
+
import React, { useEffect } from 'react';
|
|
3
|
+
import { getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
|
|
4
|
+
export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
|
|
5
|
+
export const FEAAS_MODULE_SRC = 'https://feaasstatic.blob.core.windows.net/packages/clientside/latest/browser/index.esm.js';
|
|
6
|
+
const getDataFromFields = (fields) => {
|
|
7
|
+
let data = {};
|
|
8
|
+
data = Object.entries(fields).reduce((acc, [key]) => {
|
|
9
|
+
acc[key] = getFieldValue(fields, key);
|
|
10
|
+
return acc;
|
|
11
|
+
}, data);
|
|
12
|
+
return data;
|
|
13
|
+
};
|
|
14
|
+
export const FEaaSComponent = ({ params, fields }) => {
|
|
15
|
+
if (!params ||
|
|
16
|
+
!params.LibraryId ||
|
|
17
|
+
!params.ComponentId ||
|
|
18
|
+
!params.ComponentVersion ||
|
|
19
|
+
!params.ComponentRevision ||
|
|
20
|
+
!params.ComponentHostName) {
|
|
21
|
+
// Missing FEaaS component required props
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
// Load script asynchronously on the page once, only if FEAAS component is used
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
var _a;
|
|
27
|
+
(_a = window.FEAASLoading) !== null && _a !== void 0 ? _a : (window.FEAASLoading = new Promise((resolve) => {
|
|
28
|
+
const script = document.createElement('script');
|
|
29
|
+
script.src = FEAAS_MODULE_SRC;
|
|
30
|
+
script.type = 'module';
|
|
31
|
+
script.onload = resolve;
|
|
32
|
+
document.head.appendChild(script);
|
|
33
|
+
}));
|
|
34
|
+
}, []);
|
|
35
|
+
let data = '';
|
|
36
|
+
if (params === null || params === void 0 ? void 0 : params.ComponentDataOverride) {
|
|
37
|
+
// Use override data if provided
|
|
38
|
+
data = params.ComponentDataOverride;
|
|
39
|
+
}
|
|
40
|
+
else if (fields) {
|
|
41
|
+
// Otherwise use datasource data (provided in fields)
|
|
42
|
+
// FEaaS expects wrapping "_" as catch-all datasource template id
|
|
43
|
+
data = JSON.stringify({ _: getDataFromFields(fields) });
|
|
44
|
+
}
|
|
45
|
+
const reqProps = {
|
|
46
|
+
library: params.LibraryId,
|
|
47
|
+
cdn: params.ComponentHostName,
|
|
48
|
+
component: params.ComponentId,
|
|
49
|
+
version: params.ComponentVersion,
|
|
50
|
+
revision: params.ComponentRevision,
|
|
51
|
+
data,
|
|
52
|
+
};
|
|
53
|
+
const optProps = {};
|
|
54
|
+
if (params.ComponentInstanceId) {
|
|
55
|
+
optProps.instance = params.ComponentInstanceId;
|
|
56
|
+
}
|
|
57
|
+
if (params.ComponentHTMLOverride) {
|
|
58
|
+
optProps.dangerouslySetInnerHTML = { __html: params.ComponentHTMLOverride };
|
|
59
|
+
}
|
|
60
|
+
return (React.createElement(React.Fragment, null,
|
|
61
|
+
React.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn },
|
|
62
|
+
React.createElement("link", { rel: "stylesheet", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` })),
|
|
63
|
+
React.createElement("feaas-component", Object.assign({}, reqProps, optProps))));
|
|
64
|
+
};
|
|
@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
|
|
|
14
14
|
import { MissingComponent } from './MissingComponent';
|
|
15
15
|
import { convertAttributesToReactProps } from '../utils';
|
|
16
16
|
import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
|
|
17
|
+
import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
|
|
17
18
|
/**
|
|
18
19
|
* These patterns need for right rendering Dynamic placeholders.
|
|
19
20
|
* Must be distinguished Splitter components and another placeholders(containers)
|
|
@@ -91,6 +92,9 @@ export class PlaceholderCommon extends React.Component {
|
|
|
91
92
|
else {
|
|
92
93
|
component = this.getComponentForRendering(componentRendering);
|
|
93
94
|
}
|
|
95
|
+
if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
|
|
96
|
+
component = FEaaSComponent;
|
|
97
|
+
}
|
|
94
98
|
if (!component) {
|
|
95
99
|
console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
|
|
96
100
|
component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent;
|
package/dist/esm/index.js
CHANGED
|
@@ -9,6 +9,7 @@ export { Image, getEEMarkup, } from './components/Image';
|
|
|
9
9
|
export { RichText, RichTextPropTypes } from './components/RichText';
|
|
10
10
|
export { Text } from './components/Text';
|
|
11
11
|
export { DateField } from './components/Date';
|
|
12
|
+
export { FEaaSComponent } from './components/FEaaSComponent';
|
|
12
13
|
export { Link, LinkPropTypes } from './components/Link';
|
|
13
14
|
export { File } from './components/File';
|
|
14
15
|
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.0.
|
|
3
|
+
"version": "21.0.7",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
"url": "https://github.com/sitecore/jss/issues"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@
|
|
30
|
+
"@sitecore-feaas/clientside": "^0.1.17",
|
|
31
|
+
"@types/chai": "^4.3.4",
|
|
31
32
|
"@types/chai-string": "^1.4.2",
|
|
32
33
|
"@types/deep-equal": "^1.0.1",
|
|
33
34
|
"@types/enzyme": "^3.10.12",
|
|
@@ -61,7 +62,7 @@
|
|
|
61
62
|
"react-dom": "^18.1.0"
|
|
62
63
|
},
|
|
63
64
|
"dependencies": {
|
|
64
|
-
"@sitecore-jss/sitecore-jss": "^21.0.
|
|
65
|
+
"@sitecore-jss/sitecore-jss": "^21.0.7",
|
|
65
66
|
"deep-equal": "^2.0.5",
|
|
66
67
|
"html-react-parser": "^3.0.0",
|
|
67
68
|
"prop-types": "^15.7.2",
|
|
@@ -69,7 +70,7 @@
|
|
|
69
70
|
},
|
|
70
71
|
"description": "",
|
|
71
72
|
"types": "types/index.d.ts",
|
|
72
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "39dc55300966f975da8b268c4bc7e10b15f24c62",
|
|
73
74
|
"files": [
|
|
74
75
|
"dist",
|
|
75
76
|
"types"
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ComponentParams, ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
|
|
2
|
+
export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
|
|
3
|
+
export declare const FEAAS_MODULE_SRC = "https://feaasstatic.blob.core.windows.net/packages/clientside/latest/browser/index.esm.js";
|
|
4
|
+
export declare type FEaaSComponentParams = ComponentParams & {
|
|
5
|
+
LibraryId?: string;
|
|
6
|
+
ComponentId?: string;
|
|
7
|
+
ComponentVersion?: string;
|
|
8
|
+
ComponentRevision?: string;
|
|
9
|
+
ComponentHostName?: string;
|
|
10
|
+
ComponentInstanceId?: string;
|
|
11
|
+
ComponentDataOverride?: string;
|
|
12
|
+
ComponentHTMLOverride?: string;
|
|
13
|
+
};
|
|
14
|
+
export declare type FEaaSComponentProps = {
|
|
15
|
+
params?: FEaaSComponentParams;
|
|
16
|
+
fields?: ComponentFields;
|
|
17
|
+
};
|
|
18
|
+
export declare const FEaaSComponent: ({ params, fields }: FEaaSComponentProps) => JSX.Element;
|
package/types/index.d.ts
CHANGED
|
@@ -9,7 +9,8 @@ export { Placeholder, PlaceholderComponentProps } from './components/Placeholder
|
|
|
9
9
|
export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
|
|
10
10
|
export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
|
|
11
11
|
export { Text, TextField } from './components/Text';
|
|
12
|
-
export { DateField } from './components/Date';
|
|
12
|
+
export { DateField, DateFieldProps } from './components/Date';
|
|
13
|
+
export { FEaaSComponent, FEaaSComponentProps } from './components/FEaaSComponent';
|
|
13
14
|
export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
|
|
14
15
|
export { File, FileField } from './components/File';
|
|
15
16
|
export { VisitorIdentification } from './components/VisitorIdentification';
|