@prismicio/react 2.0.5 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/react",
-	"version": "2.0.5",
+	"version": "2.1.0",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -16,16 +16,16 @@
 	"license": "Apache-2.0",
 	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
 	"sideEffects": false,
-	"type": "module",
 	"exports": {
 		".": {
 			"require": "./dist/index.cjs",
-			"import": "./dist/index.mjs"
+			"import": "./dist/index.js"
 		},
 		"./package.json": "./package.json"
 	},
 	"main": "dist/index.cjs",
-	"module": "dist/index.mjs",
+	"module": "dist/index.js",
+	"react-native": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"files": [
 		"dist",
@@ -46,47 +46,47 @@
 		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
 	},
 	"dependencies": {
-		"@prismicio/helpers": "^2.0.1",
+		"@prismicio/helpers": "^2.1.1",
 		"@prismicio/richtext": "^2.0.1"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.1.1",
-		"@prismicio/mock": "^0.0.6",
-		"@prismicio/types": "^0.1.22",
-		"@size-limit/preset-small-lib": "^7.0.5",
-		"@testing-library/react": "^12.1.2",
+		"@prismicio/client": "^6.3.0",
+		"@prismicio/mock": "^0.0.8",
+		"@prismicio/types": "^0.1.25",
+		"@size-limit/preset-small-lib": "^7.0.8",
+		"@testing-library/react": "^12.1.3",
 		"@testing-library/react-hooks": "^7.0.2",
 		"@types/jsdom": "^16.2.14",
 		"@types/node-fetch": "^3.0.3",
-		"@types/react": "^17.0.38",
+		"@types/react": "^17.0.39",
 		"@types/react-test-renderer": "^17.0.1",
-		"@types/sinon": "^10.0.9",
-		"@typescript-eslint/eslint-plugin": "^5.9.0",
-		"@typescript-eslint/parser": "^5.9.0",
-		"ava": "^4.0.0",
+		"@types/sinon": "^10.0.11",
+		"@typescript-eslint/eslint-plugin": "^5.12.1",
+		"@typescript-eslint/parser": "^5.12.1",
+		"ava": "^4.0.1",
 		"browser-env": "^3.3.0",
-		"eslint": "^8.6.0",
-		"eslint-config-prettier": "^8.3.0",
+		"esbuild": "^0.14.23",
+		"esbuild-register": "^3.3.2",
+		"eslint": "^8.9.0",
+		"eslint-config-prettier": "^8.4.0",
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-react": "^7.28.0",
 		"eslint-plugin-react-hooks": "^4.3.0",
 		"eslint-plugin-tsdoc": "^0.2.14",
 		"global-jsdom": "^8.4.0",
 		"jsdom": "^19.0.0",
-		"msw": "^0.36.3",
-		"node-fetch": "^3.1.0",
+		"msw": "^0.38.1",
+		"node-fetch": "^3.2.0",
 		"nyc": "^15.1.0",
 		"prettier": "^2.5.1",
 		"prettier-plugin-jsdoc": "^0.3.30",
-		"react": "^17.0.2",
+		"react": "^17",
 		"react-test-renderer": "^17.0.2",
-		"sinon": "^12.0.1",
+		"sinon": "^13.0.1",
 		"siroc": "^0.16.0",
-		"size-limit": "^7.0.5",
+		"size-limit": "^7.0.8",
 		"standard-version": "^9.3.2",
-		"ts-eager": "^2.0.2",
-		"type-fest": "^2.11.0",
-		"typescript": "^4.5.4"
+		"typescript": "^4.5.5"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6.0.0",
@@ -102,6 +102,5 @@
 	},
 	"publishConfig": {
 		"access": "public"
-	},
-	"react-native": "dist/index.js"
+	}
 }

package/src/PrismicText.tsx

@@ -11,6 +11,12 @@ export type PrismicTextProps = {
 	 */
 	field: prismicT.RichTextField | null | undefined;
 
+	/**
+	 * The string rendered when the field is empty. If a fallback is not given,
+	 * `null` will be rendered.
+	 */
+	fallback?: string;
+
 	/**
 	 * The separator used between blocks. Defaults to `\n`.
 	 */
@@ -42,7 +48,7 @@ export const PrismicText = (props: PrismicTextProps): JSX.Element | null => {
 
 			return <>{text}</>;
 		} else {
-			return null;
+			return props.fallback != null ? <>{props.fallback}</> : null;
 		}
-	}, [props.field, props.separator]);
+	}, [props.field, props.fallback, props.separator]);
 };

package/src/SliceZone.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import * as prismicT from "@prismicio/types";
-import type { PascalCase } from "type-fest";
 
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
-import { pascalCase } from "./lib/pascalCase";
+import { pascalCase, PascalCase } from "./lib/pascalCase";
 
 /**
  * The minimum required properties to represent a Prismic Slice for the

package/src/lib/pascalCase.ts

@@ -1,5 +1,72 @@
-import type { PascalCase } from "type-fest";
+// `PascalCase`-related types have been taken from the `type-fest` package.
+//
+// They are copied here to mininize dependencies in this project.
+//
+// See: https://github.com/sindresorhus/type-fest/blob/61c35052f09caa23de5eef96d95196375d8ed498/source/camel-case.d.ts
 
+type WordSeparators = "-" | "_" | " ";
+
+type Split<
+	S extends string,
+	Delimiter extends string,
+> = S extends `${infer Head}${Delimiter}${infer Tail}`
+	? [Head, ...Split<Tail, Delimiter>]
+	: S extends Delimiter
+	? []
+	: [S];
+
+type InnerCamelCaseStringArray<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	Parts extends readonly any[],
+	PreviousPart,
+> = Parts extends [`${infer FirstPart}`, ...infer RemainingParts]
+	? FirstPart extends undefined
+		? ""
+		: FirstPart extends ""
+		? InnerCamelCaseStringArray<RemainingParts, PreviousPart>
+		: `${PreviousPart extends ""
+				? FirstPart
+				: Capitalize<FirstPart>}${InnerCamelCaseStringArray<
+				RemainingParts,
+				FirstPart
+		  >}`
+	: "";
+
+type CamelCaseStringArray<Parts extends readonly string[]> = Parts extends [
+	`${infer FirstPart}`,
+	...infer RemainingParts
+]
+	? Uncapitalize<`${FirstPart}${InnerCamelCaseStringArray<
+			RemainingParts,
+			FirstPart
+	  >}`>
+	: never;
+
+type CamelCase<K> = K extends string
+	? CamelCaseStringArray<
+			Split<K extends Uppercase<K> ? Lowercase<K> : K, WordSeparators>
+	  >
+	: K;
+
+/**
+ * Converts a string literal to Pascal case.
+ *
+ * Taken from the `type-fest` package.
+ *
+ * See:
+ * https://github.com/sindresorhus/type-fest/blob/61c35052f09caa23de5eef96d95196375d8ed498/source/pascal-case.d.ts
+ */
+export type PascalCase<Value> = CamelCase<Value> extends string
+	? Capitalize<CamelCase<Value>>
+	: CamelCase<Value>;
+
+/**
+ * Converts a string to Pascal case.
+ *
+ * @param input - The string to convert.
+ *
+ * @returns `input` as Pascal case.
+ */
 export const pascalCase = <Input extends string>(
 	input: Input,
 ): PascalCase<Input> => {

package/dist/index.mjs

@@ -1,429 +0,0 @@
-import * as React from 'react';
-import * as prismicH from '@prismicio/helpers';
-import * as prismicR from '@prismicio/richtext';
-import { Element } from '@prismicio/richtext';
-export { Element } from '@prismicio/richtext';
-
-const PrismicContext = React.createContext({});
-const PrismicProvider = ({
-  client,
-  linkResolver,
-  richTextComponents,
-  internalLinkComponent,
-  externalLinkComponent,
-  children
-}) => {
-  const value = React.useMemo(() => ({
-    client,
-    linkResolver,
-    richTextComponents,
-    internalLinkComponent,
-    externalLinkComponent
-  }), [
-    client,
-    linkResolver,
-    richTextComponents,
-    internalLinkComponent,
-    externalLinkComponent
-  ]);
-  return /* @__PURE__ */ React.createElement(PrismicContext.Provider, {
-    value
-  }, children);
-};
-
-const usePrismicContext = () => {
-  return React.useContext(PrismicContext) || {};
-};
-
-if (typeof process === "undefined") {
-  globalThis.process = { env: {} };
-}
-const __PRODUCTION__ = process.env.NODE_ENV === "production";
-
-const prefix = "Invariant failed";
-function invariant(condition, message) {
-  if (condition) {
-    return;
-  }
-  if (__PRODUCTION__) {
-    throw new Error(prefix);
-  }
-  throw new Error(`${prefix}: ${message || ""}`);
-}
-
-const usePrismicClient = (explicitClient) => {
-  const context = usePrismicContext();
-  const client = explicitClient || (context == null ? void 0 : context.client);
-  invariant(client, "A @prismicio/client is required to query documents. Provide a client to the hook or to a <PrismicProvider> higher in your component tree.");
-  return client;
-};
-
-const isInternalURL = (url) => {
-  const isInternal = /^(\/(?!\/)|#)/.test(url);
-  const isSpecialLink = !isInternal && !/^https?:\/\//.test(url);
-  return isInternal && !isSpecialLink;
-};
-
-const defaultInternalComponent = "a";
-const defaultExternalComponent = "a";
-const PrismicLink = (props) => {
-  const context = usePrismicContext();
-  const linkResolver = props.linkResolver || context.linkResolver;
-  let href;
-  if ("href" in props) {
-    href = props.href;
-  } else if ("document" in props && props.document) {
-    href = prismicH.asLink(props.document, linkResolver);
-  } else if ("field" in props && props.field) {
-    href = prismicH.asLink(props.field, linkResolver);
-  }
-  const target = props.target || "field" in props && props.field && "target" in props.field && props.field.target || void 0;
-  const rel = props.rel || (target === "_blank" ? "noopener noreferrer" : void 0);
-  const InternalComponent = props.internalComponent || context.internalLinkComponent || defaultInternalComponent;
-  const ExternalComponent = props.externalComponent || context.externalLinkComponent || defaultExternalComponent;
-  const isInternal = href && isInternalURL(href);
-  const Component = isInternal ? InternalComponent : ExternalComponent;
-  const passthroughProps = Object.assign({}, props);
-  delete passthroughProps.linkResolver;
-  delete passthroughProps.internalComponent;
-  delete passthroughProps.externalComponent;
-  delete passthroughProps.rel;
-  delete passthroughProps.target;
-  if ("field" in passthroughProps) {
-    delete passthroughProps.field;
-  } else if ("document" in passthroughProps) {
-    delete passthroughProps.document;
-  } else if ("href" in passthroughProps) {
-    delete passthroughProps.href;
-  }
-  return href ? /* @__PURE__ */ React.createElement(Component, {
-    ...passthroughProps,
-    href,
-    target,
-    rel
-  }) : null;
-};
-
-const PrismicText = (props) => {
-  return React.useMemo(() => {
-    if (props.field) {
-      const text = prismicH.asText(props.field, props.separator);
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, text);
-    } else {
-      return null;
-    }
-  }, [props.field, props.separator]);
-};
-
-const createDefaultSerializer = (args) => prismicR.wrapMapSerializer({
-  heading1: ({ children, key }) => /* @__PURE__ */ React.createElement("h1", {
-    key
-  }, children),
-  heading2: ({ children, key }) => /* @__PURE__ */ React.createElement("h2", {
-    key
-  }, children),
-  heading3: ({ children, key }) => /* @__PURE__ */ React.createElement("h3", {
-    key
-  }, children),
-  heading4: ({ children, key }) => /* @__PURE__ */ React.createElement("h4", {
-    key
-  }, children),
-  heading5: ({ children, key }) => /* @__PURE__ */ React.createElement("h5", {
-    key
-  }, children),
-  heading6: ({ children, key }) => /* @__PURE__ */ React.createElement("h6", {
-    key
-  }, children),
-  paragraph: ({ children, key }) => /* @__PURE__ */ React.createElement("p", {
-    key
-  }, children),
-  preformatted: ({ node, key }) => /* @__PURE__ */ React.createElement("pre", {
-    key
-  }, node.text),
-  strong: ({ children, key }) => /* @__PURE__ */ React.createElement("strong", {
-    key
-  }, children),
-  em: ({ children, key }) => /* @__PURE__ */ React.createElement("em", {
-    key
-  }, children),
-  listItem: ({ children, key }) => /* @__PURE__ */ React.createElement("li", {
-    key
-  }, children),
-  oListItem: ({ children, key }) => /* @__PURE__ */ React.createElement("li", {
-    key
-  }, children),
-  list: ({ children, key }) => /* @__PURE__ */ React.createElement("ul", {
-    key
-  }, children),
-  oList: ({ children, key }) => /* @__PURE__ */ React.createElement("ol", {
-    key
-  }, children),
-  image: ({ node, key }) => {
-    var _a;
-    const img = /* @__PURE__ */ React.createElement("img", {
-      src: node.url,
-      alt: (_a = node.alt) != null ? _a : void 0,
-      "data-copyright": node.copyright ? node.copyright : void 0
-    });
-    return /* @__PURE__ */ React.createElement("p", {
-      key,
-      className: "block-img"
-    }, node.linkTo ? /* @__PURE__ */ React.createElement(PrismicLink, {
-      linkResolver: args.linkResolver,
-      internalComponent: args.internalLinkComponent,
-      externalComponent: args.externalLinkComponent,
-      field: node.linkTo
-    }, img) : img);
-  },
-  embed: ({ node, key }) => {
-    var _a;
-    return /* @__PURE__ */ React.createElement("div", {
-      key,
-      "data-oembed": node.oembed.embed_url,
-      "data-oembed-type": node.oembed.type,
-      "data-oembed-provider": node.oembed.provider_name,
-      dangerouslySetInnerHTML: { __html: (_a = node.oembed.html) != null ? _a : "" }
-    });
-  },
-  hyperlink: ({ node, children, key }) => /* @__PURE__ */ React.createElement(PrismicLink, {
-    key,
-    field: node.data,
-    linkResolver: args.linkResolver,
-    internalComponent: args.internalLinkComponent,
-    externalComponent: args.externalLinkComponent
-  }, children),
-  label: ({ node, children, key }) => /* @__PURE__ */ React.createElement("span", {
-    key,
-    className: node.data.label
-  }, children),
-  span: ({ text, key }) => {
-    const result = [];
-    let i = 0;
-    for (const line of text.split("\n")) {
-      if (i > 0) {
-        result.push(/* @__PURE__ */ React.createElement("br", {
-          key: `${i}__break`
-        }));
-      }
-      result.push(/* @__PURE__ */ React.createElement(React.Fragment, {
-        key: `${i}__line`
-      }, line));
-      i++;
-    }
-    return /* @__PURE__ */ React.createElement(React.Fragment, {
-      key
-    }, result);
-  }
-});
-const PrismicRichText = (props) => {
-  const context = usePrismicContext();
-  return React.useMemo(() => {
-    if (!props.field) {
-      return null;
-    } else {
-      const linkResolver = props.linkResolver || context.linkResolver;
-      const serializer = prismicR.composeSerializers(typeof props.components === "object" ? prismicR.wrapMapSerializer(props.components) : props.components, typeof context.richTextComponents === "object" ? prismicR.wrapMapSerializer(context.richTextComponents) : context.richTextComponents, createDefaultSerializer({
-        linkResolver,
-        internalLinkComponent: props.internalLinkComponent,
-        externalLinkComponent: props.externalLinkComponent
-      }));
-      const serialized = prismicR.serialize(props.field, (type, node, text, children, key) => {
-        const result = serializer(type, node, text, children, key);
-        if (React.isValidElement(result) && result.key == null) {
-          return React.cloneElement(result, { key });
-        } else {
-          return result;
-        }
-      });
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, serialized);
-    }
-  }, [
-    props.field,
-    props.internalLinkComponent,
-    props.externalLinkComponent,
-    props.components,
-    props.linkResolver,
-    context.linkResolver,
-    context.richTextComponents
-  ]);
-};
-
-const pascalCase = (input) => {
-  const camelCased = input.replace(/(?:-|_)(\w)/g, (_, c) => {
-    return c ? c.toUpperCase() : "";
-  });
-  return camelCased[0].toUpperCase() + camelCased.slice(1);
-};
-
-const TODOSliceComponent = __PRODUCTION__ ? () => null : ({
-  slice
-}) => {
-  React.useEffect(() => {
-    console.warn(`[SliceZone] Could not find a component for Slice type "${slice.slice_type}"`, slice);
-  }, [slice]);
-  return /* @__PURE__ */ React.createElement("section", {
-    "data-slice-zone-todo-component": "",
-    "data-slice-type": slice.slice_type
-  }, "Could not find a component for Slice type \u201C", slice.slice_type, "\u201D");
-};
-const SliceZone = ({
-  slices = [],
-  components = {},
-  resolver,
-  defaultComponent = TODOSliceComponent,
-  context = {}
-}) => {
-  const renderedSlices = React.useMemo(() => {
-    return slices.map((slice, index) => {
-      let Comp = components[slice.slice_type] || defaultComponent;
-      if (resolver) {
-        const resolvedComp = resolver({
-          slice,
-          sliceName: pascalCase(slice.slice_type),
-          i: index
-        });
-        if (resolvedComp) {
-          Comp = resolvedComp;
-        }
-      }
-      const key = `${index}-${JSON.stringify(slice)}`;
-      return /* @__PURE__ */ React.createElement(Comp, {
-        key,
-        slice,
-        index,
-        slices,
-        context
-      });
-    });
-  }, [components, context, defaultComponent, slices, resolver]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, renderedSlices);
-};
-
-const PrismicToolbar = ({
-  repositoryName,
-  type = "new"
-}) => {
-  const src = `https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}${type === "new" ? "&new=true" : ""}`;
-  React.useEffect(() => {
-    const existingScript = document.querySelector(`script[src="${src}"]`);
-    if (!existingScript) {
-      const script = document.createElement("script");
-      script.src = src;
-      script.defer = true;
-      script.dataset.prismicToolbar = "";
-      script.dataset.repositoryName = repositoryName;
-      script.dataset.type = type;
-      document.body.appendChild(script);
-    }
-  }, [repositoryName, type, src]);
-  return null;
-};
-
-const reducer = (state, action) => {
-  switch (action[0]) {
-    case "start": {
-      return { state: "loading" };
-    }
-    case "succeed": {
-      return { state: "loaded", data: action[1] };
-    }
-    case "fail": {
-      return {
-        ...state,
-        state: "failed",
-        error: action[1]
-      };
-    }
-  }
-};
-const initialState = {
-  state: "idle"
-};
-const isParams = (value) => {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-};
-const useStatefulPrismicClientMethod = (methodName, args, explicitClient) => {
-  const lastArg = args[args.length - 1];
-  const {
-    client: lastArgExplicitClient,
-    skip,
-    ...params
-  } = isParams(lastArg) ? lastArg : {};
-  const argsWithoutParams = isParams(lastArg) ? args.slice(0, -1) : args;
-  const client = usePrismicClient(explicitClient || lastArgExplicitClient);
-  const [state, dispatch] = React.useReducer(reducer, initialState);
-  React.useEffect(() => {
-    if (!skip) {
-      {
-        dispatch(["start"]);
-      }
-      client[methodName].call(client, ...argsWithoutParams, params).then((result) => {
-        {
-          dispatch(["succeed", result]);
-        }
-      }).catch((error) => {
-        {
-          dispatch(["fail", error]);
-        }
-      });
-    }
-  }, [
-    client,
-    methodName,
-    skip,
-    JSON.stringify(argsWithoutParams),
-    JSON.stringify(params)
-  ]);
-  return React.useMemo(() => [
-    state.data,
-    {
-      state: state.state,
-      error: state.error
-    }
-  ], [state]);
-};
-
-const usePrismicPreviewResolver = (args = {}) => {
-  const context = usePrismicContext();
-  const linkResolver = args.linkResolver || context.linkResolver;
-  const result = useStatefulPrismicClientMethod("resolvePreviewURL", [
-    {
-      linkResolver,
-      defaultURL: args.defaultURL || "/",
-      previewToken: args.previewToken,
-      documentID: args.documentID
-    }
-  ], args.client);
-  const [resolvedURL] = result;
-  const { navigate } = args;
-  React.useEffect(() => {
-    if (resolvedURL && navigate) {
-      navigate(resolvedURL);
-    }
-  }, [resolvedURL, navigate]);
-  return result;
-};
-
-const usePrismicDocuments = (...args) => useStatefulPrismicClientMethod("get", args);
-const useFirstPrismicDocument = (...args) => useStatefulPrismicClientMethod("getFirst", args);
-const useAllPrismicDocumentsDangerously = (...args) => useStatefulPrismicClientMethod("dangerouslyGetAll", args);
-const usePrismicDocumentByID = (...args) => useStatefulPrismicClientMethod("getByID", args);
-const usePrismicDocumentsByIDs = (...args) => useStatefulPrismicClientMethod("getByIDs", args);
-const useAllPrismicDocumentsByIDs = (...args) => useStatefulPrismicClientMethod("getAllByIDs", args);
-const usePrismicDocumentByUID = (...args) => useStatefulPrismicClientMethod("getByUID", args);
-const usePrismicDocumentsByUIDs = (...args) => useStatefulPrismicClientMethod("getByUIDs", args);
-const useAllPrismicDocumentsByUIDs = (...args) => useStatefulPrismicClientMethod("getAllByUIDs", args);
-const useSinglePrismicDocument = (...args) => useStatefulPrismicClientMethod("getSingle", args);
-const usePrismicDocumentsByType = (...args) => useStatefulPrismicClientMethod("getByType", args);
-const useAllPrismicDocumentsByType = (...args) => useStatefulPrismicClientMethod("getAllByType", args);
-const usePrismicDocumentsByTag = (...args) => useStatefulPrismicClientMethod("getByTag", args);
-const useAllPrismicDocumentsByTag = (...args) => useStatefulPrismicClientMethod("getAllByTag", args);
-const usePrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMethod("getBySomeTags", args);
-const useAllPrismicDocumentsBySomeTags = (...args) => useStatefulPrismicClientMethod("getAllBySomeTags", args);
-const usePrismicDocumentsByEveryTag = (...args) => useStatefulPrismicClientMethod("getByEveryTag", args);
-const useAllPrismicDocumentsByEveryTag = (...args) => useStatefulPrismicClientMethod("getAllByEveryTag", args);
-
-const Elements = Element;
-
-export { Elements, PrismicLink, PrismicProvider, PrismicRichText, PrismicText, PrismicToolbar, SliceZone, TODOSliceComponent, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useAllPrismicDocumentsDangerously, useFirstPrismicDocument, usePrismicClient, usePrismicContext, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicPreviewResolver, useSinglePrismicDocument };
-//# sourceMappingURL=index.mjs.map