@sitecore-jss/sitecore-jss-react 0.1.0-beta.2

package/dist/esm/components/BYOCComponent.js

@@ -0,0 +1,91 @@
+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());
+    });
+};
+import React from 'react';
+import { getDataFromFields } from '../utils';
+import { MissingComponent } from './MissingComponent';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
+const DefaultErrorComponent = (props) => {
+    var _a;
+    return (React.createElement("div", null,
+        "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
+        _a.message,
+        "."));
+};
+/**
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
+ * missing components, and customization of error messages or alternative rendering components.
+ * @param {ByocComponentProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+export class BYOCComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error: error };
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    render() {
+        var _a, _b, _c;
+        const props = this.props;
+        if (this.state.error) {
+            return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
+        }
+        const { ComponentName: componentName } = props.params || {};
+        if (!componentName) {
+            const noNameProps = {
+                errorOverride: 'BYOC: The ComponentName for this rendering is missing',
+            };
+            return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (React.createElement(MissingComponent, Object.assign({}, noNameProps)));
+        }
+        const unRegisteredComponentProps = {
+            rendering: {
+                componentName: componentName,
+            },
+            errorOverride: 'BYOC: This component was not registered.',
+        };
+        const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
+        const ErrorComponent = this.props.errorComponent;
+        let componentProps = {};
+        if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
+            try {
+                componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
+            }
+            catch (e) {
+                console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
+                return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
+            }
+        }
+        // apply props from item datasource
+        const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
+        // we render fallback on client to avoid problems with client-only components
+        return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
+    }
+}
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
+ */
+export function fetchBYOCComponentServerProps(params) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
+        const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
+        return {
+            fetchedData,
+        };
+    });
+}

package/dist/esm/components/BYOCWrapper.js

@@ -0,0 +1,11 @@
+import { BYOCComponent } from './BYOCComponent';
+import React from 'react';
+export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
+export const BYOCWrapper = (props) => {
+    var _a, _b, _c;
+    const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
+    const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
+    return (React.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(BYOCComponent, Object.assign({}, props)))));
+};

package/dist/esm/components/Date.js

@@ -0,0 +1,51 @@
+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;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+export const DateField = (_a) => {
+    var { field, tag, editable, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
+    if (!field || (!field.editable && !field.value)) {
+        return null;
+    }
+    let children;
+    const htmlProps = Object.assign({}, otherProps);
+    if (field.editable && editable) {
+        htmlProps.dangerouslySetInnerHTML = {
+            __html: field.editable,
+        };
+    }
+    else if (render) {
+        children = render(field.value ? new Date(field.value) : null);
+    }
+    else {
+        children = field.value;
+    }
+    if (tag || (field.editable && editable)) {
+        return React.createElement(tag || 'span', htmlProps, children);
+    }
+    else {
+        return React.createElement(React.Fragment, null, children);
+    }
+};
+DateField.propTypes = {
+    field: PropTypes.shape({
+        value: PropTypes.string,
+        editable: PropTypes.string,
+    }).isRequired,
+    tag: PropTypes.string,
+    editable: PropTypes.bool,
+    render: PropTypes.func,
+};
+DateField.defaultProps = {
+    editable: true,
+};
+DateField.displayName = 'Date';

package/dist/esm/components/EditFrame.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+import { mapButtonToCommand, } from '@sitecore-jss/sitecore-jss/utils';
+export const EditFrame = ({ children, dataSource, buttons, title, tooltip, cssClass, parameters, }) => {
+    var _a;
+    const { sitecoreContext } = useSitecoreContext();
+    if (!sitecoreContext.pageEditing) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    const chromeData = {
+        displayName: title,
+        expandedDisplayName: tooltip,
+    };
+    const frameProps = {};
+    frameProps.className = 'scLooseFrameZone';
+    if (cssClass) {
+        frameProps.className = `${frameProps.className} ${cssClass}`;
+    }
+    // item uri for edit frame target
+    if (dataSource) {
+        const databaseName = dataSource.databaseName || ((_a = sitecoreContext.route) === null || _a === void 0 ? void 0 : _a.databaseName);
+        const language = dataSource.language || sitecoreContext.language;
+        frameProps.sc_item = `sitecore://${databaseName}/${dataSource.itemId}?lang=${language}`;
+        chromeData.contextItemUri = frameProps.sc_item;
+    }
+    chromeData.commands = buttons === null || buttons === void 0 ? void 0 : buttons.map((value) => {
+        return mapButtonToCommand(value, dataSource === null || dataSource === void 0 ? void 0 : dataSource.itemId, parameters);
+    });
+    return (React.createElement("div", Object.assign({ className: "scLooseFrameZone" }, frameProps),
+        React.createElement("span", { className: "scChromeData" }, JSON.stringify(chromeData)),
+        children));
+};

package/dist/esm/components/FEaaSComponent.js

@@ -0,0 +1,120 @@
+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());
+    });
+};
+import React from 'react';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { getDataFromFields } from '../utils';
+export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+/**
+ * @param {FEaaSComponentProps} props component props
+ */
+export 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), { _: 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.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: [] }));
+};
+/**
+ * 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
+ */
+export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
+        const src = endpointOverride || 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
+ */
+export 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}`;
+};

package/dist/esm/components/FEaaSWrapper.js

@@ -0,0 +1,11 @@
+import { FEaaSComponent } from './FEaaSComponent';
+import React from 'react';
+export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+export 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.createElement("div", { className: styles, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(FEaaSComponent, Object.assign({}, props)))));
+};

package/dist/esm/components/File.js

@@ -0,0 +1,46 @@
+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;
+};
+import PropTypes from 'prop-types';
+import React from 'react';
+export const File = (_a) => {
+    /*
+      File fields cannot be managed via the EE. We never output "editable."
+    */
+    var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
+    const dynamicField = field;
+    if (!field || (!dynamicField.value && !dynamicField.src)) {
+        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.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+};
+File.propTypes = {
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            src: PropTypes.string,
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+        }),
+    ]).isRequired,
+};
+File.displayName = 'File';

package/dist/esm/components/HiddenRendering.js

@@ -0,0 +1,8 @@
+import React from 'react';
+const styles = {
+    height: '100px',
+    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+    backgroundSize: '3px 3px',
+};
+export const HiddenRendering = () => React.createElement("div", { style: styles });
+export const HIDDEN_RENDERING_NAME = 'Hidden Rendering';

package/dist/esm/components/Image.js

@@ -0,0 +1,112 @@
+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;
+};
+import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { addClassName, convertAttributesToReactProps } from '../utils';
+import { getAttributesString } from '../utils';
+const getEditableWrapper = (editableMarkup, ...otherProps) => (
+// create an inline wrapper and use dangerouslySetInnerHTML.
+// if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
+React.createElement("span", Object.assign({ className: "sc-image-wrapper" }, otherProps, { dangerouslySetInnerHTML: { __html: editableMarkup } })));
+const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
+    var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
+    if (!src) {
+        return null;
+    }
+    addClassName(otherAttrs);
+    const newAttrs = Object.assign({}, otherAttrs);
+    // update image URL for jss handler and image rendering params
+    const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
+    if (srcSet) {
+        // replace with HTML-formatted srcset, including updated image URLs
+        newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);
+    }
+    // always output original src as fallback for older browsers
+    newAttrs.src = resolvedSrc;
+    return newAttrs;
+};
+/**
+ * @param {ImageField} imageField {ImageField} provides the dynamicMedia which is used to render the image
+ * @param {ImageProps.imageParams} imageParams {ImageProp['imageParams']}} provides the image parameters that will be attached to the image URL
+ * @param {RegExp} mediaUrlPrefix {RegExp} the url prefix regex used in the mediaApi
+ * @param {ImageProps} otherProps {ImageProps} all other props included on the image component
+ * @returns Experience Editor Markup
+ */
+export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
+    // we likely have an experience editor value, should be a string
+    const foundImg = mediaApi.findEditorImageTag(imageField.editable);
+    if (!foundImg) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
+    // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
+    // We do not attempt to merge.
+    const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
+    if (!imgAttrs) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const imgHtml = `<img ${getAttributesString(imgAttrs)} />`;
+    const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
+    return getEditableWrapper(editableMarkup);
+};
+export const Image = (_a) => {
+    var { editable, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+    const dynamicMedia = field;
+    if (!field ||
+        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+        return null;
+    }
+    const imageField = dynamicMedia;
+    if (editable && imageField.editable) {
+        return getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps);
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    if (!img) {
+        return null;
+    }
+    const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
+    if (attrs) {
+        return React.createElement("img", Object.assign({}, attrs));
+    }
+    return null; // we can't handle the truth
+};
+Image.propTypes = {
+    media: PropTypes.oneOfType([
+        PropTypes.shape({
+            src: PropTypes.string,
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+            editable: PropTypes.string,
+        }),
+    ]),
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            src: PropTypes.string,
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+            editable: PropTypes.string,
+        }),
+    ]),
+    editable: PropTypes.bool,
+    mediaUrlPrefix: PropTypes.instanceOf(RegExp),
+    imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
+};
+Image.defaultProps = {
+    editable: true,
+};
+Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -0,0 +1,86 @@
+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;
+};
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+export const Link = forwardRef((_a, ref) => {
+    var { field, editable, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    const children = otherProps.children;
+    const dynamicField = field;
+    if (!field ||
+        (!dynamicField.editableFirstPart &&
+            !dynamicField.value &&
+            !dynamicField.href)) {
+        return null;
+    }
+    const resultTags = [];
+    // EXPERIENCE EDITOR RENDERING
+    if (editable && dynamicField.editableFirstPart) {
+        const markup = dynamicField.editableFirstPart + dynamicField.editableLastPart;
+        // in an ideal world, we'd pre-render React children here and inject them between editableFirstPart and editableLastPart.
+        // However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children)
+        // because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately
+        // as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006.
+        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper', dangerouslySetInnerHTML: {
+                __html: markup,
+            } }, otherProps), { key: 'editable' });
+        // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together
+        // and children will be added as a sibling
+        delete htmlProps.children;
+        resultTags.push(React.createElement("span", Object.assign({}, htmlProps)));
+        // don't render normal link tag when editing, if no children exist
+        // this preserves normal-ish behavior if not using a link body (no hacks required)
+        if (!children) {
+            return resultTags[0];
+        }
+    }
+    // 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;
+    resultTags.push(React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children));
+    return React.createElement(React.Fragment, null, resultTags);
+});
+export const LinkPropTypes = {
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            href: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.oneOf([null]).isRequired]),
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+            editableFirstPart: PropTypes.string,
+            editableLastPart: PropTypes.string,
+        }),
+    ]).isRequired,
+    editable: PropTypes.bool,
+    showLinkTextWithChildrenPresent: PropTypes.bool,
+};
+Link.propTypes = LinkPropTypes;
+Link.defaultProps = {
+    editable: true,
+};
+Link.displayName = 'Link';

package/dist/esm/components/MissingComponent.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+export 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.createElement("div", { style: {
+            background: 'darkorange',
+            outline: '5px solid orange',
+            padding: '10px',
+            color: 'white',
+            maxWidth: '500px',
+        } },
+        React.createElement("h2", null, componentName),
+        React.createElement("p", null, errorMessage)));
+};
+MissingComponent.propTypes = {
+    rendering: PropTypes.shape({
+        componentName: PropTypes.string,
+    }),
+};
+MissingComponent.displayName = 'MissingComponent';