@exdst-sitecore-content-sdk/astro 0.0.1 → 0.0.6

package/src/components/ErrorBoundary.astro

@@ -1,77 +1,77 @@
----
-import { Page } from '@sitecore-content-sdk/core/client';
-import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
-import { AstroContentSdkComponent } from '../sharedTypes/component-props';
-import { useSitecore } from '../context';
-
-export type ErrorBoundaryProps = {
-  page: Page;
-  isDynamic?: boolean;
-  errorComponent?: AstroContentSdkComponent;
-  rendering?: ComponentRendering;
-  componentLoadingMessage?: string;
-  disableSuspense?: boolean;
-};
-
-let props = Astro.props as ErrorBoundaryProps;
-const { page } = useSitecore();
-props = { ...props, page };
-
-const defaultErrorMessage = 'There was a problem loading this section.';
-
-const isInDevMode = (): boolean => {
-  return process.env.NODE_ENV === 'development';
-};
-
-const showErrorDetails = (): boolean => {
-  return (
-    isInDevMode() || props.page.mode.isEditing || props.page.mode.isPreview
-  );
-};
-
-let state: { error?: Error } = {};
-
-let html;
-
-try {
-  html = await Astro.slots.render('default');
-} catch (e) {
-  state = { error: e };
-  if (showErrorDetails()) {
-    console.error(
-      `An error occurred in component ${props.rendering?.componentName} (${props.rendering?.uid}): `
-    );
-  }
-  console.error(e);
-}
----
-
-<>
-  {!state.error && <Fragment set:html={html} />}
-  {
-    state.error && props.errorComponent && (
-      <props.errorComponent error={state.error} />
-    )
-  }
-  {
-    state.error && !props.errorComponent && showErrorDetails() && (
-      <div>
-        <div class="sc-content-sdk-placeholder-error">
-          A rendering error occurred in component{' '}
-          <em>{props.rendering?.componentName}</em>
-          <br />
-          Error: <em>{state.error.message || JSON.stringify(state.error)}</em>
-        </div>
-      </div>
-    )
-  }
-  {
-    state.error && !props.errorComponent && !showErrorDetails() && (
-      <div>
-        <div class="sc-content-sdk-placeholder-error">
-          {defaultErrorMessage}
-        </div>
-      </div>
-    )
-  }
-</>
+---
+import { Page } from '@sitecore-content-sdk/core/client';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import { AstroContentSdkComponent } from '../sharedTypes/component-props';
+import { useSitecore } from '../context';
+
+export type ErrorBoundaryProps = {
+  page: Page;
+  isDynamic?: boolean;
+  errorComponent?: AstroContentSdkComponent;
+  rendering?: ComponentRendering;
+  componentLoadingMessage?: string;
+  disableSuspense?: boolean;
+};
+
+let props = Astro.props as ErrorBoundaryProps;
+const { page } = useSitecore();
+props = { ...props, page };
+
+const defaultErrorMessage = 'There was a problem loading this section.';
+
+const isInDevMode = (): boolean => {
+  return process.env.NODE_ENV === 'development';
+};
+
+const showErrorDetails = (): boolean => {
+  return (
+    isInDevMode() || props.page.mode.isEditing || props.page.mode.isPreview
+  );
+};
+
+let state: { error?: Error } = {};
+
+let html;
+
+try {
+  html = await Astro.slots.render('default');
+} catch (e) {
+  state = { error: e };
+  if (showErrorDetails()) {
+    console.error(
+      `An error occurred in component ${props.rendering?.componentName} (${props.rendering?.uid}): `
+    );
+  }
+  console.error(e);
+}
+---
+
+<>
+  {!state.error && <Fragment set:html={html} />}
+  {
+    state.error && props.errorComponent && (
+      <props.errorComponent error={state.error} />
+    )
+  }
+  {
+    state.error && !props.errorComponent && showErrorDetails() && (
+      <div>
+        <div class="sc-content-sdk-placeholder-error">
+          A rendering error occurred in component{' '}
+          <em>{props.rendering?.componentName}</em>
+          <br />
+          Error: <em>{state.error.message || JSON.stringify(state.error)}</em>
+        </div>
+      </div>
+    )
+  }
+  {
+    state.error && !props.errorComponent && !showErrorDetails() && (
+      <div>
+        <div class="sc-content-sdk-placeholder-error">
+          {defaultErrorMessage}
+        </div>
+      </div>
+    )
+  }
+</>

package/src/components/FieldMetadata.astro

@@ -1,30 +1,30 @@
----
-/**
- * The component which renders field metadata markup
- */
-
-import { MetadataKind } from '@sitecore-content-sdk/core/editing';
-
-interface FieldMetadataProps {
-  metadata: { [key: string]: unknown };
-}
-
-const props = Astro.props as FieldMetadataProps;
-
-const data = JSON.stringify(props.metadata);
-
-const attributes = {
-  type: 'text/sitecore',
-  chrometype: 'field',
-  className: 'scpm',
-};
-
-const codeOpenAttributes = { ...attributes, kind: MetadataKind.Open };
-const codeCloseAttributes = { ...attributes, kind: MetadataKind.Close };
----
-
-<>
-  <code {...codeOpenAttributes}>{data}</code>
-  <slot />
-  <code {...codeCloseAttributes}>{}</code>
-</>
+---
+/**
+ * The component which renders field metadata markup
+ */
+
+import { MetadataKind } from '@sitecore-content-sdk/core/editing';
+
+interface FieldMetadataProps {
+  metadata: { [key: string]: unknown };
+}
+
+const props = Astro.props as FieldMetadataProps;
+
+const data = JSON.stringify(props.metadata);
+
+const attributes = {
+  type: 'text/sitecore',
+  chrometype: 'field',
+  className: 'scpm',
+};
+
+const codeOpenAttributes = { ...attributes, kind: MetadataKind.Open };
+const codeCloseAttributes = { ...attributes, kind: MetadataKind.Close };
+---
+
+<>
+  <code {...codeOpenAttributes}>{data}</code>
+  <slot />
+  <code {...codeCloseAttributes}>{}</code>
+</>

package/src/components/File.astro

@@ -1,46 +1,46 @@
----
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-
-export interface FileFieldValue {
-  [propName: string]: unknown;
-  src?: string;
-  title?: string;
-  displayName?: string;
-}
-
-export interface FileField {
-  value: FileFieldValue;
-}
-
-export interface FileProps {
-  [attributeName: string]: unknown;
-  /** The file field data. */
-  field: FileFieldValue | FileField;
-}
-
-const { field, ...otherProps } = Astro.props as FileProps;
-
-const dynamicField: FileField | FileFieldValue = field;
-
-const isEmptyField = isFieldValueEmpty(dynamicField);
-
-let file, linkText, anchorAttrs, finalChildren;
-
-if (!isEmptyField) {
-  // handle link directly on field for forgetful devs
-  file = (
-    (dynamicField as FileFieldValue).src ? field : dynamicField.value
-  ) as FileFieldValue;
-
-  if (file) {
-    const children = await Astro.slots.render('default');
-    linkText = !children ? file.title || file.displayName : null;
-    anchorAttrs = { href: file.src };
-    finalChildren = children ? children : linkText;
-  }
-}
-
-const attrs = { ...anchorAttrs, ...otherProps };
----
-
-{!isEmptyField && file && <a {...attrs} set:html={finalChildren}></a>}
+---
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+
+export interface FileFieldValue {
+  [propName: string]: unknown;
+  src?: string;
+  title?: string;
+  displayName?: string;
+}
+
+export interface FileField {
+  value: FileFieldValue;
+}
+
+export interface FileProps {
+  [attributeName: string]: unknown;
+  /** The file field data. */
+  field: FileFieldValue | FileField;
+}
+
+const { field, ...otherProps } = Astro.props as FileProps;
+
+const dynamicField: FileField | FileFieldValue = field;
+
+const isEmptyField = isFieldValueEmpty(dynamicField);
+
+let file, linkText, anchorAttrs, finalChildren;
+
+if (!isEmptyField) {
+  // handle link directly on field for forgetful devs
+  file = (
+    (dynamicField as FileFieldValue).src ? field : dynamicField.value
+  ) as FileFieldValue;
+
+  if (file) {
+    const children = await Astro.slots.render('default');
+    linkText = !children ? file.title || file.displayName : null;
+    anchorAttrs = { href: file.src };
+    finalChildren = children ? children : linkText;
+  }
+}
+
+const attrs = { ...anchorAttrs, ...otherProps };
+---
+
+{!isEmptyField && file && <a {...attrs} set:html={finalChildren}></a>}

package/src/components/HiddenRendering.astro

@@ -1,22 +1,22 @@
----
-const baseStyles = {
-  backgroundSize: '3px 3px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '30px',
-  color: '#aaa',
-};
-
-const backgroundImageStyle = {
-  backgroundImage:
-    'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
-};
-
-const styles =
-  process.env.NODE_ENV === 'test'
-    ? baseStyles
-    : { ...baseStyles, ...backgroundImageStyle };
----
-
-<div style={styles}>The component is hidden</div>
+---
+const baseStyles = {
+  backgroundSize: '3px 3px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '30px',
+  color: '#aaa',
+};
+
+const backgroundImageStyle = {
+  backgroundImage:
+    'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+};
+
+const styles =
+  process.env.NODE_ENV === 'test'
+    ? baseStyles
+    : { ...baseStyles, ...backgroundImageStyle };
+---
+
+<div style={styles}>The component is hidden</div>

package/src/components/Image.astro

@@ -1,155 +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>
-  )
-}
+---
+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>
+  )
+}