@prismicio/react - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

dist/index.d.ts

@@ -34,3 +34,3 @@ import * as _prismicio_client from '@prismicio/client';
  */
-declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction = prismicH.LinkResolverFunction> = Omit<React.ComponentPropsWithoutRef<InternalComponent> & React.ComponentPropsWithoutRef<ExternalComponent>, keyof LinkProps> & {
+declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = Omit<React.ComponentPropsWithoutRef<InternalComponent> & React.ComponentPropsWithoutRef<ExternalComponent>, keyof LinkProps> & {
     /**
@@ -88,3 +88,3 @@ * The Link Resolver used to resolve links.
 });
-declare const PrismicLink: <InternalComponent extends React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction<string>>(props: PrismicLinkProps<InternalComponent, ExternalComponent, LinkResolverFunction> & {
+declare const PrismicLink: <InternalComponent extends React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction<any>>(props: PrismicLinkProps<InternalComponent, ExternalComponent, LinkResolverFunction> & {
     ref?: React.Ref<Element> | undefined;
@@ -116,3 +116,3 @@ }) => JSX.Element | null;
  */
-declare type PrismicContextValue = {
+declare type PrismicContextValue<LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = {
     /**
@@ -132,3 +132,3 @@ * A `@prismicio/client` instance used to fetch content from a Prismic
      */
-    linkResolver?: prismicH.LinkResolverFunction;
+    linkResolver?: LinkResolverFunction;
     /**
@@ -177,3 +177,3 @@ * A map or function that maps a Rich Text block to a React component.
  */
-declare type PrismicProviderProps = PrismicContextValue;
+declare type PrismicProviderProps<LinkResolverFunction extends prismicH.LinkResolverFunction> = PrismicContextValue<LinkResolverFunction>;
 /**
@@ -185,3 +185,3 @@ * React context provider to share configuration for `@prismicio/react`
  */
-declare const PrismicProvider: ({ client, linkResolver, richTextComponents, internalLinkComponent, externalLinkComponent, children, }: PrismicProviderProps) => JSX.Element;
+declare const PrismicProvider: <LinkResolverFunction extends prismicH.LinkResolverFunction<any>>({ client, linkResolver, richTextComponents, internalLinkComponent, externalLinkComponent, children, }: PrismicProviderProps<LinkResolverFunction>) => JSX.Element;
 
@@ -248,3 +248,3 @@ /**
  */
-declare type PrismicRichTextProps = {
+declare type PrismicRichTextProps<LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = {
     /**
@@ -262,3 +262,3 @@ * The Prismic Rich Text field to render.
      */
-    linkResolver?: PrismicLinkProps["linkResolver"];
+    linkResolver?: LinkResolverFunction;
     /**
@@ -311,2 +311,7 @@ * A function that maps a Rich Text block to a React component.
     externalLinkComponent?: PrismicLinkProps["externalComponent"];
+    /**
+     * The value to be rendered when the field is empty. If a fallback is not
+     * given, `null` will be rendered.
+     */
+    fallback?: React.ReactNode;
 };
@@ -353,3 +358,3 @@ /**
  */
-declare const PrismicRichText: (props: PrismicRichTextProps) => JSX.Element | null;
+declare const PrismicRichText: <LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction<string>>(props: PrismicRichTextProps<LinkResolverFunction>) => JSX.Element | null;
 
@@ -375,15 +380,42 @@ declare type WordSeparators = "-" | "_" | " ";
 /**
+ * Returns the type of a `SliceLike` type.
+ *
+ * @typeParam Slice - The Slice from which the type will be extracted.
+ */
+declare type ExtractSliceType<Slice extends SliceLike> = Slice extends SliceLikeRestV2 ? Slice["slice_type"] : Slice extends SliceLikeGraphQL ? Slice["type"] : never;
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * Rest API V2 for the `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+declare type SliceLikeRestV2<SliceType extends string = string> = {
+    slice_type: prismicT.Slice<SliceType>["slice_type"];
+};
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+declare type SliceLikeGraphQL<SliceType extends string = string> = {
+    type: prismicT.Slice<SliceType>["slice_type"];
+};
+/**
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone>` component.
  *
- * If using Prismic's REST API, use the `Slice` export from `@prismicio/types`
- * for a full interface.
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-declare type SliceLike<SliceType extends string = string> = Pick<prismicT.Slice<SliceType>, "slice_type">;
+declare type SliceLike<SliceType extends string = string> = SliceLikeRestV2<SliceType> | SliceLikeGraphQL<SliceType>;
 /**
  * A looser version of the `SliceZone` type from `@prismicio/types` using `SliceLike`.
  *
- * If using Prismic's REST API, use the `SliceZone` export from
+ * If using Prismic's Rest API V2, use the `SliceZone` export from
  * `@prismicio/types` for the full type.
@@ -435,3 +467,3 @@ *
 declare type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
-    [SliceType in keyof Record<TSlice["slice_type"], never>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
+    [SliceType in ExtractSliceType<TSlice>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
 };
@@ -456,3 +488,3 @@ /**
      */
-    sliceName: PascalCase<TSlice["slice_type"]>;
+    sliceName: PascalCase<ExtractSliceType<TSlice>>;
     /**
@@ -459,0 +491,0 @@ * The index of the Slice in the Slice Zone.

dist/index.js

@@ -240,3 +240,3 @@ import * as React from 'react';
     } else {
-      return null;
+      return props.fallback != null ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.fallback) : null;
     }
@@ -249,2 +249,3 @@ }, [
     props.linkResolver,
+    props.fallback,
     context.linkResolver,
@@ -265,9 +266,10 @@ context.richTextComponents
 }) => {
+  const type = "slice_type" in slice ? slice.slice_type : slice.type;
   React.useEffect(() => {
-    console.warn(`[SliceZone] Could not find a component for Slice type "${slice.slice_type}"`, slice);
-  }, [slice]);
+    console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
+  }, [slice, type]);
   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");
+    "data-slice-type": type
+  }, "Could not find a component for Slice type \u201C", type, "\u201D");
 };
@@ -283,7 +285,8 @@ const SliceZone = ({
     return slices.map((slice, index) => {
-      let Comp = components[slice.slice_type] || defaultComponent;
+      const type = "slice_type" in slice ? slice.slice_type : slice.type;
+      let Comp = components[type] || defaultComponent;
       if (resolver) {
         const resolvedComp = resolver({
           slice,
-          sliceName: pascalCase(slice.slice_type),
+          sliceName: pascalCase(type),
           i: index
@@ -290,0 +293,0 @@ });

package.json

 {
 	"name": "@prismicio/react",
-	"version": "2.1.2",
+	"version": "2.2.0",
 	"description": "React components and hooks to fetch and present Prismic content",
@@ -49,38 +49,38 @@ "keywords": [
 	"dependencies": {
-		"@prismicio/helpers": "^2.2.0",
+		"@prismicio/helpers": "^2.2.1",
 		"@prismicio/richtext": "^2.0.1"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.3.0",
-		"@prismicio/mock": "^0.0.8",
-		"@prismicio/types": "^0.1.25",
+		"@prismicio/client": "^6.4.2",
+		"@prismicio/mock": "^0.0.9",
+		"@prismicio/types": "^0.1.27",
 		"@size-limit/preset-small-lib": "^7.0.8",
-		"@testing-library/react": "^12.1.3",
+		"@testing-library/react": "^12.1.4",
 		"@testing-library/react-hooks": "^7.0.2",
 		"@types/jsdom": "^16.2.14",
 		"@types/node-fetch": "^3.0.3",
-		"@types/react": "^17.0.39",
+		"@types/react": "^17.0.43",
 		"@types/react-test-renderer": "^17.0.1",
 		"@types/sinon": "^10.0.11",
-		"@typescript-eslint/eslint-plugin": "^5.12.1",
-		"@typescript-eslint/parser": "^5.12.1",
-		"ava": "^4.0.1",
+		"@typescript-eslint/eslint-plugin": "^5.17.0",
+		"@typescript-eslint/parser": "^5.17.0",
+		"ava": "^4.1.0",
 		"browser-env": "^3.3.0",
-		"esbuild": "^0.14.23",
+		"esbuild": "^0.14.29",
 		"esbuild-register": "^3.3.2",
-		"eslint": "^8.9.0",
-		"eslint-config-prettier": "^8.4.0",
+		"eslint": "^8.12.0",
+		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.28.0",
-		"eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react-hooks": "^4.4.0",
 		"eslint-plugin-tsdoc": "^0.2.14",
 		"global-jsdom": "^8.4.0",
 		"jsdom": "^19.0.0",
-		"msw": "^0.38.1",
-		"node-fetch": "^3.2.0",
+		"msw": "^0.39.2",
+		"node-fetch": "^3.2.3",
 		"nyc": "^15.1.0",
-		"prettier": "^2.5.1",
-		"prettier-plugin-jsdoc": "^0.3.30",
-		"react": "^17",
-		"react-test-renderer": "^17.0.2",
+		"prettier": "^2.6.1",
+		"prettier-plugin-jsdoc": "^0.3.34",
+		"react": "^18.0.0",
+		"react-test-renderer": "^18.0.0",
 		"sinon": "^13.0.1",
@@ -90,7 +90,7 @@ "siroc": "^0.16.0",
 		"standard-version": "^9.3.2",
-		"typescript": "^4.5.5"
+		"typescript": "^4.6.3"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6.0.0",
-		"react": "^16.8 || ^17"
+		"react": "^16.8 || ^17 || ^18"
 	},
@@ -97,0 +97,0 @@ "peerDependenciesMeta": {

src/lib/pascalCase.ts

@@ -37,3 +37,3 @@ // `PascalCase`-related types have been taken from the `type-fest` package.
 	`${infer FirstPart}`,
-	...infer RemainingParts
+	...infer RemainingParts,
 ]
@@ -40,0 +40,0 @@ ? Uncapitalize<`${FirstPart}${InnerCamelCaseStringArray<

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

326404

increased by8.19%

Lines of code

3891

increased by2.37%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• Updated@prismicio/helpers@^2.2.1