@sitecore-jss/sitecore-jss-react 21.5.0-canary.9 → 21.6.0-beta.1

package/dist/cjs/components/BYOCComponent.js

@@ -103,7 +103,8 @@ class BYOCComponent extends react_1.default.Component {
                 componentProps = props.fields ? (0, utils_1.getDataFromFields)(props.fields) : {};
             }
         }
-        return (react_1.default.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
+        // we render fallback on client to avoid problems with client-only components
+        return (react_1.default.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, clientFallback: fallbackComponent }, componentProps)));
     }
 }
 exports.BYOCComponent = BYOCComponent;

package/dist/cjs/components/FEaaSComponent.js

@@ -76,7 +76,8 @@ const FEaaSComponent = (props) => {
     // 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
-    return (react_1.default.createElement(FEAAS.Component, { data: props.fetchedData || 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 }));
+    // 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: props.fetchedData || 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;
 /**

package/dist/cjs/components/PlaceholderCommon.js

@@ -48,7 +48,8 @@ class PlaceholderCommon extends react_1.default.Component {
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
                 if (placeholder.indexOf('{*}') !== -1 &&
-                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1)) {
+                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1) &&
+                    name.replace(/[^a-zA-Z]*/gi, '') === placeholder.replace(/[^a-zA-Z]*/gi, '')) {
                     rendering.placeholders[name] = rendering.placeholders[placeholder];
                     delete rendering.placeholders[placeholder];
                 }

package/dist/esm/components/BYOCComponent.js

@@ -74,7 +74,8 @@ export class BYOCComponent extends React.Component {
                 componentProps = props.fields ? getDataFromFields(props.fields) : {};
             }
         }
-        return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
+        // we render fallback on client to avoid problems with client-only components
+        return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, clientFallback: fallbackComponent }, componentProps)));
     }
 }
 /**

package/dist/esm/components/FEaaSComponent.js

@@ -47,7 +47,8 @@ export const FEaaSComponent = (props) => {
     // 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
-    return (React.createElement(FEAAS.Component, { data: props.fetchedData || 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 }));
+    // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
+    return (React.createElement(FEAAS.Component, { data: props.fetchedData || 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.

package/dist/esm/components/PlaceholderCommon.js

@@ -42,7 +42,8 @@ export class PlaceholderCommon extends React.Component {
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
                 if (placeholder.indexOf('{*}') !== -1 &&
-                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1)) {
+                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1) &&
+                    name.replace(/[^a-zA-Z]*/gi, '') === placeholder.replace(/[^a-zA-Z]*/gi, '')) {
                     rendering.placeholders[name] = rendering.placeholders[placeholder];
                     delete rendering.placeholders[placeholder];
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "21.5.0-canary.9",
+  "version": "21.6.0-beta.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -27,7 +27,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore-feaas/clientside": "^0.3.17",
+    "@sitecore-feaas/clientside": "^0.4.12",
     "@types/chai": "^4.3.4",
     "@types/chai-string": "^1.4.2",
     "@types/deep-equal": "^1.0.1",
@@ -58,19 +58,19 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "@sitecore-feaas/clientside": "^0.3.17",
+    "@sitecore-feaas/clientside": "^0.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.5.0-canary.9",
+    "@sitecore-jss/sitecore-jss": "^21.6.0-beta.1",
     "deep-equal": "^2.1.0",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "d04cef72a0eafdaa6654c7741d7fa4ab325a7f38",
+  "gitHead": "b14b3dc875d5e822d97232843b5fd2b760fe2c8d",
   "files": [
     "dist",
     "types"

package/types/ComponentBuilder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { ComponentType } from 'react';
 import { ComponentFactory } from './components/sharedTypes';
 /**

package/types/components/BYOCComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
 import { MissingComponentProps } from './MissingComponent';

package/types/components/Date.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface DateFieldProps {
     /** The date field data. */

package/types/components/EditFrame.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { PropsWithChildren } from 'react';
 import { EditFrameDataSource, EditButtonTypes } from '@sitecore-jss/sitecore-jss/utils';
 export interface EditFrameProps {

package/types/components/File.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface FileFieldValue {
     [propName: string]: unknown;

package/types/components/HiddenRendering.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export declare const HiddenRendering: () => React.JSX.Element;
 export declare const HIDDEN_RENDERING_NAME = "Hidden Rendering";

package/types/components/Image.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface ImageFieldValue {
     [attributeName: string]: unknown;

package/types/components/Link.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface LinkFieldValue {

package/types/components/MissingComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface MissingComponentProps {
     rendering?: {

package/types/components/Placeholder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { PlaceholderProps } from './PlaceholderCommon';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';

package/types/components/PlaceholderCommon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ComponentFactory } from './sharedTypes';

package/types/components/RichText.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface RichTextField {

package/types/components/SitecoreContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentFactory } from './sharedTypes';

package/types/components/Text.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { FunctionComponent } from 'react';
 export interface TextField {
     value?: string | number;

package/types/components/VisitorIdentification.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 interface VisitorIdentificationProps {
     defer?: boolean;

package/types/components/sharedTypes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { ComponentType } from 'react';
 /**
  * @param {string} componentName component to be imported from the component factory

package/types/enhancers/withComponentFactory.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentFactory } from '../components/sharedTypes';
 export interface ComponentFactoryProps {

package/types/enhancers/withDatasourceCheck.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
 export declare const DefaultEditingError: () => JSX.Element;

package/types/enhancers/withEditorChromes.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export declare const withEditorChromes: (WrappedComponent: React.ComponentClass<unknown> | React.FC<unknown>) => React.ComponentClass<{}, any>;

package/types/enhancers/withSitecoreContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { ReactNode } from 'react';
 import { SitecoreContextValue } from '../components/SitecoreContext';
 export interface WithSitecoreContextOptions {