Format

datocms · Apr 10, 2024 · bbdeae2 · bbdeae2
1 parent ac1eefa
commit bbdeae2
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -120,7 +120,7 @@
   },
   "scripts": {
     "build": "rimraf dist && npm run tsc:types && npm run tsc:cjs && npm run tsc:esm",
-    "format": "npm run toc && biome format --write src examples/src",
+    "format": "npm run toc && biome check --apply src && biome format --write src examples/src",
     "watch": "rimraf dist && tsc --project ./tsconfig.commonjs.json --watch",
     "prepare": "npm run test && npm run build",
     "test": "jest --coverage",

diff --git a/src/Image/index.tsx b/src/Image/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+// biome-ignore lint/style/useImportType: wrong warning
 import React from 'react';
 import { type CSSProperties, forwardRef, useRef } from 'react';
 import {

diff --git a/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap b/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap
@@ -18,12 +18,13 @@ exports[`Image explicit sizes renders correctly 1`] = `
       srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
     />
     <img
+      alt=""
       loading="lazy"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
           "aspectRatio": "750 / 421",
-          "backgroundImage": "url(data:image/jpeg;base64,<IMAGE-DATA>)",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
           "backgroundPosition": "50% 50%",
           "backgroundRepeat": "no-repeat",
           "backgroundSize": "cover",
@@ -66,7 +67,7 @@ exports[`Image full data renders correctly 1`] = `
       style={
         {
           "aspectRatio": "750 / 421",
-          "backgroundImage": "url(data:image/jpeg;base64,<IMAGE-DATA>)",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
           "backgroundPosition": "50% 50%",
           "backgroundRepeat": "no-repeat",
           "backgroundSize": "cover",
@@ -98,12 +99,13 @@ exports[`Image minimal data renders correctly 1`] = `
       srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
     />
     <img
+      alt=""
       loading="lazy"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
           "aspectRatio": "750 / 421",
-          "backgroundImage": "url(data:image/jpeg;base64,<IMAGE-DATA>)",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
           "backgroundPosition": "50% 50%",
           "backgroundRepeat": "no-repeat",
           "backgroundSize": "cover",
@@ -134,12 +136,13 @@ exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
       srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
     />
     <img
+      alt=""
       loading="lazy"
       src="/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
           "aspectRatio": "750 / 421",
-          "backgroundImage": "url(data:image/jpeg;base64,<IMAGE-DATA>)",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
           "backgroundPosition": "50% 50%",
           "backgroundRepeat": "no-repeat",
           "backgroundSize": "cover",
@@ -176,13 +179,14 @@ exports[`Image passing className and/or style renders correctly 1`] = `
       srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
     />
     <img
+      alt=""
       className="class-name"
       loading="lazy"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
           "aspectRatio": "750 / 421",
-          "backgroundImage": "url(data:image/jpeg;base64,<IMAGE-DATA>)",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
           "backgroundPosition": "50% 50%",
           "backgroundRepeat": "no-repeat",
           "backgroundSize": "cover",
@@ -215,12 +219,13 @@ exports[`Image priority=true renders correctly 1`] = `
       srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
     />
     <img
+      alt=""
       fetchpriority="high"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
           "aspectRatio": "750 / 421",
-          "backgroundImage": "url(data:image/jpeg;base64,<IMAGE-DATA>)",
+          "backgroundImage": "url("data:image/jpeg;base64,<IMAGE-DATA>")",
           "backgroundPosition": "50% 50%",
           "backgroundRepeat": "no-repeat",
           "backgroundSize": "cover",
@@ -252,6 +257,7 @@ exports[`Image usePlaceholder=false renders correctly 1`] = `
       srcSet="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
     />
     <img
+      alt=""
       loading="lazy"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={

diff --git a/src/SRCImage/index.tsx b/src/SRCImage/index.tsx
@@ -1,3 +1,4 @@
+// biome-ignore lint/style/useImportType: wrong warning
 import React from 'react';
 import type { ResponsiveImageType } from '../Image';
 import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';

diff --git a/src/SRCImage/utils.tsx b/src/SRCImage/utils.tsx
@@ -1,12 +1,12 @@
 import React, { version } from 'react';
-import { ResponsiveImageType } from '../Image';
+import type { ResponsiveImageType } from '../Image';
 
 export function priorityProp(
   fetchPriority?: string,
 ): Record<string, string | undefined> {
   const [majorStr, minorStr] = version.split('.');
-  const major = parseInt(majorStr, 10);
-  const minor = parseInt(minorStr, 10);
+  const major = Number.parseInt(majorStr, 10);
+  const minor = Number.parseInt(minorStr, 10);
   if (major > 18 || (major === 18 && minor >= 3)) {
     // In React 18.3.0 or newer, we must use camelCase
     // prop to avoid "Warning: Invalid DOM property".
@@ -40,13 +40,13 @@ export const buildSrcSetFromSrc = (
         if (maxH) {
           url.searchParams.set(
             'max-h',
-            `${Math.floor(parseInt(maxH) * multiplier)}`,
+            `${Math.floor(Number.parseInt(maxH) * multiplier)}`,
           );
         }
         if (maxW) {
           url.searchParams.set(
             'max-w',
-            `${Math.floor(parseInt(maxW) * multiplier)}`,
+            `${Math.floor(Number.parseInt(maxW) * multiplier)}`,
           );
         }
       }

diff --git a/src/Seo/__tests__/index.test.tsx b/src/Seo/__tests__/index.test.tsx
@@ -7,7 +7,7 @@ import {
   toRemixMeta,
   toRemixV1Meta,
 } from '../index.js';
-import { TitleMetaLinkTag } from '../types.js';
+import type { TitleMetaLinkTag } from '../types.js';
 
 const metaTags: TitleMetaLinkTag[] = [
   {

diff --git a/src/Seo/nextUtils.ts b/src/Seo/nextUtils.ts
@@ -76,7 +76,7 @@ export function toNextMetadata(
     const { tag, attributes, content } = datum;
 
     if (tag === 'title') {
-      metadata['title'] = content;
+      metadata.title = content;
     }
 
     if (isSeoOrFaviconTag(datum) && isSeoMetaTag(datum)) {
@@ -88,33 +88,33 @@ export function toNextMetadata(
 
           if (parts?.length === 1) {
             if (parts[0] === 'image') {
-              metadata['openGraph'] ||= {};
+              metadata.openGraph ||= {};
 
-              metadata['openGraph']['images'] = {
-                ...metadata['openGraph']['images'],
+              metadata.openGraph.images = {
+                ...metadata.openGraph.images,
                 url: content,
               };
             } else {
-              metadata['openGraph'] = {
-                ...metadata['openGraph'],
+              metadata.openGraph = {
+                ...metadata.openGraph,
                 [camelize(parts[0])]: content,
               };
             }
           }
 
           if (parts?.length === 2) {
             if (parts[0] === 'image' && parts[1] === 'width') {
-              metadata['openGraph'] ||= {};
+              metadata.openGraph ||= {};
 
-              metadata['openGraph']['images'] = {
-                ...metadata['openGraph']['images'],
+              metadata.openGraph.images = {
+                ...metadata.openGraph.images,
                 width: content,
               };
             } else if (parts[0] === 'image' && parts[1] === 'height') {
-              metadata['openGraph'] ||= {};
+              metadata.openGraph ||= {};
 
-              metadata['openGraph']['images'] = {
-                ...metadata['openGraph']['images'],
+              metadata.openGraph.images = {
+                ...metadata.openGraph.images,
                 height: content,
               };
             }
@@ -131,8 +131,8 @@ export function toNextMetadata(
           const [_, ...parts] = name.split(':');
 
           if (parts?.length === 1) {
-            metadata['twitter'] = {
-              ...metadata['twitter'],
+            metadata.twitter = {
+              ...metadata.twitter,
               [camelize(parts[0])]: content,
             };
           }
@@ -146,21 +146,21 @@ export function toNextMetadata(
       if (isAppleTouchIconAttributes(datum.attributes)) {
         const { sizes, href } = datum.attributes;
 
-        metadata['icons'] ||= {};
+        metadata.icons ||= {};
 
-        metadata['icons']['apple'] = [
-          ...(metadata['icons']['apple'] || []),
+        metadata.icons.apple = [
+          ...(metadata.icons.apple || []),
           { url: href, sizes },
         ];
       }
 
       if (isFaviconAttributes(datum.attributes)) {
         const { sizes, type, rel, href } = datum.attributes;
 
-        metadata['icons'] ||= {};
+        metadata.icons ||= {};
 
-        metadata['icons']['icon'] = [
-          ...(metadata['icons']['icon'] || []),
+        metadata.icons.icon = [
+          ...(metadata.icons.icon || []),
           { url: href, sizes, type, rel },
         ];
       }

diff --git a/src/Seo/remixUtils.ts b/src/Seo/remixUtils.ts
@@ -1,4 +1,4 @@
-import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 interface RemixV1HtmlMetaDescriptor {
   [name: string]: string | string[];

diff --git a/src/Seo/renderMetaTags.tsx b/src/Seo/renderMetaTags.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 export function renderMetaTags(
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[],
 ): JSX.Element[] {
   return data.map(({ tag, attributes, content }) => {
-    let key: string[] = [tag];
+    const key: string[] = [tag];
 
     if (attributes && 'property' in attributes) {
       key.push(attributes.property);

diff --git a/src/Seo/renderMetaTagsToString.tsx b/src/Seo/renderMetaTagsToString.tsx
@@ -1,4 +1,4 @@
-import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
+import type { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 export function renderMetaTagsToString(
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[],

diff --git a/src/StructuredText/__tests__/index.test.tsx b/src/StructuredText/__tests__/index.test.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 import {
   RenderError,
   StructuredText,
-  StructuredTextDocument,
-  StructuredTextGraphQlResponse,
+  type StructuredTextDocument,
+  type StructuredTextGraphQlResponse,
   renderNodeRule,
 } from '../index.js';
 

diff --git a/src/StructuredText/index.tsx b/src/StructuredText/index.tsx
@@ -1,26 +1,26 @@
 import {
-  RenderMarkRule,
-  TransformMetaFn,
-  TransformedMeta,
+  type RenderMarkRule,
+  type TransformMetaFn,
+  type TransformedMeta,
   defaultMetaTransformer,
   render,
   renderMarkRule,
   renderNodeRule,
 } from 'datocms-structured-text-generic-html-renderer';
 import {
-  Document as StructuredTextDocument,
-  Node,
-  Record as StructuredTextGraphQlResponseRecord,
+  type Node,
   RenderError,
-  RenderResult,
-  RenderRule,
-  StructuredText as StructuredTextGraphQlResponse,
+  type RenderResult,
+  type RenderRule,
+  type Document as StructuredTextDocument,
+  type StructuredText as StructuredTextGraphQlResponse,
+  type Record as StructuredTextGraphQlResponseRecord,
   isBlock,
   isInlineItem,
   isItemLink,
   isStructuredText,
 } from 'datocms-structured-text-utils';
-import React, { ReactElement, cloneElement, isValidElement } from 'react';
+import React, { type ReactElement, cloneElement, isValidElement } from 'react';
 
 export { renderNodeRule, renderMarkRule, RenderError };
 

diff --git a/src/VideoPlayer/index.tsx b/src/VideoPlayer/index.tsx
@@ -13,7 +13,7 @@ import React, { forwardRef } from 'react';
 // We use and extend Typescript types defined in the MUX player.
 
 import type MuxPlayerElement from '@mux/mux-player';
-import { type MuxPlayerProps } from '@mux/mux-player-react/.';
+import type { MuxPlayerProps } from '@mux/mux-player-react';
 
 // React MUX player is made available in two flavours: eager and lazy loaded. We
 // choose to use the lazy version to avoid loading the web component uselessly.

diff --git a/src/useQuerySubscription/index.ts b/src/useQuerySubscription/index.ts
@@ -1,10 +1,10 @@
 'use client';
 
 import {
-  ChannelErrorData,
-  ConnectionStatus,
-  Options,
-  UnsubscribeFn,
+  type ChannelErrorData,
+  type ConnectionStatus,
+  type Options,
+  type UnsubscribeFn,
   subscribeToQuery,
 } from 'datocms-listen';
 import { useState } from 'react';

diff --git a/src/useSiteSearch/index.tsx b/src/useSiteSearch/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
 
 type SearchResultInstancesHrefSchema = {

diff --git a/src/useVideoPlayer/index.ts b/src/useVideoPlayer/index.ts
@@ -1,6 +1,6 @@
-import { MuxPlayerProps } from '@mux/mux-player-react/.';
+import type { MuxPlayerProps } from '@mux/mux-player-react/.';
 
-import { Video } from '../VideoPlayer';
+import type { Video } from '../VideoPlayer';
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;