Reduce App Router bundle size (#1576)

* Only use esm

* Use mjs imports instead of cjs

* Use mjs version of config

* Use `ApolloClient`/`InMemoryCache`

* Add changesets

* Use `isolatedModules`. Thanks @theodesp !

.changeset/chilled-teachers-brush.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/experimental-app-router': patch
+---
+
+Fixed an issue where the client was being shipped on the client resulting in large bundle sizes (150kb+). For more context: https://github.com/apollographql/apollo-client-nextjs/issues/95

.changeset/silent-impalas-repair.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/experimental-app-router': minor
+---
+
+**BREAKING**: Removed `cjs` support. The experimental app router package now is ESM only.

examples/next/app-router/faust.config.js

@@ -1,4 +1,4 @@
-import { setConfig } from '@faustwp/core/dist/cjs/config/index.js';
+import { setConfig } from '@faustwp/core/dist/mjs/config/index.js';
 import possibleTypes from './possibleTypes.json';
 
 /** @type {import('@faustwp/core').FaustConfig} */

packages/experimental-app-router/.npmignore

@@ -4,6 +4,5 @@ tests/**/*
 .eslintignore
 jest.config.js
 jest.setup.ts
-tsconfig-cjs.json
 tsconfig.json
 coverage

packages/experimental-app-router/jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
       'ts-jest',
       {
         tsconfig: 'tsconfig.json',
+        isolatedModules: true,
         useESM: true,
       },
     ],

packages/experimental-app-router/package.json

@@ -2,25 +2,24 @@
   "name": "@faustwp/experimental-app-router",
   "version": "0.0.4",
   "description": "Experimental: A Faust package to support Next.js' App Router",
-  "main": "dist/cjs/index.js",
-  "module": "dist/mjs/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "types": "dist/index.d.ts",
   "scripts": {
     "dev": "concurrently \"npm:watch-*\" --prefix-colors \"auto\"",
     "build": "concurrently \"npm:build-*\" --prefix-colors \"auto\"",
     "prebuild": "npm run clean",
-    "postbuild": "npm run package",
     "clean": "rimraf dist",
     "format": "prettier --write .",
-    "package": "node ../../scripts/package.js",
     "prepublish": "npm run build",
     "test:coverage:ci": "jest --ci --json --coverage --testLocationInResults --outputFile=report.json",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
     "test": "jest",
     "build-js": "tsc -p .",
-    "build-cjs": "tsc -p tsconfig-cjs.json",
-    "watch-js": "concurrently \"npm:build-js -- --watch\" \"npm:build-cjs -- --watch\""
+    "watch-js": "concurrently \"npm:build-js -- --watch\""
   },
   "repository": {
     "type": "git",

packages/experimental-app-router/src/client.ts

@@ -1,13 +1,13 @@
-import { InMemoryCacheConfig, createHttpLink } from '@apollo/client';
+import {
+  ApolloClient,
+  InMemoryCache,
+  InMemoryCacheConfig,
+  createHttpLink,
+} from '@apollo/client';
 // eslint-disable-next-line import/extensions
 import { setContext } from '@apollo/client/link/context';
 // eslint-disable-next-line import/extensions
 import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc';
-import {
-  NextSSRApolloClient,
-  NextSSRInMemoryCache,
-  // eslint-disable-next-line import/extensions
-} from '@apollo/experimental-nextjs-app-support/ssr';
 // eslint-disable-next-line import/extensions
 /**
  * We are currently importing these utils from their respective dist paths because importing
@@ -16,8 +16,8 @@ import {
  *
  * @todo Find a workaround for importing these utils without invoking FaustProvider.
  */
-import { getConfig } from '@faustwp/core/dist/cjs/config/index.js';
-import { getGraphqlEndpoint } from '@faustwp/core/dist/cjs/lib/getGraphqlEndpoint.js';
+import { getConfig } from '@faustwp/core/dist/mjs/config/index.js';
+import { getGraphqlEndpoint } from '@faustwp/core/dist/mjs/lib/getGraphqlEndpoint.js';
 import { fetchAccessToken } from './server/auth/fetchAccessToken.js';
 
 async function createFaustApolloClient(authenticated = false) {
@@ -65,8 +65,8 @@ async function createFaustApolloClient(authenticated = false) {
    * we may set config differently than how we currently do it.
    */
 
-  return new NextSSRApolloClient({
-    cache: new NextSSRInMemoryCache(inMemoryCacheObject),
+  return new ApolloClient({
+    cache: new InMemoryCache(inMemoryCacheObject),
     link: linkChain,
   });
 }

packages/experimental-app-router/src/server-actions/loginAction.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 // eslint-disable-next-line import/extensions
 import { print } from '@apollo/client/utilities';
-import { getGraphqlEndpoint } from '@faustwp/core/dist/cjs/lib/getGraphqlEndpoint.js';
-import { isValidEmail } from '@faustwp/core/dist/cjs/utils/assert.js';
+import { getGraphqlEndpoint } from '@faustwp/core/dist/mjs/lib/getGraphqlEndpoint.js';
+import { isValidEmail } from '@faustwp/core/dist/mjs/utils/assert.js';
 import { fetchTokens } from '../server/auth/fetchTokens.js';
 import { setRefreshToken } from './utils/setRefreshToken.js';
 

packages/experimental-app-router/src/server-actions/logoutAction.ts

@@ -1,5 +1,5 @@
 import { cookies } from 'next/headers.js';
-import { getWpUrl } from '@faustwp/core/dist/cjs/lib/getWpUrl.js';
+import { getWpUrl } from '@faustwp/core/dist/mjs/lib/getWpUrl.js';
 
 export async function onLogout() {
   'use server';

packages/experimental-app-router/src/server-actions/utils/setRefreshToken.ts

@@ -1,4 +1,4 @@
-import { getWpUrl } from '@faustwp/core/dist/cjs/lib/getWpUrl.js';
+import { getWpUrl } from '@faustwp/core/dist/mjs/lib/getWpUrl.js';
 import { cookies } from 'next/headers.js';
 
 /**

packages/experimental-app-router/src/server/auth/fetchTokens.ts

@@ -1,4 +1,4 @@
-import { getWpUrl } from '@faustwp/core/dist/cjs/lib/getWpUrl.js';
+import { getWpUrl } from '@faustwp/core/dist/mjs/lib/getWpUrl.js';
 // eslint-disable-next-line import/extensions
 import { cookies } from 'next/headers';
 import { AuthorizeResponse } from '../routeHandler/tokenHandler.js';

packages/experimental-app-router/src/server/routeHandler/tokenHandler.ts

@@ -1,5 +1,5 @@
-import { getWpUrl } from '@faustwp/core/dist/cjs/lib/getWpUrl.js';
-import { getWpSecret } from '@faustwp/core/dist/cjs/lib/getWpSecret.js';
+import { getWpUrl } from '@faustwp/core/dist/mjs/lib/getWpUrl.js';
+import { getWpSecret } from '@faustwp/core/dist/mjs/lib/getWpSecret.js';
 import { cookies } from 'next/headers.js';
 import { NextResponse } from 'next/server.js';
 

packages/experimental-app-router/tests/server-actions/onLogin.test.ts

@@ -5,7 +5,7 @@ import {
   onLogin,
   validationError,
 } from '../../src/server-actions/loginAction.js';
-import { getGraphqlEndpoint } from '@faustwp/core/dist/cjs/lib/getGraphqlEndpoint.js';
+import { getGraphqlEndpoint } from '@faustwp/core/dist/mjs/lib/getGraphqlEndpoint.js';
 import * as fetchTokens from '../../src/server/auth/fetchTokens.js';
 import * as setRefreshToken from '../../src/server-actions/utils/setRefreshToken.js';
 

packages/experimental-app-router/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "module": "esnext",
-    "outDir": "dist/mjs",
+    "outDir": "dist",
     "target": "es2017",
     "rootDir": "src",
     "jsx": "react"