@exdst-sitecore-content-sdk/astro 0.0.16 → 0.0.19

package/src/components/Placeholder/PlaceholderMetadata.astro

@@ -1,4 +1,4 @@
----
+---
 /**
  * An Astro component to generate metadata blocks for a placeholder or rendering.
  * It utilizes dynamic attributes based on whether the component acts as a placeholder
@@ -9,11 +9,11 @@ import {
   ComponentRendering,
   getDynamicPlaceholderPattern,
   isDynamicPlaceholder,
-} from '@sitecore-content-sdk/core/layout';
+} from '@sitecore-content-sdk/content/layout';
 import {
   MetadataKind,
   DEFAULT_PLACEHOLDER_UID,
-} from '@sitecore-content-sdk/core/editing';
+} from '@sitecore-content-sdk/content/editing';
 
 /**
  *  Props containing the component data to render.
@@ -21,6 +21,10 @@ import {
 export interface PlaceholderMetadataProps {
   rendering: ComponentRendering;
   placeholderName?: string;
+  /**
+   * Component runtime type. Used to add data-csdk-component-runtime attribute to rendering chromes
+   */
+  componentRuntime?: 'server';
 }
 
 export type CodeBlockAttributes = {
@@ -29,15 +33,20 @@ export type CodeBlockAttributes = {
   className: string;
   kind: string;
   id?: string;
+  'data-csdk-component-runtime'?: 'server';
 };
 
 const props = Astro.props as PlaceholderMetadataProps;
 
-const getCodeBlockAttributes = (
-  kind: MetadataKind,
-  id?: string,
-  placeholderName?: string
-): CodeBlockAttributes => {
+const getCodeBlockAttributes = ({
+    kind,
+    id,
+    placeholderName,
+  }: {
+    kind: MetadataKind;
+    id?: string;
+    placeholderName?: string;
+  }): CodeBlockAttributes => {
   const chrometype = placeholderName ? 'placeholder' : 'rendering';
 
   const attributes: CodeBlockAttributes = {
@@ -79,6 +88,11 @@ const getCodeBlockAttributes = (
     } else {
       attributes.id = id;
     }
+
+    // Add component runtime attribute for rendering chromes
+    if (chrometype === 'rendering' && props.componentRuntime) {
+      attributes['data-csdk-component-runtime'] = 'server';
+    }
   }
 
   return attributes;
@@ -87,16 +101,8 @@ const getCodeBlockAttributes = (
 
 <>
   <code
-    {...getCodeBlockAttributes(
-      MetadataKind.Open,
-      props.rendering.uid,
-      props.placeholderName
-    )}></code>
+    {...getCodeBlockAttributes({ kind: MetadataKind.Open, id: props.rendering.uid, placeholderName: props.placeholderName })}></code>
   <slot />
   <code
-    {...getCodeBlockAttributes(
-      MetadataKind.Close,
-      props.rendering.uid,
-      props.placeholderName
-    )}></code>
+    {...getCodeBlockAttributes({ kind: MetadataKind.Close, placeholderName: props.placeholderName })}></code>
 </>

package/src/components/Placeholder/PlaceholderMetadata.astro.test.ts

@@ -0,0 +1,228 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../../tests/astro-helpers';
+import PlaceholderMetadata from './PlaceholderMetadata.astro';
+
+describe('PlaceholderMetadata', () => {
+  test('renders rendering code blocks for metadataType rendering', async () => {
+    const children = '<div class="richtext-class"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: { rendering: { uid: '123', componentName: 'RichText' } },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="rendering" class="scpm" kind="open" id="123"></code>',
+        '<div class="richtext-class"></div>',
+        '<code type="text/sitecore" chrometype="rendering" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('renders placeholder code blocks when metadataType is placeholder', async () => {
+    const children = '<div class="richtext-mock"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          uid: '123',
+          componentName: 'RichText',
+          placeholders: { main: [] },
+        },
+        placeholderName: 'main',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="open" id="main_123"></code>',
+        '<div class="richtext-mock"></div>',
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('renders placeholder code blocks with DEFAULT_PLACEHOLDER_UID value when metadataType is a placeholder(root) and uid is not present', async () => {
+    const children = '<div class="richtext-mock"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          componentName: 'RichText',
+          placeholders: { main: [] },
+        },
+        placeholderName: 'main',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="open" id="main_00000000-0000-0000-0000-000000000000"></code>',
+        '<div class="richtext-mock"></div>',
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('renders placeholder blocks with rendering uid when metadataType is dynamic placeholder', async () => {
+    const children = '<div class="richtext-mock"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          uid: 'renderinguid',
+          componentName: 'RichText',
+          placeholders: { 'main-{*}': [] },
+        },
+        placeholderName: 'main-1',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="open" id="main-{*}_renderinguid"></code>',
+        '<div class="richtext-mock"></div>',
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('renders placeholder blocks with DEFAULT_PLACEHOLDER_UID value when metadataType is dynamic placeholder and uid is not present', async () => {
+    const children = '<div class="richtext-mock"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          componentName: 'RichText',
+          placeholders: { 'main-{*}': [] },
+        },
+        placeholderName: 'main-1',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="open" id="main-{*}_00000000-0000-0000-0000-000000000000"></code>',
+        '<div class="richtext-mock"></div>',
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('renders placeholder code blocks when metadataType is double digit dynamic placeholder', async () => {
+    const children = '<div class="richtext-mock"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          uid: 'renderinguid',
+          componentName: 'RichText',
+          placeholders: { 'main-1-{*}': [] },
+        },
+        placeholderName: 'main-1-1',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="open" id="main-1-{*}_renderinguid"></code>',
+        '<div class="richtext-mock"></div>',
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('adds data-csdk-component-runtime attribute to rendering chrome', async () => {
+    const children = '<div class="richtext-class"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          uid: '123',
+          componentName: 'RichText',
+        },
+        componentRuntime: 'server',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="rendering" class="scpm" kind="open" id="123" data-csdk-component-runtime="server"></code>',
+        '<div class="richtext-class"></div>',
+        '<code type="text/sitecore" chrometype="rendering" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('does not add data-csdk-component-runtime attribute to placeholder chrome even when componentRuntime is provided', async () => {
+    const children = '<div class="richtext-mock"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          uid: '123',
+          componentName: 'RichText',
+          placeholders: { main: [] },
+        },
+        componentRuntime: 'server',
+        placeholderName: 'main',
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="open" id="main_123"></code>',
+        '<div class="richtext-mock"></div>',
+        '<code type="text/sitecore" chrometype="placeholder" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+
+  test('does not add data-csdk-component-runtime attribute when componentRuntime is not provided', async () => {
+    const children = '<div class="richtext-class"></div>';
+
+    const wrapper = await renderAstroComponent(PlaceholderMetadata, {
+      props: {
+        rendering: {
+          uid: '123',
+          componentName: 'RichText',
+        },
+      },
+      slots: {
+        default: children,
+      },
+    });
+
+    expect(wrapper.innerHTML).to.equal(
+      [
+        '<code type="text/sitecore" chrometype="rendering" class="scpm" kind="open" id="123"></code>',
+        '<div class="richtext-class"></div>',
+        '<code type="text/sitecore" chrometype="rendering" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+});

package/src/components/Placeholder/PlaceholderUtils.astro

@@ -1,37 +1,31 @@
 ---
-import { ComponentRendering } from "@sitecore-content-sdk/core/layout";
-import { constants } from '@sitecore-content-sdk/core';
+import { ComponentRendering } from "@sitecore-content-sdk/content/layout";
 import EmptyRendering from "../EmptyRendering.astro";
 import HiddenRendering from "../HiddenRendering.astro";
 import MissingComponent from "../MissingComponent.astro";
-import { getSXAParams } from "./placeholder-utils";
+import { getChildComponentProps } from "./placeholder-utils";
 import { ComponentForRendering, PlaceholderProps } from "./models";
 import { AstroContentSdkComponent, ComponentMap } from "../../sharedTypes/component-props";
+import { HIDDEN_RENDERING_NAME } from "@sitecore-content-sdk/content";
 import { useComponentMap } from "../../context";
 
-export const getComponentsForRenderingData = (
-  placeholderData: ComponentRendering[],
-  props: PlaceholderProps
+export const getPlaceholderComponents = (
+  placeholderProps: PlaceholderProps,
+  placeholderRenderings: ComponentRendering[],
 ) => {
+
   const {
     name,
-    fields: placeholderFields,
-    params: placeholderParams,
+    rendering,
     missingComponentComponent,
     hiddenRenderingComponent,
-    ...placeholderProps
-  } = props;
-
-  const transformedComponents = placeholderData
-    .map((rendering: ComponentRendering, index: number) => {
-      const key = (rendering as ComponentRendering).uid
-        ? (rendering as ComponentRendering).uid
-        : `component-${index}`;
-      const commonProps = { key };
+    modifyComponentProps,
+  } = placeholderProps;
 
-      const componentRendering = rendering as ComponentRendering;
-      const componentMap = useComponentMap();
+  const componentMap = useComponentMap();
 
+  const transformedComponents = placeholderRenderings
+    .map((componentRendering: ComponentRendering) => {
       const component = getComponentForRendering(
         componentRendering,
         name,
@@ -39,28 +33,15 @@ export const getComponentsForRenderingData = (
         hiddenRenderingComponent,
         missingComponentComponent
       );
-
-      const finalProps = {
-        ...commonProps,
-        ...placeholderProps,
-        ...((placeholderFields || componentRendering.fields) && {
-          fields: { ...placeholderFields, ...componentRendering.fields },
-        }),
-        ...((placeholderParams || componentRendering.params) && {
-          params: {
-            ...placeholderParams,
-            ...componentRendering.params,
-            // Provide SXA styles
-            ...getSXAParams(componentRendering),
-          },
-        }),
-        rendering: componentRendering,
-      };
+      
+      const renderedProps = modifyComponentProps
+        ? modifyComponentProps(getChildComponentProps(placeholderProps, componentRendering))
+        : getChildComponentProps(placeholderProps, componentRendering);
 
       let components = {
         component: component,
-        props: props.modifyComponentProps ? props.modifyComponentProps(finalProps) : finalProps,
-        rendering: rendering,
+        props: renderedProps,
+        rendering: componentRendering,
         placeholderName: name
       };
 
@@ -90,7 +71,7 @@ export const getComponentForRendering = (
 
   let component;
  
-  if (renderingDefinition.componentName === constants.HIDDEN_RENDERING_NAME) {
+  if (renderingDefinition.componentName === HIDDEN_RENDERING_NAME) {
     return { 
       component: hiddenRenderingComponent ?? HiddenRendering,
       isEmpty: true
@@ -128,7 +109,7 @@ export const getComponentForRendering = (
     //     isEmpty: false,
     //   };
     // } else if (renderingDefinition.componentName === BYOC_WRAPPER_RENDERING_NAME) {
-    //   // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+    //   // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOCs and tries to access its children props
     //   // that's why we need to mark BYOC wrapper dynamic
     //   return {
     //     component: BYOCWrapper,

package/src/components/Placeholder/PlaceholderUtils.astro.test.ts

@@ -0,0 +1,149 @@
+/* eslint-disable no-unused-expressions */
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
+import { ComponentMap } from '../../sharedTypes/component-props';
+import { createSandbox } from 'sinon';
+import { getComponentForRendering } from './PlaceholderUtils.astro';
+import MissingComponent from '../MissingComponent.astro';
+import HiddenRendering from '../HiddenRendering.astro';
+import TestComponent from '../../tests/test-components/TestComponent.astro';
+import CustomMissingComponent from '../../tests/test-components/CustomMissingComponent.astro';
+import CustomHiddenRendering from '../../tests/test-components/CustomHiddenRendering.astro';
+import { HIDDEN_RENDERING_NAME } from '@sitecore-content-sdk/content';
+
+describe('placeholder-utils', () => {
+  const sandbox = createSandbox();
+  let consoleWarnStub: ReturnType<typeof sandbox.stub>;
+
+  beforeEach(() => {
+    consoleWarnStub = sandbox.stub(console, 'warn');
+    sandbox.stub(console, 'error');
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  describe('getComponentForRendering', () => {
+    let componentMap: ComponentMap;
+
+    beforeEach(() => {
+      componentMap = new Map();
+    });
+
+    test('should return null when componentMap is empty', () => {
+      const rendering: ComponentRendering = {
+        componentName: 'TestComponent',
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(rendering, 'test-placeholder');
+
+      expect(result?.component).to.equal(MissingComponent);
+      expect(result?.isEmpty).to.be.true;
+      expect(consoleWarnStub.calledOnce).to.be.true;
+    });
+
+    test('should return null when componentMap is not provided', () => {
+      const rendering: ComponentRendering = {
+        componentName: 'TestComponent',
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(rendering, 'test-placeholder', undefined);
+
+      expect(result?.component).to.equal(MissingComponent);
+      expect(result?.isEmpty).to.be.true;
+      expect(consoleWarnStub.calledOnce).to.be.true;
+    });
+
+    test('should return component directly when it is not a module', () => {
+      componentMap.set('TestComponent', TestComponent);
+
+      const rendering: ComponentRendering = {
+        componentName: 'TestComponent',
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(rendering, 'test-placeholder', componentMap);
+
+      expect(result?.component).to.equal(TestComponent);
+    });
+
+    test('should return default missing component when component not found in component map', () => {
+      // Add a dummy entry so componentMap is not empty
+      componentMap.set('DummyComponent', TestComponent);
+
+      const rendering: ComponentRendering = {
+        componentName: 'NonExistentComponent',
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(rendering, 'test-placeholder', componentMap);
+
+      expect(result?.component).to.equal(MissingComponent);
+      expect(result?.isEmpty).to.be.true;
+    });
+
+    test('should return custom missing component when specified and component not found in component map', () => {
+      // Add a dummy entry so componentMap is not empty
+      componentMap.set('DummyComponent', TestComponent);
+
+      const rendering: ComponentRendering = {
+        componentName: 'NonExistentComponent',
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(
+        rendering,
+        'test-placeholder',
+        componentMap,
+        undefined,
+        CustomMissingComponent
+      );
+
+      expect(result?.component).to.equal(CustomMissingComponent);
+      expect(result?.isEmpty).to.be.true;
+    });
+
+    test('should return hiddenRenderingComponent when component is hidden', () => {
+      const rendering: ComponentRendering = {
+        componentName: HIDDEN_RENDERING_NAME,
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(
+        rendering,
+        'test-placeholder',
+        componentMap,
+        CustomHiddenRendering
+      );
+
+      expect(result?.component).to.equal(CustomHiddenRendering);
+      expect(result?.isEmpty).to.be.true;
+    });
+
+    test('should return default HiddenRendering when component is hidden and no custom hidden component provided', () => {
+      const rendering: ComponentRendering = {
+        componentName: HIDDEN_RENDERING_NAME,
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(rendering, 'test-placeholder', componentMap);
+
+      expect(result?.component).to.equal(HiddenRendering);
+      expect(result?.isEmpty).to.be.true;
+    });
+
+    test('should handle rendering without componentName', () => {
+      const rendering: ComponentRendering = {
+        componentName: '',
+        uid: 'test-uid',
+      };
+
+      const result = getComponentForRendering(rendering, 'test-placeholder', componentMap);
+
+      expect(result?.isEmpty).to.be.true;
+    });
+  });
+});

package/src/components/Placeholder/models.ts

@@ -1,15 +1,12 @@
-import { Page } from '@sitecore-content-sdk/core/client';
+import { Page } from '@sitecore-content-sdk/content/client';
 import { AstroContentSdkComponent } from '../../sharedTypes/component-props';
-import { ComponentRendering, Field, Item, RouteData } from '@sitecore-content-sdk/core/layout';
-
-/** Provided for the component which represents rendering data */
-export type ComponentProps = {
-  [key: string]: unknown;
-  rendering: ComponentRendering;
-};
+import { ComponentRendering, Field, Item, RouteData } from '@sitecore-content-sdk/content/layout';
 
+/**
+ * Base Placeholder props
+ * @public
+ */
 export interface PlaceholderProps {
-  [key: string]: unknown;
   /** Name of the placeholder to render. */
   name: string;
   /** Rendering data to be used when rendering the placeholder. */
@@ -28,13 +25,7 @@ export interface PlaceholderProps {
   params?: {
     [name: string]: string;
   };
-  /**
-   * Modify final props of component (before render) provided by rendering data.
-   * Can be used in case when you need to insert additional data into the component.
-   * @param {ComponentProps} componentProps component props to be modified
-   * @returns {ComponentProps} modified or initial props
-   */
-  modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
+
   /**
    * A component that is rendered in place of any components that are in this placeholder,
    * but do not have a definition in the componentMap (i.e. don't have an implementation)
@@ -55,7 +46,7 @@ export interface PlaceholderProps {
    * Page data.
    * This data is passed by the SitecoreProvider.
    */
-  page: Page;
+  page?: Page;
 
   /**
    * Render HTML or an Astro component when the placeholder contains no content components.
@@ -74,6 +65,24 @@ export interface PlaceholderProps {
    * Mutually exclusive with `render`.
    */
   renderEach?: string | AstroContentSdkComponent;
+
+  /**
+   * Modify final props of component (before render) provided by rendering data.
+   * Can be used in case when you need to insert additional data into the component.
+   * @param {ChildComponentProps} componentProps component props to be modified
+   * @returns {ChildComponentProps} modified or initial props
+   */
+  modifyComponentProps?: (componentProps: ChildComponentProps) => ChildComponentProps;
+}
+
+export interface ChildComponentProps {
+  fields: {
+    [name: string]: Field | Item | Item[];
+  };
+  params: {
+    [name: string]: string;
+  };
+  rendering: ComponentRendering;
 }
 
 export interface ComponentForRendering {