Feat isr timing (#520)

* feat: (#516) adding a next config, moving nextConfig to withFaust

* fix: removing try/catch from getProps and adding beforeEach to getProps.test for creating config

* feat: (#516) configuration is separate per package

* feat: (#516) updating tests, docs, exports, and examples to use config instead of headlessConfig

* doc: (#516) adding changeset for ISR timing configuration

.changeset/large-humans-sing.md

@@ -0,0 +1,55 @@
+---
+'@faustjs/core': minor
+'@faustjs/next': minor
+'@faustjs/react': minor
+---
+
+`headlessConfig` from `@faustjs/core` is now just `config`, and `@faustjs/next` has its own `config` with a global revalidate option.
+
+Your `faust.config.js` needs to change to look like this:
+
+```ts
+import { config as coreConfig } from '@faustjs/core';
+
+if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
+  console.error(
+    'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?',
+  );
+}
+
+/**
+ * @type {import("@faustjs/core").Config}
+ */
+export default coreConfig({
+  wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
+  apiClientSecret: process.env.WP_HEADLESS_SECRET,
+});
+```
+
+Or, to configure the global `revalidate` option in `@faustjs/next`:
+
+
+```ts
+import { config as coreConfig } from '@faustjs/core';
+import { config as nextConfig } from '@faustjs/next';
+
+if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
+  console.error(
+    'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?',
+  );
+}
+
+nextConfig({
+  revalidate: 60, // 1 minute
+});
+
+/**
+ * @type {import("@faustjs/core").Config}
+ */
+export default coreConfig({
+  wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
+  apiClientSecret: process.env.WP_HEADLESS_SECRET,
+});
+```
+
+> **NOTE**: `@faustjs/next` defaults to `revalidate: 900` (15 minutes).

docs/next/guides/authentication.mdx

@@ -51,7 +51,7 @@ This strategy is great for use cases where you want to support a more "white lab
 To use this strategy, you'll need to configure your `faust.config.js` file to use the `local` authentication strategy, in addition to the route of your Next.js login page. Take the following `faust.config.js` file for example:
 
 ```tsx title=faust.config.js {15,16}
-import { headlessConfig } from '@faustjs/core';
+import { config as coreConfig } from '@faustjs/core';
 
 if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
   console.error(
@@ -60,9 +60,9 @@ if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
 }
 
 /**
- * @type {import("@faustjs/core").HeadlessConfig}
+ * @type {import("@faustjs/core").Config}
  */
-export default headlessConfig({
+export default coreConfig({
   wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
   apiClientSecret: process.env.WP_HEADLESS_SECRET,
   authType: 'local',

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

@@ -35,7 +35,7 @@ WP_HEADLESS_SECRET=xxxx
 
 Like the [`next/getting-started`](https://github.com/wpengine/faustjs/tree/canary/examples/next/getting-started) Faust.js example, your [`faust.config.js`](https://github.com/wpengine/faustjs/blob/canary/examples/next/getting-started/src/faust.config.js) file will live in the `src` directory.
 
-You'll need to import it at the top of your `_app.tsx` file to ensure the `headlessConfig` is called, and your Faust.js app is initialized properly.
+You'll need to import it at the top of your `_app.tsx` file to ensure the `config` is set, and your Faust.js app is initialized properly.
 
 ```tsx title=_app.tsx {1}
 import 'faust.config';

docs/tutorial/setup-faustjs.mdx

@@ -64,7 +64,7 @@ npm install --save-dev @gqty/cli dotenv
 Create a `faust.config.js` file in the root of your project:
 
 ```js title=faust.config.js
-import { headlessConfig } from '@faustjs/core';
+import { config as coreConfig } from '@faustjs/core';
 
 if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
   console.error(
@@ -73,9 +73,9 @@ if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
 }
 
 /**
- * @type {import("@faustjs/core").HeadlessConfig}
+ * @type {import("@faustjs/core").Config}
  */
-export default headlessConfig({
+export default coreConfig({
   wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
   apiClientSecret: process.env.WP_HEADLESS_SECRET,
 });

examples/next/getting-started/src/faust.config.js

@@ -1,4 +1,4 @@
-import { headlessConfig } from '@faustjs/core';
+import { config as coreConfig } from '@faustjs/core';
 
 if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
   console.error(
@@ -7,9 +7,9 @@ if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
 }
 
 /**
- * @type {import("@faustjs/core").HeadlessConfig}
+ * @type {import("@faustjs/core").Config}
  */
-export default headlessConfig({
+export default coreConfig({
   wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
   apiClientSecret: process.env.WP_HEADLESS_SECRET,
 });

examples/react/getting-started/src/faust.config.js

@@ -1,12 +1,12 @@
 import dotenv from 'dotenv';
-import { headlessConfig } from '@faustjs/core';
+import { config } from '@faustjs/core';
 
 dotenv.config();
 
 /**
- * @type {import("@faustjs/core").HeadlessConfig}
+ * @type {import("@faustjs/core").Config}
  */
-export default headlessConfig({
+export default config({
   wpUrl: process.env.REACT_APP_WORDPRESS_URL || '',
   apiUrl: process.env.REACT_APP_API_URL,
   apiClientSecret: process.env.WP_HEADLESS_SECRET,

packages/core/src/auth/authorize.ts

@@ -1,6 +1,6 @@
 import 'isomorphic-fetch';
 import isString from 'lodash/isString';
-import { headlessConfig } from '../config';
+import { config } from '../config';
 import { getQueryParam, removeURLParam } from '../utils';
 import { fetchAccessToken } from './client/accessToken';
 
@@ -23,7 +23,7 @@ export async function ensureAuthorization(
 ): Promise<
   true | { redirect?: string | undefined; login?: string | undefined }
 > {
-  const { wpUrl } = headlessConfig();
+  const { wpUrl } = config();
   const { redirectUri, loginPageUri } = options || {};
 
   // Get the authorization code from the URL if it exists

packages/core/src/auth/client/accessToken.ts

@@ -1,4 +1,4 @@
-import { headlessConfig } from '../../config';
+import { config } from '../../config';
 import { isServerSide } from '../../utils';
 import isNil from 'lodash/isNil';
 import isString from 'lodash/isString';
@@ -57,7 +57,7 @@ export function setAccessToken(
  * @param {string} code An authorization code to fetch an access token
  */
 export async function fetchAccessToken(code?: string): Promise<string | null> {
-  const { apiEndpoint } = headlessConfig();
+  const { apiEndpoint } = config();
 
   if (isNil(apiEndpoint)) {
     throw new Error(

packages/core/src/auth/server/token.ts

@@ -1,6 +1,6 @@
 import 'isomorphic-fetch';
 import { Cookies } from './cookie';
-import { headlessConfig } from '../../config';
+import { config } from '../../config';
 import isNil from 'lodash/isNil';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
@@ -22,7 +22,7 @@ export class OAuth {
 
   constructor(cookies: Cookies) {
     this.cookies = cookies;
-    this.tokenKey = `${headlessConfig().wpUrl}-rt`;
+    this.tokenKey = `${config().wpUrl}-rt`;
   }
 
   public getRefreshToken(): string | undefined {
@@ -53,7 +53,7 @@ export class OAuth {
   }
 
   public async fetch(code?: string): Promise<OAuthTokenResponse> {
-    const { wpUrl, apiClientSecret } = headlessConfig();
+    const { wpUrl, apiClientSecret } = config();
 
     if (!apiClientSecret) {
       throw new Error(

packages/core/src/config/config.ts

@@ -10,18 +10,18 @@ import { isValidUrl } from '../utils';
 
 /* eslint-disable @typescript-eslint/ban-types */
 /**
- * The configuration for your headless site
+ * The configuration for your faustjs site
  *
  * @export
- * @interface HeadlessConfig
+ * @interface Config
  */
-export interface HeadlessConfig {
+export interface Config extends Record<string, unknown> {
   /**
    * Set this value to the base URL of your WordPress site. This will be used in order to
    * make queries to your WordPress site.
    *
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   wpUrl: string;
 
@@ -33,7 +33,7 @@ export interface HeadlessConfig {
    *
    * @default wpUrl + /graphql
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   gqlUrl?: string;
 
@@ -44,7 +44,7 @@ export interface HeadlessConfig {
    *
    * @default wpUrl
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   apiUrl?: string;
 
@@ -56,7 +56,7 @@ export interface HeadlessConfig {
    *
    * @default ''
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   blogUrlPrefix?: string;
 
@@ -67,15 +67,15 @@ export interface HeadlessConfig {
    *
    * @default /api/auth/wpe-headless
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   apiEndpoint?: string;
 
   /**
    * Set this to the secret provided by the Headless WordPress plugin to be used for authentication
    *
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   apiClientSecret?: string;
 
@@ -86,7 +86,7 @@ export interface HeadlessConfig {
    * where local assumes that you have setup a login page on your frontend site.
    *
    * @default redirect
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   authType?: 'redirect' | 'local';
 
@@ -97,15 +97,15 @@ export interface HeadlessConfig {
    *
    * @default /login
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   loginPagePath?: string;
 
   /**
    * Set to true if you want to disable internal console.log statements
    *
    * @type {string}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   disableLogging?: boolean;
 
@@ -116,7 +116,7 @@ export interface HeadlessConfig {
    * @param {string} url
    * @param {RequestInit} init
    * @returns {RequestContext}
-   * @memberof HeadlessConfig
+   * @memberof Config
    */
   applyRequestContext?(
     url: string,
@@ -125,20 +125,20 @@ export interface HeadlessConfig {
 }
 /* eslint-enable @typescript-eslint/ban-types */
 
-let wpeConfig: HeadlessConfig = {
+let faustConfig: Config = {
   wpUrl: '/',
 };
 let configSet = false;
 
 /**
- * Takes a HeadlessConfig and ensures the properties that need to be normalized
+ * Takes a Config and ensures the properties that need to be normalized
  * (e.g. URL slashes trimmed, etc) are handled.
  *
  * @export
- * @param {HeadlessConfig} config
- * @returns {HeadlessConfig}
+ * @param {Config} config
+ * @returns {Config}
  */
-export function normalizeConfig(config: HeadlessConfig): HeadlessConfig {
+export function normalizeConfig(config: Config): Config {
   const cfg = defaults({}, config, {
     blogUrlPrefix: '',
     apiUrl: '',
@@ -149,7 +149,7 @@ export function normalizeConfig(config: HeadlessConfig): HeadlessConfig {
   });
 
   Object.keys(cfg).forEach((key) => {
-    const keyValue: keyof HeadlessConfig = key as any;
+    const keyValue: keyof Config = key as any;
     const value = cfg[keyValue];
 
     if (isString(value)) {
@@ -173,27 +173,27 @@ export function normalizeConfig(config: HeadlessConfig): HeadlessConfig {
 }
 
 /**
- * A setter/getter for the HeadlessConfig
+ * A setter/getter for the Config
  *
  * @export
- * @param {HeadlessConfig} [config]
- * @returns {HeadlessConfig}
+ * @param {Config} [cfg]
+ * @returns {Config}
  */
-export function headlessConfig(config?: HeadlessConfig): HeadlessConfig {
-  if (!configSet && !isObject(config)) {
+export function config(cfg?: Config): Config {
+  if (!configSet && !isObject(cfg)) {
     throw new Error(
-      'You must set your headless configuration at the highest level in your application. `headlessConfig` was called prior to setting the configuration.',
+      'You must set your faustjs configuration at the highest level in your application. `config` was called with no arguments prior to setting the configuration.',
     );
   }
 
-  if (!isObject(config)) {
-    return wpeConfig;
+  if (!isObject(cfg)) {
+    return faustConfig;
   }
 
   configSet = true;
-  wpeConfig = normalizeConfig(config);
+  faustConfig = normalizeConfig(cfg);
 
-  return wpeConfig;
+  return faustConfig;
 }
 
 /**
@@ -203,7 +203,7 @@ export function headlessConfig(config?: HeadlessConfig): HeadlessConfig {
  * @returns
  */
 export function getGqlUrl(): string {
-  const { wpUrl, gqlUrl } = headlessConfig();
+  const { wpUrl, gqlUrl } = config();
 
   if (isNil(gqlUrl) || !isString(gqlUrl)) {
     return `${wpUrl}/graphql`;

packages/core/src/config/index.ts

@@ -1 +1 @@
-export { HeadlessConfig, headlessConfig, getGqlUrl } from './config';
+export { Config, config, getGqlUrl } from './config';

packages/core/src/utils/log.ts

@@ -1,7 +1,7 @@
-import { headlessConfig } from '../config';
+import { config } from '../config';
 
 export const log: typeof console.log = (...args) => {
-  if (headlessConfig().disableLogging) {
+  if (config().disableLogging) {
     return;
   }