@sitecore-content-sdk/react 0.1.0-beta.1

package/dist/cjs/components/ErrorBoundary.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+class ErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.defaultErrorMessage = 'There was a problem loading this section.';
+        this.defaultLoadingMessage = 'Loading component...';
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        var _a, _b;
+        if (this.showErrorDetails()) {
+            console.error(`An error occurred in component ${(_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName} (${(_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.uid}): `);
+        }
+        console.error({ error, errorInfo });
+    }
+    isInDevMode() {
+        return process.env.NODE_ENV === 'development';
+    }
+    showErrorDetails() {
+        var _a, _b;
+        return (this.isInDevMode() ||
+            ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === layout_1.LayoutServicePageState.Edit ||
+            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === layout_1.LayoutServicePageState.Preview);
+    }
+    render() {
+        var _a;
+        if (this.state.error) {
+            if (this.props.errorComponent) {
+                return react_1.default.createElement(this.props.errorComponent, { error: this.state.error });
+            }
+            else {
+                if (this.showErrorDetails()) {
+                    return (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
+                            "A rendering error occurred in component",
+                            ' ',
+                            react_1.default.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
+                            react_1.default.createElement("br", null),
+                            "Error: ",
+                            react_1.default.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
+                }
+                else {
+                    return (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, this.defaultErrorMessage)));
+                }
+            }
+        }
+        // do not apply suspense on already dynamic components
+        if (this.props.isDynamic) {
+            return this.props.children;
+        }
+        return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+    }
+}
+exports.default = (0, withSitecoreContext_1.withSitecoreContext)()(ErrorBoundary);

package/dist/cjs/components/FEaaSComponent.js

@@ -0,0 +1,161 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeComponentEndpoint = exports.FEaaSComponent = exports.FEAAS_COMPONENT_RENDERING_NAME = void 0;
+exports.fetchFEaaSComponentServerProps = fetchFEaaSComponentServerProps;
+const react_1 = __importDefault(require("react"));
+const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const utils_1 = require("../utils");
+exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+/**
+ * @param {FEaaSComponentProps} props component props
+ */
+const FEaaSComponent = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
+    if (!props.template &&
+        (!props.params ||
+            !props.params.LibraryId ||
+            !props.params.ComponentId ||
+            !props.params.ComponentVersion ||
+            !props.params.ComponentHostName ||
+            !computedRevision)) {
+        // Missing FEaaS component required props
+        return null;
+    }
+    // combine fetchedData from server with datasource data (if present)
+    const data = Object.assign(Object.assign({}, props.fetchedData), { _: (0, utils_1.getDataFromFields)((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
+    // FEaaS control would still be hydrated by client
+    // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
+    // this also allows component to fall back to full client-side rendering when template or src is empty
+    // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
+    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: [] }));
+};
+exports.FEaaSComponent = FEaaSComponent;
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * Component endpoint will either be retrieved from params or from endpointOverride
+ * @param {FEaaSComponentParams} params component params
+ * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
+ * @param {string} [endpointOverride] optional override for component endpoint
+ */
+function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const revisionFallback = pageState && pageState !== layout_1.LayoutServicePageState.Normal ? 'staged' : 'published';
+        const src = endpointOverride || (0, exports.composeComponentEndpoint)(params, revisionFallback);
+        let template = '';
+        let fetchedData = {};
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
+        try {
+            template = yield fetchComponentTemplate(src, params, revisionFallback);
+            fetchedData = yield fetchData(fetchDataOptions);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return {
+            fetchedData,
+            revisionFallback,
+            template,
+        };
+    });
+}
+/**
+ * @param {string} src component endpoint
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ */
+function fetchComponentTemplate(src, params, revisionFallback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { template } = yield FEAAS.fetchComponent(src);
+            return template;
+        }
+        catch (error) {
+            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
+                revisionFallback}" is present`);
+            throw error;
+        }
+    });
+}
+/**
+ * Fetches component data based on the provided data options.
+ * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
+ * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
+ * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
+ * or rejects with an error if data fetching encounters an issue.
+ * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
+ */
+function fetchData(dataOptions) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
+            return fetchedData;
+        }
+        catch (error) {
+            console.error('Fetch FEAAS component data settings failed');
+            throw error;
+        }
+    });
+}
+/**
+ * Build component endpoint URL from component's params
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ * @returns component endpoint URL
+ */
+const composeComponentEndpoint = (params, revisionFallback) => {
+    const revision = params.ComponentRevision || revisionFallback;
+    const hostname = params.ComponentHostName.startsWith('https://')
+        ? params.ComponentHostName
+        : `https://${params.ComponentHostName}`;
+    return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
+};
+exports.composeComponentEndpoint = composeComponentEndpoint;

package/dist/cjs/components/FEaaSWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FEaaSWrapper = exports.FEAAS_WRAPPER_RENDERING_NAME = void 0;
+const FEaaSComponent_1 = require("./FEaaSComponent");
+const react_1 = __importDefault(require("react"));
+exports.FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+const FEaaSWrapper = (props) => {
+    var _a, _b;
+    const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
+    const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
+    return (react_1.default.createElement("div", { className: styles, id: id ? id : undefined },
+        react_1.default.createElement("div", { className: "component-content" },
+            react_1.default.createElement(FEaaSComponent_1.FEaaSComponent, Object.assign({}, props)))));
+};
+exports.FEaaSWrapper = FEaaSWrapper;

package/dist/cjs/components/FieldMetadata.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldMetadata = void 0;
+const react_1 = __importDefault(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+/**
+ * The component which renders field metadata markup
+ * @param {FieldMetadataProps} props the props of the component
+ * @returns metadata markup wrapped around children
+ */
+const FieldMetadata = (props) => {
+    const data = JSON.stringify(props.metadata);
+    const attributes = {
+        type: 'text/sitecore',
+        chrometype: 'field',
+        className: 'scpm',
+    };
+    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: editing_1.MetadataKind.Open });
+    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: editing_1.MetadataKind.Close });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("code", Object.assign({}, codeOpenAttributes), data),
+        props.children,
+        react_1.default.createElement("code", Object.assign({}, codeCloseAttributes))));
+};
+exports.FieldMetadata = FieldMetadata;
+exports.FieldMetadata.displayName = 'FieldMetadata';
+exports.FieldMetadata.propTypes = {
+    metadata: prop_types_1.default.object.isRequired,
+    children: prop_types_1.default.node.isRequired,
+};

package/dist/cjs/components/File.js

@@ -0,0 +1,51 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.File = void 0;
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const File = (_a) => {
+    var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
+    const dynamicField = field;
+    if ((0, layout_1.isFieldValueEmpty)(dynamicField)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const file = (dynamicField.src
+        ? field
+        : dynamicField.value);
+    if (!file) {
+        return null;
+    }
+    const linkText = !children ? file.title || file.displayName : null;
+    const anchorAttrs = {
+        href: file.src,
+    };
+    return react_1.default.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+};
+exports.File = File;
+exports.File.propTypes = {
+    field: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            src: prop_types_1.default.string,
+        }),
+        prop_types_1.default.shape({
+            value: prop_types_1.default.object,
+        }),
+    ]).isRequired,
+};
+exports.File.displayName = 'File';

package/dist/cjs/components/HiddenRendering.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenRendering = void 0;
+const react_1 = __importDefault(require("react"));
+const styles = {
+    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+    backgroundSize: '3px 3px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '30px',
+    color: '#aaa',
+};
+const HiddenRendering = () => react_1.default.createElement("div", { style: styles }, "The component is hidden");
+exports.HiddenRendering = HiddenRendering;

package/dist/cjs/components/Image.js

@@ -0,0 +1,83 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const media_1 = require("@sitecore-content-sdk/core/media");
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
+const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
+const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
+    var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
+    if (!src) {
+        return null;
+    }
+    (0, utils_1.addClassName)(otherAttrs);
+    const newAttrs = Object.assign({}, otherAttrs);
+    // update image URL for jss handler and image rendering params
+    const resolvedSrc = media_1.mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
+    if (srcSet) {
+        // replace with HTML-formatted srcset, including updated image URLs
+        newAttrs.srcSet = media_1.mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);
+    }
+    // always output original src as fallback for older browsers
+    newAttrs.src = resolvedSrc;
+    return newAttrs;
+};
+exports.Image = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
+    var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+    const dynamicMedia = field;
+    if ((0, layout_1.isFieldValueEmpty)(dynamicMedia)) {
+        return null;
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    if (!img) {
+        return null;
+    }
+    // prevent metadata from being passed to the img tag
+    if (img.metadata) {
+        delete img.metadata;
+    }
+    const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
+    if (attrs) {
+        return react_1.default.createElement("img", Object.assign({}, attrs));
+    }
+    return null; // we can't handle the truth
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage }));
+exports.Image.propTypes = {
+    field: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            src: prop_types_1.default.string,
+        }),
+        prop_types_1.default.shape({
+            value: prop_types_1.default.object,
+        }),
+    ]),
+    editable: prop_types_1.default.bool,
+    mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
+    imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+};
+exports.Image.displayName = 'Image';

package/dist/cjs/components/Link.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkPropTypes = exports.Link = void 0;
+const react_1 = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
+const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
+const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
+exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
+// eslint-disable-next-line react/display-name
+(0, react_1.forwardRef)((_a, ref) => {
+    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    const children = otherProps.children;
+    const dynamicField = field;
+    if ((0, layout_1.isFieldValueEmpty)(dynamicField)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const link = dynamicField.href
+        ? field
+        : dynamicField.value;
+    if (!link) {
+        return null;
+    }
+    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+    const anchorAttrs = {
+        href: `${link.href}${querystring}${anchor}`,
+        className: link.class,
+        title: link.title,
+        target: link.target,
+    };
+    if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) {
+        // information disclosure attack prevention keeps target blank site from getting ref to window.opener
+        anchorAttrs.rel = 'noopener noreferrer';
+    }
+    const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
+    const element = react_1.default.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children);
+    return react_1.default.createElement(react_1.default.Fragment, null, element);
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+exports.LinkPropTypes = {
+    field: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            href: prop_types_1.default.oneOfType([prop_types_1.default.string.isRequired, prop_types_1.default.oneOf([null]).isRequired]),
+        }),
+        prop_types_1.default.shape({
+            value: prop_types_1.default.object,
+        }),
+    ]).isRequired,
+    editable: prop_types_1.default.bool,
+    showLinkTextWithChildrenPresent: prop_types_1.default.bool,
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+};
+exports.Link.propTypes = exports.LinkPropTypes;
+exports.Link.displayName = 'Link';

package/dist/cjs/components/MissingComponent.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingComponent = void 0;
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const MissingComponent = (props) => {
+    const componentName = props.rendering && props.rendering.componentName
+        ? props.rendering.componentName
+        : 'Unnamed Component';
+    // error override would mean component is not unimplemented
+    !props.errorOverride &&
+        console.log(`Component props for unimplemented '${componentName}' component`, props);
+    const errorMessage = props.errorOverride ||
+        'JSS component is missing React implementation. See the developer console for more information.';
+    return (react_1.default.createElement("div", { style: {
+            background: 'darkorange',
+            outline: '5px solid orange',
+            padding: '10px',
+            color: 'white',
+            maxWidth: '500px',
+        } },
+        react_1.default.createElement("h2", null, componentName),
+        react_1.default.createElement("p", null, errorMessage)));
+};
+exports.MissingComponent = MissingComponent;
+exports.MissingComponent.propTypes = {
+    rendering: prop_types_1.default.shape({
+        componentName: prop_types_1.default.string,
+    }),
+};
+exports.MissingComponent.displayName = 'MissingComponent';