@prismicio/react 2.0.0 → 2.0.3-debug.1

package/src/PrismicToolbar.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useEffect } from "react";
 
 /**
  * Props for `<PrismicToolbar>`.
@@ -27,10 +27,10 @@ export const PrismicToolbar = ({
 	type = "new",
 }: PrismicToolbarProps): null => {
 	const src = `https://static.cdn.prismic.io/prismic.js?repo=${repositoryName}${
-		type === "new" ? "&type=new" : ""
+		type === "new" ? "&new=true" : ""
 	}`;
 
-	React.useEffect(() => {
+	useEffect(() => {
 		const existingScript = document.querySelector(`script[src="${src}"]`);
 
 		if (!existingScript) {
@@ -45,7 +45,7 @@ export const PrismicToolbar = ({
 
 			document.body.appendChild(script);
 		}
-	}, [repositoryName, type]);
+	}, [repositoryName, type, src]);
 
 	return null;
 };

package/src/SliceZone.tsx

@@ -1,7 +1,10 @@
 import * as React from "react";
+import { useEffect, useMemo } 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
@@ -118,7 +121,7 @@ export const TODOSliceComponent = __PRODUCTION__
 	: <TSlice extends SliceLike, TContext>({
 			slice,
 	  }: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
-			React.useEffect(() => {
+			useEffect(() => {
 				console.warn(
 					`[SliceZone] Could not find a component for Slice type "${slice.slice_type}"`,
 					slice,
@@ -148,7 +151,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.
@@ -240,7 +243,7 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 	defaultComponent = TODOSliceComponent,
 	context = {} as TContext,
 }: SliceZoneProps<TSlice, TContext>): JSX.Element => {
-	const renderedSlices = React.useMemo(() => {
+	const renderedSlices = useMemo(() => {
 		return slices.map((slice, index) => {
 			let Comp = (components[slice.slice_type as keyof typeof components] ||
 				defaultComponent) as SliceComponentType<TSlice, TContext>;
@@ -249,7 +252,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 +273,7 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 				/>
 			);
 		});
-	}, [components, context, defaultComponent, slices]);
+	}, [components, context, defaultComponent, slices, resolver]);
 
 	return <>{renderedSlices}</>;
 };

package/src/lib/pascalCase.ts

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

package/src/usePrismicContext.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useContext } from "react";
 
 import { PrismicContext, PrismicContextValue } from "./PrismicProvider";
 
@@ -9,5 +9,5 @@ import { PrismicContext, PrismicContextValue } from "./PrismicProvider";
  * @returns The closest `<PrismicProvider>` context value.
  */
 export const usePrismicContext = (): PrismicContextValue => {
-	return React.useContext(PrismicContext) || {};
+	return useContext(PrismicContext) || {};
 };

package/src/usePrismicPreviewResolver.ts

@@ -1,6 +1,6 @@
 import type * as prismic from "@prismicio/client";
 
-import * as React from "react";
+import { useEffect } from "react";
 
 import { usePrismicContext } from "./usePrismicContext";
 import {
@@ -83,7 +83,7 @@ export const usePrismicPreviewResolver = (
 	const [resolvedURL] = result;
 	const { navigate } = args;
 
-	React.useEffect(() => {
+	useEffect(() => {
 		if (resolvedURL && navigate) {
 			navigate(resolvedURL);
 		}

package/src/useStatefulPrismicClientMethod.ts

@@ -1,6 +1,6 @@
 import type * as prismic from "@prismicio/client";
 
-import * as React from "react";
+import { useEffect, useMemo, useReducer } from "react";
 
 import { PrismicClientHookState } from "./types";
 import { usePrismicClient } from "./usePrismicClient";
@@ -133,11 +133,11 @@ export const useStatefulPrismicClientMethod = <
 
 	const client = usePrismicClient(explicitClient || lastArgExplicitClient);
 
-	const [state, dispatch] = React.useReducer<
+	const [state, dispatch] = useReducer<
 		React.Reducer<StateMachineState<TData>, StateMachineAction<TData>>
 	>(reducer, initialState);
 
-	React.useEffect(
+	useEffect(
 		() => {
 			// Used to prevent dispatching an action if the hook was cleaned up.
 			let didCancel = false;
@@ -186,7 +186,7 @@ export const useStatefulPrismicClientMethod = <
 		],
 	);
 
-	return React.useMemo(
+	return useMemo(
 		() => [
 			state.data,
 			{