@datocms/astro 0.1.13 → 0.2.1

package/src/StructuredText/utils.ts

@@ -1,92 +1,90 @@
 import {
-	type Block,
-	type InlineItem,
-	type ItemLink,
-	type Node,
-	RenderError,
-	type StructuredText,
-	isBlock,
-	isBlockquote,
-	isCode,
-	isHeading,
-	isInlineItem,
-	isItemLink,
-	isLink,
-	isList,
-	isListItem,
-	isParagraph,
-	isRoot,
-	isSpan,
-	isThematicBreak,
-} from "datocms-structured-text-utils";
+  type Block,
+  type InlineItem,
+  type ItemLink,
+  type Node,
+  RenderError,
+  type StructuredText,
+  isBlock,
+  isBlockquote,
+  isCode,
+  isHeading,
+  isInlineItem,
+  isItemLink,
+  isLink,
+  isList,
+  isListItem,
+  isParagraph,
+  isRoot,
+  isSpan,
+  isThematicBreak,
+} from 'datocms-structured-text-utils';
 
-import Blockquote from "./nodes/Blockquote.astro";
-import Code from "./nodes/Code.astro";
-import Heading from "./nodes/Heading.astro";
-import Link from "./nodes/Link.astro";
-import List from "./nodes/List.astro";
-import ListItem from "./nodes/ListItem.astro";
-import Paragraph from "./nodes/Paragraph.astro";
-import Root from "./nodes/Root.astro";
-import Span from "./nodes/Span.astro";
-import ThematicBreak from "./nodes/ThematicBreak.astro";
+import Blockquote from './nodes/Blockquote.astro';
+import Code from './nodes/Code.astro';
+import Heading from './nodes/Heading.astro';
+import Link from './nodes/Link.astro';
+import List from './nodes/List.astro';
+import ListItem from './nodes/ListItem.astro';
+import Paragraph from './nodes/Paragraph.astro';
+import Root from './nodes/Root.astro';
+import Span from './nodes/Span.astro';
+import ThematicBreak from './nodes/ThematicBreak.astro';
 
-import type { PredicateComponentTuple } from "./types";
+import type { PredicateComponentTuple } from './types';
 
 export const defaultComponents: PredicateComponentTuple[] = [
-	[isParagraph, Paragraph],
-	[isRoot, Root],
-	[isSpan, Span],
-	[isLink, Link],
-	[isList, List],
-	[isHeading, Heading],
-	[isBlockquote, Blockquote],
-	[isListItem, ListItem],
-	[isThematicBreak, ThematicBreak],
-	[isCode, Code],
+  [isParagraph, Paragraph],
+  [isRoot, Root],
+  [isSpan, Span],
+  [isLink, Link],
+  [isList, List],
+  [isHeading, Heading],
+  [isBlockquote, Blockquote],
+  [isListItem, ListItem],
+  [isThematicBreak, ThematicBreak],
+  [isCode, Code],
 ];
 
 export const throwRenderErrorForMissingComponent = (node: Node) => {
-	if (isInlineItem(node)) {
-		throw new RenderError(
-			`The Structured Text document contains an 'inlineItem' node, but no component for rendering is specified!`,
-			node,
-		);
-	}
+  if (isInlineItem(node)) {
+    throw new RenderError(
+      `The Structured Text document contains an 'inlineItem' node, but no component for rendering is specified!`,
+      node,
+    );
+  }
 
-	if (isItemLink(node)) {
-		throw new RenderError(
-			`The Structured Text document contains an 'itemLink' node, but no component for rendering is specified!`,
-			node,
-		);
-	}
+  if (isItemLink(node)) {
+    throw new RenderError(
+      `The Structured Text document contains an 'itemLink' node, but no component for rendering is specified!`,
+      node,
+    );
+  }
 
-	if (isBlock(node)) {
-		throw new RenderError(
-			`The Structured Text document contains a 'block' node, but no component for rendering is specified!`,
-			node,
-		);
-	}
+  if (isBlock(node)) {
+    throw new RenderError(
+      `The Structured Text document contains a 'block' node, but no component for rendering is specified!`,
+      node,
+    );
+  }
 };
 
 export const throwRenderErrorForMissingBlock = (node: Block) => {
-	throw new RenderError(
-		`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside data.blocks!`,
-		node,
-	);
+  throw new RenderError(
+    `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside data.blocks!`,
+    node,
+  );
 };
 
 export const throwRenderErrorForMissingLink = (node: ItemLink | InlineItem) => {
-	throw new RenderError(
-		`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside data.links!`,
-		node,
-	);
+  throw new RenderError(
+    `The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside data.links!`,
+    node,
+  );
 };
 
-export const findBlock = (node: Block, blocks: StructuredText["blocks"]) =>
-	(blocks || []).find(({ id }) => id === node.item);
+export const findBlock = (node: Block, blocks: StructuredText['blocks']) =>
+  (blocks || []).find(({ id }) => id === node.item);
 
-export const findLink = (
-	node: ItemLink | InlineItem,
-	links: StructuredText["links"],
-) => (links || []).find(({ id }) => id === node.item);
+export const findLink = (node: ItemLink | InlineItem, links: StructuredText['links']) =>
+  (links || []).find(({ id }) => id === node.item);

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './Image';
+export * from './QueryListener';
+export * from './Seo';
+export * from './StructuredText';

package/src/VideoPlayer/VideoPlayer.astro

@@ -1,30 +0,0 @@
----
-import type { VideoPlayerProps } from "./types";
-import { useVideoPlayer } from "../useVideoPlayer";
-import { toNativeProps } from "./utils";
-
-interface Props extends VideoPlayerProps {}
-
-const {
-  data,
-  disableCookies = true,
-  preload = "metadata",
-  ...otherProps
-} = Astro.props;
-
-const computedProps = {
-  ...useVideoPlayer({ data }),
-  disableCookies,
-  preload,
-};
----
-
-<mux-player
-  stream-type="on-demand"
-  {...toNativeProps(computedProps)}
-  {...toNativeProps(otherProps)}
-></mux-player>
-
-<script>
-  import "@mux/mux-player";
-</script>

package/src/VideoPlayer/index.ts

@@ -1,2 +0,0 @@
-import VideoPlayer from "./VideoPlayer.astro";
-export { VideoPlayer };

package/src/VideoPlayer/types.ts

@@ -1,72 +0,0 @@
-import type { MuxMediaProps } from "@mux/playback-core";
-import type { JSX } from 'astro/jsx-runtime';
-
-type StyleAttribute = JSX.HTMLAttributes["style"];
-
-type Maybe<T> = T | null;
-
-export type Video = {
-  /** Title attribute (`title`) for the video */
-  title?: Maybe<string>;
-  /** The height of the video */
-  height?: Maybe<number>;
-  /** The width of the video */
-  width?: Maybe<number>;
-  /** The MUX playback ID */
-  muxPlaybackId?: Maybe<string>;
-  /** The MUX playback ID */
-  playbackId?: Maybe<string>;
-  /** A data: URI containing a blurhash for the video  */
-  blurUpThumb?: Maybe<string>;
-  /** Other data can be passed, but they have no effect on rendering the player */
-  // biome-ignore lint/suspicious/noExplicitAny: we intentionally want to allow to add any other value to this video object
-  [k: string]: any;
-};
-
-// Extracted from mux-player-react
-
-type VideoApiAttributes = {
-  currentTime: number;
-  volume: number;
-  paused: boolean;
-  src: string | null;
-  poster: string;
-  playbackRate: number;
-  playsInline: boolean;
-  preload: string;
-  crossOrigin: string;
-  autoPlay: boolean | string;
-  loop: boolean;
-  muted: boolean;
-  class?: string;
-  style?: StyleAttribute;
-};
-
-// Extracted from mux-player-react
-
-export type MuxPlayerProps = Partial<MuxMediaProps> & Partial<VideoApiAttributes> & {
-  hotkeys?: string;
-  nohotkeys?: boolean;
-  defaultHiddenCaptions?: boolean;
-  forwardSeekOffset?: number;
-  backwardSeekOffset?: number;
-  metadataVideoId?: string;
-  metadataVideoTitle?: string;
-  metadataViewerUserId?: string;
-  primaryColor?: string;
-  secondaryColor?: string;
-  accentColor?: string;
-  placeholder?: string;
-  playbackRates?: number[];
-  defaultShowRemainingTime?: boolean;
-  defaultDuration?: number;
-  noVolumePref?: boolean;
-  thumbnailTime?: number;
-  title?: string;
-  theme?: string;
-  themeProps?: { [k: string]: any };
-};
-
-export type VideoPlayerProps = MuxPlayerProps & {
-  data: Video;
-};

package/src/VideoPlayer/utils.ts

@@ -1,50 +0,0 @@
-// Adapted from mux-player-react
-
-const ReactPropToAttrNameMap = {
-  crossOrigin: 'crossorigin',
-  viewBox: 'viewBox',
-  playsInline: 'playsinline',
-  autoPlay: 'autoplay',
-  playbackRate: 'playbackrate',
-};
-
-type KeyTypes = string | number | symbol;
-type Maybe<T> = T | null | undefined;
-
-const isNil = (x: unknown): x is null | undefined => x === undefined;
-
-// Type Guard to determine if a given key is actually a key of some object of type T
-export const isKeyOf = <T extends {} = any>(k: KeyTypes, o: Maybe<T>): k is keyof T => {
-  if (isNil(o)) return false;
-  return k in o;
-};
-
-const toKebabCase = (string: string) => string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-
-const toNativeAttrName = (propName: string, propValue: any): string | undefined => {
-  if (typeof propValue === 'boolean' && !propValue) return undefined;
-  if (isKeyOf(propName, ReactPropToAttrNameMap)) return ReactPropToAttrNameMap[propName];
-  if (propValue === undefined) return undefined;
-  if (/[A-Z]/.test(propName)) return toKebabCase(propName);
-  return propName;
-};
-
-const toNativeAttrValue = (propValue: any, propName: string) => {
-  if (typeof propValue === 'boolean') return '';
-  return propValue;
-};
-
-export const toNativeProps = (props = {}) => {
-  return Object.entries(props).reduce<{ [k: string]: string }>((transformedProps, [propName, propValue]) => {
-    const attrName = toNativeAttrName(propName, propValue);
-
-    // prop was stripped. Don't add.
-    if (!attrName) {
-      return transformedProps;
-    }
-
-    const attrValue = toNativeAttrValue(propValue, propName);
-    transformedProps[attrName] = attrValue;
-    return transformedProps;
-  }, {});
-};

package/src/useVideoPlayer/index.ts

@@ -1,55 +0,0 @@
-import type { MuxPlayerProps, Video } from "../VideoPlayer/types";
-
-type Maybe<T> = T | null;
-type Possibly<T> = Maybe<T> | undefined;
-
-function computedTitle(title: Possibly<string>): MuxPlayerProps {
-  return title ? { title } : {};
-};
-
-function computedPlaybackId(
-  muxPlaybackId: Possibly<string>,
-  playbackId: Possibly<string>,
-): MuxPlayerProps {
-  if (!(muxPlaybackId || playbackId)) {
-    return {};
-  }
-
-  return { playbackId: `${muxPlaybackId || playbackId}` };
-};
-
-function computedStyle(width: Possibly<number>, height: Possibly<number>): MuxPlayerProps {
-  if (!(width && height)) {
-    return {};
-  }
-
-  return {
-    style: {
-      aspectRatio: `${width} / ${height}`,
-    },
-  };
-};
-
-function computedPlaceholder(blurUpThumb: Possibly<string>): MuxPlayerProps {
-  return blurUpThumb ? { placeholder: blurUpThumb } : {};
-};
-
-type UseVideoPlayerArgs = {
-  data?: Video;
-};
-
-export function useVideoPlayer({
-  data,
-}: UseVideoPlayerArgs): MuxPlayerProps {
-  const { title, width, height, playbackId, muxPlaybackId, blurUpThumb } =
-    data || {};
-
-  if (data === undefined) return {};
-
-  return {
-    ...(computedTitle(title) || {}),
-    ...(computedPlaybackId(muxPlaybackId, playbackId) || {}),
-    ...(computedStyle(width, height) || {}),
-    ...(computedPlaceholder(blurUpThumb) || {}),
-  };
-};