feat: (#591) adding changeset denoting breaking change

.changeset/twenty-weeks-kiss.md

@@ -0,0 +1,5 @@
+---
+'@faustjs/next': minor
+---
+
+**BREAKING**: Rename `HeadlessProvider` to `FaustProvider`

docs/next/guides/fetching-data.mdx

@@ -104,20 +104,20 @@ To do this you will need to run `gqty generate` again. Running `gqty generate` w
 
 ## Providing the GQty Client to Faust.js
 
-Using the boilerplate client code will provide two different GQty clients that you can use depending upon whether you are on the client or server. However, you will still need to provide the client to Faust.js so that it can use it to fetch data. To do this you can use the `HeadlessProvider` component published by Faust.js, and provide it the GQty client you want to use. This is done in your `_app.tsx` file as follows:
+Using the boilerplate client code will provide two different GQty clients that you can use depending upon whether you are on the client or server. However, you will still need to provide the client to Faust.js so that it can use it to fetch data. To do this you can use the `FaustProvider` component published by Faust.js, and provide it the GQty client you want to use. This is done in your `_app.tsx` file as follows:
 
 ```tsx title=src/pages/_app.tsx {2,9,11}
 import 'faust.config';
-import { HeadlessProvider } from '@faustjs/next';
+import { FaustProvider } from '@faustjs/next';
 import { client } from 'client';
 import type { AppProps } from 'next/app';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <HeadlessProvider client={client} pageProps={pageProps}>
+      <FaustProvider client={client} pageProps={pageProps}>
         <Component {...pageProps} />
-      </HeadlessProvider>
+      </FaustProvider>
     </>
   );
 }

docs/next/guides/post-page-previews.mdx

@@ -39,16 +39,16 @@ You'll need to import it at the top of your `_app.tsx` file to ensure the `confi
 
 ```tsx title=_app.tsx {1}
 import 'faust.config';
-import { HeadlessProvider } from '@faustjs/next';
+import { FaustProvider } from '@faustjs/next';
 import { client } from 'client';
 import type { AppProps } from 'next/app';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <HeadlessProvider client={client} pageProps={pageProps}>
+      <FaustProvider client={client} pageProps={pageProps}>
         <Component {...pageProps} />
-      </HeadlessProvider>
+      </FaustProvider>
     </>
   );
 }

docs/next/guides/ssr-ssg.mdx

@@ -158,30 +158,30 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
 As mentioned in `getNextStaticProps`, the reason `MyPage` and `client` are passed to `getNextServerSideProps` is because under the hood Faust.js performs a skeleton render of the page component to know what data to fetch and what queries to build. This allows the developer to not have to think about batching/constructing queries, or data fetching.
 
-## Rehydration Using `<HeadlessProvider />`
+## Rehydration Using `<FaustProvider />`
 
-In order to properly facilitate SSR and SSG you must use the built-in component published in `faustjs/next` called `HeadlessProvider`. This component performs the following:
+In order to properly facilitate SSR and SSG you must use the built-in component published in `faustjs/next` called `FaustProvider`. This component performs the following:
 
 1. Sets the `client` to be used with every request for WordPress data.
 1. Hydrates the `client` cache using the prepared cache snapshot from `getNextServerSideProps` or `getNextStaticProps`.
 1. Renders its `children`
 
-### Adding `<HeadlessProvider />` to your `_app.tsx`
+### Adding `<FaustProvider />` to your `_app.tsx`
 
-Using the `HeadlessProvider` component us easy, and if you are using an example `next` project published by Faust.js it will happen automatically. If you are adding `Faust.js` to your project, you will want to put `HeadlessProvider` at the top of your component tree. Typically in a Next.js app this means in your `pages/_app.tsx` file as follows:
+Using the `FaustProvider` component us easy, and if you are using an example `next` project published by Faust.js it will happen automatically. If you are adding `Faust.js` to your project, you will want to put `FaustProvider` at the top of your component tree. Typically in a Next.js app this means in your `pages/_app.tsx` file as follows:
 
 ```tsx title=src/pages/_app.tsx {9,11}
 import 'faust.config';
-import { HeadlessProvider } from '@faustjs/next';
+import { FaustProvider } from '@faustjs/next';
 import { client } from 'client';
 import type { AppProps } from 'next/app';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <HeadlessProvider client={client} pageProps={pageProps}>
+      <FaustProvider client={client} pageProps={pageProps}>
         <Component {...pageProps} />
-      </HeadlessProvider>
+      </FaustProvider>
     </>
   );
 }

docs/tutorial/setup-faustjs.mdx

@@ -211,9 +211,9 @@ npm run generate
 
 The `generate` script will create a `client/schema.generated.ts` file upon completion.
 
-### Implement the `<HeadlessProvider>` Component
+### Implement the `<FaustProvider>` Component
 
-The `<HeadlessProvider>` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) that wraps your Next.js app to provide Faust.js with the context needed for fetching data and caching.
+The `<FaustProvider>` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) that wraps your Next.js app to provide Faust.js with the context needed for fetching data and caching.
 
 Replace the existing `pages/_app.tsx` file contents with the following:
 
@@ -222,14 +222,14 @@ import '../faust.config';
 import '../styles/globals.css';
 
 import type { AppProps /*, AppContext */ } from 'next/app';
-import { HeadlessProvider } from '@faustjs/next';
+import { FaustProvider } from '@faustjs/next';
 import { client } from '../client';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <HeadlessProvider client={client} pageProps={pageProps}>
+    <FaustProvider client={client} pageProps={pageProps}>
       <Component {...pageProps} />
-    </HeadlessProvider>
+    </FaustProvider>
   );
 }
 

examples/next/getting-started/src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import 'faust.config';
-import { HeadlessProvider } from '@faustjs/next';
+import { FaustProvider } from '@faustjs/next';
 import 'normalize.css/normalize.css';
 import React from 'react';
 import 'scss/main.scss';
@@ -9,9 +9,9 @@ import type { AppProps } from 'next/app';
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <HeadlessProvider client={client} pageProps={pageProps}>
+      <FaustProvider client={client} pageProps={pageProps}>
         <Component {...pageProps} />
-      </HeadlessProvider>
+      </FaustProvider>
     </>
   );
 }

packages/next/src/components/HeadlessProvider.tsx → packages/next/src/components/FaustProvider.tsx

@@ -6,14 +6,14 @@ import {
   CLIENT_CACHE_PROP,
   PageProps,
 } from '../server/getProps';
-import { HeadlessContext } from '../gqty/client';
+import { FaustContext } from '../gqty/client';
 
 /**
- * The HeadlessProvider is a React component required to properly facilitate SSR and SSG for Faust.js.
+ * The FaustProvider is a React component required to properly facilitate SSR and SSG for Faust.js.
  *
- * @see https://faustjs.org/docs/next/guides/ssr-ssg#rehydration-using-headlessprovider-
+ * @see https://faustjs.org/docs/next/guides/ssr-ssg#rehydration-using-faustprovider-
  */
-export function HeadlessProvider<Props = Record<string, unknown>>({
+export function FaustProvider<Props = Record<string, unknown>>({
   children,
   pageProps,
   client,
@@ -39,11 +39,11 @@ export function HeadlessProvider<Props = Record<string, unknown>>({
   });
 
   return (
-    <HeadlessContext.Provider
+    <FaustContext.Provider
       value={{
         client,
       }}>
       {children}
-    </HeadlessContext.Provider>
+    </FaustContext.Provider>
   );
 }

packages/next/src/components/index.ts

@@ -1 +1 @@
-export * from './HeadlessProvider';
+export * from './FaustProvider';

packages/next/src/export/index.ts

@@ -9,4 +9,4 @@ export {
   getNextStaticProps,
   is404,
 } from '../server';
-export { HeadlessProvider } from '../components';
+export { FaustProvider } from '../components';

packages/next/src/gqty/client.ts

@@ -51,13 +51,13 @@ export interface NextClient<
   context: WithClient<IncomingMessage, Schema> | undefined;
 }
 
-export interface HeadlessContextType {
+export interface FaustContextType {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   client?: NextClient<RequiredSchema>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const HeadlessContext = React.createContext<HeadlessContextType>({});
+export const FaustContext = React.createContext<FaustContextType>({});
 
 /* eslint-disable @typescript-eslint/ban-types, @typescript-eslint/explicit-module-boundary-types */
 export function getClient<
@@ -100,7 +100,7 @@ export function getClient<
   let nextClient: NextClient<Schema, ObjectTypesNames, ObjectTypes>;
 
   function useClient() {
-    let client: typeof nextClient | undefined = useContext(HeadlessContext)
+    let client: typeof nextClient | undefined = useContext(FaustContext)
       ?.client as typeof nextClient;
 
     if (haveServerContext || !isObject(client)) {
@@ -111,7 +111,7 @@ export function getClient<
   }
 
   function useAuthClient() {
-    let client: typeof nextClient | undefined = useContext(HeadlessContext)
+    let client: typeof nextClient | undefined = useContext(FaustContext)
       ?.client as typeof nextClient;
 
     if (haveServerContext || !isObject(client)) {
@@ -140,7 +140,7 @@ export function getClient<
     nextClient.useSubscription = reactClient.useSubscription;
     nextClient.useClient = () => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      useContext(HeadlessContext);
+      useContext(FaustContext);
       return nextClient;
     };
 
@@ -152,7 +152,7 @@ export function getClient<
     nextClient.auth.useSubscription = authReactClient.useSubscription;
     nextClient.auth.useClient = () => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      useContext(HeadlessContext);
+      useContext(FaustContext);
       return nextClient.auth;
     };
 

packages/next/src/server/getProps.tsx

@@ -13,7 +13,7 @@ import { RouterContext } from 'next/dist/shared/lib/router-context';
 
 import React, { FunctionComponent, ComponentClass } from 'react';
 import { config } from '../config/config';
-import { getClient, HeadlessContext } from '../gqty/client';
+import { getClient, FaustContext } from '../gqty/client';
 
 import {
   hasCategoryId,
@@ -79,10 +79,10 @@ export async function getProps<
           <RouterContext.Provider
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             value={{ query: { ...context.params } } as any}>
-            <HeadlessContext.Provider value={{ client }}>
+            <FaustContext.Provider value={{ client }}>
               {/* eslint-disable-next-line react/jsx-props-no-spreading */}
               <Page {...(props as Props)} />
-            </HeadlessContext.Provider>
+            </FaustContext.Provider>
           </RouterContext.Provider>,
         );
 

packages/next/test/withFaust.test.ts

@@ -1,4 +1,4 @@
-import { createRedirects, withFaust } from '../src/withFaust';
+import { createRedirects, withFaust } from '../src/config/withFaust';
 
 describe('withFaust', () => {
   test('withFaust merges default config with user specified config', async () => {