@exdst-sitecore-content-sdk/astro 0.0.1

package/src/components/Image.astro

@@ -0,0 +1,155 @@
+---
+import { mediaApi } from '@sitecore-content-sdk/core/media';
+import { EditableFieldProps } from './sharedTypes';
+import {
+  FieldMetadata,
+  isFieldValueEmpty,
+} from '@sitecore-content-sdk/core/layout';
+import { addClassName } from '../utils';
+import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
+import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
+import DefaultEmptyFieldEditingComponentImage from './DefaultEmptyFieldEditingComponentImage.astro';
+
+export interface ImageFieldValue {
+  [attributeName: string]: unknown;
+  src?: string;
+}
+
+export interface ImageField {
+  value?: ImageFieldValue;
+}
+
+export interface ImageSizeParameters {
+  [attr: string]: string | number | undefined;
+  /** Fixed width of the image */
+  w?: number;
+  /** Fixed height of the image */
+  h?: number;
+  /** Max width of the image */
+  mw?: number;
+  /** Max height of the image */
+  mh?: number;
+  /** Ignore aspect ratio */
+  iar?: 1 | 0;
+  /** Allow stretch */
+  as?: 1 | 0;
+  /** Image scale. Defaults to 1.0 */
+  sc?: number;
+}
+
+export interface BaseImageProps {
+  [attributeName: string]: unknown;
+  /** Image field data (consistent with other field types) */
+  field?: (ImageField | ImageFieldValue) & FieldMetadata;
+  /**
+   * Parameters that will be attached to Sitecore media URLs
+   */
+  imageParams?: {
+    [paramName: string]: string | number;
+  };
+    /**
+   * Custom regexp that finds media URL prefix that will be replaced by `/-/jssmedia` or `/~/jssmedia`.
+   * @example
+   * /\/([-~]{1})assets\//i
+   * /-assets/website -> /-/jssmedia/website
+   * /~assets/website -> /~/jssmedia/website
+   */
+  mediaUrlPrefix?: RegExp;
+}
+
+export interface ImageProps extends BaseImageProps, EditableFieldProps {
+  srcSet?: ImageSizeParameters[];
+}
+
+const getImageAttrs = (
+  {
+    src,
+    srcSet,
+    ...otherAttrs
+  }: {
+    [key: string]: unknown;
+    src?: string;
+    srcSet?: ImageSizeParameters[];
+  },
+  imageParams?: { [paramName: string]: string | number },
+  mediaUrlPrefix?: RegExp
+) => {
+  if (!src) {
+    return null;
+  }
+  addClassName(otherAttrs);
+
+  const newAttrs: { [attr: string]: unknown } = {
+    ...otherAttrs,
+  };
+
+  // update image URL for content sdk 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;
+};
+
+const {
+  editable = true,
+  imageParams,
+  field,
+  mediaUrlPrefix,
+  emptyFieldEditingComponent,
+  ...otherProps
+} = Astro.props as ImageProps;
+
+const dynamicMedia = field as ImageField | ImageFieldValue;
+
+const isEmptyField = isFieldValueEmpty(dynamicMedia);
+
+let img;
+if (!isEmptyField) {
+  // handle image directly on field for forgetful devs
+  img = (dynamicMedia as ImageFieldValue).src
+    ? { ...field }
+    : (dynamicMedia.value as ImageFieldValue);
+
+  if (img) {
+    // prevent metadata from being passed to the img tag
+    if (img.metadata) {
+      delete img.metadata;
+    }
+  }
+}
+
+const attrs = getImageAttrs(
+  { ...img, ...otherProps },
+  imageParams,
+  mediaUrlPrefix
+);
+
+console.log("Attrs", attrs);
+---
+
+{
+  (
+    <WithFieldMetadata field={field} editable={editable}>
+      <WithEmptyFieldEditingComponent
+        field={field}
+        editable={editable}
+        defaultEmptyFieldEditingComponent={
+          DefaultEmptyFieldEditingComponentImage
+        }
+        emptyFieldEditingComponent={emptyFieldEditingComponent}
+        {...otherProps}
+      >
+        {!isEmptyField && img && attrs && <img {...attrs} />}
+      </WithEmptyFieldEditingComponent>
+    </WithFieldMetadata>
+  )
+}

package/src/components/Link.astro

@@ -0,0 +1,105 @@
+---
+import {
+  FieldMetadata,
+  isFieldValueEmpty,
+} from '@sitecore-content-sdk/core/layout';
+import { EditableFieldProps } from './sharedTypes';
+import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
+import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
+import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
+
+export interface LinkFieldValue {
+  [attributeName: string]: unknown;
+  href?: string;
+  class?: string;
+  title?: string;
+  target?: string;
+  text?: string;
+  anchor?: string;
+  querystring?: string;
+  linktype?: string;
+}
+
+export interface LinkField {
+  value: LinkFieldValue;
+}
+
+export interface LinkProps extends EditableFieldProps {
+  [htmlAttributes: string]: unknown;
+  /** The link field data. */
+  field: (LinkField | LinkFieldValue) & FieldMetadata;
+  /**
+   * Displays a link text ('description' in Sitecore) even when children exist
+   */
+  showLinkTextWithChildrenPresent?: boolean;
+}
+
+const {
+  field,
+  editable = true,
+  showLinkTextWithChildrenPresent,
+  emptyFieldEditingComponent,
+  ...otherProps
+} = Astro.props as LinkProps;
+
+const children = await Astro.slots.render('default');
+const dynamicField: LinkField | LinkFieldValue = field;
+
+const isEmptyField = isFieldValueEmpty(dynamicField);
+
+let link,
+  finalChildren,
+  anchorAttrs: { [attr: string]: unknown } = {};
+
+if (!isEmptyField) {
+  // handle link directly on field for forgetful devs
+  link = (dynamicField as LinkFieldValue).href
+    ? (field as LinkFieldValue)
+    : (dynamicField as LinkField).value;
+
+  if (link) {
+    const anchor =
+      link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+
+    anchorAttrs = {
+      href: `${link.href}${querystring}${anchor}`,
+      class: 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;
+
+    finalChildren = children ? [linkText, ...children] : linkText;
+  }
+}
+
+const attrs = { ...anchorAttrs, ...otherProps };
+---
+
+{
+  (
+    <WithFieldMetadata field={field} editable={editable}>
+      <WithEmptyFieldEditingComponent
+        field={field}
+        editable={editable}
+        defaultEmptyFieldEditingComponent={
+          DefaultEmptyFieldEditingComponentText
+        }
+        emptyFieldEditingComponent={emptyFieldEditingComponent}
+        {...otherProps}
+      >
+        {!isEmptyField && link && <a {...attrs} set:html={finalChildren} />}
+      </WithEmptyFieldEditingComponent>
+    </WithFieldMetadata>
+  )
+}

package/src/components/MissingComponent.astro

@@ -0,0 +1,39 @@
+---
+interface MissingComponentProps {
+  rendering?: {
+    componentName?: string;
+  };
+  errorOverride?: string;
+}
+
+const props = Astro.props as MissingComponentProps;
+
+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 ||
+  'Content SDK component is missing Astro implementation. See the developer console for more information.';
+---
+
+<div
+  style={{
+    background: 'darkorange',
+    outline: '5px solid orange',
+    padding: '10px',
+    color: 'white',
+    maxWidth: '500px',
+  }}
+>
+  <h2>{componentName}</h2>
+  <p>{errorMessage}</p>
+</div>

package/src/components/Placeholder/EmptyPlaceholder.astro

@@ -0,0 +1,9 @@
+---
+/**
+ * Renders the empty placeholder. The required CSS styles are applied to the placeholder in edit mode.
+ */
+---
+
+<div class="sc-jss-empty-placeholder">
+  <slot />
+</div>

package/src/components/Placeholder/Placeholder.astro

@@ -0,0 +1,100 @@
+---
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import ErrorBoundary from '../ErrorBoundary.astro';
+import PlaceholderMetadata from './PlaceholderMetadata.astro';
+import { useSitecore } from '../../context';
+import RenderWrapper from '../RenderWrapper.astro';
+import EmptyPlaceholder from './EmptyPlaceholder.astro';
+import { PlaceholderProps } from './models';
+import { getPlaceholderRenderings } from './placeholder-utils';
+import { getComponentsForRenderingData } from './PlaceholderUtils.astro';
+
+const props = Astro.props as PlaceholderProps;
+
+const { page } = useSitecore();
+const childProps: PlaceholderProps = { ...props, page };
+
+delete childProps.componentMap;
+
+const renderingData = childProps.rendering;
+
+const placeholderData = getPlaceholderRenderings(
+  renderingData,
+  childProps.name,
+  childProps.page.mode.isEditing
+);
+
+const isEmpty = !placeholderData.length;
+
+const components = getComponentsForRenderingData(placeholderData, childProps);
+---
+
+{
+  (
+    <RenderWrapper
+      wrapper={
+        isEmpty
+          ? childProps.page.mode.isEditing && EmptyPlaceholder
+          : childProps.render
+      }
+    >
+      <ErrorBoundary>
+        <RenderWrapper wrapper={isEmpty && childProps.renderEmpty}>
+          {
+            // Conditional rendering based on editing mode
+            childProps.page.mode.isEditing ? (
+              <PlaceholderMetadata
+                placeholderName={childProps.name}
+                rendering={childProps.rendering as ComponentRendering}
+              >
+                {components.map((component) => {
+                  const Component = component.component.component;
+
+                  return (
+                    <RenderWrapper wrapper={childProps.renderEach}>
+                      <PlaceholderMetadata
+                        rendering={component.rendering as ComponentRendering}
+                      >
+                        {!component.component.isEmpty && (
+                          <ErrorBoundary
+                            errorComponent={childProps.errorComponent}
+                            {...component.props}
+                          >
+                            <Component {...component.props} />
+                          </ErrorBoundary>
+                        )}
+                        {component.component.isEmpty && (
+                          <Component {...component.props} />
+                        )}
+                      </PlaceholderMetadata>
+                    </RenderWrapper>
+                  );
+                })}
+              </PlaceholderMetadata>
+            ) : (
+              <>
+                {components.map((component) => {
+                  const Component = component.component.component;
+                  return (
+                    <RenderWrapper
+                      wrapper={
+                        isEmpty ? childProps.renderEmpty : childProps.renderEach
+                      }
+                    >
+                      <ErrorBoundary
+                        errorComponent={childProps.errorComponent}
+                        {...component.props}
+                      >
+                        <Component {...component.props} />
+                      </ErrorBoundary>
+                    </RenderWrapper>
+                  );
+                })}
+              </>
+            )
+          }
+        </RenderWrapper>
+      </ErrorBoundary>
+    </RenderWrapper>
+  )
+}

package/src/components/Placeholder/PlaceholderMetadata.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * 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
+ * or as a rendering to properly render the surrounding code blocks.
+ */
+
+import {
+  ComponentRendering,
+  getDynamicPlaceholderPattern,
+  isDynamicPlaceholder,
+} from '@sitecore-content-sdk/core/layout';
+import {
+  MetadataKind,
+  DEFAULT_PLACEHOLDER_UID,
+} from '@sitecore-content-sdk/core/editing';
+
+/**
+ *  Props containing the component data to render.
+ */
+export interface PlaceholderMetadataProps {
+  rendering: ComponentRendering;
+  placeholderName?: string;
+}
+
+export type CodeBlockAttributes = {
+  type: string;
+  chrometype: string;
+  className: string;
+  kind: string;
+  id?: string;
+};
+
+const props = Astro.props as PlaceholderMetadataProps;
+
+const getCodeBlockAttributes = (
+  kind: MetadataKind,
+  id?: string,
+  placeholderName?: string
+): CodeBlockAttributes => {
+  const chrometype = placeholderName ? 'placeholder' : 'rendering';
+
+  const attributes: CodeBlockAttributes = {
+    type: 'text/sitecore',
+    chrometype: chrometype,
+    className: 'scpm',
+    kind: kind,
+  };
+
+  if (kind === MetadataKind.Open) {
+    if (chrometype === 'placeholder' && placeholderName) {
+      let phId = '';
+
+      for (const placeholder of Object.keys(
+        props.rendering.placeholders ?? {}
+      )) {
+        if (placeholderName === placeholder) {
+          phId = id
+            ? `${placeholderName}_${id}`
+            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
+          break;
+        }
+
+        // Check if the placeholder is a dynamic placeholder
+        if (isDynamicPlaceholder(placeholder)) {
+          const pattern = getDynamicPlaceholderPattern(placeholder);
+
+          // Check if the placeholder matches the dynamic placeholder pattern
+          if (pattern.test(placeholderName)) {
+            phId = id
+              ? `${placeholder}_${id}`
+              : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
+            break;
+          }
+        }
+      }
+
+      attributes.id = phId;
+    } else {
+      attributes.id = id;
+    }
+  }
+
+  return attributes;
+};
+---
+
+<>
+  <code
+    {...getCodeBlockAttributes(
+      MetadataKind.Open,
+      props.rendering.uid,
+      props.placeholderName
+    )}></code>
+  <slot />
+  <code
+    {...getCodeBlockAttributes(
+      MetadataKind.Close,
+      props.rendering.uid,
+      props.placeholderName
+    )}></code>
+</>

package/src/components/Placeholder/PlaceholderUtils.astro

@@ -0,0 +1,153 @@
+---
+import { ComponentRendering } from "@sitecore-content-sdk/core/layout";
+import { constants } from '@sitecore-content-sdk/core';
+import EmptyRendering from "../EmptyRendering.astro";
+import HiddenRendering from "../HiddenRendering.astro";
+import MissingComponent from "../MissingComponent.astro";
+import { getSXAParams } from "./placeholder-utils";
+import { ComponentForRendering, PlaceholderProps } from "./models";
+import { AstroContentSdkComponent, ComponentMap } from "../../sharedTypes/component-props";
+import { useComponentMap } from "../../context";
+
+export const getComponentsForRenderingData = (
+  placeholderData: ComponentRendering[],
+  props: PlaceholderProps
+) => {
+  const {
+    name,
+    fields: placeholderFields,
+    params: placeholderParams,
+    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 };
+
+      const componentRendering = rendering as ComponentRendering;
+      const componentMap = useComponentMap();
+
+      const component = getComponentForRendering(
+        componentRendering,
+        name,
+        componentMap,
+        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,
+      };
+
+      let components = {
+        component: component,
+        props: props.modifyComponentProps ? props.modifyComponentProps(finalProps) : finalProps,
+        rendering: rendering,
+        placeholderName: name
+      };
+
+      return components;
+    })
+    .filter((element) => element); // remove nulls
+
+  return transformedComponents;
+};
+
+export const getComponentForRendering = (
+  renderingDefinition: ComponentRendering,
+  placeholderName: string,
+  componentMap?: ComponentMap,
+  hiddenRenderingComponent?: AstroContentSdkComponent,
+  missingComponentComponent?: AstroContentSdkComponent
+): ComponentForRendering => {
+  const logUnknownComponentError = (variant?: string) => {
+    console.error(
+      `Placeholder ${placeholderName} contains unknown component ${
+        renderingDefinition.componentName
+      }${
+        variant ? ` (${variant})` : ''
+      }. Ensure that a React component exists for it, and that it is registered in your component-map file.`
+    );
+  };
+
+  let component;
+ 
+  if (renderingDefinition.componentName === constants.HIDDEN_RENDERING_NAME) {
+    return { 
+      component: hiddenRenderingComponent ?? HiddenRendering,
+      isEmpty: true
+    };
+  } else if (!renderingDefinition.componentName) {
+    return {
+      component: EmptyRendering,
+      isEmpty: true
+    };
+  }
+
+  if (!componentMap || componentMap.size === 0) {
+    console.warn(
+      `No components were available in component map to service request for component ${renderingDefinition}`
+    );
+  } else {
+    component = componentMap.get(renderingDefinition.componentName);
+  }
+
+  if (!component) {
+    // Fallback/defaults for Sitecore Component renderings (in case not defined in component map)
+    // if (renderingDefinition.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
+    //   return {
+    //     component: FEaaSComponent,
+    //     isEmpty: false,
+    //   };
+    // } else if (renderingDefinition.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
+    //   return {
+    //     component: FEaaSWrapper,
+    //     isEmpty: false,
+    //   };
+    // } else if (renderingDefinition.componentName === BYOC_COMPONENT_RENDERING_NAME) {
+    //   return {
+    //     component: BYOCComponent,
+    //     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
+    //   // that's why we need to mark BYOC wrapper dynamic
+    //   return {
+    //     component: BYOCWrapper,
+    //     isEmpty: false,
+    //   };
+    // }
+
+    logUnknownComponentError();
+    
+    return {
+      component: missingComponentComponent ?? MissingComponent,
+      isEmpty: true,
+    };
+  }
+
+  return {
+    component,
+    isEmpty: false
+  }
+};
+
+---

package/src/components/Placeholder/index.ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+export { Placeholder, PlaceholderComponent } from './Placeholder.astro';
+// @ts-ignore
+export { PlaceholderMetadata } from './PlaceholderMetadata.astro';
+export { PlaceholderProps } from './models';