[react] Refactor components and HOCs

packages/nextjs/src/index.ts

@@ -152,7 +152,8 @@ export {
   withSitecore,
   useSitecore,
   withEditorChromes,
-  withPlaceholder,
+  withAppPlaceholder,
+  withClientPlaceholder,
   withDatasourceCheck,
   ImageSizeParameters,
   WithSitecoreOptions,

packages/react/api/content-sdk-react.api.md

@@ -59,17 +59,14 @@ import { SitePathService } from '@sitecore-content-sdk/content/site';
 import { SitePathServiceConfig } from '@sitecore-content-sdk/content/site';
 
 // @public
-export const AppPlaceholder: (props: AppPlaceholderProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | React_2.JSX.Element | (string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | React_2.JSX.Element | null | undefined)[] | null | undefined;
+export const AppPlaceholder: (props: AppPlaceholderProps) => React_2.JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "BasePlaceholderProps" needs to be exported by the entry point api-surface.d.ts
 //
 // @public
-export interface AppPlaceholderProps extends BasePlaceholderProps {
-    componentMap: ComponentMap;
-    // Warning: (ae-forgotten-export) The symbol "AppComponentProps" needs to be exported by the entry point api-surface.d.ts
-    modifyComponentProps?: (componentProps: AppComponentProps) => AppComponentProps;
+export type AppPlaceholderProps = Omit<BasePlaceholderProps, 'componentMap' | 'page'> & Required<Pick<BasePlaceholderProps, 'componentMap' | 'page'>> & {
     render?: (components: React.ReactNode[], data: ComponentRendering[], props: AppPlaceholderProps) => React.ReactNode;
-}
+};
 
 // @public
 export class BYOCComponent extends React_2.Component<BYOCComponentProps> {
@@ -179,7 +176,7 @@ export { DictionaryPhrases }
 export { DictionaryService }
 
 // @public
-export const EditingScripts: () => JSX_2.Element;
+export const EditingScripts: () => React_2.JSX.Element;
 
 export { EditMode }
 
@@ -375,17 +372,12 @@ export { Page }
 export { PageMode }
 
 // @public
-export const Placeholder: (props: EnhancedOmit<PlaceholderProps, keyof WithSitecoreProps>) => React_2.JSX.Element;
+export const Placeholder: (props: PlaceholderProps) => React_2.JSX.Element;
 
 // @public
-interface PlaceholderProps extends BasePlaceholderProps {
-    // (undocumented)
-    [key: string]: unknown;
-    componentMap?: ComponentMap;
-    // Warning: (ae-forgotten-export) The symbol "ComponentProps" needs to be exported by the entry point api-surface.d.ts
-    modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
+type PlaceholderProps = BasePlaceholderProps & {
     render?: (components: React.ReactNode[], data: ComponentRendering[], props: PlaceholderProps) => React.ReactNode;
-}
+};
 export { PlaceholderProps as PlaceholderComponentProps }
 export { PlaceholderProps }
 
@@ -430,19 +422,11 @@ export { RouteData }
 // @public
 export type SearchStatus = 'idle' | 'loading' | 'success' | 'error';
 
-// Warning: (ae-forgotten-export) The symbol "SitecoreProviderProps" needs to be exported by the entry point api-surface.d.ts
-//
 // @public
-export class SitecoreProvider extends React_2.Component<SitecoreProviderProps, SitecoreProviderState> {
-    constructor(props: SitecoreProviderProps);
-    // (undocumented)
-    componentDidUpdate(prevProps: SitecoreProviderProps): void;
-    // (undocumented)
-    static displayName: string;
-    // (undocumented)
-    render(): React_2.JSX.Element;
-    setPage: (value: Page) => void;
-}
+export const SitecoreProvider: {
+    (props: SitecoreProviderProps): React_2.JSX.Element;
+    displayName: string;
+};
 
 // @public
 export const SitecoreProviderReactContext: React_2.Context<SitecoreProviderState>;
@@ -451,7 +435,7 @@ export const SitecoreProviderReactContext: React_2.Context<SitecoreProviderState
 export interface SitecoreProviderState {
     api?: SitecoreProviderProps['api'];
     page: Page;
-    setPage: (value: Page) => void;
+    setPage?: (value: Page) => void;
 }
 
 export { SitePathService }
@@ -470,6 +454,9 @@ export interface TextField extends FieldMetadata {
     value?: string | number;
 }
 
+// @public
+export function useComponentMap(): ComponentMap;
+
 // @public
 export const useInfiniteSearch: <T extends SearchDocument = SearchDocument>(options: UseInfiniteSearchOptions<T>) => UseInfiniteSearchState<T>;
 
@@ -519,8 +506,17 @@ export type UseSearchState<T extends SearchDocument = SearchDocument> = Omit<Int
     isPreviousData: boolean;
 };
 
+// Warning: (ae-forgotten-export) The symbol "ComponentProps" needs to be exported by the entry point api-surface.d.ts
+// Warning: (ae-forgotten-export) The symbol "WrapperProps" needs to be exported by the entry point api-surface.d.ts
+//
 // @public
-export function useSitecore(options?: WithSitecoreOptions): WithSitecoreProps;
+export const withAppPlaceholder: <T extends ComponentProps, W extends T & WrapperProps>(Component: ComponentType<T>) => (props: W) => React_2.JSX.Element;
+
+// Warning: (ae-forgotten-export) The symbol "ComponentProps_2" needs to be exported by the entry point api-surface.d.ts
+// Warning: (ae-forgotten-export) The symbol "WrapperProps_2" needs to be exported by the entry point api-surface.d.ts
+//
+// @public
+export const withClientPlaceholder: <T extends ComponentProps_2, W extends T & WrapperProps_2>(Component: ComponentType<T>) => (props: W) => React_2.JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "WithDatasourceCheckOptions" needs to be exported by the entry point api-surface.d.ts
 // Warning: (ae-forgotten-export) The symbol "WithDatasourceCheckProps" needs to be exported by the entry point api-surface.d.ts
@@ -529,7 +525,10 @@ export function useSitecore(options?: WithSitecoreOptions): WithSitecoreProps;
 export function withDatasourceCheck(options?: WithDatasourceCheckOptions): <ComponentProps extends WithDatasourceCheckProps>(Component: React_2.ComponentType<ComponentProps>) => (props: ComponentProps) => JSX_2.Element | null;
 
 // @public
-export const withEditorChromes: (WrappedComponent: React_2.ComponentClass<unknown> | React_2.FC<unknown>) => React_2.ComponentClass;
+export const withEditorChromes: (WrappedComponent: React_2.ComponentClass<unknown> | React_2.FC<unknown>) => {
+    (props: Record<string, unknown>): React_2.JSX.Element;
+    displayName: string;
+};
 
 // Warning: (ae-forgotten-export) The symbol "WithEmptyFieldEditingComponentProps" needs to be exported by the entry point api-surface.d.ts
 // Warning: (ae-forgotten-export) The symbol "WithEmptyFieldEditingComponentOptions" needs to be exported by the entry point api-surface.d.ts
@@ -542,33 +541,10 @@ export function withEmptyFieldEditingComponent<FieldComponentProps extends WithE
 // @public
 export function withFieldMetadata<FieldComponentProps extends WithMetadataProps, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, isForwardRef?: boolean): React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<FieldComponentProps> & React_2.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React_2.JSX.Element);
 
-// Warning: (ae-forgotten-export) The symbol "WithPlaceholderSpec" needs to be exported by the entry point api-surface.d.ts
-// Warning: (ae-forgotten-export) The symbol "WithPlaceholderOptions" needs to be exported by the entry point api-surface.d.ts
-//
-// @public
-export function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React_2.ComponentClass<PlaceholderProps> | React_2.FunctionComponent<PlaceholderProps>) => (props: EnhancedOmit<PlaceholderProps, keyof WithSitecoreProps>) => React_2.JSX.Element;
-
-// @public (undocumented)
-export function withSitecore(options?: WithSitecoreOptions): <ComponentProps extends WithSitecoreProps>(Component: React_2.ComponentType<ComponentProps>) => (props: WithSitecoreHocProps<ComponentProps>) => React_2.JSX.Element;
-
-// @public
-export type WithSitecoreHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreProps>;
-
-// @public
-export interface WithSitecoreOptions {
-    updatable?: boolean;
-}
-
-// @public
-export interface WithSitecoreProps {
-    api?: SitecoreProviderState['api'];
-    page: Page;
-    updatePage?: ((value: Page) => void) | false;
-}
-
 // Warnings were encountered during analysis:
 //
 // src/components/FEaaS/models.ts:96:3 - (ae-forgotten-export) The symbol "RevisionType" needs to be exported by the entry point api-surface.d.ts
+// src/components/SitecoreProvider.tsx:88:30 - (ae-forgotten-export) The symbol "SitecoreProviderProps" needs to be exported by the entry point api-surface.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/react/src/components/Date.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
@@ -51,7 +51,8 @@ export const DateField: React.FC<DateFieldProps> = withFieldMetadata<DateFieldPr
       }
 
       if (tag) {
-        return React.createElement(tag || 'span', htmlProps, children);
+        const Tag = (tag || 'span') as React.ElementType;
+        return <Tag {...htmlProps}>{children}</Tag>;
       } else {
         return <React.Fragment>{children}</React.Fragment>;
       }

packages/react/src/components/DefaultEmptyFieldEditingComponents.tsx

@@ -9,10 +9,11 @@ export const DefaultEmptyFieldEditingComponentText: React.FC<{
   [key: string]: unknown;
   tag?: string;
 }> = (props) => {
-  return React.createElement(
-    props.tag || 'span',
-    { ...props, suppressHydrationWarning: true },
-    '[No text in field]'
+  const Tag = (props.tag || 'span') as React.ElementType;
+  return (
+    <Tag {...props} suppressHydrationWarning={true}>
+      [No text in field]
+    </Tag>
   );
 };
 

packages/react/src/components/DesignLibrary/DesignLibrary.tsx

@@ -13,11 +13,10 @@ import {
 } from '@sitecore-content-sdk/content/editing';
 import * as codegen from '@sitecore-content-sdk/content/codegen';
 import * as editing from '@sitecore-content-sdk/content/editing';
-import { useSitecore } from '../../enhancers/withSitecore';
+import { useSitecore, useLoadImportMap } from '../../components/SitecoreProvider';
 import { Placeholder, PlaceholderMetadata } from '../Placeholder';
 import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
 import { DynamicComponent } from './models';
-import { useLoadImportMap } from '../../enhancers/withLoadImportMap';
 import { ErrorComponent } from '../ErrorBoundary';
 
 let {
@@ -45,8 +44,6 @@ export const __mockDependencies = (mocks: any) => {
  * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
  * wires the **variant generation** handshake so the parent (DL Studio) can send
  * generated code to preview and iterate on.
- * @param {DesignLibraryProps} props
- * @param {() => Promise} [props.loadImportMap] Optional async loader that resolves to the import-map used to resolve the generated component’s imports. Required when `isVariantGeneration` is true.
  * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  * @public
  */
@@ -156,7 +153,7 @@ export const DesignLibrary = () => {
       cancelled = true;
       unsubscribe && unsubscribe();
     };
-  }, [isVariantGeneration, uid]);
+  }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState]);
 
   return (
     <main>

packages/react/src/components/EditingScripts.tsx

@@ -1,15 +1,18 @@
 'use client';
-import React, { JSX } from 'react';
-import { useSitecore } from '../enhancers/withSitecore';
-import { getContentSdkPagesClientData, getDesignLibraryScriptLink } from '@sitecore-content-sdk/content/editing';
+import React from 'react';
+import { useSitecore } from './SitecoreProvider';
+import {
+  getContentSdkPagesClientData,
+  getDesignLibraryScriptLink,
+} from '@sitecore-content-sdk/content/editing';
 
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when mode.isDesignLibrary is true).
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  * @public
  */
-export const EditingScripts = (): JSX.Element => {
+export const EditingScripts = () => {
   const {
     page: { mode, layout },
     api,

packages/react/src/components/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client';
 import React, { ReactNode, Suspense } from 'react';
 import { Page } from '@sitecore-content-sdk/content/client';
 import { ComponentRendering } from '@sitecore-content-sdk/content/layout';

packages/react/src/components/File.tsx

@@ -1,4 +1,4 @@
-import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
 import React from 'react';
 
 export interface FileFieldValue {
@@ -48,7 +48,13 @@ export const File: React.FC<FileProps> = ({ field, children, ...otherProps }) =>
   const anchorAttrs = {
     href: file.src,
   };
-  return React.createElement('a', { ...anchorAttrs, ...otherProps }, linkText, children);
+
+  return (
+    <a {...anchorAttrs} {...otherProps}>
+      {linkText}
+      {children}
+    </a>
+  );
 };
 
 File.displayName = 'File';

packages/react/src/components/Form.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
 import { form } from '@sitecore-content-sdk/content';
-import { useSitecore } from '../enhancers/withSitecore';
+import { useSitecore } from './SitecoreProvider';
 import { ErrorComponent } from './ErrorBoundary';
 
 let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
@@ -86,7 +86,14 @@ export const Form = ({ params, rendering }: FormProps) => {
 
       executeScriptElements(formRef.current);
     }
-  }, [content]);
+  }, [
+    content,
+    isEditing,
+    params.FormId,
+    rendering.uid,
+    context.api?.edge?.clientContextId,
+    context.api?.edge?.edgeUrl,
+  ]);
 
   if (isEditing && error) {
     return <ErrorComponent message="There was a problem loading this section" />;

packages/react/src/components/Link.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client';
 import React, { RefAttributes, forwardRef } from 'react';
 import { FieldMetadata, isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';
@@ -91,14 +91,12 @@ export const Link: React.FC<LinkProps> = withFieldMetadata<LinkProps, HTMLAnchor
         const linkText =
           showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
 
-        const element = React.createElement(
-          'a',
-          { ...anchorAttrs, ...otherProps, key: 'link', ref },
-          linkText,
-          children
+        return (
+          <a {...anchorAttrs} {...otherProps} key="link" ref={ref}>
+            {linkText}
+            {children}
+          </a>
         );
-
-        return <React.Fragment>{element}</React.Fragment>;
       }
     ),
     { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }

packages/react/src/components/Placeholder/AppPlaceholder.test.tsx

@@ -1308,6 +1308,52 @@ describe('App Placeholder logic', () => {
       // 4 placeholders in total, 8 code blocks
       expect(wrapper?.container.querySelectorAll('.scpm').length).to.equal(8);
     });
+
+    it('should use renderEach for each child in the placeholder when page editing is enabled', () => {
+      const page = getPage();
+      const components = new Map<string, React.FC>();
+
+      page.mode.isEditing = true;
+
+      components.set('Child', () => 'Child');
+
+      const route = {
+        name: 'Render Each Test',
+        placeholders: {
+          main: [
+            {
+              componentName: 'Child',
+            },
+            {
+              componentName: 'Child',
+            },
+          ],
+        },
+      };
+      page.layout = {
+        sitecore: {
+          context: {},
+          route,
+        },
+      };
+      const phKey = 'main';
+
+      const renderedComponent = render(
+        <SitecoreProvider componentMap={componentMap} page={page}>
+          <AppPlaceholder
+            name={phKey}
+            rendering={page.layout.sitecore.route}
+            componentMap={components}
+            page={page}
+            render={(children) => <div className="parentWrapper">{children}</div>}
+            renderEach={(child) => <div className="wrapper">{child}</div>}
+          />
+        </SitecoreProvider>
+      );
+
+      expect(renderedComponent.container.querySelectorAll('.parentWrapper').length).to.equal(1);
+      expect(renderedComponent.container.querySelectorAll('.wrapper').length).to.equal(2);
+    });
   });
 });