feat: full RSC compatibility (maybe)

package.json

@@ -18,29 +18,21 @@
 	"sideEffects": false,
 	"exports": {
 		".": {
-			"require": "./dist/index.cjs",
-			"import": "./dist/index.js"
-		},
-		"./rsc": {
-			"require": "./dist/rsc.cjs",
-			"import": "./dist/rsc.js"
+			"react-server": {
+				"import": "./dist/react-server.js",
+				"require": "./dist/react-server.cjs"
+			},
+			"default": {
+				"import": "./dist/index.js",
+				"require": "./dist/index.cjs"
+			}
 		},
 		"./package.json": "./package.json"
 	},
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
 	"react-native": "dist/index.js",
 	"types": "dist/index.d.ts",
-	"typesVersions": {
-		"*": {
-			"*": [
-				"dist/index.d.ts"
-			],
-			"rsc": [
-				"dist/rsc/index.d.ts"
-			]
-		}
-	},
 	"files": [
 		"dist",
 		"src"
@@ -92,6 +84,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-test-renderer": "^18.2.0",
+		"rollup-plugin-preserve-directives": "^0.1.0",
 		"size-limit": "^8.2.4",
 		"standard-version": "^9.5.0",
 		"typescript": "^5.0.3",

src/PrismicImage.tsx

@@ -84,10 +84,29 @@ export type PrismicImageProps = Omit<
 		  }
 	);
 
-const _PrismicImage = (
+/**
+ * React component that renders an image from a Prismic Image field or one of
+ * its thumbnails. It will automatically set the `alt` attribute using the Image
+ * field's `alt` property.
+ *
+ * By default, a widths-based srcset will be used to support responsive images.
+ * This ensures only the smallest image needed for a browser is downloaded.
+ *
+ * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default
+ * pixel densities can be used by using `pixelDensities="defaults"`.
+ *
+ * **Note**: If you are using a framework that has a native image component,
+ * such as Next.js and Gatsby, prefer using those image components instead. They
+ * can provide deeper framework integration than `<PrismicImage>`.
+ *
+ * @param props - Props for the component.
+ *
+ * @returns A responsive image component for the given Image field.
+ */
+export const PrismicImage = React.forwardRef(function PrismicImage(
 	props: PrismicImageProps,
 	ref: React.ForwardedRef<HTMLImageElement>,
-): JSX.Element | null => {
+): JSX.Element | null {
 	const {
 		field,
 		alt,
@@ -157,29 +176,4 @@ const _PrismicImage = (
 	} else {
 		return null;
 	}
-};
-
-if (!__PRODUCTION__) {
-	_PrismicImage.displayName = "PrismicImage";
-}
-
-/**
- * React component that renders an image from a Prismic Image field or one of
- * its thumbnails. It will automatically set the `alt` attribute using the Image
- * field's `alt` property.
- *
- * By default, a widths-based srcset will be used to support responsive images.
- * This ensures only the smallest image needed for a browser is downloaded.
- *
- * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default
- * pixel densities can be used by using `pixelDensities="defaults"`.
- *
- * **Note**: If you are using a framework that has a native image component,
- * such as Next.js and Gatsby, prefer using those image components instead. They
- * can provide deeper framework integration than `<PrismicImage>`.
- *
- * @param props - Props for the component.
- *
- * @returns A responsive image component for the given Image field.
- */
-export const PrismicImage = React.forwardRef(_PrismicImage);
+});

src/PrismicLink.tsx

@@ -1,27 +1,29 @@
+"use client";
+
 import * as React from "react";
 
 import {
-	PrismicLink as BasePrismicLink,
+	PrismicLink as ServerPrismicLink,
 	LinkProps,
-	LooseLinkProps,
 	PrismicLinkProps,
+	defaultComponent,
 } from "./react-server/PrismicLink";
 
 import { usePrismicContext } from "./usePrismicContext";
 
-export { PrismicLinkProps, LooseLinkProps };
+export { LinkProps, PrismicLinkProps };
 
 export const PrismicLink = React.forwardRef(function PrismicLink<
-	InternalComponent extends React.ElementType<LinkProps> = "a",
-	ExternalComponent extends React.ElementType<LinkProps> = "a",
+	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
+	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
 >(
-	props: PrismicLinkProps<InternalComponent, ExternalComponent>,
-	ref: React.ForwardedRef<unknown>,
+	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps>,
+	ref: React.ForwardedRef<Element>,
 ) {
 	const context = usePrismicContext();
 
 	return (
-		<BasePrismicLink
+		<ServerPrismicLink
 			ref={ref}
 			linkResolver={context.linkResolver}
 			internalComponent={context.internalLinkComponent}
@@ -30,11 +32,10 @@ export const PrismicLink = React.forwardRef(function PrismicLink<
 		/>
 	);
 }) as <
-	InternalComponent extends React.ElementType<LinkProps> = "a",
-	ExternalComponent extends React.ElementType<LinkProps> = "a",
+	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
+	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
 >(
-	props: PrismicLinkProps<InternalComponent, ExternalComponent> & {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		ref?: React.ForwardedRef<any>;
+	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
+		ref?: React.ForwardedRef<Element>;
 	},
 ) => JSX.Element;

src/PrismicProvider.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 import * as React from "react";
 import * as prismic from "@prismicio/client";
 
-import { LooseLinkProps } from "./react-server/PrismicLink";
 import { JSXFunctionSerializer, JSXMapSerializer } from "./types";
+import { LinkProps } from "./PrismicLink";
 
 /**
  * React context value containing shared configuration for `@prismicio/react`
@@ -62,13 +64,13 @@ export type PrismicContextValue<
 	 * The component rendered by `<PrismicLink>` for internal URLs. Defaults to
 	 * `<a>`.
 	 */
-	internalLinkComponent?: React.ComponentType<LooseLinkProps>;
+	internalLinkComponent?: React.ComponentType<LinkProps>;
 
 	/**
 	 * The component rendered by `<PrismicLink>` for external URLs. Defaults to
 	 * `<a>`.
 	 */
-	externalLinkComponent?: React.ComponentType<LooseLinkProps>;
+	externalLinkComponent?: React.ComponentType<LinkProps>;
 
 	/**
 	 * Children for the component.
@@ -86,7 +88,8 @@ export const PrismicContext = React.createContext<PrismicContextValue>({});
  * Props for `<PrismicProvider>`.
  */
 export type PrismicProviderProps<
-	LinkResolverFunction extends prismic.LinkResolverFunction,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction<any>,
 > = PrismicContextValue<LinkResolverFunction>;
 
 /**