Next refactor (#605)

* feat: (#591) migrating to src/gqty and exposing @faustjs/next/client

* feat: (#591) creating @faustjs/next/utils export

* feat: (#591) creating @faustjs/next/config export

* feat: (#591) creating @faustjs/next/log export

* feat: (#591) creating @faustjs/next/server export

* feat: (#591) creating @faustjs/next/components export

* feat: (#591) limiting root @faustjs/next exports to those needed by client

* feat: (#591) adding changeset denoting breaking change

* fix: exporting components from declaration

Co-authored-by: Blake Wilson <[email protected]>

.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/client.d.ts

@@ -0,0 +1 @@
+export * from './dist/cjs/export/client';

packages/next/components.d.ts

@@ -0,0 +1 @@
+export * from './dist/cjs/export/components';

packages/next/config.d.ts

@@ -0,0 +1 @@
+export * from './dist/cjs/export/config';

packages/next/log.d.ts

@@ -0,0 +1 @@
+export * from './dist/cjs/export/log';

packages/next/package.json

@@ -2,13 +2,37 @@
   "name": "@faustjs/next",
   "version": "0.12.4",
   "description": "This module helps you use WordPress as a Headless CMS with Next.js",
-  "main": "dist/cjs/index.js",
-  "module": "dist/mjs/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "main": "dist/cjs/export/index.js",
+  "module": "dist/mjs/export/index.js",
+  "types": "dist/cjs/export/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/mjs/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./dist/mjs/export/index.js",
+      "require": "./dist/cjs/export/index.js"
+    },
+    "./client": {
+      "import": "./dist/mjs/export/client.js",
+      "require": "./dist/cjs/export/client.js"
+    },
+    "./components": {
+      "import": "./dist/mjs/export/components.js",
+      "require": "./dist/cjs/export/components.js"
+    },
+    "./config": {
+      "import": "./dist/mjs/export/config.js",
+      "require": "./dist/cjs/export/config.js"
+    },
+    "./log": {
+      "import": "./dist/mjs/export/log.js",
+      "require": "./dist/cjs/export/log.js"
+    },
+    "./server": {
+      "import": "./dist/mjs/export/server.js",
+      "require": "./dist/cjs/export/server.js"
+    },
+    "./utils": {
+      "import": "./dist/mjs/export/utils.js",
+      "require": "./dist/cjs/export/utils.js"
     }
   },
   "scripts": {

packages/next/server.d.ts

@@ -0,0 +1 @@
+export * from './dist/cjs/export/server';

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

@@ -1,19 +1,19 @@
 import isNil from 'lodash/isNil';
 import React from 'react';
-import type { getClient } from './client';
+import type { getClient } from '../gqty/client';
 import {
   AUTH_CLIENT_CACHE_PROP,
   CLIENT_CACHE_PROP,
   PageProps,
-} from './getProps';
-import { HeadlessContext } from './client';
+} from '../server/getProps';
+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,
@@ -27,8 +27,8 @@ export function HeadlessProvider<Props = Record<string, unknown>>({
     useHydrateCache,
     auth: { useHydrateCache: useAuthHydrateCache },
   } = client;
-  const cacheSnapshot = pageProps[CLIENT_CACHE_PROP];
-  const authSnapshot = pageProps[AUTH_CLIENT_CACHE_PROP];
+  const cacheSnapshot = pageProps?.[CLIENT_CACHE_PROP];
+  const authSnapshot = pageProps?.[AUTH_CLIENT_CACHE_PROP];
 
   useHydrateCache({
     cacheSnapshot: isNil(cacheSnapshot) ? undefined : cacheSnapshot,
@@ -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

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

packages/next/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './withFaust';

packages/next/src/export/client.ts

@@ -0,0 +1 @@
+export * from '../gqty';

packages/next/src/export/components.ts

@@ -0,0 +1 @@
+export * from '../components';

packages/next/src/export/config.ts

@@ -0,0 +1 @@
+export * from '../config';

packages/next/src/export/index.ts

@@ -0,0 +1,12 @@
+export { Config, WithFaustConfig, config, withFaust } from '../config';
+export { getClient, NextClient } from '../gqty';
+export { logQueries } from '../log';
+export {
+  GetNextServerSidePropsConfig,
+  GetNextStaticPropsConfig,
+  Is404Config,
+  getNextServerSideProps,
+  getNextStaticProps,
+  is404,
+} from '../server';
+export { FaustProvider } from '../components';

packages/next/src/export/log.ts

@@ -0,0 +1 @@
+export * from '../log';

packages/next/src/export/server.ts

@@ -0,0 +1 @@
+export * from '../server';

packages/next/src/export/utils.ts

@@ -0,0 +1 @@
+export * from '../utils';

packages/next/src/client.ts → 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/hooks/useCategory.ts → packages/next/src/gqty/hooks/useCategory.ts

@@ -3,7 +3,7 @@ import type { RequiredSchema } from '@faustjs/react';
 import { useRouter } from 'next/router';
 import isString from 'lodash/isString';
 import defaults from 'lodash/defaults';
-import { hasCategoryId, hasCategorySlug } from '../utils';
+import { hasCategoryId, hasCategorySlug } from '../../utils';
 import type { NextClientHooks } from '.';
 
 export function create<Schema extends RequiredSchema>(

packages/next/src/hooks/usePage.ts → packages/next/src/gqty/hooks/usePage.ts

@@ -3,7 +3,7 @@ import type { RequiredSchema } from '@faustjs/react';
 import { useRouter } from 'next/router';
 import defaults from 'lodash/defaults';
 import isString from 'lodash/isString';
-import { hasPageId, hasPageUri } from '../utils';
+import { hasPageId, hasPageUri } from '../../utils';
 import type { NextClientHooks } from '.';
 
 export function create<Schema extends RequiredSchema>(

packages/next/src/hooks/usePost.ts → packages/next/src/gqty/hooks/usePost.ts

@@ -3,7 +3,7 @@ import type { RequiredSchema } from '@faustjs/react';
 import { useRouter } from 'next/router';
 import defaults from 'lodash/defaults';
 import isString from 'lodash/isString';
-import { hasPostId, hasPostSlug, hasPostUri } from '../utils';
+import { hasPostId, hasPostSlug, hasPostUri } from '../../utils';
 import type { NextClientHooks } from '.';
 
 export function create<Schema extends RequiredSchema>(

packages/next/src/hooks/usePosts.ts → packages/next/src/gqty/hooks/usePosts.ts

@@ -1,7 +1,7 @@
 import type { RequiredSchema } from '@faustjs/react';
 import { useRouter } from 'next/router';
 import defaults from 'lodash/defaults';
-import { hasCategoryId, hasCategorySlug } from '../utils';
+import { hasCategoryId, hasCategorySlug } from '../../utils';
 import type { NextClientHooks } from '.';
 
 export function create<Schema extends RequiredSchema>(

packages/next/src/hooks/usePreview.ts → packages/next/src/gqty/hooks/usePreview.ts

@@ -2,7 +2,7 @@ import { PageIdType, PostIdType } from '@faustjs/core/client';
 import type { RequiredSchema } from '@faustjs/react';
 import isUndefined from 'lodash/isUndefined';
 import { useRouter } from 'next/router';
-import { hasPageId, hasPostId } from '../utils';
+import { hasPageId, hasPostId } from '../../utils';
 import type { NextClientHooks, NextClientHooksWithAuth } from '.';
 
 export type UsePreviewResponse<Schema extends RequiredSchema> =

packages/next/src/gqty/index.ts

@@ -0,0 +1,2 @@
+export * from './client';
+export * from './hooks';

packages/next/src/log/index.ts

@@ -0,0 +1 @@
+export * from './log';

packages/next/src/log.ts → packages/next/src/log/log.ts

@@ -1,6 +1,6 @@
 import type { LoggerOptions } from '@gqty/logger';
 import defaults from 'lodash/defaults';
-import type { NextClient } from './client';
+import type { NextClient } from '../gqty/client';
 
 export async function logQueries(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any