react-datocms 3.0.11 → 3.0.14

package/src/StructuredText/index.tsx

@@ -0,0 +1,244 @@
+import {
+  defaultMetaTransformer,
+  render,
+  renderNodeRule,
+  renderMarkRule,
+  TransformedMeta,
+  TransformMetaFn,
+  RenderMarkRule,
+} from 'datocms-structured-text-generic-html-renderer';
+import {
+  isBlock,
+  isInlineItem,
+  isItemLink,
+  Record as StructuredTextGraphQlResponseRecord,
+  Document as StructuredTextDocument,
+  RenderError,
+  RenderResult,
+  RenderRule,
+  Node,
+  StructuredText as StructuredTextGraphQlResponse,
+  isStructuredText,
+} from 'datocms-structured-text-utils';
+import React, { cloneElement, isValidElement, ReactElement } from 'react';
+
+export { renderNodeRule, renderMarkRule, RenderError };
+
+// deprecated
+export { renderNodeRule as renderRule };
+
+export type {
+  StructuredTextGraphQlResponse,
+  StructuredTextDocument,
+  StructuredTextGraphQlResponseRecord,
+};
+
+type AdapterReturn = ReactElement | string | null;
+
+export const defaultAdapter = {
+  renderNode: React.createElement as (...args: any) => AdapterReturn,
+  renderFragment: (
+    children: ReactElement | null[],
+    key: string,
+  ): AdapterReturn => <React.Fragment key={key}>{children}</React.Fragment>,
+  renderText: (text: string, key: string): AdapterReturn => text,
+};
+
+export function appendKeyToValidElement(
+  element: ReactElement | null,
+  key: string,
+): ReactElement | null {
+  if (isValidElement(element) && element.key === null) {
+    return cloneElement(element, { key });
+  }
+  return element;
+}
+
+type H = typeof defaultAdapter.renderNode;
+type T = typeof defaultAdapter.renderText;
+type F = typeof defaultAdapter.renderFragment;
+
+export type RenderInlineRecordContext<
+  R extends StructuredTextGraphQlResponseRecord,
+> = {
+  record: R;
+};
+
+export type RenderRecordLinkContext<
+  R extends StructuredTextGraphQlResponseRecord,
+> = {
+  record: R;
+  children: RenderResult<H, T, F>;
+  transformedMeta: TransformedMeta;
+};
+
+export type RenderBlockContext<R extends StructuredTextGraphQlResponseRecord> =
+  {
+    record: R;
+  };
+
+export type StructuredTextPropTypes<
+  R1 extends StructuredTextGraphQlResponseRecord,
+  R2 extends StructuredTextGraphQlResponseRecord = R1,
+> = {
+  /** The actual field value you get from DatoCMS **/
+  data:
+    | StructuredTextGraphQlResponse<R1, R2>
+    | StructuredTextDocument
+    | Node
+    | null
+    | undefined;
+  /** A set of additional rules to convert nodes to JSX **/
+  customNodeRules?: RenderRule<H, T, F>[];
+  /** A set of additional rules to convert marks to JSX **/
+  customMarkRules?: RenderMarkRule<H, T, F>[];
+  /** Fuction that converts an 'inlineItem' node into React **/
+  renderInlineRecord?: (
+    context: RenderInlineRecordContext<R2>,
+  ) => ReactElement | null;
+  /** Fuction that converts an 'itemLink' node into React **/
+  renderLinkToRecord?: (
+    context: RenderRecordLinkContext<R2>,
+  ) => ReactElement | null;
+  /** Fuction that converts a 'block' node into React **/
+  renderBlock?: (context: RenderBlockContext<R1>) => ReactElement | null;
+  /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
+  metaTransformer?: TransformMetaFn;
+  /** Fuction that converts a simple string text into React **/
+  renderText?: T;
+  /** React.createElement-like function to use to convert a node into React **/
+  renderNode?: H;
+  /** Function to use to generate a React.Fragment **/
+  renderFragment?: F;
+  /** @deprecated use customNodeRules **/
+  customRules?: RenderRule<H, T, F>[];
+};
+
+export function StructuredText<
+  R1 extends StructuredTextGraphQlResponseRecord,
+  R2 extends StructuredTextGraphQlResponseRecord = R1,
+>({
+  data,
+  renderInlineRecord,
+  renderLinkToRecord,
+  renderBlock,
+  renderText,
+  renderNode,
+  renderFragment,
+  customMarkRules,
+  customRules,
+  customNodeRules,
+  metaTransformer,
+}: StructuredTextPropTypes<R1, R2>): ReactElement | null {
+  const result = render(data, {
+    adapter: {
+      renderText: renderText || defaultAdapter.renderText,
+      renderNode: renderNode || defaultAdapter.renderNode,
+      renderFragment: renderFragment || defaultAdapter.renderFragment,
+    },
+    metaTransformer,
+    customMarkRules,
+    customNodeRules: [
+      renderNodeRule(isInlineItem, ({ node, key }) => {
+        if (!renderInlineRecord) {
+          throw new RenderError(
+            `The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`,
+            node,
+          );
+        }
+
+        if (!isStructuredText(data) || !data.links) {
+          throw new RenderError(
+            `The document contains an 'itemLink' node, but the passed data prop is not a Structured Text GraphQL response, or data.links is not present!`,
+            node,
+          );
+        }
+
+        const item = data.links.find((item) => item.id === node.item);
+
+        if (!item) {
+          throw new RenderError(
+            `The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside data.links!`,
+            node,
+          );
+        }
+
+        return appendKeyToValidElement(
+          renderInlineRecord({ record: item }),
+          key,
+        );
+      }),
+      renderNodeRule(isItemLink, ({ node, key, children }) => {
+        if (!renderLinkToRecord) {
+          throw new RenderError(
+            `The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`,
+            node,
+          );
+        }
+
+        if (!isStructuredText(data) || !data.links) {
+          throw new RenderError(
+            `The document contains an 'itemLink' node, but the passed data prop is not a Structured Text GraphQL response, or data.links is not present!`,
+            node,
+          );
+        }
+
+        const item = data.links.find((item) => item.id === node.item);
+
+        if (!item) {
+          throw new RenderError(
+            `The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside data.links!`,
+            node,
+          );
+        }
+
+        return appendKeyToValidElement(
+          renderLinkToRecord({
+            record: item,
+            children: children as any as ReturnType<F>,
+            transformedMeta: node.meta
+              ? (metaTransformer || defaultMetaTransformer)({
+                  node,
+                  meta: node.meta,
+                })
+              : null,
+          }),
+          key,
+        );
+      }),
+      renderNodeRule(isBlock, ({ node, key }) => {
+        if (!renderBlock) {
+          throw new RenderError(
+            `The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`,
+            node,
+          );
+        }
+
+        if (!isStructuredText(data) || !data.blocks) {
+          throw new RenderError(
+            `The document contains an 'block' node, but the passed data prop is not a Structured Text GraphQL response, or data.blocks is not present!`,
+            node,
+          );
+        }
+
+        const item = data.blocks.find((item) => item.id === node.item);
+
+        if (!item) {
+          throw new RenderError(
+            `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside data.blocks!`,
+            node,
+          );
+        }
+
+        return appendKeyToValidElement(renderBlock({ record: item }), key);
+      }),
+      ...(customNodeRules || customRules || []),
+    ],
+  });
+
+  if (typeof result === 'string') {
+    return <>{result}</>;
+  }
+
+  return result || null;
+}

package/src/index.ts

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

package/src/setupTests.ts

@@ -0,0 +1,6 @@
+import { configure } from 'enzyme'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+configure({
+  adapter: new Adapter(),
+})

package/src/useQuerySubscription/index.ts

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import {
+  subscribeToQuery,
+  UnsubscribeFn,
+  ChannelErrorData,
+  ConnectionStatus,
+  Options,
+} from "datocms-listen";
+import { useDeepCompareEffectNoCheck as useDeepCompareEffect } from "use-deep-compare-effect";
+
+export type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<
+  Options<QueryResult, QueryVariables>,
+  "onStatusChange" | "onUpdate" | "onChannelError"
+>;
+
+export type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
+  /** Whether the subscription has to be performed or not */
+  enabled?: true;
+  /** The initial data to use while the initial request is being performed */
+  initialData?: QueryResult;
+} & SubscribeToQueryOptions<QueryResult, QueryVariables>;
+
+export type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
+  /** Whether the subscription has to be performed or not */
+  enabled: false;
+  /** The initial data to use while the initial request is being performed */
+  initialData?: QueryResult;
+} & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
+
+export type QueryListenerOptions<QueryResult, QueryVariables> =
+  | EnabledQueryListenerOptions<QueryResult, QueryVariables>
+  | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
+
+export function useQuerySubscription<
+  QueryResult = any,
+  QueryVariables = Record<string, any>
+>(options: QueryListenerOptions<QueryResult, QueryVariables>) {
+  const { enabled, initialData, ...other } = options;
+
+  const [error, setError] = useState<ChannelErrorData | null>(null);
+  const [data, setData] = useState<QueryResult | null>(null);
+  const [status, setStatus] = useState<ConnectionStatus>(
+    enabled ? "connecting" : "closed"
+  );
+
+  const subscribeToQueryOptions = other as EnabledQueryListenerOptions<
+    QueryResult,
+    QueryVariables
+  >;
+
+  useDeepCompareEffect(() => {
+    if (enabled === false) {
+      setStatus("closed");
+
+      return () => {
+        // we don't have to perform any uninstall
+      };
+    }
+
+    let unsubscribe: UnsubscribeFn | null;
+
+    async function subscribe() {
+      unsubscribe = await subscribeToQuery<QueryResult, QueryVariables>({
+        ...subscribeToQueryOptions,
+        onStatusChange: (status) => {
+          setStatus(status);
+        },
+        onUpdate: (updateData) => {
+          setError(null);
+          setData(updateData.response.data);
+        },
+        onChannelError: (errorData) => {
+          setData(null);
+          setError(errorData);
+        },
+      });
+    }
+
+    subscribe();
+
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [subscribeToQueryOptions]);
+
+  return { error, status, data: data || initialData };
+}