fix: use pascalCase Slice type for <SliceZone> resolver (#109)

package.json

@@ -82,6 +82,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,7 +1,9 @@
 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";
 
 /**
  * The minimum required properties to represent a Prismic Slice for the
@@ -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,7 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 			if (resolver) {
 				const resolvedComp = resolver({
 					slice,
-					sliceName: slice.slice_type,
+					sliceName: pascalCase(slice.slice_type),
 					i: index,
 				});
 
@@ -270,7 +272,7 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 				/>
 			);
 		});
-	}, [components, context, defaultComponent, slices]);
+	}, [components, context, defaultComponent, slices, resolver]);
 
 	return <>{renderedSlices}</>;
 };

src/lib/pascalCase.ts

@@ -0,0 +1,10 @@
+import type { PascalCase } from "type-fest";
+
+export const pascalCase = <Input>(input: string): PascalCase<Input> => {
+	const camelCased = input.replace(/(?:-|_)(\w)/g, (_, c) => {
+		return c ? c.toUpperCase() : "";
+	});
+
+	return (camelCased[0].toUpperCase() +
+		camelCased.slice(1)) as PascalCase<Input>;
+};

test/SliceZone.test.tsx

@@ -172,18 +172,32 @@ test.skip("TODO component does not warn in production", () => {
 });
 
 test("renders components from a resolver function for backwards compatibility with next-slicezone", async (t) => {
-	const slices = [{ slice_type: "foo" }, { slice_type: "bar" }] as const;
+	const slices = [
+		{
+			slice_type: "foo_bar",
+		},
+		{
+			slice_type: "barFoo",
+		},
+		{
+			slice_type: "baz-qux",
+		},
+	] as const;
 
 	const resolver: SliceZoneResolver<typeof slices[number]> = ({
 		sliceName,
 	}) => {
 		switch (sliceName) {
-			case "foo": {
-				return (props) => <StringifySliceComponent id="foo" {...props} />;
+			case "FooBar": {
+				return (props) => <StringifySliceComponent id="foo_bar" {...props} />;
+			}
+
+			case "BarFoo": {
+				return (props) => <StringifySliceComponent id="barFoo" {...props} />;
 			}
 
-			case "bar": {
-				return (props) => <StringifySliceComponent id="bar" {...props} />;
+			case "BazQux": {
+				return (props) => <StringifySliceComponent id="baz-qux" {...props} />;
 			}
 		}
 	};
@@ -192,19 +206,26 @@ test("renders components from a resolver function for backwards compatibility wi
 	const expected = renderJSON(
 		<>
 			<StringifySliceComponent
-				id="foo"
+				id="foo_bar"
 				slice={slices[0]}
 				index={0}
 				slices={slices}
 				context={{}}
 			/>
 			<StringifySliceComponent
-				id="bar"
+				id="barFoo"
 				slice={slices[1]}
 				index={1}
 				slices={slices}
 				context={{}}
 			/>
+			<StringifySliceComponent
+				id="baz-qux"
+				slice={slices[2]}
+				index={2}
+				slices={slices}
+				context={{}}
+			/>
 		</>,
 	);