fix: use pascalCase Slice type for <SliceZone> resolver

package.json

@@ -46,7 +46,8 @@
 	},
 	"dependencies": {
 		"@prismicio/helpers": "^2.0.0",
-		"@prismicio/richtext": "^2.0.0"
+		"@prismicio/richtext": "^2.0.0",
+		"tiny-case": "^1.0.2"
 	},
 	"devDependencies": {
 		"@prismicio/client": "^6.0.0",
@@ -82,6 +83,7 @@
 		"siroc": "^0.16.0",
 		"standard-version": "^9.3.2",
 		"ts-eager": "^2.0.2",
+		"type-fest": "^2.9.0",
 		"typescript": "^4.5.4"
 	},
 	"peerDependencies": {

src/SliceZone.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import * as prismicT from "@prismicio/types";
+import { pascalCase } from "tiny-case";
+import { PascalCase } from "type-fest";
 
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
 
@@ -148,7 +150,7 @@ type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
 	/**
 	 * The name of the Slice.
 	 */
-	sliceName: TSlice["slice_type"];
+	sliceName: PascalCase<TSlice["slice_type"]>;
 
 	/**
 	 * The index of the Slice in the Slice Zone.
@@ -249,7 +251,9 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 			if (resolver) {
 				const resolvedComp = resolver({
 					slice,
-					sliceName: slice.slice_type,
+					sliceName: pascalCase(slice.slice_type) as PascalCase<
+						typeof slice.slice_type
+					>,
 					i: index,
 				});
 
@@ -270,7 +274,7 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 				/>
 			);
 		});
-	}, [components, context, defaultComponent, slices]);
+	}, [components, context, defaultComponent, slices, resolver]);
 
 	return <>{renderedSlices}</>;
 };

test/SliceZone.test.tsx

@@ -178,11 +178,11 @@ test("renders components from a resolver function for backwards compatibility wi
 		sliceName,
 	}) => {
 		switch (sliceName) {
-			case "foo": {
+			case "Foo": {
 				return (props) => <StringifySliceComponent id="foo" {...props} />;
 			}
 
-			case "bar": {
+			case "Bar": {
 				return (props) => <StringifySliceComponent id="bar" {...props} />;
 			}
 		}