@plasmicapp/react-web 1.0.5 → 1.0.7

package/dist/react-web.esm.js

@@ -1776,6 +1776,63 @@ function createUseScreenVariants(isMulti, screenQueries) {
 }
 
 var PlasmicRootContext = React.createContext(undefined);
+/**
+ * PlasmicRootProvider sets up the React context that Plasmic-generated components
+ * rely on including data sources, i18n, Head, and Link.
+ *
+ * In Next.js app router, props passed from a Server to a Client Components must be serializable
+ * but several PlasmicRootProvider props are not (e.g. `loader`, `Link` from `next/link`).
+ * We recommend defining a Client Component wrapper (`ClientPlasmicRootProvider` in
+ * `plasmic-init-client.tsx`) that imports non-serializable values and passes them to
+ * PlasmicRootProvider (and only accepts serializable props from its caller).
+ *
+ * Loader example:
+ *
+ * ```tsx
+ * // plasmic-init-client.tsx
+ * "use client";
+ * import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+ * import { PLASMIC } from "@/plasmic-init";
+ * export function ClientPlasmicRootProvider(
+ *   props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">
+ * ) {
+ *   return <PlasmicRootProvider loader={PLASMIC} {...props} />;
+ * }
+ * ```
+ *
+ * Codegen example:
+ *
+ * ```tsx
+ * // plasmic-init-client.tsx
+ * "use client";
+ * import { PlasmicRootProvider } from "@plasmicapp/react-web";
+ * import Link from "next/link";
+ * export function ClientPlasmicRootProvider(
+ *   props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "Link">
+ * ) {
+ *   return <PlasmicRootProvider Link={Link} {...props} />;
+ * }
+ * ```
+ *
+ * A Server Component can then render `ClientPlasmicRootProvider` and pass
+ * serializable props such as prefetched data and children:
+ *
+ * ```tsx
+ * import { PLASMIC } from "@/plasmic-init";
+ * import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+ * export default async function MyPage() {
+ *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
+ *   return (
+ *     <ClientPlasmicRootProvider prefetchedData={prefetchedData}>
+ *       {yourContent()}
+ *     </ClientPlasmicRootProvider>
+ *   );
+ * }
+ * ```
+ *
+ * See https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ * for more on the Server/Client Component boundary.
+ */
 function PlasmicRootProvider(props) {
     var _a;
     var platform = props.platform, children = props.children, userAuthToken = props.userAuthToken, isUserLoading = props.isUserLoading, authRedirectUri = props.authRedirectUri, user = props.user, disableLoadingBoundary = props.disableLoadingBoundary, suspenseFallback = props.suspenseFallback;