@datocms/astro 0.1.12 → 0.2.0

package/package.json

@@ -1,52 +1,62 @@
 {
-	"name": "@datocms/astro",
-	"description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
-	"type": "module",
-	"version": "0.1.12",
-	"sideEffects": false,
-	"repository": {
-		"type": "git",
-		"url": "git://github.com/datocms/astro-datocms.git"
-	},
-	"homepage": "https://github.com/datocms/astro-datocms",
-	"license": "MIT",
-	"author": "Stefano Verna <s.verna@datocms.com>",
-	"contributors": ["Silvano Stralla <silvano@datocms.com>"],
-	"keywords": [
-		"astro",
-		"withastro",
-		"astro-component",
-		"datocms",
-		"typescript",
-		"ui"
-	],
-	"exports": {
-		"./useVideoPlayer": "./src/useVideoPlayer/index.ts",
-		"./VideoPlayer": "./src/VideoPlayer/index.ts",
-		"./Image": "./src/Image/index.ts",
-		"./StructuredText": "./src/StructuredText/index.ts",
-		"./Seo": "./src/Seo/index.ts"
-	},
-	"engines": {
-		"node": ">=18.0.0"
-	},
-	"files": ["src"],
-	"dependencies": {
-		"@mux/playback-core": "^0.25.1",
-		"datocms-structured-text-utils": "^4.0.1",
-		"typescript": "^5.5.4"
-	},
-	"peerDependencies": {
-		"@mux/mux-player": "*",
-		"astro": "*"
-	},
-	"peerDependenciesMeta": {
-		"@mux/mux-player": {
-			"optional": true
-		}
-	},
-	"devDependencies": {
-		"@mux/mux-player": "*",
-		"astro": "^4.13.1"
-	}
+  "name": "@datocms/astro",
+  "description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
+  "type": "module",
+  "version": "0.2.0",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/datocms/astro-datocms.git"
+  },
+  "homepage": "https://github.com/datocms/astro-datocms",
+  "license": "MIT",
+  "author": "Stefano Verna <s.verna@datocms.com>",
+  "contributors": [
+    "Silvano Stralla <silvano@datocms.com>"
+  ],
+  "keywords": [
+    "astro",
+    "withastro",
+    "astro-component",
+    "datocms",
+    "typescript",
+    "ui"
+  ],
+  "scripts": {
+    "prepare": "npx simple-git-hooks",
+    "lint": "prettier --check .",
+    "format": "npx prettier . --write",
+    "test": "echo 1"
+  },
+  "exports": {
+    "./Image": "./src/Image/index.ts",
+    "./StructuredText": "./src/StructuredText/index.ts",
+    "./Seo": "./src/Seo/index.ts",
+    "./QueryListener": "./src/QueryListener/index.ts"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@0no-co/graphql.web": "^1.0.7",
+    "datocms-listen": "^1.0.0",
+    "datocms-structured-text-utils": "^4.0.1"
+  },
+  "peerDependencies": {
+    "astro": "*"
+  },
+  "devDependencies": {
+    "astro": "^4.13.1",
+    "np": "^10.0.7",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "simple-git-hooks": "^2.11.1",
+    "typescript": "^5.5.4"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npm run format"
+  }
 }

package/src/Image/Image.astro

@@ -1,9 +1,8 @@
 ---
-
 import { buildSrcSet } from './buildSrcSet';
 import type { ImageProps } from './types';
 
-interface Props extends ImageProps {};
+interface Props extends ImageProps {}
 
 const {
   data,
@@ -21,52 +20,45 @@ const placeholderStyle =
   usePlaceholder && data.base64
     ? {
         backgroundImage: `url("${data.base64}")`,
-        backgroundSize: "cover",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "50% 50%",
-        color: "transparent",
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '50% 50%',
+        color: 'transparent',
       }
     : usePlaceholder && data.bgColor
-      ? { backgroundColor: data.bgColor ?? undefined, color: "transparent" }
+      ? { backgroundColor: data.bgColor ?? undefined, color: 'transparent' }
       : undefined;
 
 const { width } = data;
 
-const height =
-  data.height ?? Math.round(data.aspectRatio ? width / data.aspectRatio : 0);
+const height = data.height ?? Math.round(data.aspectRatio ? width / data.aspectRatio : 0);
 
 const sizingStyle = {
   aspectRatio: `${width} / ${height}`,
-  width: "100%",
+  width: '100%',
   maxWidth: `${width}px`,
-  height: "auto",
+  height: 'auto',
 };
 ---
 
 <picture class={pictureClass} style={pictureStyle}>
   {
     data.webpSrcSet && (
-      <source
-        srcset={data.webpSrcSet}
-        sizes={sizes ?? data.sizes ?? null}
-        type="image/webp"
-      />
+      <source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
     )
   }
   <source
-    srcset={data.srcSet ??
-      buildSrcSet(data.src, data.width, srcSetCandidates) ??
-      null}
+    srcset={data.srcSet ?? buildSrcSet(data.src, data.width, srcSetCandidates) ?? null}
     sizes={sizes ?? data.sizes ?? null}
   />
   {
     data.src && (
       <img
         src={data.src}
-        alt={data.alt ?? ""}
+        alt={data.alt ?? ''}
         title={data.title ?? null}
-        fetchpriority={priority ? "high" : undefined}
-        loading={priority ? undefined : "lazy"}
+        fetchpriority={priority ? 'high' : undefined}
+        loading={priority ? undefined : 'lazy'}
         class={imgClass}
         style={{
           ...placeholderStyle,

package/src/Image/buildSrcSet.ts

@@ -1,10 +1,9 @@
-
-const bogusBaseUrl = "https://example.com/";
+const bogusBaseUrl = 'https://example.com/';
 
 export const buildSrcSet = (
   src: string | null | undefined,
   width: number | undefined,
-  candidateMultipliers: number[]
+  candidateMultipliers: number[],
 ) => {
   if (!(src && width)) {
     return undefined;
@@ -15,20 +14,14 @@ export const buildSrcSet = (
       const url = new URL(src, bogusBaseUrl);
 
       if (multiplier !== 1) {
-        url.searchParams.set("dpr", `${multiplier}`);
-        const maxH = url.searchParams.get("max-h");
-        const maxW = url.searchParams.get("max-w");
+        url.searchParams.set('dpr', `${multiplier}`);
+        const maxH = url.searchParams.get('max-h');
+        const maxW = url.searchParams.get('max-w');
         if (maxH) {
-          url.searchParams.set(
-            "max-h",
-            `${Math.floor(Number.parseInt(maxH) * multiplier)}`
-          );
+          url.searchParams.set('max-h', `${Math.floor(Number.parseInt(maxH) * multiplier)}`);
         }
         if (maxW) {
-          url.searchParams.set(
-            "max-w",
-            `${Math.floor(Number.parseInt(maxW) * multiplier)}`
-          );
+          url.searchParams.set('max-w', `${Math.floor(Number.parseInt(maxW) * multiplier)}`);
         }
       }
 
@@ -38,8 +31,8 @@ export const buildSrcSet = (
         return null;
       }
 
-      return `${url.toString().replace(bogusBaseUrl, "/")} ${finalWidth}w`;
+      return `${url.toString().replace(bogusBaseUrl, '/')} ${finalWidth}w`;
     })
     .filter(Boolean)
-    .join(",");
+    .join(',');
 };

package/src/Image/index.ts

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

package/src/Image/types.ts

@@ -56,11 +56,11 @@ export type ImageProps = {
    * -> https://web.dev/learn/design/responsive-images/#sizes
    * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
    **/
-  sizes?: HTMLImageElement["sizes"];
+  sizes?: HTMLImageElement['sizes'];
   /**
    * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
    *
    * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
    **/
   srcSetCandidates?: number[];
-}
+};

package/src/QueryListener/QueryListener.astro

@@ -0,0 +1,56 @@
+---
+import type { QueryListenerOptions } from './types';
+import { print } from '@0no-co/graphql.web';
+
+type Props<QueryResult, QueryVariables> = QueryListenerOptions<QueryResult, QueryVariables>;
+
+const { query, ...rest } = Astro.props;
+
+const stringifiedQuery = typeof query === 'object' ? print(query) : query;
+---
+
+<datocms-query-listener data-config={JSON.stringify({ ...rest, query: stringifiedQuery })}>
+</datocms-query-listener>
+
+<script>
+  import { subscribeToQuery as subscribeToQueryFn } from 'datocms-listen';
+  import type { QueryListenerOptions } from './types';
+
+  class QueryListener extends HTMLElement {
+    config: QueryListenerOptions<unknown, unknown>;
+    updatesReceived: number = 0;
+
+    constructor() {
+      super();
+
+      if (!this.dataset.config) {
+        throw new Error('Missing config');
+      }
+
+      this.config = JSON.parse(this.dataset.config);
+
+      import('datocms-listen').then(({ subscribeToQuery }) => {
+        this.run(subscribeToQuery);
+      });
+    }
+
+    run(subscribeToQuery: typeof subscribeToQueryFn) {
+      subscribeToQuery<unknown, unknown>({
+        ...this.config,
+        onUpdate: () => {
+          this.updatesReceived += 1;
+
+          if (this.updatesReceived > 1) {
+            document.location.reload();
+          }
+        },
+        onChannelError: (error) => {
+          console.error('[QueryListener]', error);
+        },
+      });
+    }
+  }
+
+  // Tell the browser to use our AstroHeart class for <astro-heart> elements.
+  customElements.define('datocms-query-listener', QueryListener);
+</script>

package/src/QueryListener/index.ts

@@ -0,0 +1,3 @@
+import QueryListener from './QueryListener.astro';
+
+export { QueryListener };

package/src/QueryListener/types.ts

@@ -0,0 +1,12 @@
+import type { Options } from 'datocms-listen';
+
+export type QueryListenerOptions<QueryResult, QueryVariables> = Omit<
+  Options<QueryResult, QueryVariables>,
+  | 'onStatusChange'
+  | 'onUpdate'
+  | 'onChannelError'
+  | 'onError'
+  | 'onEvent'
+  | 'fetcher'
+  | 'eventSourceClass'
+>;

package/src/Seo/Seo.astro

@@ -1,6 +1,6 @@
 ---
-import { renderMetaTagsToString } from "./renderMetaTagsToString";
-import type { SeoOrFaviconTag, TitleMetaLinkTag } from "./types";
+import { renderMetaTagsToString } from './renderMetaTagsToString';
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types';
 
 interface Props {
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[];

package/src/Seo/index.ts

@@ -1,5 +1,5 @@
-import Seo from "./Seo.astro";
-export * from "./renderMetaTagsToString.js";
-export * from "./types.js";
+import Seo from './Seo.astro';
+export * from './renderMetaTagsToString.js';
+export * from './types.js';
 
 export { Seo };

package/src/Seo/renderMetaTagsToString.tsx

@@ -1,8 +1,6 @@
 import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
-export function renderMetaTagsToString(
-  data: TitleMetaLinkTag[] | SeoOrFaviconTag[],
-): string {
+export function renderMetaTagsToString(data: TitleMetaLinkTag[] | SeoOrFaviconTag[]): string {
   return data
     .map((tag) => {
       if (tag.tag === 'title') {

package/src/Seo/types.ts

@@ -55,8 +55,7 @@ export type SeoOrFaviconTag = SeoTag | FaviconTag;
 export const isSeoTitleTag = (tag: any): tag is SeoTitleTag =>
   'tag' in tag && tag.tag === 'title' && !tag.attributes;
 
-export const isSeoTag = (tag: any): tag is SeoTag =>
-  isSeoTitleTag(tag) || isSeoMetaTag(tag);
+export const isSeoTag = (tag: any): tag is SeoTag => isSeoTitleTag(tag) || isSeoMetaTag(tag);
 
 export const isFaviconAttributes = (tag: any): tag is FaviconAttributes =>
   'sizes' in tag &&
@@ -68,9 +67,7 @@ export const isFaviconAttributes = (tag: any): tag is FaviconAttributes =>
   'href' in tag &&
   typeof tag.href === 'string';
 
-export const isAppleTouchIconAttributes = (
-  tag: any,
-): tag is AppleTouchIconAttributes =>
+export const isAppleTouchIconAttributes = (tag: any): tag is AppleTouchIconAttributes =>
   'sizes' in tag &&
   typeof tag.sizes === 'string' &&
   'rel' in tag &&
@@ -82,32 +79,24 @@ export const isSeoLinkTag = (tag: any): tag is SeoLinkTag =>
   'tag' in tag &&
   tag.tag === 'link' &&
   !tag.content &&
-  (isFaviconAttributes(tag.attributes) ||
-    isAppleTouchIconAttributes(tag.attributes));
+  (isFaviconAttributes(tag.attributes) || isAppleTouchIconAttributes(tag.attributes));
 
-export const isFaviconTag = (tag: any): tag is FaviconTag =>
-  isSeoMetaTag(tag) || isSeoLinkTag(tag);
+export const isFaviconTag = (tag: any): tag is FaviconTag => isSeoMetaTag(tag) || isSeoLinkTag(tag);
 
 export const isSeoOrFaviconTag = (
   seoOrFaviconTag: TitleMetaLinkTag | SeoOrFaviconTag,
-): seoOrFaviconTag is SeoOrFaviconTag =>
-  isSeoTag(seoOrFaviconTag) || isFaviconTag(seoOrFaviconTag);
+): seoOrFaviconTag is SeoOrFaviconTag => isSeoTag(seoOrFaviconTag) || isFaviconTag(seoOrFaviconTag);
 
 export const isRegularMetaAttributes = (
   attributes: RegularMetaAttributes | OgMetaAttributes,
-): attributes is RegularMetaAttributes =>
-  'name' in attributes && 'content' in attributes;
+): attributes is RegularMetaAttributes => 'name' in attributes && 'content' in attributes;
 
 export const isOgMetaAttributes = (
   attributes: RegularMetaAttributes | OgMetaAttributes,
-): attributes is OgMetaAttributes =>
-  'property' in attributes && 'content' in attributes;
+): attributes is OgMetaAttributes => 'property' in attributes && 'content' in attributes;
 
-export const isSeoMetaTag = (
-  seoMetaTag: SeoOrFaviconTag,
-): seoMetaTag is SeoMetaTag =>
+export const isSeoMetaTag = (seoMetaTag: SeoOrFaviconTag): seoMetaTag is SeoMetaTag =>
   'tag' in seoMetaTag &&
   seoMetaTag.tag === 'meta' &&
   !seoMetaTag.content &&
-  (isRegularMetaAttributes(seoMetaTag.attributes) ||
-    isOgMetaAttributes(seoMetaTag.attributes));
+  (isRegularMetaAttributes(seoMetaTag.attributes) || isOgMetaAttributes(seoMetaTag.attributes));

package/src/StructuredText/Node.astro

@@ -9,48 +9,41 @@ import {
   isBlock,
   isInlineItem,
   isItemLink,
-} from "datocms-structured-text-utils";
+} from 'datocms-structured-text-utils';
 
 import {
   defaultComponents,
   throwRenderErrorForMissingBlock,
   throwRenderErrorForMissingComponent,
   throwRenderErrorForMissingLink,
-} from "./utils";
+} from './utils';
 
-import type { PredicateComponentTuple } from "./types";
+import type { PredicateComponentTuple } from './types';
 
 interface Props {
   node: Node;
-  blocks: StructuredText["blocks"];
-  links: StructuredText["links"];
+  blocks: StructuredText['blocks'];
+  links: StructuredText['links'];
   components: PredicateComponentTuple[];
 }
 
 const { node, blocks, links, components = [] } = Astro.props;
 
-const findBlock = (node: Block, blocks: StructuredText["blocks"]) =>
+const findBlock = (node: Block, blocks: StructuredText['blocks']) =>
   (blocks || []).find(({ id }) => id === node.item);
 
-const findLink = (
-  node: ItemLink | InlineItem,
-  links: StructuredText["links"]
-) => (links || []).find(({ id }) => id === node.item);
+const findLink = (node: ItemLink | InlineItem, links: StructuredText['links']) =>
+  (links || []).find(({ id }) => id === node.item);
 
-const block =
-  isBlock(node) &&
-  (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
+const block = isBlock(node) && (findBlock(node, blocks) || throwRenderErrorForMissingBlock(node));
 
 const link =
-  (isItemLink(node) &&
-    (findLink(node, links) || throwRenderErrorForMissingLink(node))) ||
-  (isInlineItem(node) &&
-    (findLink(node, links) || throwRenderErrorForMissingLink(node)));
+  (isItemLink(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node))) ||
+  (isInlineItem(node) && (findLink(node, links) || throwRenderErrorForMissingLink(node)));
 
 const predicateComponentTuple =
-  [...components, ...defaultComponents].find(([predicate, component]) =>
-    predicate(node)
-  ) || throwRenderErrorForMissingComponent(node);
+  [...components, ...defaultComponents].find(([predicate, component]) => predicate(node)) ||
+  throwRenderErrorForMissingComponent(node);
 
 const Component = (predicateComponentTuple ?? [])[1];
 ---
@@ -65,16 +58,12 @@ const Component = (predicateComponentTuple ?? [])[1];
       ) : isItemLink(node) ? (
         <Component {node} {link}>
           {hasChildren(node) &&
-            node.children.map((child) => (
-              <Astro.self node={child} {blocks} {links} {components} />
-            ))}
+            node.children.map((child) => <Astro.self node={child} {blocks} {links} {components} />)}
         </Component>
       ) : (
         <Component {node}>
           {hasChildren(node) &&
-            node.children.map((child) => (
-              <Astro.self node={child} {blocks} {links} {components} />
-            ))}
+            node.children.map((child) => <Astro.self node={child} {blocks} {links} {components} />)}
         </Component>
       ))
   }

package/src/StructuredText/README.md

@@ -7,7 +7,7 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-  - [Setup](#setup)
+- [Setup](#setup)
 - [Basic usage](#basic-usage)
 - [Customization](#customization)
   - [Custom components for blocks](#custom-components-for-blocks)

package/src/StructuredText/StructuredText.astro

@@ -3,10 +3,10 @@ import {
   type StructuredText,
   type Document,
   isStructuredText,
-} from "datocms-structured-text-utils";
+} from 'datocms-structured-text-utils';
 
-import Node from "./Node.astro";
-import type { PredicateComponentTuple } from "./types";
+import Node from './Node.astro';
+import type { PredicateComponentTuple } from './types';
 
 interface Props {
   data: StructuredText | Document | null;
@@ -15,9 +15,7 @@ interface Props {
 
 const { data, components = [] } = Astro.props;
 
-const node =
-  data != null &&
-  (isStructuredText(data) ? (data.value as Document) : data).document;
+const node = data != null && (isStructuredText(data) ? (data.value as Document) : data).document;
 
 const blocks = isStructuredText(data) ? data?.blocks : undefined;
 

package/src/StructuredText/index.ts

@@ -1,5 +1,5 @@
-import StructuredText from "./StructuredText.astro";
+import StructuredText from './StructuredText.astro';
 
-export { defaultComponents } from "./utils";
+export { defaultComponents } from './utils';
 
 export { StructuredText };

package/src/StructuredText/nodes/Blockquote.astro

@@ -1,5 +1,5 @@
 ---
-import type { Blockquote } from "datocms-structured-text-utils";
+import type { Blockquote } from 'datocms-structured-text-utils';
 
 interface Props {
   node: Blockquote;

package/src/StructuredText/nodes/Code.astro

@@ -1,13 +1,13 @@
 ---
-import type { Code } from "datocms-structured-text-utils";
+import { Code as AstroCode } from 'astro:components';
+import type { Code as CodeNode } from 'datocms-structured-text-utils';
 
 interface Props {
-  node: Code;
+  // https://www.datocms.com/docs/structured-text/dast#code
+  node: CodeNode;
 }
 
 const { node } = Astro.props;
-
-const { code, language } = node;
 ---
 
-<pre class={language}>{code}</pre>
+<AstroCode code={node.code} lang={node.language as 'js'} />

package/src/StructuredText/nodes/Heading.astro

@@ -1,5 +1,5 @@
 ---
-import type { Heading } from "datocms-structured-text-utils";
+import type { Heading } from 'datocms-structured-text-utils';
 
 interface Props {
   node: Heading;

package/src/StructuredText/nodes/Link.astro

@@ -1,5 +1,5 @@
 ---
-import type { Link } from "datocms-structured-text-utils";
+import type { Link } from 'datocms-structured-text-utils';
 
 interface Props {
   node: Link;
@@ -11,7 +11,7 @@ const { url, meta } = node;
 
 let target: string | undefined = undefined;
 
-const targetMetaEntry = meta?.find((metaEntry) => metaEntry.id === "target");
+const targetMetaEntry = meta?.find((metaEntry) => metaEntry.id === 'target');
 
 if (targetMetaEntry?.value) {
   target = targetMetaEntry.value;
@@ -19,7 +19,7 @@ if (targetMetaEntry?.value) {
 
 let rel: string | undefined = undefined;
 
-const relMetaEntry = meta?.find((metaEntry) => metaEntry.id === "rel");
+const relMetaEntry = meta?.find((metaEntry) => metaEntry.id === 'rel');
 
 if (relMetaEntry?.value) {
   rel = relMetaEntry.value;

package/src/StructuredText/nodes/List.astro

@@ -1,5 +1,5 @@
 ---
-import type { List } from "datocms-structured-text-utils";
+import type { List } from 'datocms-structured-text-utils';
 
 interface Props {
   node: List;
@@ -9,7 +9,7 @@ const { node } = Astro.props;
 ---
 
 {
-  node.style === "numbered" ? (
+  node.style === 'numbered' ? (
     <ol>
       <slot />
     </ol>

package/src/StructuredText/nodes/ListItem.astro

@@ -1,5 +1,5 @@
 ---
-import type { ListItem } from "datocms-structured-text-utils";
+import type { ListItem } from 'datocms-structured-text-utils';
 
 interface Props {
   node: ListItem;

package/src/StructuredText/nodes/Paragraph.astro

@@ -1,5 +1,5 @@
 ---
-import type { Paragraph } from "datocms-structured-text-utils";
+import type { Paragraph } from 'datocms-structured-text-utils';
 
 interface Props {
   node: Paragraph;

package/src/StructuredText/nodes/Root.astro

@@ -1,5 +1,5 @@
 ---
-import type { Root } from "datocms-structured-text-utils";
+import type { Root } from 'datocms-structured-text-utils';
 
 interface Props {
   node: Root;

package/src/StructuredText/nodes/Span.astro

@@ -1,6 +1,6 @@
 ---
-import type { Span } from "datocms-structured-text-utils";
-import Lines from "../Lines.astro";
+import type { Span } from 'datocms-structured-text-utils';
+import Lines from '../Lines.astro';
 
 interface Props {
   node: Span;
@@ -16,37 +16,37 @@ const [mark, ...otherMarks] = marks ?? [];
 {
   !mark ? (
     <Lines lines={node.value.split(/\n/)} />
-  ) : mark === "emphasis" ? (
+  ) : mark === 'emphasis' ? (
     <em>
       <Astro.self node={{ type, value, marks: otherMarks }}>
         <slot />
       </Astro.self>
     </em>
-  ) : mark === "highlight" ? (
+  ) : mark === 'highlight' ? (
     <mark>
       <Astro.self node={{ type, value, marks: otherMarks }}>
         <slot />
       </Astro.self>
     </mark>
-  ) : mark === "strikethrough" ? (
+  ) : mark === 'strikethrough' ? (
     <del>
       <Astro.self node={{ type, value, marks: otherMarks }}>
         <slot />
       </Astro.self>
     </del>
-  ) : mark === "strong" ? (
+  ) : mark === 'strong' ? (
     <strong>
       <Astro.self node={{ type, value, marks: otherMarks }}>
         <slot />
       </Astro.self>
     </strong>
-  ) : mark === "underline" ? (
+  ) : mark === 'underline' ? (
     <u>
       <Astro.self node={{ type, value, marks: otherMarks }}>
         <slot />
       </Astro.self>
     </u>
-  ) : mark === "code" ? (
+  ) : mark === 'code' ? (
     <code>
       <Astro.self node={{ type, value, marks: otherMarks }}>
         <slot />

package/src/StructuredText/nodes/ThematicBreak.astro

@@ -1,5 +1,5 @@
 ---
-import type { ThematicBreak } from "datocms-structured-text-utils";
+import type { ThematicBreak } from 'datocms-structured-text-utils';
 
 interface Props {
   node: ThematicBreak;

package/src/StructuredText/types.ts

@@ -1,4 +1,4 @@
-import type { Node } from "datocms-structured-text-utils";
+import type { Node } from 'datocms-structured-text-utils';
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 type AstroComponent = (props: any) => any;

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/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) || {}),
-  };
-};