Update pnpm-lock.yaml

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/cool-doors-invent.md

@@ -0,0 +1,5 @@
+---
+"@blitzjs/rpc": patch
+---
+
+Add invokeWithCtx function

.changeset/famous-kings-explain.md

@@ -0,0 +1,5 @@
+---
+"@blitzjs/generator": patch
+---
+
+updated nextjs version in generator & npmrc file

.changeset/four-meals-fry.md

@@ -0,0 +1,5 @@
+---
+"@blitzjs/next": patch
+---
+
+export BlitzPage & BlitzLayout types from @blitzjs/next

.changeset/healthy-rice-shout.md

@@ -0,0 +1,5 @@
+---
+"blitz": patch
+---
+
+detailed print env info

.changeset/olive-bees-buy.md

@@ -0,0 +1,5 @@
+---
+"@blitzjs/codemod": patch
+---
+
+Fix templates source in RPC codemod step

.changeset/olive-feet-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@blitzjs/codemod": patch
+---
+
+Add codemod to upgrade from legacy framework to the Blitz Toolkit

.changeset/pre.json

@@ -12,19 +12,26 @@
     "@blitzjs/rpc": "2.0.0-alpha.0",
     "@blitzjs/config": "0.0.0",
     "@blitzjs/generator": "2.0.0-alpha.0",
+    "@blitzjs/codemod": "2.0.0-alpha.0",
     "template": "0.0.0",
     "toolkit-app": "1.0.0",
-    "test-qm": "0.0.0"
+    "test-qm": "0.0.0",
+    "test-no-suspense": "0.0.0",
+    "test-trailing-slash": "0.0.0"
   },
   "changesets": [
     "big-phones-bow",
     "breezy-cameras-double",
+    "cool-doors-invent",
     "dirty-monkeys-greet",
     "empty-berries-rule",
     "fair-wombats-sneeze",
+    "famous-kings-explain",
     "fast-trainers-kneel",
     "flat-bees-approve",
+    "four-meals-fry",
     "great-months-train",
+    "healthy-rice-shout",
     "hot-drinks-approve",
     "lovely-colts-share",
     "modern-cameras-pull",
@@ -32,6 +39,8 @@
     "nice-starfishes-live",
     "nine-onions-admire",
     "ninety-pets-heal",
+    "olive-bees-buy",
+    "olive-feet-rhyme",
     "plenty-bottles-swim",
     "poor-peas-lick",
     "poor-penguins-look",
@@ -39,16 +48,19 @@
     "quiet-feet-travel",
     "rich-chairs-invent",
     "sharp-falcons-begin",
+    "shy-olives-hang",
     "silent-colts-reply",
     "small-socks-confess",
     "stupid-walls-sell",
     "swift-drinks-dress",
+    "tasty-news-collect",
     "ten-rivers-burn",
     "tender-pianos-check",
     "thirty-countries-build",
     "twenty-beans-pump",
     "two-kiwis-help",
     "unlucky-papayas-sleep",
+    "violet-bags-leave",
     "weak-suns-shave",
     "wicked-ghosts-cough",
     "wise-frogs-give"

.changeset/shy-olives-hang.md

@@ -0,0 +1,6 @@
+---
+"@blitzjs/rpc": patch
+"@blitzjs/generator": patch
+---
+
+Update RPC plugin setup in templates

.changeset/tasty-news-collect.md

@@ -0,0 +1,6 @@
+---
+"blitz": patch
+"@blitzjs/codemod": patch
+---
+
+init codemod generator

.changeset/violet-bags-leave.md

@@ -0,0 +1,5 @@
+---
+"@blitzjs/codemod": patch
+---
+
+Update templates directory for codemod

apps/toolkit-app/app/blitz-client.ts

@@ -7,12 +7,6 @@ export const { withBlitz } = setupBlitzClient({
     AuthClientPlugin({
       cookiePrefix: "web-cookie-prefix",
     }),
-    BlitzRpcPlugin({
-      reactQueryOptions: {
-        queries: {
-          staleTime: 7000,
-        },
-      },
-    }),
+    BlitzRpcPlugin({}),
   ],
 })

apps/toolkit-app/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.1-alpha.16",
   "scripts": {
     "start:dev": "pnpm run prisma:start && next dev",
-    "buildapp": "pnpm i && pnpm prisma generate && next build",
+    "buildapp": "NODE_ENV=production pnpm blitz codegen && pnpm prisma generate && next build",
     "start": "next start",
     "lint": "next lint",
     "prisma:start": "prisma generate && prisma migrate deploy",
@@ -29,7 +29,7 @@
     "@blitzjs/rpc": "workspace:*",
     "@hookform/resolvers": "2.8.8",
     "@prisma/client": "3.9.0",
-    "blitz": "workspace:2.0.0-alpha.25",
+    "blitz": "workspace:2.0.0-alpha.32",
     "next": "12.1.6-canary.17",
     "prisma": "3.9.0",
     "react": "18.0.0",

apps/toolkit-app/pages/_app.tsx

@@ -1,6 +1,5 @@
-import { ErrorFallbackProps, ErrorComponent, ErrorBoundary } from "@blitzjs/next"
+import { ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps } from "@blitzjs/next"
 import { AuthenticationError, AuthorizationError } from "blitz"
-import type { AppProps } from "next/app"
 import React from "react"
 import { withBlitz } from "app/blitz-client"
 

apps/web/app/queries/getUsersAuth.ts

@@ -0,0 +1,8 @@
+import {resolver} from "@blitzjs/rpc"
+import db from "db"
+
+export default resolver.pipe(resolver.authorize(), async () => {
+  const users = await db.user.findMany()
+
+  return users
+})

apps/web/pages/_app.tsx

@@ -1,6 +1,5 @@
-import {ErrorFallbackProps, ErrorComponent, ErrorBoundary} from "@blitzjs/next"
+import {ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps} from "@blitzjs/next"
 import {AuthenticationError, AuthorizationError} from "blitz"
-import type {AppProps} from "next/app"
 import React from "react"
 import {withBlitz} from "app/blitz-client"
 

apps/web/pages/api/signin.ts

@@ -25,6 +25,7 @@ export default api(async (req, res, ctx) => {
 
   await blitzContext.session.$create({
     userId: user.id,
+    role: "USER",
   })
 
   res.status(200).json({email: req.query.email, userId: blitzContext.session.userId})

apps/web/pages/api/signup.ts

@@ -16,6 +16,7 @@ export default api(async (req, res, ctx) => {
 
   await blitzContext.session.$create({
     userId: user.id,
+    role: "USER",
   })
 
   res.status(200).json({userId: blitzContext.session.userId, ...user, email: req.query.email})

apps/web/pages/page-with-inf-prefetch.tsx

@@ -9,7 +9,7 @@ export const getServerSideProps = gSSP(async ({ctx}) => {
   return {props: {}}
 })
 
-function PageWithGssp(props) {
+function PageWithPrefetchInfiniteQuery(props) {
   const [usersPages] = useInfiniteQuery(getInfiniteUsers, (page = {take: 3, skip: 0}) => page, {
     getNextPageParam: (lastPage) => lastPage.nextPage,
   })
@@ -29,4 +29,4 @@ function PageWithGssp(props) {
   )
 }
 
-export default PageWithGssp
+export default PageWithPrefetchInfiniteQuery

apps/web/pages/page-with-invoke-ctx.tsx

@@ -0,0 +1,31 @@
+import {SessionContext} from "@blitzjs/auth"
+import {invokeWithCtx} from "@blitzjs/rpc"
+import {gSSP} from "app/blitz-server"
+import getUsersAuth from "app/queries/getUsersAuth"
+
+type Props = {
+  userId: unknown
+  publicData: SessionContext["$publicData"]
+}
+
+export const getServerSideProps = gSSP<Props>(async ({ctx}) => {
+  const {session} = ctx
+
+  const users = await invokeWithCtx(getUsersAuth, {}, ctx)
+
+  console.log({users})
+
+  return {
+    props: {
+      userId: session.userId,
+      publicData: session.$publicData,
+      publishedAt: new Date(0),
+    },
+  }
+})
+
+function PageWithInvokeCtx(props: Props) {
+  return <div>{JSON.stringify(props, null, 2)}</div>
+}
+
+export default PageWithInvokeCtx

apps/web/pages/page-with-prefetch.tsx

@@ -9,7 +9,7 @@ export const getServerSideProps = gSSP(async ({ctx}) => {
   return {props: {}}
 })
 
-function PageWithGssp(props) {
+function PageWithPrefetch(props) {
   const [users] = useQuery(getUsers, {})
   return (
     <div>
@@ -25,4 +25,4 @@ function PageWithGssp(props) {
   )
 }
 
-export default PageWithGssp
+export default PageWithPrefetch

apps/web/types.ts

@@ -0,0 +1,15 @@
+import {SimpleRolesIsAuthorized} from "@blitzjs/auth"
+import {User} from "db"
+
+export type Role = "ADMIN" | "USER"
+
+declare module "@blitzjs/auth" {
+  export interface Session {
+    isAuthorized: SimpleRolesIsAuthorized<Role>
+    PublicData: {
+      userId: User["id"]
+      role: Role
+      views?: number
+    }
+  }
+}

integration-tests/auth/pages/_app.tsx

@@ -1,12 +1,11 @@
-import {ErrorFallbackProps, ErrorComponent, ErrorBoundary} from "@blitzjs/next"
+import {ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps} from "@blitzjs/next"
 import {AuthenticationError, AuthorizationError} from "blitz"
-import type {AppProps} from "next/app"
 import React from "react"
 import {withBlitz} from "../app/blitz-client"
 
 function RootErrorFallback({error}: ErrorFallbackProps) {
   if (error instanceof AuthenticationError) {
-    return <div>Error: You are not authenticated</div>
+    return <div id="error">Error: You are not authenticated</div>
   } else if (error instanceof AuthorizationError) {
     return (
       <ErrorComponent

integration-tests/auth/test/index.test.ts

@@ -35,20 +35,24 @@ const runTests = (mode?: string) => {
         "should render error for protected query",
         async () => {
           const browser = await webdriver(appPort, "/authenticated-page")
-          let errorMsg = await browser.elementByXpath(`//*[@id="__next"]/div`)
+          let errorMsg = await browser.elementById(`error`).text()
           expect(errorMsg).toMatch(/Error: You are not authenticated/)
           if (browser) browser.close()
         },
         5000 * 60 * 2,
       )
 
-      it("should render result for open query", async () => {
-        const res = await fetch(`http://localhost:${appPort}/api/noauth`, {
-          method: "GET",
-          headers: {"Content-Type": "application/json; charset=utf-8"},
-        })
-        expect(res.status).toBe(200)
-      })
+      it(
+        "should render result for open query",
+        async () => {
+          const res = await fetch(`http://localhost:${appPort}/api/noauth`, {
+            method: "GET",
+            headers: {"Content-Type": "application/json; charset=utf-8"},
+          })
+          expect(res.status).toBe(200)
+        },
+        5000 * 60 * 2,
+      )
 
       it("sets correct cookie", async () => {
         const res = await fetch(`http://localhost:${appPort}/api/noauth`, {
@@ -118,31 +122,33 @@ const runTests = (mode?: string) => {
   })
 }
 
-describe("dev mode", () => {
-  beforeAll(async () => {
-    try {
-      appPort = await findPort()
-      app = await launchApp(appDir, appPort, {})
-      await seed()
-    } catch (error) {
-      console.log(error)
-    }
-  }, 5000 * 60 * 2)
-  afterAll(async () => await killApp(app))
-  runTests()
-})
+describe("Auth Tests", () => {
+  describe("dev mode", () => {
+    beforeAll(async () => {
+      try {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort, {cwd: process.cwd()})
+        await seed()
+      } catch (error) {
+        console.log(error)
+      }
+    }, 5000 * 60 * 2)
+    afterAll(async () => await killApp(app))
+    runTests()
+  })
 
-describe("server mode", () => {
-  beforeAll(async () => {
-    try {
-      appPort = await findPort()
-      await nextBuild(appDir)
-      app = await nextStart(appDir, appPort)
-    } catch (err) {
-      console.log(err)
-    }
-  }, 5000 * 60 * 2)
-  afterAll(async () => await killApp(app))
+  describe("server mode", () => {
+    beforeAll(async () => {
+      try {
+        await nextBuild(appDir)
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort, {cwd: process.cwd()})
+      } catch (err) {
+        console.log(err)
+      }
+    }, 5000 * 60 * 2)
+    afterAll(async () => await killApp(app))
 
-  runTests()
+    runTests()
+  })
 })

integration-tests/no-suspense/.env

@@ -0,0 +1,2 @@
+SESSION_SECRET_KEY=hsdenhJfpLHrGjgdgg3jdF8g2bYD2PaQ
+HEADLESS=true

integration-tests/no-suspense/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require("@blitzjs/config/eslint")

integration-tests/no-suspense/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+# Keep environment variables out of version control
+*.sqlite

integration-tests/no-suspense/app/blitz-client.ts

@@ -0,0 +1,14 @@
+import {BlitzRpcPlugin} from "@blitzjs/rpc"
+import {setupBlitzClient} from "@blitzjs/next"
+import {AuthClientPlugin} from "@blitzjs/auth"
+
+const {withBlitz} = setupBlitzClient({
+  plugins: [
+    AuthClientPlugin({
+      cookiePrefix: "no-suspense-tests-cookie-prefix",
+    }),
+    BlitzRpcPlugin({}),
+  ],
+})
+
+export {withBlitz}

integration-tests/no-suspense/app/blitz-server.ts

@@ -0,0 +1,16 @@
+import {setupBlitzServer} from "@blitzjs/next"
+import {AuthServerPlugin, PrismaStorage} from "@blitzjs/auth"
+import {simpleRolesIsAuthorized} from "@blitzjs/auth"
+import {prisma as db} from "../prisma/index"
+
+const {gSSP, gSP, api} = setupBlitzServer({
+  plugins: [
+    AuthServerPlugin({
+      cookiePrefix: "no-suspense-tests-cookie-prefix",
+      storage: PrismaStorage(db as any),
+      isAuthorized: simpleRolesIsAuthorized,
+    }),
+  ],
+})
+
+export {gSSP, gSP, api}

integration-tests/no-suspense/app/queries/getBasic.ts

@@ -0,0 +1,3 @@
+export default async function getBasic() {
+  return "basic-result"
+}

integration-tests/no-suspense/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

integration-tests/no-suspense/next.config.js

@@ -0,0 +1,2 @@
+const {withBlitz} = require("@blitzjs/next")
+module.exports = withBlitz({})

integration-tests/no-suspense/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "test-no-suspense",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start:dev": "pnpm run prisma:start && next dev",
+    "test": "pnpm run prisma:start && vitest run",
+    "test-watch": "vitest",
+    "start": "next start",
+    "lint": "next lint",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
+    "prisma:start": "prisma generate && prisma migrate deploy",
+    "prisma:studio": "prisma studio"
+  },
+  "dependencies": {
+    "@blitzjs/auth": "workspace:*",
+    "@blitzjs/next": "workspace:*",
+    "@blitzjs/rpc": "workspace:*",
+    "@prisma/client": "3.9.0",
+    "blitz": "workspace:*",
+    "lowdb": "3.0.0",
+    "next": "12.1.6-canary.17",
+    "prisma": "3.9.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
+  },
+  "devDependencies": {
+    "@blitzjs/config": "workspace:*",
+    "@next/bundle-analyzer": "12.0.8",
+    "@types/express": "4.17.13",
+    "@types/fs-extra": "9.0.13",
+    "@types/node-fetch": "2.6.1",
+    "@types/react": "18.0.1",
+    "b64-lite": "1.4.0",
+    "eslint": "7.32.0",
+    "fs-extra": "10.0.1",
+    "get-port": "6.1.2",
+    "node-fetch": "3.2.3",
+    "typescript": "^4.5.3"
+  }
+}

integration-tests/no-suspense/pages/_app.tsx

@@ -0,0 +1,34 @@
+import {ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps} from "@blitzjs/next"
+import {AuthenticationError, AuthorizationError} from "blitz"
+import React from "react"
+import {withBlitz} from "../app/blitz-client"
+
+function RootErrorFallback({error}: ErrorFallbackProps) {
+  if (error instanceof AuthenticationError) {
+    return <div>Error: You are not authenticated</div>
+  } else if (error instanceof AuthorizationError) {
+    return (
+      <ErrorComponent
+        statusCode={error.statusCode}
+        title="Sorry, you are not authorized to access this"
+      />
+    )
+  } else {
+    return (
+      <ErrorComponent
+        statusCode={(error as any)?.statusCode || 400}
+        title={error.message || error.name}
+      />
+    )
+  }
+}
+
+function MyApp({Component, pageProps}: AppProps) {
+  return (
+    <ErrorBoundary FallbackComponent={RootErrorFallback}>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+
+export default withBlitz(MyApp)

integration-tests/no-suspense/pages/api/rpc/[[...blitz]].ts

@@ -0,0 +1,4 @@
+import {rpcHandler} from "@blitzjs/rpc"
+import {api} from "../../../app/blitz-server"
+
+export default api(rpcHandler({onError: console.log}))

integration-tests/no-suspense/pages/use-query.tsx

@@ -0,0 +1,23 @@
+import getBasic from "../app/queries/getBasic"
+import {useQuery} from "@blitzjs/rpc"
+import React from "react"
+
+function Content() {
+  const [result, {isFetching}] = useQuery(getBasic, undefined)
+
+  if (isFetching) {
+    return <>Loading...</>
+  } else {
+    return <div id="content">{result}</div>
+  }
+}
+
+function Page() {
+  return (
+    <div id="page">
+      <Content />
+    </div>
+  )
+}
+
+export default Page

integration-tests/no-suspense/prisma/index.ts

@@ -0,0 +1,8 @@
+import {enhancePrisma} from "blitz"
+import {PrismaClient} from "@prisma/client"
+
+const EnhancedPrisma = enhancePrisma(PrismaClient)
+
+export * from "@prisma/client"
+const prisma = new EnhancedPrisma()
+export {prisma}

integration-tests/no-suspense/prisma/migrations/20220330155417_init/migration.sql

@@ -0,0 +1,47 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "name" TEXT,
+    "email" TEXT NOT NULL,
+    "hashedPassword" TEXT,
+    "role" TEXT NOT NULL DEFAULT 'user'
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "expiresAt" DATETIME,
+    "handle" TEXT NOT NULL,
+    "userId" INTEGER,
+    "hashedSessionToken" TEXT,
+    "antiCSRFToken" TEXT,
+    "publicData" TEXT,
+    "privateData" TEXT,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Token" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "hashedToken" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "expiresAt" DATETIME NOT NULL,
+    "sentTo" TEXT NOT NULL,
+    "userId" INTEGER NOT NULL,
+    CONSTRAINT "Token_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_handle_key" ON "Session"("handle");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Token_hashedToken_type_key" ON "Token"("hashedToken", "type");

integration-tests/no-suspense/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

integration-tests/no-suspense/prisma/schema.prisma

@@ -0,0 +1,50 @@
+datasource sqlite {
+  provider = "sqlite"
+  url      = "file:./db.sqlite"
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+model User {
+  id             Int      @id @default(autoincrement())
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  name           String?
+  email          String   @unique
+  hashedPassword String?
+  role           String   @default("user")
+
+  sessions Session[]
+  tokens   Token[]
+}
+
+model Session {
+  id                 Int       @id @default(autoincrement())
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  expiresAt          DateTime?
+  handle             String    @unique
+  user               User?     @relation(fields: [userId], references: [id])
+  userId             Int?
+  hashedSessionToken String?
+  antiCSRFToken      String?
+  publicData         String?
+  privateData        String?
+}
+
+model Token {
+  id          Int      @id @default(autoincrement())
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  hashedToken String
+  type        String
+  expiresAt   DateTime
+  sentTo      String
+
+  user   User @relation(fields: [userId], references: [id])
+  userId Int
+
+  @@unique([hashedToken, type])
+}

integration-tests/no-suspense/prisma/seed.ts

@@ -0,0 +1,7 @@
+import {prisma} from "./index"
+
+const seed = async () => {
+  await prisma.$reset()
+}
+
+export default seed

integration-tests/no-suspense/test/index.test.ts

@@ -0,0 +1,57 @@
+import {describe, it, expect, beforeAll, afterAll} from "vitest"
+import {killApp, findPort, launchApp, nextBuild, nextStart} from "../../utils/next-test-utils"
+import webdriver from "../../utils/next-webdriver"
+
+import {join} from "path"
+
+let app: any
+let appPort: number
+const appDir = join(__dirname, "../")
+
+const runTests = (mode?: string) => {
+  describe("useQuery without suspense", () => {
+    it(
+      "should render query result",
+      async () => {
+        const browser = await webdriver(appPort, "/use-query")
+
+        let text
+        browser.waitForElementByCss("#content", 0)
+        text = await browser.elementByCss("#content").text()
+        expect(text).toMatch(/basic-result/)
+        if (browser) await browser.close()
+      },
+      5000 * 60 * 2,
+    )
+  })
+}
+
+describe("No Suspense Tests", () => {
+  describe("dev mode", () => {
+    beforeAll(async () => {
+      try {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort, {cwd: process.cwd()})
+      } catch (error) {
+        console.log(error)
+      }
+    }, 5000 * 60 * 2)
+    afterAll(async () => await killApp(app))
+    runTests()
+  })
+
+  describe("server mode", () => {
+    beforeAll(async () => {
+      try {
+        await nextBuild(appDir)
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort, {cwd: process.cwd()})
+      } catch (err) {
+        console.log(err)
+      }
+    }, 5000 * 60 * 2)
+    afterAll(async () => await killApp(app))
+
+    runTests()
+  })
+})

integration-tests/no-suspense/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@blitzjs/config/tsconfig.nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
+  },
+  "exclude": ["node_modules"],
+  "baseUrl": "."
+}

integration-tests/rpc/test/index.test.js

@@ -143,7 +143,7 @@ describe("RPC", () => {
       beforeAll(async () => {
         try {
           appPort = await findPort()
-          app = await launchApp(appDir, appPort)
+          app = await launchApp(appDir, appPort, {cwd: process.cwd()})
         } catch (err) {
           console.log(err)
         }
@@ -162,7 +162,7 @@ describe("RPC", () => {
         await nextBuild(appDir)
         mode = "server"
         appPort = await findPort()
-        app = await nextStart(appDir, appPort)
+        app = await nextStart(appDir, appPort, {cwd: process.cwd()})
       })
       afterAll(() => killApp(app))
 
@@ -185,7 +185,7 @@ describe("RPC", () => {
         await nextBuild(appDir)
         mode = "serverless"
         appPort = await findPort()
-        app = await nextStart(appDir, appPort)
+        app = await nextStart(appDir, appPort, {cwd: process.cwd()})
       })
       afterAll(async () => {
         await killApp(app)

integration-tests/trailing-slash/.env

@@ -0,0 +1,2 @@
+SESSION_SECRET_KEY=hsdenhJfpLHrGjgdgg3jdF8g2bYD2PaQ
+HEADLESS=true

integration-tests/trailing-slash/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require("@blitzjs/config/eslint")

integration-tests/trailing-slash/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+# Keep environment variables out of version control
+*.sqlite

integration-tests/trailing-slash/app/blitz-client.ts

@@ -0,0 +1,14 @@
+import {BlitzRpcPlugin} from "@blitzjs/rpc"
+import {setupBlitzClient} from "@blitzjs/next"
+import {AuthClientPlugin} from "@blitzjs/auth"
+
+const {withBlitz} = setupBlitzClient({
+  plugins: [
+    AuthClientPlugin({
+      cookiePrefix: "trailing-slash-tests-cookie-prefix",
+    }),
+    BlitzRpcPlugin({}),
+  ],
+})
+
+export {withBlitz}

integration-tests/trailing-slash/app/blitz-server.ts

@@ -0,0 +1,16 @@
+import {setupBlitzServer} from "@blitzjs/next"
+import {AuthServerPlugin, PrismaStorage} from "@blitzjs/auth"
+import {simpleRolesIsAuthorized} from "@blitzjs/auth"
+import {prisma as db} from "../prisma/index"
+
+const {gSSP, gSP, api} = setupBlitzServer({
+  plugins: [
+    AuthServerPlugin({
+      cookiePrefix: "trailing-slash-tests-cookie-prefix",
+      storage: PrismaStorage(db as any),
+      isAuthorized: simpleRolesIsAuthorized,
+    }),
+  ],
+})
+
+export {gSSP, gSP, api}

integration-tests/trailing-slash/app/queries/getBasic.ts

@@ -0,0 +1,3 @@
+export default async function getBasic() {
+  return "basic-result"
+}

integration-tests/trailing-slash/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

integration-tests/trailing-slash/next.config.js

@@ -0,0 +1,4 @@
+const {withBlitz} = require("@blitzjs/next")
+module.exports = withBlitz({
+  trailingSlash: true,
+})

integration-tests/trailing-slash/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "test-trailing-slash",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start:dev": "pnpm run prisma:start && next dev",
+    "test": "pnpm run prisma:start && vitest run",
+    "test-watch": "vitest",
+    "start": "next start",
+    "lint": "next lint",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
+    "prisma:start": "prisma generate && prisma migrate deploy",
+    "prisma:studio": "prisma studio"
+  },
+  "dependencies": {
+    "@blitzjs/auth": "workspace:*",
+    "@blitzjs/next": "workspace:*",
+    "@blitzjs/rpc": "workspace:*",
+    "@prisma/client": "3.9.0",
+    "blitz": "workspace:*",
+    "lowdb": "3.0.0",
+    "next": "12.1.6-canary.17",
+    "prisma": "3.9.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
+  },
+  "devDependencies": {
+    "@blitzjs/config": "workspace:*",
+    "@next/bundle-analyzer": "12.0.8",
+    "@types/express": "4.17.13",
+    "@types/fs-extra": "9.0.13",
+    "@types/node-fetch": "2.6.1",
+    "@types/react": "18.0.1",
+    "b64-lite": "1.4.0",
+    "eslint": "7.32.0",
+    "fs-extra": "10.0.1",
+    "get-port": "6.1.2",
+    "node-fetch": "3.2.3",
+    "typescript": "^4.5.3"
+  }
+}

integration-tests/trailing-slash/pages/_app.tsx

@@ -0,0 +1,34 @@
+import {ErrorFallbackProps, ErrorComponent, ErrorBoundary, AppProps} from "@blitzjs/next"
+import {AuthenticationError, AuthorizationError} from "blitz"
+import React from "react"
+import {withBlitz} from "../app/blitz-client"
+
+function RootErrorFallback({error}: ErrorFallbackProps) {
+  if (error instanceof AuthenticationError) {
+    return <div>Error: You are not authenticated</div>
+  } else if (error instanceof AuthorizationError) {
+    return (
+      <ErrorComponent
+        statusCode={error.statusCode}
+        title="Sorry, you are not authorized to access this"
+      />
+    )
+  } else {
+    return (
+      <ErrorComponent
+        statusCode={(error as any)?.statusCode || 400}
+        title={error.message || error.name}
+      />
+    )
+  }
+}
+
+function MyApp({Component, pageProps}: AppProps) {
+  return (
+    <ErrorBoundary FallbackComponent={RootErrorFallback}>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+
+export default withBlitz(MyApp)

integration-tests/trailing-slash/pages/api/rpc/[[...blitz]].ts

@@ -0,0 +1,4 @@
+import {rpcHandler} from "@blitzjs/rpc"
+import {api} from "../../../app/blitz-server"
+
+export default api(rpcHandler({onError: console.log}))

integration-tests/trailing-slash/pages/use-query.tsx

@@ -0,0 +1,20 @@
+import getBasic from "../app/queries/getBasic"
+import {useQuery} from "@blitzjs/rpc"
+import {Suspense} from "react"
+
+function Content() {
+  const [result] = useQuery(getBasic, undefined)
+  return <div id="content">{result}</div>
+}
+
+function Page() {
+  return (
+    <div id="page">
+      <Suspense fallback={"Loading..."}>
+        <Content />
+      </Suspense>
+    </div>
+  )
+}
+
+export default Page

integration-tests/trailing-slash/prisma/index.ts

@@ -0,0 +1,8 @@
+import {enhancePrisma} from "blitz"
+import {PrismaClient} from "@prisma/client"
+
+const EnhancedPrisma = enhancePrisma(PrismaClient)
+
+export * from "@prisma/client"
+const prisma = new EnhancedPrisma()
+export {prisma}

integration-tests/trailing-slash/prisma/migrations/20220330155417_init/migration.sql

@@ -0,0 +1,47 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "name" TEXT,
+    "email" TEXT NOT NULL,
+    "hashedPassword" TEXT,
+    "role" TEXT NOT NULL DEFAULT 'user'
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "expiresAt" DATETIME,
+    "handle" TEXT NOT NULL,
+    "userId" INTEGER,
+    "hashedSessionToken" TEXT,
+    "antiCSRFToken" TEXT,
+    "publicData" TEXT,
+    "privateData" TEXT,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Token" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "hashedToken" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "expiresAt" DATETIME NOT NULL,
+    "sentTo" TEXT NOT NULL,
+    "userId" INTEGER NOT NULL,
+    CONSTRAINT "Token_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_handle_key" ON "Session"("handle");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Token_hashedToken_type_key" ON "Token"("hashedToken", "type");

integration-tests/trailing-slash/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

integration-tests/trailing-slash/prisma/schema.prisma

@@ -0,0 +1,50 @@
+datasource sqlite {
+  provider = "sqlite"
+  url      = "file:./db.sqlite"
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+model User {
+  id             Int      @id @default(autoincrement())
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  name           String?
+  email          String   @unique
+  hashedPassword String?
+  role           String   @default("user")
+
+  sessions Session[]
+  tokens   Token[]
+}
+
+model Session {
+  id                 Int       @id @default(autoincrement())
+  createdAt          DateTime  @default(now())
+  updatedAt          DateTime  @updatedAt
+  expiresAt          DateTime?
+  handle             String    @unique
+  user               User?     @relation(fields: [userId], references: [id])
+  userId             Int?
+  hashedSessionToken String?
+  antiCSRFToken      String?
+  publicData         String?
+  privateData        String?
+}
+
+model Token {
+  id          Int      @id @default(autoincrement())
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  hashedToken String
+  type        String
+  expiresAt   DateTime
+  sentTo      String
+
+  user   User @relation(fields: [userId], references: [id])
+  userId Int
+
+  @@unique([hashedToken, type])
+}

integration-tests/trailing-slash/prisma/seed.ts

@@ -0,0 +1,7 @@
+import {prisma} from "./index"
+
+const seed = async () => {
+  await prisma.$reset()
+}
+
+export default seed

integration-tests/trailing-slash/test/index.test.ts

@@ -0,0 +1,56 @@
+import {describe, it, expect, beforeAll, afterAll} from "vitest"
+import {killApp, findPort, launchApp, nextBuild, nextStart} from "../../utils/next-test-utils"
+import webdriver from "../../utils/next-webdriver"
+
+import {join} from "path"
+
+let app: any
+let appPort: number
+const appDir = join(__dirname, "../")
+
+const runTests = (mode?: string) => {
+  describe("Trailing Slash", () => {
+    it(
+      "should render query result",
+      async () => {
+        const browser = await webdriver(appPort, "/use-query")
+        let text = await browser.elementByCss("#page").text()
+        expect(text).toMatch(/Loading/)
+        await browser.waitForElementByCss("#content", 0)
+        text = await browser.elementByCss("#content").text()
+        expect(text).toMatch(/basic-result/)
+        if (browser) await browser.close()
+      },
+      5000 * 60 * 2,
+    )
+  })
+}
+describe("Trailing Slash Tests", () => {
+  describe("dev mode", () => {
+    beforeAll(async () => {
+      try {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort, {cwd: process.cwd()})
+      } catch (error) {
+        console.log(error)
+      }
+    }, 5000 * 60 * 2)
+    afterAll(async () => await killApp(app))
+    runTests()
+  })
+
+  describe("server mode", () => {
+    beforeAll(async () => {
+      try {
+        await nextBuild(appDir)
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort, {cwd: process.cwd()})
+      } catch (err) {
+        console.log(err)
+      }
+    }, 5000 * 60 * 2)
+    afterAll(async () => await killApp(app))
+
+    runTests()
+  })
+})

integration-tests/trailing-slash/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@blitzjs/config/tsconfig.nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
+  },
+  "exclude": ["node_modules"],
+  "baseUrl": "."
+}

integration-tests/utils/blitz-test-utils.tsx

@@ -80,21 +80,7 @@ const BlitzWrapper = ({plugins, children}) => {
 export function render(ui: RenderUI, {wrapper, router, ...options}: RenderOptions = {}) {
   if (!wrapper) {
     wrapper = ({children}) => {
-      return (
-        <BlitzWrapper
-          plugins={[
-            BlitzRpcPlugin({
-              reactQueryOptions: {
-                queries: {
-                  staleTime: 7000,
-                },
-              },
-            }),
-          ]}
-        >
-          {children}
-        </BlitzWrapper>
-      )
+      return <BlitzWrapper plugins={[BlitzRpcPlugin({})]}>{children}</BlitzWrapper>
     }
   }
 

integration-tests/utils/browsers/base.ts

@@ -0,0 +1,100 @@
+export type Event = "request"
+
+// This is the base Browser interface all browser
+// classes should build off of, it is the bare
+// methods we aim to support across tests
+export class BrowserInterface {
+  private promise: any
+  private then: any
+  private catch: any
+
+  protected chain(nextCall: any): BrowserInterface {
+    if (!this.promise) {
+      this.promise = Promise.resolve(this)
+    }
+    this.promise = this.promise.then(nextCall)
+    this.then = (...args) => this.promise.then(...args)
+    this.catch = (...args) => this.promise.catch(...args)
+    return this
+  }
+
+  async setup(browserName: string, locale?: string): Promise<void> {}
+  async close(): Promise<void> {}
+  async quit(): Promise<void> {}
+
+  elementsByCss(selector: string): BrowserInterface[] {
+    return [this]
+  }
+  elementByCss(selector: string): BrowserInterface {
+    return this
+  }
+  elementById(selector: string): BrowserInterface {
+    return this
+  }
+  click(opts?: {modifierKey?: boolean}): BrowserInterface {
+    return this
+  }
+  keydown(key: string): BrowserInterface {
+    return this
+  }
+  keyup(key: string): BrowserInterface {
+    return this
+  }
+  focusPage(): BrowserInterface {
+    return this
+  }
+  type(text: string): BrowserInterface {
+    return this
+  }
+  waitForElementByCss(selector: string, timeout?: number): BrowserInterface {
+    return this
+  }
+  waitForCondition(snippet: string, timeout?: number): BrowserInterface {
+    return this
+  }
+  back(): BrowserInterface {
+    return this
+  }
+  forward(): BrowserInterface {
+    return this
+  }
+  refresh(): BrowserInterface {
+    return this
+  }
+  setDimensions(opts: {height: number; width: number}): BrowserInterface {
+    return this
+  }
+  addCookie(opts: {name: string; value: string}): BrowserInterface {
+    return this
+  }
+  deleteCookies(): BrowserInterface {
+    return this
+  }
+  on(event: Event, cb: (...args: any[]) => void) {}
+  off(event: Event, cb: (...args: any[]) => void) {}
+  async loadPage(url: string, {disableCache: boolean, beforePageLoad: Function}): Promise<void> {}
+  async get(url: string): Promise<void> {}
+
+  async getValue(): Promise<any> {}
+  async getAttribute(name: string): Promise<any> {}
+  async eval(snippet: string | Function): Promise<any> {}
+  async evalAsync(snippet: string | Function): Promise<any> {}
+  async text(): Promise<string> {
+    return ""
+  }
+  async getComputedCss(prop: string): Promise<string> {
+    return ""
+  }
+  async hasElementByCssSelector(selector: string): Promise<boolean> {
+    return false
+  }
+  async log(): Promise<any[]> {
+    return []
+  }
+  async websocketFrames(): Promise<any[]> {
+    return []
+  }
+  async url(): Promise<string> {
+    return ""
+  }
+}

integration-tests/utils/browsers/playwright.ts

@@ -0,0 +1,312 @@
+import {BrowserInterface, Event} from "./base"
+import {
+  chromium,
+  webkit,
+  firefox,
+  Browser,
+  BrowserContext,
+  Page,
+  ElementHandle,
+} from "playwright-chromium"
+
+let page: Page
+let browser: Browser | undefined
+let context: BrowserContext | undefined
+let pageLogs: Array<{source: string; message: string}> = []
+let websocketFrames: Array<{payload: string | Buffer}> = []
+
+export async function quit() {
+  await context?.close()
+  await browser?.close()
+  context = undefined
+  browser = undefined
+}
+
+class Playwright extends BrowserInterface {
+  private eventCallbacks: Record<Event, Set<(...args: any[]) => void>> = {
+    request: new Set(),
+  }
+
+  on(event: Event, cb: (...args: any[]) => void) {
+    if (!this.eventCallbacks[event]) {
+      throw new Error(
+        `Invalid event passed to browser.on, received ${event}. Valid events are ${Object.keys(
+          event,
+        )}`,
+      )
+    }
+    this.eventCallbacks[event]?.add(cb)
+  }
+  off(event: Event, cb: (...args: any[]) => void) {
+    this.eventCallbacks[event]?.delete(cb)
+  }
+
+  async setup(browserName: string, locale?: string) {
+    if (browser) return
+    const headless = !!process.env.HEADLESS || true
+
+    if (browserName === "safari") {
+      browser = await webkit.launch({headless})
+    } else if (browserName === "firefox") {
+      browser = await firefox.launch({headless})
+    } else {
+      browser = await chromium.launch({headless, devtools: !headless})
+    }
+    context = await browser.newContext({locale})
+  }
+
+  async get(url: string): Promise<void> {
+    return page.goto(url) as any
+  }
+
+  async loadPage(
+    url: string,
+    opts?: {disableCache: boolean; beforePageLoad?: (...args: any[]) => void},
+  ) {
+    // clean-up existing pages
+    for (const oldPage of context!.pages()) {
+      await oldPage.close()
+    }
+    page = await context!.newPage()
+    pageLogs = []
+    websocketFrames = []
+
+    page.on("console", (msg) => {
+      console.log("browser log:", msg)
+      pageLogs.push({source: msg.type(), message: msg.text()})
+    })
+    page.on("crash", (page) => {
+      console.error("page crashed")
+    })
+    page.on("pageerror", (error) => {
+      console.error("page error", error)
+    })
+    page.on("request", (req) => {
+      this.eventCallbacks.request.forEach((cb) => cb(req))
+    })
+
+    if (opts?.disableCache) {
+      // TODO: this doesn't seem to work (dev tools does not check the box as expected)
+      const session = await context!.newCDPSession(page)
+      session.send("Network.setCacheDisabled", {cacheDisabled: true})
+    }
+
+    page.on("websocket", (ws) => {
+      ws.on("framereceived", (frame) => {
+        websocketFrames.push({payload: frame.payload})
+      })
+    })
+
+    opts?.beforePageLoad?.(page)
+
+    await page.goto(url, {waitUntil: "load"})
+  }
+
+  back(): BrowserInterface {
+    return this.chain(() => {
+      return page.goBack()
+    })
+  }
+  forward(): BrowserInterface {
+    return this.chain(() => {
+      return page.goForward()
+    })
+  }
+  refresh(): BrowserInterface {
+    return this.chain(() => {
+      return page.reload()
+    })
+  }
+  setDimensions({width, height}: {height: number; width: number}): BrowserInterface {
+    return this.chain(() => page.setViewportSize({width, height}))
+  }
+  addCookie(opts: {name: string; value: string}): BrowserInterface {
+    return this.chain(async () =>
+      context!.addCookies([
+        {
+          path: "/",
+          domain: await page.evaluate("window.location.hostname"),
+          ...opts,
+        },
+      ]),
+    )
+  }
+  deleteCookies(): BrowserInterface {
+    return this.chain(async () => context!.clearCookies())
+  }
+
+  focusPage() {
+    return this.chain(() => page.bringToFront())
+  }
+
+  private wrapElement(el: ElementHandle, selector: string) {
+    ;(el as any).selector = selector
+    ;(el as any).text = () => el.innerText()
+    ;(el as any).getComputedCss = (prop) =>
+      page.evaluate(
+        function (args) {
+          return (
+            getComputedStyle(document.querySelector(args.selector) as Element)[args.prop] || null
+          )
+        },
+        {selector, prop},
+      )
+    ;(el as any).getCssValue = (el as any).getComputedCss
+    ;(el as any).getValue = () =>
+      page.evaluate(
+        function (args) {
+          return (document.querySelector(args.selector) as any).value
+        },
+        {selector},
+      )
+    return el
+  }
+
+  elementByCss(selector: string) {
+    return this.waitForElementByCss(selector)
+  }
+
+  elementById(sel) {
+    return this.elementByCss(`#${sel}`)
+  }
+
+  getValue() {
+    return this.chain((el) =>
+      page.evaluate(
+        function (args) {
+          return document.querySelector(args.selector).value
+        },
+        {selector: el.selector},
+      ),
+    ) as any
+  }
+
+  text() {
+    return this.chain((el) => el.text()) as any
+  }
+
+  type(text) {
+    return this.chain((el) => el.type(text))
+  }
+
+  moveTo() {
+    return this.chain((el) => {
+      return page.hover(el.selector).then(() => el)
+    })
+  }
+
+  async getComputedCss(prop: string) {
+    return this.chain((el) => {
+      return el.getCssValue(prop)
+    }) as any
+  }
+
+  async getAttribute(attr) {
+    return this.chain((el) => el.getAttribute(attr))
+  }
+
+  async hasElementByCssSelector(selector: string) {
+    return this.eval(`!!document.querySelector('${selector}')`) as any
+  }
+
+  keydown(key: string): BrowserInterface {
+    return this.chain((el) => {
+      return page.keyboard.down(key).then(() => el)
+    })
+  }
+
+  keyup(key: string): BrowserInterface {
+    return this.chain((el) => {
+      return page.keyboard.up(key).then(() => el)
+    })
+  }
+
+  click() {
+    return this.chain((el) => {
+      return el.click().then(() => el)
+    })
+  }
+
+  elementsByCss(sel) {
+    return this.chain(() =>
+      page.$$(sel).then((els) => {
+        return els.map((el) => {
+          const origGetAttribute = el.getAttribute.bind(el)
+          el.getAttribute = (name) => {
+            // ensure getAttribute defaults to empty string to
+            // match selenium
+            return origGetAttribute(name).then((val) => val || "")
+          }
+          return el
+        })
+      }),
+    ) as any as BrowserInterface[]
+  }
+
+  waitForElementByCss(selector, timeout?: number) {
+    return this.chain(() => {
+      return page.waitForSelector(selector, {timeout, state: "attached"}).then(async (el) => {
+        // it seems selenium waits longer and tests rely on this behavior
+        // so we wait for the load event fire before returning
+        await page.waitForLoadState()
+        return this.wrapElement(el, selector)
+      })
+    })
+  }
+
+  waitForCondition(condition, timeout) {
+    return this.chain(() => {
+      return page.waitForFunction(condition, {timeout})
+    })
+  }
+
+  async eval(snippet) {
+    // TODO: should this and evalAsync be chained? Might lead
+    // to bad chains
+    return page
+      .evaluate(snippet)
+      .catch((err) => {
+        console.error("eval error:", err)
+        return null
+      })
+      .then(async (val) => {
+        await page.waitForLoadState()
+        return val
+      })
+  }
+
+  async evalAsync(snippet) {
+    if (typeof snippet === "function") {
+      snippet = snippet.toString()
+    }
+
+    if (snippet.includes(`var callback = arguments[arguments.length - 1]`)) {
+      snippet = `(function() {
+        return new Promise((resolve, reject) => {
+          const origFunc = ${snippet}
+          try {
+            origFunc(resolve)
+          } catch (err) {
+            reject(err)
+          }
+        })
+      })()`
+    }
+
+    return page.evaluate(snippet).catch(() => null)
+  }
+
+  async log() {
+    return this.chain(() => pageLogs) as any
+  }
+
+  async websocketFrames() {
+    return this.chain(() => websocketFrames) as any
+  }
+
+  async url() {
+    return this.chain(() => page.evaluate("window.location.href")) as any
+  }
+}
+
+export default Playwright

integration-tests/utils/browsers/selenium.ts

@@ -0,0 +1,331 @@
+import path from "path"
+import resolveFrom from "resolve-from"
+import {execSync} from "child_process"
+import {Options as ChromeOptions} from "selenium-webdriver/chrome"
+import {Options as SafariOptions} from "selenium-webdriver/safari"
+import {Options as FireFoxOptions} from "selenium-webdriver/firefox"
+import {Builder, By, ThenableWebDriver, until} from "selenium-webdriver"
+
+import {BrowserInterface} from "./base"
+
+const {
+  BROWSERSTACK,
+  BROWSERSTACK_USERNAME,
+  BROWSERSTACK_ACCESS_KEY,
+  HEADLESS,
+  CHROME_BIN,
+  LEGACY_SAFARI,
+  SKIP_LOCAL_SELENIUM_SERVER,
+} = process.env
+
+if (process.env.ChromeWebDriver) {
+  process.env.PATH = `${process.env.ChromeWebDriver}${path.delimiter}${process.env.PATH}`
+}
+
+let seleniumServer: any
+let browserStackLocal: any
+let browser: ThenableWebDriver
+
+export async function quit() {
+  await Promise.all([
+    browser?.quit(),
+    new Promise<void>((resolve) => {
+      browserStackLocal ? browserStackLocal.killAllProcesses(() => resolve()) : resolve()
+    }),
+  ])
+  seleniumServer?.kill()
+
+  browser = undefined
+  browserStackLocal = undefined
+  seleniumServer = undefined
+}
+
+class Selenium extends BrowserInterface {
+  private browserName: string
+
+  // TODO: support setting locale
+  async setup(browserName: string, locale?: string) {
+    if (browser) return
+    this.browserName = browserName
+
+    let capabilities = {}
+    const isSafari = browserName === "safari"
+    const isFirefox = browserName === "firefox"
+    const isIE = browserName === "internet explorer"
+    const isBrowserStack = BROWSERSTACK
+    const localSeleniumServer = SKIP_LOCAL_SELENIUM_SERVER !== "true"
+
+    // install conditional packages globally so the entire
+    // monorepo doesn't need to rebuild when testing
+    let globalNodeModules: string
+
+    if (isBrowserStack || localSeleniumServer) {
+      globalNodeModules = execSync("npm root -g").toString().trim()
+    }
+
+    if (isBrowserStack) {
+      const {Local} = require(resolveFrom(globalNodeModules, "browserstack-local"))
+      browserStackLocal = new Local()
+
+      const localBrowserStackOpts = {
+        key: process.env.BROWSERSTACK_ACCESS_KEY,
+        // Add a unique local identifier to run parallel tests
+        // on BrowserStack
+        localIdentifier: new Date().getTime(),
+      }
+      await new Promise<void>((resolve, reject) => {
+        browserStackLocal.start(localBrowserStackOpts, (err) => {
+          if (err) return reject(err)
+          console.log("Started BrowserStackLocal", browserStackLocal.isRunning())
+          resolve()
+        })
+      })
+
+      const safariOpts = {
+        os: "OS X",
+        os_version: "Mojave",
+        browser: "Safari",
+      }
+      const safariLegacyOpts = {
+        os: "OS X",
+        os_version: "Sierra",
+        browserName: "Safari",
+        browser_version: "10.1",
+      }
+      const ieOpts = {
+        os: "Windows",
+        os_version: "10",
+        browser: "IE",
+      }
+      const firefoxOpts = {
+        os: "Windows",
+        os_version: "10",
+        browser: "Firefox",
+      }
+      const sharedOpts = {
+        "browserstack.local": true,
+        "browserstack.video": false,
+        "browserstack.user": BROWSERSTACK_USERNAME,
+        "browserstack.key": BROWSERSTACK_ACCESS_KEY,
+        "browserstack.localIdentifier": localBrowserStackOpts.localIdentifier,
+      }
+
+      capabilities = {
+        ...capabilities,
+        ...sharedOpts,
+
+        ...(isIE ? ieOpts : {}),
+        ...(isSafari ? (LEGACY_SAFARI ? safariLegacyOpts : safariOpts) : {}),
+        ...(isFirefox ? firefoxOpts : {}),
+      }
+    } else if (localSeleniumServer) {
+      console.log("Installing selenium server")
+      const seleniumServerMod = require(resolveFrom(globalNodeModules, "selenium-standalone"))
+
+      await new Promise<void>((resolve, reject) => {
+        seleniumServerMod.install((err) => {
+          if (err) return reject(err)
+          resolve()
+        })
+      })
+
+      console.log("Starting selenium server")
+      await new Promise<void>((resolve, reject) => {
+        seleniumServerMod.start((err, child) => {
+          if (err) return reject(err)
+          seleniumServer = child
+          resolve()
+        })
+      })
+      console.log("Started selenium server")
+    }
+
+    let chromeOptions = new ChromeOptions()
+    let firefoxOptions = new FireFoxOptions()
+    let safariOptions = new SafariOptions()
+
+    if (HEADLESS) {
+      const screenSize = {width: 1280, height: 720}
+      chromeOptions = chromeOptions.headless().windowSize(screenSize) as any
+      firefoxOptions = firefoxOptions.headless().windowSize(screenSize)
+    }
+
+    if (CHROME_BIN) {
+      chromeOptions = chromeOptions.setChromeBinaryPath(path.resolve(CHROME_BIN))
+    }
+
+    let seleniumServerUrl
+
+    if (isBrowserStack) {
+      seleniumServerUrl = "http://hub-cloud.browserstack.com/wd/hub"
+    } else if (localSeleniumServer) {
+      seleniumServerUrl = `http://localhost:4444/wd/hub`
+    }
+
+    browser = new Builder()
+      .usingServer(seleniumServerUrl)
+      .withCapabilities(capabilities)
+      .forBrowser(browserName)
+      .setChromeOptions(chromeOptions)
+      .setFirefoxOptions(firefoxOptions)
+      .setSafariOptions(safariOptions)
+      .build()
+  }
+
+  async get(url: string): Promise<void> {
+    return browser.get(url)
+  }
+
+  async loadPage(url: string) {
+    // in chrome we use a new tab for testing
+    if (this.browserName === "chrome") {
+      const initialHandle = await browser.getWindowHandle()
+
+      await browser.switchTo().newWindow("tab")
+      const newHandle = await browser.getWindowHandle()
+
+      await browser.switchTo().window(initialHandle)
+      await browser.close()
+      await browser.switchTo().window(newHandle)
+
+      // clean-up extra windows created from links and such
+      for (const handle of await browser.getAllWindowHandles()) {
+        if (handle !== newHandle) {
+          await browser.switchTo().window(handle)
+          await browser.close()
+        }
+      }
+      await browser.switchTo().window(newHandle)
+    } else {
+      await browser.get("about:blank")
+    }
+    return browser.get(url)
+  }
+
+  back(): BrowserInterface {
+    return this.chain(() => {
+      return browser.navigate().back()
+    })
+  }
+  forward(): BrowserInterface {
+    return this.chain(() => {
+      return browser.navigate().forward()
+    })
+  }
+  refresh(): BrowserInterface {
+    return this.chain(() => {
+      return browser.navigate().refresh()
+    })
+  }
+  setDimensions({width, height}: {height: number; width: number}): BrowserInterface {
+    return this.chain(() => browser.manage().window().setRect({width, height, x: 0, y: 0}))
+  }
+  addCookie(opts: {name: string; value: string}): BrowserInterface {
+    return this.chain(() => browser.manage().addCookie(opts))
+  }
+  deleteCookies(): BrowserInterface {
+    return this.chain(() => browser.manage().deleteAllCookies())
+  }
+
+  elementByCss(selector: string) {
+    return this.chain(() => {
+      return browser.findElement(By.css(selector)).then((el: any) => {
+        el.selector = selector
+        el.text = () => el.getText()
+        el.getComputedCss = (prop) => el.getCssValue(prop)
+        el.type = (text) => el.sendKeys(text)
+        el.getValue = () =>
+          browser.executeScript(`return document.querySelector('${selector}').value`)
+        return el
+      })
+    })
+  }
+
+  elementById(sel) {
+    return this.elementByCss(`#${sel}`)
+  }
+
+  getValue() {
+    return this.chain((el) =>
+      browser.executeScript(`return document.querySelector('${el.selector}').value`),
+    ) as any
+  }
+
+  text() {
+    return this.chain((el) => el.getText()) as any
+  }
+
+  type(text) {
+    return this.chain((el) => el.sendKeys(text))
+  }
+
+  moveTo() {
+    return this.chain((el) => {
+      return browser
+        .actions()
+        .move({origin: el})
+        .perform()
+        .then(() => el)
+    })
+  }
+
+  async getComputedCss(prop: string) {
+    return this.chain((el) => {
+      return el.getCssValue(prop)
+    }) as any
+  }
+
+  async getAttribute(attr) {
+    return this.chain((el) => el.getAttribute(attr))
+  }
+
+  async hasElementByCssSelector(selector: string) {
+    return this.eval(`!!document.querySelector('${selector}')`) as any
+  }
+
+  click() {
+    return this.chain((el) => {
+      return el.click().then(() => el)
+    })
+  }
+
+  elementsByCss(sel) {
+    return this.chain(() => browser.findElements(By.css(sel))) as any as BrowserInterface[]
+  }
+
+  waitForElementByCss(sel, timeout) {
+    return this.chain(() => browser.wait(until.elementLocated(By.css(sel)), timeout))
+  }
+
+  waitForCondition(condition, timeout) {
+    return this.chain(() =>
+      browser.wait(async (driver) => {
+        return driver.executeScript("return " + condition).catch(() => false)
+      }, timeout),
+    )
+  }
+
+  async eval(snippet) {
+    if (typeof snippet === "string" && !snippet.startsWith("return")) {
+      snippet = `return ${snippet}`
+    }
+    return browser.executeScript(snippet)
+  }
+
+  async evalAsync(snippet) {
+    if (typeof snippet === "string" && !snippet.startsWith("return")) {
+      snippet = `return ${snippet}`
+    }
+    return browser.executeAsyncScript(snippet)
+  }
+
+  async log() {
+    return this.chain(() => browser.manage().logs().get("browser")) as any
+  }
+
+  async url() {
+    return this.chain(() => browser.getCurrentUrl()) as any
+  }
+}
+
+export default Selenium

integration-tests/utils/next-test-utils.ts

@@ -1,30 +1,33 @@
 import spawn from "cross-spawn"
-import {ChildProcess} from "child_process"
 import express from "express"
-import {existsSync, readFileSync, unlinkSync, writeFileSync, createReadStream} from "fs"
+import {existsSync, readFileSync, createReadStream} from "fs"
 import {writeFile} from "fs-extra"
 import getPort from "get-port"
 import http from "http"
-// `next` here is the symlink in `test/node_modules/next` which points to the root directory.
-// This is done so that requiring from `next` works.
-// The reason we don't import the relative path `../../dist/<etc>` is that it would lead to inconsistent module singletons
+import https from "https"
 import server from "next/dist/server/next"
+import _pkg from "next/package.json"
 import fetch from "node-fetch"
 import path from "path"
 import qs from "querystring"
 import treeKill from "tree-kill"
-
+import {readJSONSync} from "fs-extra"
+// import {packageDirectorySync} from "pkg-dir"
+import pkgDir from "pkg-dir"
+import resolveCwd from "resolve-cwd"
 export const nextServer = server
-
-// polyfill Object.fromEntries for the test/integration/relay-analytics tests
-// on node 10, this can be removed after we no longer support node 10
-if (!Object.fromEntries) {
-  Object.fromEntries = require("core-js/features/object/from-entries")
-}
+export const pkg = _pkg
 
 export function initNextServerScript(scriptPath, successRegexp, env, failRegexp, opts) {
   return new Promise((resolve, reject) => {
-    const instance = spawn("node", ["--no-deprecation", scriptPath], {env})
+    const instance = spawn(
+      "node",
+      [...((opts && opts.nodeArgs) || []), "--no-deprecation", scriptPath],
+      {
+        env,
+        cwd: opts && opts.cwd,
+      },
+    )
 
     function handleStdout(data) {
       const message = data.toString()
@@ -65,6 +68,27 @@ export function initNextServerScript(scriptPath, successRegexp, env, failRegexp,
   })
 }
 
+export function getFullUrl(appPortOrUrl: string | number, url: string, hostname?: string) {
+  let fullUrl =
+    typeof appPortOrUrl === "string" && appPortOrUrl.startsWith("http")
+      ? appPortOrUrl
+      : `http://${hostname ? hostname : "localhost"}:${appPortOrUrl}${url}`
+
+  if (typeof appPortOrUrl === "string" && url) {
+    const parsedUrl = new URL(fullUrl)
+    const parsedPathQuery = new URL(url, fullUrl)
+
+    parsedUrl.search = parsedPathQuery.search
+    parsedUrl.pathname = parsedPathQuery.pathname
+
+    if (hostname && parsedUrl.hostname === "localhost") {
+      parsedUrl.hostname = hostname
+    }
+    fullUrl = parsedUrl.toString()
+  }
+  return fullUrl
+}
+
 export function renderViaAPI(app, pathname, query) {
   const url = `${pathname}${query ? `?${qs.stringify(query)}` : ""}`
   return app.renderToHTML({url}, {}, pathname, query)
@@ -75,40 +99,63 @@ export function renderViaHTTP(appPort, pathname, query, opts) {
 }
 
 export function fetchViaHTTP(appPort, pathname, query, opts) {
-  const url = `http://localhost:${appPort}${pathname}${
+  const url = `${pathname}${
     typeof query === "string" ? query : query ? `?${qs.stringify(query)}` : ""
   }`
-  return fetch(url, opts)
+  return fetch(getFullUrl(appPort, url), {
+    // in node.js v17 fetch favors IPv6 but Next.js is
+    // listening on IPv4 by default so force IPv4 DNS resolving
+    agent: (parsedUrl) => {
+      if (parsedUrl.protocol === "https:") {
+        return new https.Agent({family: 4})
+      }
+      if (parsedUrl.protocol === "http:") {
+        return new http.Agent({family: 4})
+      }
+    },
+    ...opts,
+  })
 }
 
 export function findPort() {
   return getPort()
 }
 
-interface RunNextCommandOptions {
-  cwd?: string
-  env?: Record<any, any>
-  spawnOptions?: any
-  instance?: any
-  stderr?: boolean
-  stdout?: boolean
-  ignoreFail?: boolean
+export function resolveBin(pkg: string, executable = pkg) {
+  const packageDir = pkgDir.sync()!
+  if (!packageDir) throw new Error(`Could not find package.json for '${pkg}'`)
+  const bin = readJSONSync(path.join(packageDir, "package.json"))
+  const binPath = typeof bin === "object" ? bin.dependencies[executable] : bin
+  if (!binPath) throw new Error(`No bin '${executable}' in module '${pkg}'`)
+
+  const fullPath = path.join(packageDir, `node_modules`, `${pkg}`)
+
+  return fullPath
+}
+export function getCommandBin(
+  command: string,
+  rootFolder: string = process.cwd(),
+  _usePatched: boolean = false,
+) {
+  const bin = resolveBin(command)
+  return path.resolve(rootFolder, bin)
 }
 
-export function runNextCommand(argv: any[], options: RunNextCommandOptions = {}) {
-  const cwd = options.cwd
+export function runNextCommand(argv, options: RunNextCommandOptions = {}) {
+  const nextnextbin = getCommandBin("next", options.cwd)
+  const nextBin = path.join(nextnextbin, "dist/bin/next")
+  const cwd = options.cwd || process.cwd()
   // Let Next.js decide the environment
   const env = {
     ...process.env,
-    ...options.env,
-    NODE_ENV: "",
+    NODE_ENV: "production" as const,
     __NEXT_TEST_MODE: "true",
+    ...options.env,
   }
 
-  return new Promise<any>((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     console.log(`Running command "next ${argv.join(" ")}"`)
-    const instance = spawn("pnpm", ["exec", "next", ...argv], {
-      ...options.spawnOptions,
+    const instance = spawn("node", [nextBin, ...argv], {
       cwd,
       env,
       stdio: ["ignore", "pipe", "pipe"],
@@ -118,22 +165,43 @@ export function runNextCommand(argv: any[], options: RunNextCommandOptions = {})
       options.instance(instance)
     }
 
+    let mergedStdio = ""
+
     let stderrOutput = ""
-    instance.stderr?.on("data", function (chunk) {
-      stderrOutput += chunk
-    })
+    if (options.stderr) {
+      instance.stderr?.on("data", function (chunk) {
+        mergedStdio += chunk
+        stderrOutput += chunk
+
+        if (options.stderr === "log") {
+          console.log(chunk.toString())
+        }
+      })
+    } else {
+      instance.stderr?.on("data", function (chunk) {
+        mergedStdio += chunk
+      })
+    }
 
     let stdoutOutput = ""
     if (options.stdout) {
       instance.stdout?.on("data", function (chunk) {
+        mergedStdio += chunk
         stdoutOutput += chunk
+
+        if (options.stdout === "log") {
+          console.log(chunk.toString())
+        }
+      })
+    } else {
+      instance.stdout?.on("data", function (chunk) {
+        mergedStdio += chunk
       })
     }
 
     instance.on("close", (code, signal) => {
       if (!options.stderr && !options.stdout && !options.ignoreFail && code !== 0) {
-        console.log(stderrOutput)
-        return reject(new Error(`command failed with code ${code}`))
+        return reject(new Error(`command failed with code ${code}\n${mergedStdio}`))
       }
 
       resolve({
@@ -145,7 +213,6 @@ export function runNextCommand(argv: any[], options: RunNextCommandOptions = {})
     })
 
     instance.on("error", (err: any) => {
-      console.log(stderrOutput)
       err.stdout = stdoutOutput
       err.stderr = stderrOutput
       reject(err)
@@ -153,41 +220,41 @@ export function runNextCommand(argv: any[], options: RunNextCommandOptions = {})
   })
 }
 
-interface RunNextCommandDevOptions {
-  cwd?: string
-  env?: Record<any, any>
-  onStdout?: (stdout: string) => void
-  onStderr?: (stderr: string) => void
-  stderr?: boolean
-  stdout?: boolean
-  nodeArgs?: []
-  bootupMarker?: any
-  nextStart?: boolean
-}
+export function runNextCommandDev(argv, stdOut, opts: RunNextCommandDevOptions = {}) {
+  const nextnextbin = getCommandBin("next", opts.cwd)
+  const nextDir = path.resolve(require.resolve("next/package"))
+  const nextBin = path.join(nextnextbin, "dist/bin/next")
 
-export function runNextCommandDev(argv, opts: RunNextCommandDevOptions = {}) {
-  const cwd = opts.cwd // || nextDir
+  const cwd = opts.cwd || nextDir
   const env = {
     ...process.env,
-    NODE_ENV: opts.nextStart ? ("production" as const) : ("development" as const),
+    NODE_ENV: undefined,
     __NEXT_TEST_MODE: "true",
     ...opts.env,
   }
 
-  return new Promise<void | string | ChildProcess>((resolve, reject) => {
-    const instance = spawn("pnpm", ["exec", "next", ...argv], {
+  const nodeArgs = opts.nodeArgs || []
+  return new Promise<void>((resolve, reject) => {
+    const instance = spawn("node", [...nodeArgs, "--no-deprecation", nextBin, ...argv], {
       cwd,
       env,
-    })
-
+    } as {})
     let didResolve = false
 
     function handleStdout(data) {
       const message = data.toString()
-
-      if (!didResolve) {
-        didResolve = true
-        resolve(instance)
+      const bootupMarkers = {
+        dev: /compiled .*successfully/i,
+        start: /started server/i,
+      }
+      if (
+        (opts.bootupMarker && opts.bootupMarker.test(message)) ||
+        bootupMarkers[opts.nextStart || stdOut ? "start" : "dev"].test(message)
+      ) {
+        if (!didResolve) {
+          didResolve = true
+          resolve(stdOut ? message : instance)
+        }
       }
 
       if (typeof opts.onStdout === "function") {
@@ -229,43 +296,42 @@ export function runNextCommandDev(argv, opts: RunNextCommandDevOptions = {}) {
 }
 
 // Launch the app in dev mode.
-export function launchApp(dir, port, opts) {
-  return runNextCommandDev(["-p", port], {cwd: dir, ...opts})
+export function launchApp(dir, port, opts: RunNextCommandDevOptions) {
+  return runNextCommandDev([dir, "-p", port], undefined, opts)
 }
 
-export function nextBuild(dir, args = [], opts = {}) {
-  return runNextCommand(["build", ...args], {cwd: dir, ...opts})
+export function nextBuild(dir, args = [], opts = {}): any {
+  return runNextCommand(["build", dir, ...args], opts)
 }
 
 export function nextExport(dir, {outdir}, opts = {}) {
-  return runNextCommand(["export", dir, "--outdir", outdir], {cwd: dir, ...opts})
+  return runNextCommand(["export", dir, "--outdir", outdir], opts)
 }
 
 export function nextExportDefault(dir, opts = {}) {
-  return runNextCommand(["export", dir], {cwd: dir, ...opts})
+  return runNextCommand(["export", dir], opts)
 }
 
 export function nextLint(dir, args = [], opts = {}) {
-  return runNextCommand(["lint", dir, ...args], {cwd: dir, ...opts})
+  return runNextCommand(["lint", dir, ...args], opts)
 }
 
 export function nextStart(dir, port, opts = {}) {
-  return runNextCommandDev(["start", "-p", port], {
-    cwd: dir,
+  return runNextCommandDev(["start", "-p", port, dir], undefined, {
     ...opts,
     nextStart: true,
   })
 }
 
-export function buildTS(args = [], cwd, env = {NODE_ENV: "production" as const}) {
-  cwd = cwd
-  env = {...process.env, ...env}
+export function buildTS(args = [], cwd, env = {}) {
+  cwd = cwd || path.dirname(require.resolve("next/package"))
+  env = {...process.env, NODE_ENV: undefined, ...env}
 
   return new Promise<void>((resolve, reject) => {
     const instance = spawn(
       "node",
       ["--no-deprecation", require.resolve("typescript/lib/tsc"), ...args],
-      {cwd, env},
+      {cwd, env} as {},
     )
     let output = ""
 
@@ -285,10 +351,9 @@ export function buildTS(args = [], cwd, env = {NODE_ENV: "production" as const})
   })
 }
 
-// Kill a launched app
-export async function killApp(instance) {
+export async function killProcess(pid) {
   await new Promise<void>((resolve, reject) => {
-    treeKill(instance.pid, (err) => {
+    treeKill(pid, (err) => {
       if (err) {
         if (
           process.platform === "win32" &&
@@ -311,11 +376,25 @@ export async function killApp(instance) {
   })
 }
 
-export async function startApp(app: any) {
+// Kill a launched app
+export async function killApp(instance) {
+  if (instance) {
+    await killProcess(instance.pid)
+  }
+}
+
+export async function startApp(app) {
+  // force require usage instead of dynamic import in jest
+  // x-ref: https://github.com/nodejs/node/issues/35889
+  process.env.__NEXT_TEST_MODE = "jest"
+
+  // TODO: tests that use this should be migrated to use
+  // the nextStart test function instead as it tests outside
+  // of jest's context
   await app.prepare()
   const handler = app.getRequestHandler()
-  const server = http.createServer(handler)
-  ;(server as any).__app = app
+  const server: any = http.createServer(handler)
+  server.__app = app
 
   await promiseCall(server, "listen")
   return server
@@ -346,7 +425,7 @@ export function waitFor(millis) {
   return new Promise((resolve) => setTimeout(resolve, millis))
 }
 
-export async function startStaticServer(dir, notFoundFile) {
+export async function startStaticServer(dir, notFoundFile, fixedPort) {
   const app = express()
   const server = http.createServer(app)
   app.use(express.static(dir))
@@ -357,7 +436,7 @@ export async function startStaticServer(dir, notFoundFile) {
     })
   }
 
-  await promiseCall(server, "listen")
+  await promiseCall(server, "listen", fixedPort)
   return server
 }
 
@@ -401,55 +480,9 @@ export async function check(contentFn, regex, hardError = true) {
   return false
 }
 
-export class File {
-  path: string
-  originalContent: any
-  constructor(path) {
-    this.path = path
-    this.originalContent = existsSync(this.path) ? readFileSync(this.path, "utf8") : null
-  }
-
-  write(content) {
-    if (!this.originalContent) {
-      this.originalContent = content
-    }
-    writeFileSync(this.path, content, "utf8")
-  }
-
-  replace(pattern, newValue) {
-    const currentContent = readFileSync(this.path, "utf8")
-    if (pattern instanceof RegExp) {
-      if (!pattern.test(currentContent)) {
-        throw new Error(
-          `Failed to replace content.\n\nPattern: ${pattern.toString()}\n\nContent: ${currentContent}`,
-        )
-      }
-    } else if (typeof pattern === "string") {
-      if (!currentContent.includes(pattern)) {
-        throw new Error(
-          `Failed to replace content.\n\nPattern: ${pattern}\n\nContent: ${currentContent}`,
-        )
-      }
-    } else {
-      throw new Error(`Unknown replacement attempt type: ${pattern}`)
-    }
-
-    const newContent = currentContent.replace(pattern, newValue)
-    this.write(newContent)
-  }
-
-  delete() {
-    unlinkSync(this.path)
-  }
-
-  restore() {
-    this.write(this.originalContent)
-  }
-}
-
 export async function evaluate(browser, input) {
   if (typeof input === "function") {
-    const result = await browser.executeScript(input)
+    const result = await browser.eval(input)
     await new Promise((resolve) => setTimeout(resolve, 30))
     return result
   } else {
@@ -479,9 +512,8 @@ export async function retry(fn, duration = 3000, interval = 500, description) {
 }
 
 export async function hasRedbox(browser, expected = true) {
-  let attempts = 30
-  do {
-    const has = await evaluate(browser, () => {
+  for (let i = 0; i < 30; i++) {
+    const result = await evaluate(browser, () => {
       return Boolean(
         [].slice
           .call(document.querySelectorAll("nextjs-portal"))
@@ -492,15 +524,12 @@ export async function hasRedbox(browser, expected = true) {
           ),
       )
     })
-    if (has) {
-      return true
-    }
-    if (--attempts < 0) {
-      break
-    }
 
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  } while (expected)
+    if (result === expected) {
+      return result
+    }
+    await waitFor(1000)
+  }
   return false
 }
 
@@ -544,6 +573,24 @@ export async function getRedboxSource(browser) {
   )
 }
 
+export async function getRedboxDescription(browser) {
+  return retry(
+    () =>
+      evaluate(browser, () => {
+        const portal = [].slice
+          .call(document.querySelectorAll("nextjs-portal"))
+          .find((p) => p.shadowRoot.querySelector("[data-nextjs-dialog-header]"))
+        const root = portal.shadowRoot
+        return root
+          .querySelector("#nextjs__container_errors_desc")
+          .innerText.replace(/__WEBPACK_DEFAULT_EXPORT__/, "Unknown")
+      }),
+    3000,
+    500,
+    "getRedboxDescription",
+  )
+}
+
 export function getBrowserBodyText(browser) {
   return browser.eval('document.getElementsByTagName("body")[0].innerText')
 }
@@ -552,8 +599,8 @@ export function normalizeRegEx(src) {
   return new RegExp(src).source.replace(/\^\//g, "^\\/")
 }
 
-function readJson(path: string) {
-  return JSON.parse(readFileSync(path) as any)
+function readJson(path) {
+  return JSON.parse(readFileSync(path).toString())
 }
 
 export function getBuildManifest(dir) {
@@ -614,3 +661,96 @@ export function readNextBuildServerPageFile(appDir, page) {
   const pageFile = getPageFileFromPagesManifest(appDir, page)
   return readFileSync(path.join(appDir, ".next", "server", pageFile), "utf8")
 }
+
+/**
+ *
+ * @param {string} suiteName
+ * @param {{env: 'prod' | 'dev', appDir: string}} context
+ * @param {{beforeAll?: Function; afterAll?: Function; runTests: Function}} options
+ */
+function runSuite(suiteName, context, options) {
+  const {appDir, env} = context
+  describe(`${suiteName} ${env}`, () => {
+    beforeAll(async () => {
+      options.beforeAll?.(env)
+      context.stderr = ""
+      const onStderr = (msg) => {
+        context.stderr += msg
+      }
+      context.stdout = ""
+      const onStdout = (msg) => {
+        context.stdout += msg
+      }
+      if (env === "prod") {
+        context.appPort = await findPort()
+        const {stdout, stderr, code} = await nextBuild(appDir, [], {
+          stderr: true,
+          stdout: true,
+        })
+        context.stdout = stdout
+        context.stderr = stderr
+        context.code = code
+        context.server = await nextStart(context.appDir, context.appPort, {
+          onStderr,
+          onStdout,
+        })
+      } else if (env === "dev") {
+        context.appPort = await findPort()
+        context.server = await launchApp(context.appDir, context.appPort, {
+          onStderr,
+          onStdout,
+        })
+      }
+    })
+    afterAll(async () => {
+      options.afterAll?.(env)
+      if (context.server) {
+        await killApp(context.server)
+      }
+    })
+    options.runTests(context, env)
+  })
+}
+
+/**
+ *
+ * @param {string} suiteName
+ * @param {string} appDir
+ * @param {{beforeAll?: Function; afterAll?: Function; runTests: Function}} options
+ */
+export function runDevSuite(suiteName, appDir, options) {
+  return runSuite(suiteName, {appDir, env: "dev"}, options)
+}
+
+/**
+ *
+ * @param {string} suiteName
+ * @param {string} appDir
+ * @param {{beforeAll?: Function; afterAll?: Function; runTests: Function}} options
+ */
+export function runProdSuite(suiteName, appDir, options) {
+  return runSuite(suiteName, {appDir, env: "prod"}, options)
+}
+
+interface RunNextCommandOptions {
+  cwd?: string
+  env?: Record<any, any>
+  spawnOptions?: any
+  instance?: any
+  stderr?: string
+  stdout?: string
+  ignoreFail?: boolean
+  nodeArgs?: []
+}
+
+interface RunNextCommandDevOptions {
+  cwd?: string
+  env?: Record<any, any>
+  onStdout?: (stdout: string) => void
+  onStderr?: (stderr: string) => void
+  stderr?: string | boolean
+  stdout?: string | boolean
+  nodeArgs?: []
+  bootupMarker?: any
+  nextStart?: boolean
+}

integration-tests/utils/next-webdriver.ts

@@ -1,236 +1,105 @@
-/// <reference types="./next-webdriver" />
-import fetch from "node-fetch"
-import os from "os"
-import path from "path"
-import {Builder, By} from "selenium-webdriver"
-import {Options as ChromeOptions} from "selenium-webdriver/chrome"
-import {Options as FireFoxOptions} from "selenium-webdriver/firefox"
-import {Options as SafariOptions} from "selenium-webdriver/safari"
-import Chain from "./wd-chain"
+import {getFullUrl} from "./next-test-utils"
+import {BrowserInterface} from "./browsers/base"
+import browserMod, {quit} from "./browsers/playwright"
+;(global as any).browserName = process.env.BROWSER_NAME || "chrome"
 
-export function waitFor(millis) {
-  return new Promise((resolve) => setTimeout(resolve, millis))
-}
+let browserQuit
 
-export {By}
-
-const {
-  BROWSER_NAME: browserName = "chrome",
-  BROWSERSTACK,
-  BROWSERSTACK_USERNAME,
-  BROWSERSTACK_ACCESS_KEY,
-  HEADLESS,
-  CHROME_BIN,
-  LEGACY_SAFARI,
-  CHROMEWEBDRIVER,
-} = process.env
-
-let capabilities = {}
-
-const isChrome = browserName === "chrome"
-const isSafari = browserName === "safari"
-const isFirefox = browserName === "firefox"
-const isIE = browserName === "internet explorer"
-
-if (CHROMEWEBDRIVER) {
-  console.log("path", process.env.PATH)
-  console.log("comspec", process.env.COMSPEC)
-  console.log("chromedriver", `${CHROMEWEBDRIVER}${path.delimiter}${process.env.PATH}`)
-}
-
-if (process.env.ChromeWebDriver) {
-  process.env.PATH = `${process.env.ChromeWebDriver}${path.delimiter}${process.env.PATH}`
-}
-
-const isBrowserStack = BROWSERSTACK && BROWSERSTACK_USERNAME && BROWSERSTACK_ACCESS_KEY
-
-if (isBrowserStack) {
-  const safariOpts = {
-    os: "OS X",
-    os_version: "Mojave",
-    browser: "Safari",
-  }
-  const safariLegacyOpts = {
-    os: "OS X",
-    os_version: "Sierra",
-    browserName: "Safari",
-    browser_version: "10.1",
-  }
-  const ieOpts = {
-    os: "Windows",
-    os_version: "10",
-    browser: "IE",
-  }
-  const firefoxOpts = {
-    os: "Windows",
-    os_version: "10",
-    browser: "Firefox",
-  }
-  const sharedOpts = {
-    "browserstack.local": true,
-    "browserstack.video": false,
-    "browserstack.user": BROWSERSTACK_USERNAME,
-    "browserstack.key": BROWSERSTACK_ACCESS_KEY,
-    "browserstack.localIdentifier": global.browserStackLocalId,
-  }
-
-  capabilities = {
-    ...capabilities,
-    ...sharedOpts,
-
-    ...(isIE ? ieOpts : {}),
-    ...(isSafari ? (LEGACY_SAFARI ? safariLegacyOpts : safariOpts) : {}),
-    ...(isFirefox ? firefoxOpts : {}),
-  }
-}
-
-let chromeOptions = new ChromeOptions()
-let firefoxOptions = new FireFoxOptions()
-let safariOptions = new SafariOptions()
-
-chromeOptions.addArguments("--remote-debugging-port=9222")
-chromeOptions.addArguments("--headless")
-chromeOptions.addArguments("--no-sandbox")
-chromeOptions.addArguments("--disable-gpu")
-chromeOptions.addArguments("--disable-dev-shm-usage")
-
-if (HEADLESS) {
-  const screenSize = {width: 1280, height: 720}
-  chromeOptions = chromeOptions.headless().windowSize(screenSize)
-  firefoxOptions = firefoxOptions.headless().windowSize(screenSize)
-}
-
-if (CHROME_BIN) {
-  console.log("chrome bin", CHROME_BIN)
-  chromeOptions.setChromeBinaryPath(path.resolve(CHROME_BIN))
-}
-
-let seleniumServer
-
-if (isBrowserStack) {
-  seleniumServer = "http://hub-cloud.browserstack.com/wd/hub"
-} else if (global.seleniumServerPort) {
-  seleniumServer = `http://localhost:${global.seleniumServerPort}/wd/hub`
-}
-
-let browser = new Builder()
-  .usingServer(seleniumServer)
-  .withCapabilities(capabilities)
-  .forBrowser(browserName)
-  .setChromeOptions(chromeOptions)
-  .setFirefoxOptions(firefoxOptions)
-  .setSafariOptions(safariOptions)
-  .build()
-
-global.wd = browser
-
-let initialWindow
-let deviceIP = "localhost"
-
-const getDeviceIP = async () => {
-  const networkIntfs = os.networkInterfaces()
-  // find deviceIP to use with BrowserStack
-  for (const intf of Object.keys(networkIntfs)) {
-    const addresses = networkIntfs[intf]
-
-    for (const {internal, address, family} of addresses || []) {
-      if (family !== "IPv4" || internal) continue
-      try {
-        const res = await fetch(`http://${address}:${global._newTabPort}`)
-        if (res.ok) {
-          deviceIP = address
-          break
-        }
-      } catch (_) {}
+if (typeof afterAll === "function") {
+  afterAll(async () => {
+    if (browserQuit) {
+      await browserQuit()
     }
-  }
+  })
 }
 
-export const closeBrowser = async () => {
-  // First we close all extra windows left over
-  let allWindows = await browser.getAllWindowHandles()
-
-  for (const win of allWindows) {
-    if (win === initialWindow) continue
-    try {
-      await browser.switchTo().window(win)
-      await browser.close()
-    } catch (_) {}
-  }
-}
-
-// eslint-disable-next-line no-unused-vars
-const freshWindow = async (appPort) => {
-  // First we close all extra windows left over
-  let allWindows = await browser.getAllWindowHandles()
-
-  for (const win of allWindows) {
-    if (win === initialWindow) continue
-    try {
-      await browser.switchTo().window(win)
-      await browser.close()
-    } catch (_) {}
-  }
-  await browser.switchTo().window(initialWindow)
-
-  // now we open a fresh window
-  await browser.get(`http://${deviceIP}:${global._newTabPort}`)
-
-  // await browser.executeScript(`window.location.href = "http://${deviceIP}:${appPort}"`)
-
-  const newTabLink = await browser.findElement(By.css("#new"))
-  await newTabLink.click()
-
-  allWindows = await browser.getAllWindowHandles()
-  const newWindow = allWindows.find((win) => win !== initialWindow)
-  await browser.switchTo().window(newWindow!)
-}
+export const USE_SELENIUM = Boolean(
+  process.env.LEGACY_SAFARI ||
+    process.env.BROWSER_NAME === "internet explorer" ||
+    process.env.SKIP_LOCAL_SELENIUM_SERVER,
+)
 
+/**
+ *
+ * @param appPortOrUrl can either be the port or the full URL
+ * @param url the path/query to append when using appPort
+ * @param options.waitHydration whether to wait for react hydration to finish
+ * @param options.retryWaitHydration allow retrying hydration wait if reload occurs
+ * @param options.disableCache disable cache for page load
+ * @param options.beforePageLoad the callback receiving page instance before loading page
+ * @returns thenable browser instance
+ */
 export default async function webdriver(
-  appPort,
-  path,
-  waitHydration = true,
-  allowHydrationRetry = false,
-) {
-  if (!initialWindow) {
-    initialWindow = await browser.getWindowHandle()
+  appPortOrUrl: string | number,
+  url: string,
+  options?: {
+    waitHydration?: boolean
+    retryWaitHydration?: boolean
+    disableCache?: boolean
+    beforePageLoad?: (page: any) => void
+    locale?: string
+  },
+): Promise<BrowserInterface> {
+  let CurrentInterface: typeof BrowserInterface
+
+  const defaultOptions = {
+    waitHydration: true,
+    retryWaitHydration: false,
+    disableCache: false,
   }
-  if (isBrowserStack && deviceIP === "localhost" && !LEGACY_SAFARI) {
-    await getDeviceIP()
-  }
-  // browser.switchTo().window() fails with `missing field `handle``
-  // in safari and firefox so disabling freshWindow since our
-  // tests shouldn't rely on it
-  // if (isChrome) {
-  //   await freshWindow(appPort)
+  options = Object.assign(defaultOptions, options)
+  const {waitHydration, retryWaitHydration, disableCache, beforePageLoad, locale} = options
+
+  // we import only the needed interface
+  // if (USE_SELENIUM) {
+  //   const browserMod = require('browsers/selenium')
+  //   CurrentInterface = browserMod.default
+  //   browserQuit = browserMod.quit
+  // } else {
+  //   const browserMod = require('./browsers/playwright')
+  //   CurrentInterface = browserMod.default
+  //   browserQuit = browserMod.quit
   // }
 
-  const url = `http://${deviceIP}:${appPort}${path}`
-  ;(browser as any).initUrl = url
-  console.log(`> Loading browser with ${url}`)
+  CurrentInterface = browserMod
+  browserQuit = quit
 
-  await browser.get(url)
-  console.log(`> Loaded browser with ${url}`)
+  const browser = new CurrentInterface()
+  const browserName = process.env.BROWSER_NAME || "chrome"
+  await browser.setup(browserName, locale)
+  ;(global as any).browserName = browserName
+
+  const fullUrl = getFullUrl(appPortOrUrl, url, "localhost")
+
+  console.log(`\n> Loading browser with ${fullUrl}\n`)
+
+  await browser.loadPage(fullUrl, {disableCache, beforePageLoad})
+  console.log(`\n> Loaded browser with ${fullUrl}\n`)
 
   // Wait for application to hydrate
   if (waitHydration) {
-    // console.log(`\n> Waiting hydration for ${url}\n`)
+    console.log(`\n> Waiting hydration for ${fullUrl}\n`)
 
     const checkHydrated = async () => {
-      await browser.executeAsyncScript(function () {
+      await browser.evalAsync(function () {
         var callback = arguments[arguments.length - 1]
 
         // if it's not a Next.js app return
         if (document.documentElement.innerHTML.indexOf("__NEXT_DATA__") === -1) {
+          console.log("Not a next.js page, resolving hydrate check")
           callback()
         }
 
+        // TODO: should we also ensure router.isReady is true
+        // by default before resolving?
         if ((window as any).__NEXT_HYDRATED) {
+          console.log("Next.js page already hydrated")
           callback()
         } else {
           var timeout = setTimeout(callback, 10 * 1000)
           ;(window as any).__NEXT_HYDRATED_CB = function () {
             clearTimeout(timeout)
+            console.log("Next.js hydrate callback fired")
             callback()
           }
         }
@@ -240,9 +109,9 @@ export default async function webdriver(
     try {
       await checkHydrated()
     } catch (err) {
-      if (allowHydrationRetry) {
+      if (retryWaitHydration) {
         // re-try in case the page reloaded during check
-        await waitFor(2000)
+        await new Promise((resolve) => setTimeout(resolve, 2000))
         await checkHydrated()
       } else {
         console.error("failed to check hydration")
@@ -250,17 +119,7 @@ export default async function webdriver(
       }
     }
 
-    // console.log(`\n> Hydration complete for ${url}\n`)
+    console.log(`\n> Hydration complete for ${fullUrl}\n`)
   }
-
-  const promiseProp = new Set(["then", "catch", "finally"])
-
-  return new Proxy(new Chain(browser), {
-    get(obj, prop) {
-      if (obj[prop] || promiseProp.has(prop as string)) {
-        return obj[prop]
-      }
-      return browser[prop]
-    },
-  })
+  return browser
 }

integration-tests/utils/package.json

@@ -19,9 +19,13 @@
     "fs-extra": "10.0.1",
     "get-port": "6.1.2",
     "node-fetch": "3.2.3",
+    "pkg-dir": "5.0.0",
+    "playwright-chromium": "1.14.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-query": "3.39.0",
+    "resolve-cwd": "3.0.0",
+    "resolve-from": "5.0.0",
     "rimraf": "3.0.2",
     "selenium-webdriver": "4.1.1",
     "tree-kill": "1.2.2",

packages/blitz-auth/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @blitzjs/auth
 
+## 2.0.0-alpha.32
+
+### Patch Changes
+
+- blitz@2.0.0-alpha.32
+
+## 2.0.0-alpha.31
+
+### Patch Changes
+
+- blitz@2.0.0-alpha.31
+
+## 2.0.0-alpha.30
+
+### Patch Changes
+
+- Updated dependencies [ce453683]
+  - blitz@2.0.0-alpha.30
+
+## 2.0.0-alpha.29
+
+### Patch Changes
+
+- Updated dependencies [962eb58a]
+  - blitz@2.0.0-alpha.29
+
+## 2.0.0-alpha.28
+
+### Patch Changes
+
+- blitz@2.0.0-alpha.28
+
+## 2.0.0-alpha.27
+
+### Patch Changes
+
+- blitz@2.0.0-alpha.27
+
+## 2.0.0-alpha.26
+
+### Patch Changes
+
+- blitz@2.0.0-alpha.26
+
 ## 2.0.0-alpha.25
 
 ### Patch Changes

packages/blitz-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/auth",
-  "version": "2.0.0-alpha.25",
+  "version": "2.0.0-alpha.32",
   "scripts": {
     "build": "unbuild",
     "predev": "wait-on -d 250 ../blitz/dist/index-server.d.ts",
@@ -26,7 +26,7 @@
     "@types/secure-password": "3.1.1",
     "b64-lite": "1.4.0",
     "bad-behavior": "1.0.1",
-    "blitz": "2.0.0-alpha.25",
+    "blitz": "2.0.0-alpha.32",
     "cookie": "0.4.1",
     "cookie-session": "2.0.0",
     "debug": "4.3.3",
@@ -39,7 +39,7 @@
     "url": "0.11.0"
   },
   "devDependencies": {
-    "@blitzjs/config": "workspace:2.0.0-alpha.25",
+    "@blitzjs/config": "workspace:2.0.0-alpha.32",
     "@testing-library/react": "13.0.0",
     "@testing-library/react-hooks": "7.0.2",
     "@types/cookie": "0.4.1",

packages/blitz-auth/src/client/index.tsx

@@ -12,6 +12,8 @@ import {
   createClientPlugin,
   AuthenticationError,
   RedirectError,
+  RouteUrlObject,
+  Ctx,
 } from "blitz"
 import {
   COOKIE_CSRF_TOKEN,
@@ -26,7 +28,6 @@ import {
 } from "../shared"
 import _debug from "debug"
 import {formatWithValidation} from "../shared/url-utils"
-import {Ctx} from "blitz"
 import {ComponentType} from "react"
 import {ComponentProps} from "react"
 
@@ -190,9 +191,9 @@ export const useRedirectAuthenticated = (to: UrlObject | string) => {
   }
 }
 
-export interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
-  pathname: string
-}
+// export interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
+//   pathname: string
+// }
 
 export type RedirectAuthenticatedTo = string | RouteUrlObject | false
 export type RedirectAuthenticatedToFnCtx = {

packages/blitz-next/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @blitzjs/next
 
+## 2.0.0-alpha.32
+
+### Patch Changes
+
+- @blitzjs/rpc@2.0.0-alpha.32
+
+## 2.0.0-alpha.31
+
+### Patch Changes
+
+- Updated dependencies [17ce29e5]
+  - @blitzjs/rpc@2.0.0-alpha.31
+
+## 2.0.0-alpha.30
+
+### Patch Changes
+
+- @blitzjs/rpc@2.0.0-alpha.30
+
+## 2.0.0-alpha.29
+
+### Patch Changes
+
+- @blitzjs/rpc@2.0.0-alpha.29
+
+## 2.0.0-alpha.28
+
+### Patch Changes
+
+- @blitzjs/rpc@2.0.0-alpha.28
+
+## 2.0.0-alpha.27
+
+### Patch Changes
+
+- Updated dependencies [07292910]
+  - @blitzjs/rpc@2.0.0-alpha.27
+
+## 2.0.0-alpha.26
+
+### Patch Changes
+
+- 0e762fb5: export BlitzPage & BlitzLayout types from @blitzjs/next
+  - @blitzjs/rpc@2.0.0-alpha.26
+
 ## 2.0.0-alpha.25
 
 ### Patch Changes

packages/blitz-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/next",
-  "version": "2.0.0-alpha.25",
+  "version": "2.0.0-alpha.32",
   "scripts": {
     "build": "unbuild",
     "dev": "pnpm predev && pnpm watch unbuild src --wait=0.2",
@@ -23,7 +23,7 @@
     "eslint.js"
   ],
   "dependencies": {
-    "@blitzjs/rpc": "2.0.0-alpha.25",
+    "@blitzjs/rpc": "2.0.0-alpha.32",
     "@types/hoist-non-react-statics": "3.3.1",
     "debug": "4.3.3",
     "fs-extra": "10.0.1",
@@ -32,7 +32,7 @@
     "superjson": "1.8.0"
   },
   "devDependencies": {
-    "@blitzjs/config": "workspace:2.0.0-alpha.25",
+    "@blitzjs/config": "workspace:2.0.0-alpha.32",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.3",
     "@testing-library/react": "13.0.0",
@@ -43,7 +43,7 @@
     "@types/react": "18.0.1",
     "@types/react-dom": "17.0.14",
     "@types/testing-library__react-hooks": "4.0.0",
-    "blitz": "2.0.0-alpha.25",
+    "blitz": "2.0.0-alpha.32",
     "cross-spawn": "7.0.3",
     "find-up": "4.1.0",
     "lodash.frompairs": "4.0.1",

packages/blitz-next/src/index-browser.tsx

@@ -5,12 +5,15 @@ import type {
   UnionToIntersection,
   Simplify,
 } from "blitz"
-import {AppProps} from "next/app"
 import Head from "next/head"
 import React from "react"
 import {QueryClient, QueryClientProvider} from "react-query"
 import {Hydrate, HydrateOptions} from "react-query/hydration"
 import {withSuperJSONPage} from "./superjson"
+import {Ctx} from "blitz"
+import {UrlObject} from "url"
+import {AppPropsType} from "next/dist/shared/lib/utils"
+import {Router} from "next/router"
 
 export * from "./error-boundary"
 export * from "./error-component"
@@ -68,6 +71,27 @@ export type BlitzProviderProps = {
   hydrateOptions?: HydrateOptions
 }
 
+interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
+  pathname: string
+}
+type RedirectAuthenticatedTo = string | RouteUrlObject | false
+type RedirectAuthenticatedToFnCtx = {
+  session: Ctx["session"]["$publicData"]
+}
+type RedirectAuthenticatedToFn = (args: RedirectAuthenticatedToFnCtx) => RedirectAuthenticatedTo
+export type BlitzPage<P = {}> = React.ComponentType<P> & {
+  getLayout?: (component: JSX.Element) => JSX.Element
+  authenticate?: boolean | {redirectTo?: string}
+  suppressFirstRenderFlicker?: boolean
+  redirectAuthenticatedTo?: RedirectAuthenticatedTo | RedirectAuthenticatedToFn
+}
+export type BlitzLayout<P = {}> = React.ComponentType<P> & {
+  authenticate?: boolean | {redirectTo?: string | RouteUrlObject}
+  redirectAuthenticatedTo?: RedirectAuthenticatedTo | RedirectAuthenticatedToFn
+}
+export type AppProps<P = {}> = AppPropsType<Router, P> & {
+  Component: BlitzPage
+}
 const BlitzProvider = ({
   client,
   contextSharing = false,

packages/blitz-next/src/index-server.ts

@@ -15,7 +15,7 @@ import type {
   FirstParam,
   AddParameters,
 } from "blitz"
-import {handleRequestWithMiddleware} from "blitz"
+import {handleRequestWithMiddleware, startWatcher, stopWatcher} from "blitz"
 import type {NextConfig} from "next"
 import {getQueryKey, getInfiniteQueryKey, installWebpackConfig} from "@blitzjs/rpc"
 import {dehydrate} from "@blitzjs/rpc"
@@ -140,7 +140,24 @@ export interface BlitzConfig extends NextConfig {
 }
 
 export function withBlitz(nextConfig: BlitzConfig = {}) {
-  return Object.assign({}, nextConfig, {
+  if (
+    process.env.NODE_ENV !== "production" &&
+    process.env.NODE_ENV !== "test" &&
+    process.env.MODE !== "test"
+  ) {
+    void startWatcher()
+
+    process.on("SIGINT", () => {
+      void stopWatcher()
+      process.exit(0)
+    })
+
+    process.on("exit", function () {
+      void stopWatcher()
+    })
+  }
+
+  const config = Object.assign({}, nextConfig, {
     webpack: (config: any, options: any) => {
       installWebpackConfig(config)
       if (typeof nextConfig.webpack === "function") {
@@ -148,7 +165,9 @@ export function withBlitz(nextConfig: BlitzConfig = {}) {
       }
       return config
     },
-  } as NextConfig)
+  })
+
+  return config
 }
 
 export type PrefetchQueryFn = <T extends AsyncFunc, TInput = FirstParam<T>>(

packages/blitz-rpc/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @blitzjs/rpc
 
+## 2.0.0-alpha.32
+
+### Patch Changes
+
+- @blitzjs/auth@2.0.0-alpha.32
+- blitz@2.0.0-alpha.32
+
+## 2.0.0-alpha.31
+
+### Patch Changes
+
+- 17ce29e5: Update RPC plugin setup in templates
+  - blitz@2.0.0-alpha.31
+  - @blitzjs/auth@2.0.0-alpha.31
+
+## 2.0.0-alpha.30
+
+### Patch Changes
+
+- Updated dependencies [ce453683]
+  - blitz@2.0.0-alpha.30
+  - @blitzjs/auth@2.0.0-alpha.30
+
+## 2.0.0-alpha.29
+
+### Patch Changes
+
+- Updated dependencies [962eb58a]
+  - blitz@2.0.0-alpha.29
+  - @blitzjs/auth@2.0.0-alpha.29
+
+## 2.0.0-alpha.28
+
+### Patch Changes
+
+- blitz@2.0.0-alpha.28
+- @blitzjs/auth@2.0.0-alpha.28
+
+## 2.0.0-alpha.27
+
+### Patch Changes
+
+- 07292910: Add invokeWithCtx function
+  - @blitzjs/auth@2.0.0-alpha.27
+  - blitz@2.0.0-alpha.27
+
+## 2.0.0-alpha.26
+
+### Patch Changes
+
+- @blitzjs/auth@2.0.0-alpha.26
+- blitz@2.0.0-alpha.26
+
 ## 2.0.0-alpha.25
 
 ### Patch Changes

packages/blitz-rpc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blitzjs/rpc",
-  "version": "2.0.0-alpha.25",
+  "version": "2.0.0-alpha.32",
   "scripts": {
     "build": "unbuild",
     "predev": "wait-on -d 250 ../blitz/dist/index-server.d.ts && wait-on -d 250 ../blitz-auth/dist/index-browser.d.ts",
@@ -20,7 +20,7 @@
     "dist/**"
   ],
   "dependencies": {
-    "@blitzjs/auth": "2.0.0-alpha.25",
+    "@blitzjs/auth": "2.0.0-alpha.32",
     "b64-lite": "1.4.0",
     "bad-behavior": "1.0.1",
     "chalk": "^4.1.0",
@@ -30,11 +30,11 @@
     "zod": "3.10.1"
   },
   "devDependencies": {
-    "@blitzjs/config": "workspace:2.0.0-alpha.25",
+    "@blitzjs/config": "workspace:2.0.0-alpha.32",
     "@types/debug": "4.1.7",
     "@types/react": "18.0.1",
     "@types/react-dom": "17.0.14",
-    "blitz": "2.0.0-alpha.25",
+    "blitz": "2.0.0-alpha.32",
     "next": "12.1.6-canary.17",
     "react": "18.0.0",
     "react-dom": "18.0.0",
@@ -43,7 +43,7 @@
     "watch": "1.0.2"
   },
   "peerDependencies": {
-    "blitz": "2.0.0-alpha.25",
+    "blitz": "2.0.0-alpha.32",
     "next": "*"
   },
   "publishConfig": {

packages/blitz-rpc/src/data-client/index.ts

@@ -11,3 +11,4 @@ export {
 export {useQueryErrorResetBoundary, QueryClient} from "react-query"
 export {dehydrate} from "react-query/hydration"
 export {invoke} from "./invoke"
+export {invokeWithCtx} from "./invokeWithCtx"

packages/blitz-rpc/src/data-client/invokeWithCtx.ts

@@ -0,0 +1,15 @@
+import {FirstParam, PromiseReturnType, Ctx} from "blitz"
+
+export function invokeWithCtx<T extends (...args: any) => any, TInput = FirstParam<T>>(
+  queryFn: T,
+  params: TInput,
+  ctx: Ctx,
+): Promise<PromiseReturnType<T>> {
+  if (typeof queryFn === "undefined") {
+    throw new Error(
+      "invokeWithCtx is missing the first argument - it must be a query or mutation function",
+    )
+  }
+
+  return queryFn(params, ctx)
+}

packages/blitz-rpc/src/index-browser.tsx

@@ -10,8 +10,9 @@ interface BlitzRpcOptions {
   reactQueryOptions?: DefaultOptions
 }
 export const BlitzRpcPlugin = createClientPlugin<BlitzRpcOptions, any>(
-  ({reactQueryOptions}: BlitzRpcOptions) => {
+  (options?: BlitzRpcOptions) => {
     const initializeQueryClient = () => {
+      const {reactQueryOptions} = options || {}
       let suspenseEnabled = reactQueryOptions?.queries?.suspense ?? true
       if (!process.env.CLI_COMMAND_CONSOLE && !process.env.CLI_COMMAND_DB) {
         globalThis.__BLITZ_SUSPENSE_ENABLED = suspenseEnabled

packages/blitz/CHANGELOG.md

@@ -1,5 +1,51 @@
 # blitz
 
+## 2.0.0-alpha.32
+
+### Patch Changes
+
+- @blitzjs/generator@2.0.0-alpha.32
+
+## 2.0.0-alpha.31
+
+### Patch Changes
+
+- Updated dependencies [17ce29e5]
+  - @blitzjs/generator@2.0.0-alpha.31
+
+## 2.0.0-alpha.30
+
+### Patch Changes
+
+- ce453683: init codemod generator
+  - @blitzjs/generator@2.0.0-alpha.30
+
+## 2.0.0-alpha.29
+
+### Patch Changes
+
+- 962eb58a: detailed print env info
+  - @blitzjs/generator@2.0.0-alpha.29
+
+## 2.0.0-alpha.28
+
+### Patch Changes
+
+- Updated dependencies [6ac2d341]
+  - @blitzjs/generator@2.0.0-alpha.28
+
+## 2.0.0-alpha.27
+
+### Patch Changes
+
+- @blitzjs/generator@2.0.0-alpha.27
+
+## 2.0.0-alpha.26
+
+### Patch Changes
+
+- @blitzjs/generator@2.0.0-alpha.26
+
 ## 2.0.0-alpha.25
 
 ### Patch Changes

packages/blitz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blitz",
-  "version": "2.0.0-alpha.25",
+  "version": "2.0.0-alpha.32",
   "scripts": {
     "build": "unbuild",
     "dev": "watch unbuild src --wait=0.2",
@@ -23,7 +23,7 @@
     "blitz": "bin/blitz"
   },
   "dependencies": {
-    "@blitzjs/generator": "2.0.0-alpha.25",
+    "@blitzjs/generator": "2.0.0-alpha.32",
     "arg": "5.0.1",
     "chalk": "^4.1.0",
     "console-table-printer": "2.10.0",
@@ -32,12 +32,14 @@
     "detect-port": "1.3.0",
     "dotenv": "16.0.0",
     "dotenv-expand": "8.0.3",
+    "envinfo": "7.8.1",
     "esbuild": "0.14.34",
     "find-up": "4.1.0",
     "fs-extra": "10.0.1",
     "hasbin": "1.2.3",
     "npm-which": "3.0.1",
     "ora": "5.3.0",
+    "os-name": "5.0.1",
     "p-event": "4.2.0",
     "pkg-dir": "5.0.0",
     "prompts": "2.4.2",
@@ -46,14 +48,16 @@
     "superjson": "1.8.0",
     "ts-node": "10.7.0",
     "tsconfig-paths": "4.0.0",
-    "tslog": "3.3.1"
+    "tslog": "3.3.1",
+    "watchpack": "2.1.1"
   },
   "devDependencies": {
-    "@blitzjs/config": "workspace:2.0.0-alpha.25",
+    "@blitzjs/config": "workspace:2.0.0-alpha.32",
     "@types/cookie": "0.4.1",
     "@types/cross-spawn": "6.0.2",
     "@types/debug": "4.1.7",
     "@types/detect-port": "1.3.2",
+    "@types/envinfo": "7.8.1",
     "@types/express": "4.17.13",
     "@types/fs-extra": "9.0.13",
     "@types/hasbin": "1.2.0",
@@ -63,6 +67,7 @@
     "@types/react": "18.0.1",
     "@types/react-dom": "17.0.14",
     "@types/test-listen": "1.1.0",
+    "@types/watchpack": "1.1.1",
     "express": "4.17.3",
     "node-fetch": "3.2.3",
     "react": "18.0.0",

packages/blitz/src/cli/commands/codegen.ts

@@ -3,7 +3,13 @@ import {CliCommand} from "../index"
 import {generateManifest} from "../utils/routes-manifest"
 
 const codegen: CliCommand = async () => {
-  await generateManifest()
+  try {
+    await generateManifest()
+  } catch (err) {
+    console.log(err)
+  }
+
+  process.exit(0)
 }
 
 export {codegen}

packages/blitz/src/cli/commands/new.ts

@@ -295,7 +295,7 @@ const newApp: CliCommand = async (argv) => {
 
     postInstallSteps.push("blitz dev")
 
-    console.log("Your new Blitz app is ready! Next steps:")
+    console.log("\n Your new Blitz app is ready! Next steps:")
     postInstallSteps.forEach((step, index) => {
       console.log(chalk.yellow(`   ${index + 1}. ${step}`))
     })

packages/blitz/src/cli/index.ts

@@ -4,6 +4,10 @@ import packageJson from "../../package.json"
 import {loadEnvConfig} from "../env-utils"
 import {getCommandBin} from "./utils/config"
 import spawn from "cross-spawn"
+import {readdirSync} from "fs-extra"
+import resolveFrom from "resolve-from"
+import pkgDir from "pkg-dir"
+import {join} from "path"
 
 const commonArgs = {
   // Types
@@ -17,6 +21,9 @@ const commonArgs = {
   "-h": "--help",
   "-e": "--env",
 }
+const args = arg(commonArgs, {
+  permissive: true,
+})
 
 const defaultCommand = "dev"
 export type CliCommand = (argv?: string[]) => void
@@ -29,84 +36,21 @@ const commands: {[command: string]: () => Promise<CliCommand>} = {
   codegen: () => import("./commands/codegen").then((i) => i.codegen),
   db: () => import("./commands/db").then((i) => i.db),
 }
-
-const args = arg(commonArgs, {
-  permissive: true,
-})
-
-if (args["--env"]) {
-  process.env.APP_ENV = args["--env"]
-}
-
-loadEnvConfig(process.cwd(), undefined, {error: console.error, info: console.info})
-
-// Version is inlined into the file using taskr build pipeline
-if (args["--version"]) {
-  console.log(`Blitz.js v${packageJson.version}`)
-  process.exit(0)
-}
-
 const foundCommand = Boolean(commands[args._[0] as string])
-
 const command = foundCommand ? (args._[0] as string) : defaultCommand
 const forwardedArgs = foundCommand ? args._.slice(1) : args._
 
-if (args["--env"]) {
-  process.env.APP_ENV = args["--env"]
-}
+const globalBlitzPath = resolveFrom(__dirname, "blitz")
+const localBlitzPath = resolveFrom.silent(process.cwd(), "blitz")
 
-if (args["--help"]) {
-  forwardedArgs.push("--help")
-}
+const isInDevelopmentAsGloballyLinked = __dirname.includes("packages/blitz/dist")
 
-// env variable should default to dev unless the command is build or start
-const defaultEnv = command === "build" || command === "start" ? "production" : "development"
-
-const standardEnv = ["production", "development", "test"]
-if (process.env.NODE_ENV && !standardEnv.includes(process.env.NODE_ENV)) {
-  console.warn(NON_STANDARD_NODE_ENV)
-}
-;(process.env as any).NODE_ENV = process.env.NODE_ENV || defaultEnv
-
-// Make sure commands gracefully respect termination signals (e.g. from Docker)
-process.on("SIGTERM", () => process.exit(0))
-process.on("SIGINT", () => process.exit(0))
-
-if (foundCommand) {
-  commands[command]?.()
-    .then((exec: any) => exec(forwardedArgs))
-    .then(() => {
-      if (command === "build") {
-        // ensure process exits after build completes so open handles/connections
-        // don't cause process to hang
-        process.exit(0)
-      }
-    })
-    .catch((err) => {
-      console.log(err)
-    })
+let blitzPkgPath
+if (isInDevelopmentAsGloballyLinked) {
+  blitzPkgPath = globalBlitzPath
 } else {
-  if (args["--help"] && args._.length === 0) {
-    console.log(`
-    Usage
-      $ blitz <command>
-
-    Available commands
-      ${Object.keys(commands).join(", ")}
-
-    Options
-      --env, -e       App environment name
-      --version, -v   Version number
-      --help, -h      Displays this message
-
-    For more information run a command with the --help flag
-      $ blitz build --help
-  `)
-    process.exit(0)
-  } else {
-    // If the command is not found, we assume it is a command from the bin
-    void runCommandFromBin()
-  }
+  // localBlitzPath won't exist if used outside a blitz app directory
+  blitzPkgPath = localBlitzPath || globalBlitzPath
 }
 
 async function runCommandFromBin() {
@@ -125,3 +69,122 @@ async function runCommandFromBin() {
   const result = spawn.sync(commandBin, process.argv.slice(3), {stdio: "inherit"})
   process.exit(result.status || 0)
 }
+
+async function printEnvInfo() {
+  const osName = await import("os-name")
+  const envinfo = await import("envinfo")
+  const pkgManager = readdirSync(process.cwd()).includes("pnpm-lock.yaml")
+    ? "pnpm"
+    : readdirSync(process.cwd()).includes("yarn-lock.yaml")
+    ? "yarn"
+    : "npm"
+
+  const env = await envinfo.default.run(
+    {
+      System: ["OS", "CPU", "Memory", "Shell"],
+      Binaries: ["Node", "Yarn", "npm", "pnpm"],
+      npmPackages: [
+        "blitz",
+        "typescript",
+        "react",
+        "react-dom",
+        "prisma",
+        "@prisma/client",
+        "next",
+      ],
+    },
+    {showNotFound: true},
+  )
+
+  const globalBlitzPkgJsonPath = pkgDir.sync(globalBlitzPath) as string
+  const localBlitzPkgJsonPath = pkgDir.sync(localBlitzPath)
+
+  if (globalBlitzPkgJsonPath !== localBlitzPkgJsonPath) {
+    // This branch won't run if user does `npx blitz` or `yarn blitz`
+    const globalVersion = require(join(globalBlitzPkgJsonPath, "package.json")).version
+    console.log(`Blitz version: ${globalVersion} (global)`)
+  }
+
+  if (localBlitzPkgJsonPath) {
+    const localVersion = require(join(localBlitzPkgJsonPath, "package.json")).version
+    console.log(`Blitz version: ${localVersion} (local)`)
+  }
+
+  console.log(
+    `${osName.default()} | ${process.platform}-${process.arch} | Node: ${process.version}\n`,
+  )
+  console.log(`\n Package manager: ${pkgManager}`)
+  console.log(env)
+  process.exit(0)
+}
+
+async function main() {
+  loadEnvConfig(process.cwd(), undefined, {error: console.error, info: console.info})
+
+  // Version is inlined into the file using taskr build pipeline
+  if (args["_"].length === 0 && args["--version"]) {
+    await printEnvInfo()
+  }
+
+  if (args["--env"]) {
+    process.env.APP_ENV = args["--env"]
+  }
+
+  if (args["--help"]) {
+    forwardedArgs.push("--help")
+  }
+
+  // env variable should default to dev unless the command is build or start
+  const defaultEnv = command === "build" || command === "start" ? "production" : "development"
+
+  const standardEnv = ["production", "development", "test"]
+  if (process.env.NODE_ENV && !standardEnv.includes(process.env.NODE_ENV)) {
+    console.warn(NON_STANDARD_NODE_ENV)
+  }
+  ;(process.env as any).NODE_ENV = process.env.NODE_ENV || defaultEnv
+
+  // Make sure commands gracefully respect termination signals (e.g. from Docker)
+  process.on("SIGTERM", () => process.exit(0))
+  process.on("SIGINT", () => process.exit(0))
+
+  if (foundCommand) {
+    commands[command]?.()
+      .then((exec: any) => exec(forwardedArgs))
+      .then(() => {
+        if (command === "build") {
+          // ensure process exits after build completes so open handles/connections
+          // don't cause process to hang
+          process.exit(0)
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  } else {
+    if (args["--help"] && args._.length === 0) {
+      console.log(`
+      Usage
+        $ blitz <command>
+  
+      Available commands
+        ${Object.keys(commands).join(", ")}
+  
+      Options
+        --env, -e       App environment name
+        --version, -v   Version number
+        --help, -h      Displays this message
+  
+      For more information run a command with the --help flag
+        $ blitz build --help
+    `)
+      process.exit(0)
+    } else {
+      // If the command is not found, we assume it is a command from the bin
+      void runCommandFromBin()
+    }
+  }
+}
+
+main().catch((e) => {
+  console.error(e)
+})

packages/blitz/src/cli/utils/routes-manifest.ts

@@ -2,10 +2,10 @@ import {join, dirname} from "path"
 import os from "os"
 import {promises} from "fs"
 const readFile = promises.readFile
-import {outputFile} from "fs-extra"
+import {outputFile, readdir} from "fs-extra"
 import findUp from "find-up"
 import resolveFrom from "resolve-from"
-
+import Watchpack from "watchpack"
 export const CONFIG_FILE = ".blitz.config.compiled.js"
 export const NEXT_CONFIG_FILE = "next.config.js"
 export const PHASE_PRODUCTION_SERVER = "phase-production-server"
@@ -376,7 +376,7 @@ export function setupManifest(routes: Record<string, RouteManifestEntry>): {
       "exports.Routes = {\n" + implementationLines.map((line) => "  " + line).join(",\n") + "\n}",
     declaration: `
 import type { ParsedUrlQueryInput } from "querystring"
-import type { RouteUrlObject } from "@blitzjs/auth"
+import type { RouteUrlObject } from "blitz"
 export const Routes: {
 ${declarationLines.map((line) => "  " + line).join(";\n") + declarationEnding}
 }`.trim(),
@@ -547,3 +547,45 @@ async function findNodeModulesRoot(src: string) {
 
   return root
 }
+let webpackWatcher: Watchpack | null = null
+
+export async function startWatcher(pagesDir = ""): Promise<void> {
+  if (webpackWatcher) {
+    return
+  }
+
+  let resolved = false
+  return new Promise((resolve) => {
+    // Watchpack doesn't emit an event for an empty directory
+    readdir(pagesDir!, (_, files) => {
+      if (files?.length) {
+        return
+      }
+
+      if (!resolved) {
+        resolve()
+        resolved = true
+      }
+    })
+
+    let wp = (webpackWatcher = new Watchpack({}))
+
+    wp.watch(
+      [],
+      topLevelFoldersThatMayContainPages.map((dir) => join(pagesDir!, dir)),
+      Date.now(),
+    )
+    wp.on("aggregated", async () => {
+      await generateManifest()
+    })
+  })
+}
+
+export async function stopWatcher(): Promise<void> {
+  if (!webpackWatcher) {
+    return
+  }
+  console.log("stopWatcher")
+  webpackWatcher.close()
+  webpackWatcher = null
+}

packages/blitz/src/index-server.ts

@@ -9,8 +9,8 @@ export * from "./types"
 export * from "./prisma-utils"
 export * from "./middleware"
 export * from "./paginate"
-export {baseLogger, newLine} from "./logging"
-
+export {baseLogger, newLine, log} from "./logging"
+export {startWatcher, stopWatcher} from "./cli/utils/routes-manifest"
 // const blitzConfig = findBlitzConfigDirectory() as string
 // const file = readFileSync(blitzConfig)
 // export const Routes = eval(file.toString())

packages/blitz/src/logging.ts

@@ -149,6 +149,15 @@ const success = (msg: string) => {
   console.log(withCheck(c.green(msg)))
 }
 
+/**
+ * Logs a red error message to stdout.
+ *
+ * @param {string} msg
+ */
+const error = (msg: string) => {
+  console.log(`${c.red(msg)}`)
+}
+
 /**
  * Colorizes a variable for display.
  *
@@ -173,6 +182,7 @@ export const log = {
   progress,
   spinner,
   success,
+  error,
   variable,
   debug,
   Table,

packages/blitz/src/types.ts

@@ -1,2 +1,7 @@
+import {UrlObject} from "url"
 // Context for plugins to declaration merge stuff into
 export interface Ctx {}
+
+export interface RouteUrlObject extends Pick<UrlObject, "pathname" | "query"> {
+  pathname: string
+}

packages/codemod/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require("@blitzjs/config/eslint")

packages/codemod/CHANGELOG.md

@@ -0,0 +1,28 @@
+# @blitzjs/codemod
+
+## 2.0.0-alpha.32
+
+### Patch Changes
+
+- e6fb09d4: Fix templates source in RPC codemod step
+  - @blitzjs/generator@2.0.0-alpha.32
+  - blitz@2.0.0-alpha.32
+
+## 2.0.0-alpha.31
+
+### Patch Changes
+
+- 46d9f81a: Update templates directory for codemod
+- Updated dependencies [17ce29e5]
+  - @blitzjs/generator@2.0.0-alpha.31
+  - blitz@2.0.0-alpha.31
+
+## 2.0.0-alpha.30
+
+### Patch Changes
+
+- ce453683: Add codemod to upgrade from legacy framework to the Blitz Toolkit
+- ce453683: init codemod generator
+- Updated dependencies [ce453683]
+  - blitz@2.0.0-alpha.30
+  - @blitzjs/generator@2.0.0-alpha.30

packages/codemod/bin/@blitzjs/codemod

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require("@blitzjs/codemod/dist/index.cjs")

packages/codemod/build.config.ts

@@ -0,0 +1,11 @@
+import {BuildConfig} from "unbuild"
+
+const config: BuildConfig = {
+  entries: ["./src/index"],
+  externals: ["index.cjs", "blitz"],
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+}
+export default config

packages/codemod/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@blitzjs/codemod",
+  "version": "2.0.0-alpha.32",
+  "scripts": {
+    "build": "unbuild",
+    "dev": "watch unbuild src --wait=0.2",
+    "lint": "eslint . --fix",
+    "test": "vitest run",
+    "test-watch": "vitest",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "browser": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**",
+    "bin/**"
+  ],
+  "bin": "bin/@blitzjs/codemod",
+  "dependencies": {
+    "@babel/core": "7.12.10",
+    "@babel/plugin-proposal-class-properties": "7.17.12",
+    "@babel/plugin-syntax-jsx": "7.17.12",
+    "@babel/plugin-syntax-typescript": "7.17.12",
+    "@blitzjs/generator": "2.0.0-alpha.32",
+    "arg": "5.0.1",
+    "blitz": "2.0.0-alpha.32",
+    "chalk": "^4.1.0",
+    "cross-spawn": "7.0.3",
+    "debug": "4.3.3",
+    "esbuild": "0.14.34",
+    "fs-extra": "10.0.1",
+    "jscodeshift": "0.13.0",
+    "prompts": "2.4.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.12.10",
+    "@blitzjs/config": "workspace:*",
+    "@types/jscodeshift": "0.11.2",
+    "@types/node": "17.0.16",
+    "ast-types": "0.14.2",
+    "unbuild": "0.6.9",
+    "watch": "1.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/codemod/src/index.test.ts

@@ -0,0 +1,9 @@
+import {expect, describe, it} from "vitest"
+import spawn from "cross-spawn"
+
+describe("codemod cli", () => {
+  it("errors without codemod name", async () => {
+    const run = spawn.sync("node", ["dist/index.cjs"], {encoding: "utf8"})
+    expect(run.stdout).toContain("Codemod not found")
+  })
+})

packages/codemod/src/index.ts

@@ -0,0 +1,31 @@
+import arg from "arg"
+
+const commonArgs = {
+  // Types
+  "--help": Boolean,
+
+  // Aliases
+  "-h": "--help",
+}
+
+const args = arg(commonArgs, {
+  permissive: true,
+})
+
+const commands: {[command: string]: () => Promise<() => void>} = {
+  "upgrade-legacy": () => import("./upgrade-legacy").then((i) => i.upgradeLegacy),
+}
+
+const foundCommand = Boolean(commands[args._[0] as string])
+const forwardedArgs = foundCommand ? args._.slice(1) : args._
+
+if (foundCommand) {
+  commands[args["_"][0] as string]?.()
+    .then((exec: any) => exec(forwardedArgs))
+    .catch((err) => {
+      console.log(err)
+    })
+} else {
+  console.log("Codemod not found. Try one of these:")
+  console.log(`${Object.keys(commands).map((c) => c)}`)
+}

packages/codemod/src/upgrade-legacy.ts

@@ -0,0 +1,826 @@
+import j, {ImportDeclaration} from "jscodeshift"
+import * as fs from "fs-extra"
+import path from "path"
+import {
+  addNamedImport,
+  findCallExpression,
+  findDefaultExportPath,
+  findFunction,
+  findImport,
+  findVariable,
+  getAllFiles,
+  getCollectionFromSource,
+  wrapDeclaration,
+} from "./utils"
+import {log} from "blitz"
+
+const isInternalBlitzMonorepoDevelopment = fs.existsSync(path.join(__dirname, "../../blitz-next"))
+
+const upgradeLegacy = async () => {
+  let isTypescript = fs.existsSync(path.resolve("tsconfig.json"))
+  let blitzConfigFile = `blitz.config.${isTypescript ? "ts" : "js"}`
+  let isLegacyBlitz = fs.existsSync(path.resolve(blitzConfigFile))
+  const appDir = path.resolve("app")
+  let failedAt =
+    fs.existsSync(path.resolve(".migration.json")) && fs.readJSONSync("./.migration.json").failedAt
+
+  let steps: {
+    name: string
+    action: () => Promise<void>
+  }[] = []
+
+  // Add steps in order
+
+  steps.push({
+    name: "move the config from blitz.config.ts to next.config.js",
+    action: async () => {
+      const program = getCollectionFromSource(blitzConfigFile)
+      const parsedProgram = program.get()
+
+      // Clear file
+      parsedProgram.value.program.body = []
+
+      // We create an object property eg. {withBlitz: withBlitz}
+      let withBlitz = j.objectProperty(j.identifier("withBlitz"), j.identifier("withBlitz"))
+      // Then set the shorthand to true so we get {withBlitz}
+      withBlitz.shorthand = true
+
+      /* Declare the variable using the object above that equals to a require expression, eg.
+        const {withBlitz} = require("@blitzjs/next")
+      */
+      let blitzDeclare = j.variableDeclaration("const", [
+        j.variableDeclarator(
+          j.objectPattern([withBlitz]),
+          j.callExpression(j.identifier("require"), [j.stringLiteral("@blitzjs/next")]),
+        ),
+      ])
+      parsedProgram.value.program.body.push(blitzDeclare)
+
+      // Create the module.exports with the withBlitz callExpression and empty arguments. Giving us module.exports = withBlitz()
+      let moduleExportExpression = j.expressionStatement(
+        j.assignmentExpression(
+          "=",
+          j.memberExpression(j.identifier("module"), j.identifier("exports")),
+          j.callExpression(j.identifier("withBlitz"), []),
+        ),
+      )
+      parsedProgram.value.program.body.push(moduleExportExpression)
+
+      fs.writeFileSync(path.resolve("next.config.js"), program.toSource())
+    },
+  })
+
+  steps.push({
+    name: "update dependencies in package.json",
+    action: async () => {
+      let packageJsonPath = require(path.resolve("package.json"))
+      packageJsonPath.dependencies["react"] = "latest"
+      packageJsonPath.dependencies["react-dom"] = "latest"
+      packageJsonPath.dependencies["@blitzjs/next"] = "alpha"
+      packageJsonPath.dependencies["@blitzjs/rpc"] = "latest"
+      packageJsonPath.dependencies["@blitzjs/auth"] = "latest"
+      packageJsonPath.dependencies["blitz"] = "alpha"
+      packageJsonPath.dependencies["next"] = "latest"
+      packageJsonPath.dependencies["prisma"] = "latest"
+      packageJsonPath.dependencies["@prisma/client"] = "latest"
+      packageJsonPath.devDependencies["typescript"] = isTypescript && "latest"
+
+      fs.writeFileSync(path.resolve("package.json"), JSON.stringify(packageJsonPath, null, " "))
+    },
+  })
+
+  steps.push({
+    name: "update project's imports",
+    action: async () => {
+      const specialImports: Record<string, string> = {
+        Link: "next/link",
+        Image: "next/image",
+        Script: "next/script",
+
+        Document: "next/document",
+        DocumentHead: "next/document",
+        Html: "next/document",
+        Main: "next/document",
+        BlitzScript: "next/document",
+
+        AuthenticationError: "blitz",
+        AuthorizationError: "blitz",
+        CSRFTokenMismatchError: "blitz",
+        NotFoundError: "blitz",
+        formatZodError: "blitz",
+        recursiveFormatZodErrors: "blitz",
+        validateZodSchema: "blitz",
+        enhancePrisma: "blitz",
+        ErrorBoundary: "@blitzjs/next",
+        ErrorFallbackProps: "@blitzjs/next",
+
+        paginate: "blitz",
+        invokeWithMiddleware: "@blitzjs/rpc",
+        passportAuth: "@blitzjs/auth",
+        sessionMiddleware: "@blitzjs/auth",
+        simpleRolesIsAuthorized: "@blitzjs/auth",
+        getSession: "@blitzjs/auth",
+        setPublicDataForUser: "@blitzjs/auth",
+        SecurePassword: "@blitzjs/auth",
+        hash256: "@blitzjs/auth",
+        generateToken: "@blitzjs/auth",
+        resolver: "@blitzjs/rpc",
+        connectMiddleware: "blitz",
+        GetServerSideProps: "next",
+        InferGetServerSidePropsType: "next",
+        GetServerSidePropsContext: "next",
+
+        getAntiCSRFToken: "@blitzjs/rpc",
+        useSession: "@blitzjs/auth",
+        useAuthenticatedSession: "@blitzjs/auth",
+        useRedirectAuthenticated: "@blitzjs/auth",
+        useAuthorize: "@blitzjs/auth",
+        useQuery: "@blitzjs/rpc",
+        useParam: "@blitzjs/next",
+        usePaginatedQuery: "@blitzjs/rpc",
+        useInfiniteQuery: "@blitzjs/rpc",
+        useMutation: "@blitzjs/rpc",
+        queryClient: "@blitzjs/rpc",
+        getQueryKey: "@blitzjs/rpc",
+        getInfiniteQueryKey: "@blitzjs/rpc",
+        invalidateQuery: "@blitzjs/rpc",
+        setQueryData: "@blitzjs/rpc",
+        useQueryErrorResetBoundary: "@blitzjs/rpc",
+        QueryClient: "@blitzjs/rpc",
+        dehydrate: "@blitzjs/rpc",
+        invoke: "@blitzjs/rpc",
+        Routes: "@blitzjs/next",
+        useRouterQuery: "next/router",
+        useRouter: "next/router",
+        Router: "next/router",
+
+        Head: "next/head",
+
+        App: "next/app",
+
+        dynamic: "next/dynamic",
+        noSSR: "next/dynamic",
+
+        getConfig: "next/config",
+        setConfig: "next/config",
+
+        ErrorComponent: "@blitzjs/next",
+        AppProps: "@blitzjs/next",
+        BlitzPage: "@blitzjs/next",
+        BlitzLayout: "@blitzjs/next",
+      }
+
+      getAllFiles(appDir, [], [], [".css"]).forEach((filename) => {
+        const program = getCollectionFromSource(path.resolve(appDir, filename))
+        const parsedProgram = program.get()
+
+        parsedProgram.value.program.body.forEach((e: ImportDeclaration) => {
+          if (e.type === "ImportDeclaration") {
+            if (e.source.value === "blitz") {
+              const specifierIndexesToRemove: number[] = []
+              e.specifiers?.slice().forEach((specifier: any, index) => {
+                const importedName =
+                  specifier.imported.type === "StringLiteral"
+                    ? specifier.imported.value
+                    : specifier.imported.name
+                if (importedName in specialImports) {
+                  parsedProgram.value.program.body.unshift(
+                    j.importDeclaration(
+                      [specifier],
+                      j.stringLiteral(specialImports[importedName] as string),
+                    ),
+                  )
+                  specifierIndexesToRemove.push(index)
+                }
+              })
+              // Remove import from original blitz import deconstruct
+              specifierIndexesToRemove.reverse().forEach((index) => {
+                e.specifiers?.splice(index, 1)
+              })
+              // Removed left over "import 'blitz';"
+              if (!e.specifiers?.length) {
+                const index = parsedProgram.value.program.body.indexOf(e)
+                parsedProgram.value.program.body.splice(index, 1)
+              }
+            }
+          }
+        })
+        fs.writeFileSync(path.resolve(appDir, filename), program.toSource())
+      })
+    },
+  })
+
+  steps.push({
+    name: "update NextJS' default imports",
+    action: async () => {
+      getAllFiles(appDir, [], [], [".css"]).forEach((file) => {
+        const program = getCollectionFromSource(file)
+
+        const nextImage = findImport(program, "next/image")
+        const nextLink = findImport(program, "next/link")
+        const nextHead = findImport(program, "next/head")
+
+        if (nextImage?.length) {
+          nextImage.remove()
+          program
+            .get()
+            .value.program.body.unshift(
+              j.importDeclaration(
+                [j.importDefaultSpecifier(j.identifier("Image"))],
+                j.stringLiteral("next/image"),
+              ),
+            )
+        }
+
+        if (nextLink?.length) {
+          nextLink.remove()
+          program
+            .get()
+            .value.program.body.unshift(
+              j.importDeclaration(
+                [j.importDefaultSpecifier(j.identifier("Link"))],
+                j.stringLiteral("next/link"),
+              ),
+            )
+        }
+
+        if (nextHead?.length) {
+          nextHead.remove()
+          program
+            .get()
+            .value.program.body.unshift(
+              j.importDeclaration(
+                [j.importDefaultSpecifier(j.identifier("Head"))],
+                j.stringLiteral("next/head"),
+              ),
+            )
+        }
+
+        fs.writeFileSync(path.join(path.resolve(file)), program.toSource())
+      })
+    },
+  })
+
+  steps.push({
+    name: "create blitz-server.ts and blitz-client.ts setup files",
+    action: async () => {
+      let appDirExist = fs.existsSync(appDir)
+
+      if (appDirExist) {
+        const templatePath = path.join(
+          require.resolve("@blitzjs/generator"),
+          "..",
+          "..",
+          isInternalBlitzMonorepoDevelopment ? "templates" : "dist/templates",
+        )
+        const blitzServer = fs
+          .readFileSync(path.join(templatePath, "app", "app", "blitz-server.ts"))
+          .toString()
+        const blitzClient = fs
+          .readFileSync(path.join(templatePath, "app", "app", "blitz-client.ts"))
+          .toString()
+
+        const replaceTemplateValues = (input: string) => {
+          let result = input
+          const token = `__safeNameSlug__`
+          if (result.includes(token)) {
+            result = result.replace(new RegExp(token, "g"), "blitz")
+          }
+          return result
+        }
+
+        fs.writeFileSync(
+          `${appDir}/blitz-server.${isTypescript ? "ts" : "js"}`,
+          replaceTemplateValues(blitzServer),
+        )
+
+        fs.writeFileSync(
+          `${appDir}/blitz-client.${isTypescript ? "ts" : "js"}`,
+          replaceTemplateValues(blitzClient),
+        )
+      } else {
+        throw new Error("App directory doesn't exit")
+      }
+    },
+  })
+
+  steps.push({
+    name: "create pages/api/rpc directory and add [[...blitz]].ts wildecard API route",
+    action: async () => {
+      const pagesDir = path.resolve("pages/api/rpc")
+      const templatePath = path.join(
+        require.resolve("@blitzjs/generator"),
+        "..",
+        "..",
+        isInternalBlitzMonorepoDevelopment ? "templates" : "dist/templates",
+      )
+      const rpcRoute = fs
+        .readFileSync(path.join(templatePath, "app", "pages", "api", "rpc", "blitzrpcroute.ts"))
+        .toString()
+
+      if (!fs.existsSync(pagesDir)) {
+        fs.mkdirSync(pagesDir, {recursive: true})
+      }
+
+      fs.writeFileSync(
+        path.resolve(`${pagesDir}/[[...blitz]].${isTypescript ? "ts" : "js"}`),
+        rpcRoute,
+      )
+    },
+  })
+
+  steps.push({
+    name: "move app/pages/ to the project root pages/ directory",
+    action: async () => {
+      const appDir = path.resolve("app")
+      const subdirs = fs.readdirSync(appDir)
+
+      if (subdirs.includes("pages")) {
+        const appPagesDir = fs.readdirSync(path.join(appDir, "pages"))
+        appPagesDir.forEach((dir) => {
+          fs.moveSync(
+            path.resolve(path.join(appDir, "pages", dir)),
+            path.resolve(path.join("pages", dir)),
+          )
+        })
+      }
+
+      // Remove pages dir from the app dir after move is complete
+      fs.removeSync(path.join(appDir, "pages"))
+    },
+  })
+
+  steps.push({
+    name: "remove Babel config file",
+    action: async () => {
+      const babelConfig = fs.existsSync(path.resolve("babel.config.js"))
+      if (babelConfig) {
+        fs.removeSync(path.resolve("babel.config.js"))
+      }
+    },
+  })
+
+  steps.push({
+    name: "move all pages directories to one consolidated directory",
+    action: async () => {
+      const getAllPagesDirs = (dirPath: string) => {
+        let files = fs.readdirSync(dirPath)
+
+        const pageDir = files.reduce((arr: {model: string; path: string}[], file: string) => {
+          if (fs.statSync(dirPath + "/" + file).isDirectory()) {
+            let subs = fs.readdirSync(dirPath + "/" + file)
+            if (subs.includes("pages")) {
+              arr.push({
+                model: file,
+                path: dirPath + "/" + file + "/pages",
+              })
+            }
+          }
+          return arr
+        }, [])
+
+        return pageDir
+      }
+
+      getAllPagesDirs(appDir).forEach((pages) => {
+        fs.moveSync(pages.path, path.join(path.resolve("pages"), pages.model))
+      })
+    },
+  })
+
+  steps.push({
+    name: "move API routes to pages/api directory",
+    action: async () => {
+      const apiRoutesExist = fs.existsSync(path.join(appDir, "api"))
+      if (apiRoutesExist) {
+        let apiRoutes = fs.readdirSync(path.join(appDir, "api"))
+        apiRoutes.forEach((dir) => {
+          if (fs.statSync(appDir + "/api/" + dir).isDirectory()) {
+            fs.moveSync(appDir + "/api/" + dir, path.join(path.resolve("pages"), "api", dir))
+          }
+        })
+      }
+    },
+  })
+
+  steps.push({
+    name: "update custom server to reference Next",
+    action: async () => {
+      const customServerDir = path.resolve("server")
+      const customServerFile = path.resolve(`server.${isTypescript ? "ts" : "js"}`)
+
+      // If custom server is inside "server" dir
+      if (fs.existsSync(customServerDir)) {
+        if (fs.readdirSync("server").includes(`index.${isTypescript ? "ts" : "js"}`)) {
+          const program = getCollectionFromSource(
+            path.join("server", `index.${isTypescript ? "ts" : "js"}`),
+          )
+
+          const findBlitzCall = program.find(
+            j.Identifier,
+            (node) => node.name === "blitz" || node.escapedText === "blitz",
+          )
+          const findBlitzCustomServerLiteral = program
+            .find(j.StringLiteral, (node) => node.value === "blitz/custom-server")
+            .get()
+
+          findBlitzCustomServerLiteral.value.value = "next"
+          findBlitzCall.forEach((hit) => {
+            // Loops through the blitz calls. Check if its a call expression, require statement or import statement. Will check everything to next instead of blitz
+            switch (hit.name) {
+              case "callee":
+                hit.value.name = "next"
+              case "id":
+                hit.value.name = "next"
+              case "local":
+                hit.value.name = "next"
+            }
+          })
+
+          fs.writeFileSync(
+            path.join("server", `index.${isTypescript ? "ts" : "js"}`),
+            program.toSource(),
+          )
+        }
+      }
+
+      // If custom server file found outside dir
+      if (fs.existsSync(customServerFile)) {
+        const program = getCollectionFromSource(customServerFile)
+        const findBlitzCall = program.find(
+          j.Identifier,
+          (node) => node.name === "blitz" || node.escapedText === "blitz",
+        )
+        const findBlitzCustomServerLiteral = program
+          .find(j.StringLiteral, (node) => node.value === "blitz/custom-server")
+          .get()
+
+        findBlitzCustomServerLiteral.value.value = "next"
+        findBlitzCall.forEach((hit) => {
+          // Loops through the blitz calls. Check if its a call expression, require statement or import statement. Will check everything to next instead of blitz
+          switch (hit.name) {
+            case "callee":
+              hit.value.name = "next"
+            case "id":
+              hit.value.name = "next"
+            case "local":
+              hit.value.name = "next"
+          }
+        })
+        fs.writeFileSync(customServerFile, program.toSource())
+      }
+    },
+  })
+
+  steps.push({
+    name: "convert useRouterQuery to useRouter",
+    action: async () => {
+      //First check ./pages
+      const pagesDir = path.resolve("pages")
+      getAllFiles(pagesDir, [], [], [".css"]).forEach((file) => {
+        const filepath = path.resolve(pagesDir, file)
+        const program = getCollectionFromSource(filepath)
+
+        const parsedProgram = program.get()
+
+        const findRouterQueryImport = findImport(program, "next/router")
+        findRouterQueryImport?.forEach((node) => {
+          const getNode = node.get()
+          getNode.value.specifiers.slice().forEach((specifier: any, index: number) => {
+            const importedName =
+              specifier.imported.type === "StringLiteral"
+                ? specifier.imported.value
+                : specifier.imported.name
+            if (importedName === "useRouterQuery") {
+              addNamedImport(program, "useRouter", "next/router")
+              getNode.value.specifiers.splice(index, 1)
+              // Removed left overs
+              if (!getNode.value.specifiers?.length) {
+                const index = parsedProgram.value.program.body.indexOf(getNode.value)
+                parsedProgram.value.program.body.splice(index, 1)
+              }
+            }
+          })
+        })
+
+        const findCallUseRouterQuery = program.find(
+          j.CallExpression,
+          (node) => node.callee.name === "useRouterQuery",
+        )
+        findCallUseRouterQuery.forEach((call) => {
+          const nodePath = call.get()
+          nodePath.parentPath.value.init = j.expressionStatement(
+            j.memberExpression(
+              j.callExpression(j.identifier("useRouter"), []),
+              j.identifier("query"),
+            ),
+          )
+        })
+
+        fs.writeFileSync(filepath, program.toSource())
+      })
+
+      getAllFiles(appDir, [], [], [".css"]).forEach((file) => {
+        const filepath = path.resolve(appDir, file)
+        const program = getCollectionFromSource(filepath)
+
+        const parsedProgram = program.get()
+        const findRouterQueryImport = program.find(
+          j.ImportDeclaration,
+          (node) => node.source.value === "next/router",
+        )
+        findRouterQueryImport.forEach((node) => {
+          const getNode = node.get()
+          getNode.value.specifiers.slice().forEach((specifier: any, index: number) => {
+            const importedName =
+              specifier.imported.type === "StringLiteral"
+                ? specifier.imported.value
+                : specifier.imported.name
+            if (importedName === "useRouterQuery") {
+              parsedProgram.value.program.body.unshift(
+                j.importDeclaration(
+                  [j.importSpecifier(j.identifier("useRouter"))],
+                  j.stringLiteral("next/router"),
+                ),
+              )
+              getNode.value.specifiers.splice(index, 1)
+              // Removed left overs
+              if (!getNode.value.specifiers?.length) {
+                const index = parsedProgram.value.program.body.indexOf(getNode.value)
+                parsedProgram.value.program.body.splice(index, 1)
+              }
+            }
+          })
+        })
+
+        const findCallUseRouterQuery = program.find(
+          j.CallExpression,
+          (node) => node.callee.name === "useRouterQuery",
+        )
+        findCallUseRouterQuery.forEach((call) => {
+          const nodePath = call.get()
+          nodePath.parentPath.value.init = j.expressionStatement(
+            j.memberExpression(
+              j.callExpression(j.identifier("useRouter"), []),
+              j.identifier("query"),
+            ),
+          )
+        })
+
+        fs.writeFileSync(filepath, program.toSource())
+      })
+    },
+  })
+
+  steps.push({
+    name: "wrap App component with withBlitz HOC",
+    action: async () => {
+      const pagesDir = path.resolve("pages")
+
+      const program = getCollectionFromSource(
+        path.join(pagesDir, `_app.${isTypescript ? "tsx" : "jsx"}`),
+      )
+
+      const appFunction = program.find(j.FunctionDeclaration, (node) => {
+        return node.id.name === "App"
+      })
+
+      // Store the App function
+      const storeFunction = {...appFunction.get().value}
+
+      // Create a new withBlitz call expresion with an empty argument
+      const withBlitzFunction = (appFunction.get().parentPath.value.declaration =
+        j.expressionStatement(j.callExpression(j.identifier("withBlitz"), []))) as any
+      // Push stored function above into the argument
+      withBlitzFunction.expression.arguments.push(storeFunction)
+
+      addNamedImport(program, "withBlitz", "app/blitz-client")
+
+      fs.writeFileSync(
+        path.join(pagesDir, `_app.${isTypescript ? "tsx" : "jsx"}`),
+        program.toSource(),
+      )
+    },
+  })
+
+  steps.push({
+    name: "update imports in the _document file",
+    action: async () => {
+      const pagesDir = path.resolve("pages")
+
+      if (fs.existsSync(path.join(pagesDir, `_document.${isTypescript ? "tsx" : "jsx"}`))) {
+        const program = getCollectionFromSource(
+          path.join(pagesDir, `_document.${isTypescript ? "tsx" : "jsx"}`),
+        )
+
+        const importStatements = findImport(program, "next/document")
+        importStatements?.remove()
+        program
+          .get()
+          .value.program.body.unshift(
+            j.importDeclaration(
+              [
+                j.importDefaultSpecifier(j.identifier("Document")),
+                j.importSpecifier(j.identifier("Html")),
+                j.importSpecifier(j.identifier("Head")),
+                j.importSpecifier(j.identifier("Main")),
+                j.importSpecifier(j.identifier("NextScript")),
+              ],
+              j.stringLiteral("next/document"),
+            ),
+          )
+
+        const documentHead = program
+          .find(j.Identifier, (node) => node.name === "DocumentHead")
+          .get()
+        documentHead.value.name = "Head"
+
+        const blitzScript = program.find(j.Identifier, (node) => node.name === "BlitzScript").get()
+        blitzScript.value.name = "NextScript"
+
+        fs.writeFileSync(
+          path.join(pagesDir, `_document.${isTypescript ? "tsx" : "jsx"}`),
+          program.toSource(),
+        )
+      }
+    },
+  })
+
+  steps.push({
+    name: "wrap getServerSideProps, getStaticProps and API handlers with gSSP, gSP, and api",
+    action: async () => {
+      const pagesDir = path.resolve("pages")
+      getAllFiles(pagesDir, [], ["api"]).forEach((file) => {
+        const program = getCollectionFromSource(file)
+
+        // 1. getServerSideProps
+        const getServerSidePropsPath = findFunction(program, "getServerSideProps")
+        if (getServerSidePropsPath) {
+          getServerSidePropsPath.forEach((path) =>
+            wrapDeclaration(path, "getServerSideProps", "gSSP"),
+          )
+          addNamedImport(program, "gSSP", "app/blitz-server")
+        }
+
+        // 2. getStaticProps
+        const getStaticPropsPath = findFunction(program, "getStaticProps")
+        if (getStaticPropsPath) {
+          getStaticPropsPath.forEach((path) => wrapDeclaration(path, "getStaticProps", "gSP"))
+          addNamedImport(program, "gSP", "app/blitz-server")
+        }
+
+        fs.writeFileSync(path.join(path.resolve(file)), program.toSource())
+      })
+
+      // 3. api
+      if (fs.existsSync(path.join(pagesDir, "api"))) {
+        getAllFiles(path.join(pagesDir, "api"), [], ["rpc"]).forEach((file) => {
+          const program = getCollectionFromSource(file)
+
+          const defaultExportPath = findDefaultExportPath(program)
+          if (!defaultExportPath) {
+            return
+          }
+
+          const {node} = defaultExportPath
+          node.declaration = j.callExpression(j.identifier("api"), [node.declaration as any])
+          addNamedImport(program, "api", "app/blitz-server")
+
+          fs.writeFileSync(path.join(path.resolve(file)), program.toSource())
+        })
+      }
+    },
+  })
+
+  steps.push({
+    name: "check for usages of a local middleware in resolvers files",
+    action: async () => {
+      let errors = 0
+
+      getAllFiles(appDir, [], ["components"], [".css"]).forEach((file) => {
+        const program = getCollectionFromSource(file)
+        const middlewarePath = findVariable(program, "middleware")
+        if (middlewarePath?.length) {
+          console.error(`Local middleware found at ${file}`)
+          errors++
+        }
+      })
+
+      if (errors > 0) {
+        throw new Error("Local middleware is not supported")
+      }
+    },
+  })
+
+  steps.push({
+    name: "check for usages of invokeWithMiddleware",
+    action: async () => {
+      let errors = 0
+
+      getAllFiles(appDir, [], [], [".css"]).forEach((file) => {
+        const program = getCollectionFromSource(file)
+        const invokeWithMiddlewarePath = findCallExpression(program, "invokeWithMiddleware")
+        if (invokeWithMiddlewarePath?.length) {
+          console.error(`invokeWithMiddleware found at ${file}.`)
+          errors++
+        }
+      })
+
+      getAllFiles(path.resolve("pages"), [], [], [".css"]).forEach((file) => {
+        const program = getCollectionFromSource(file)
+        const invokeWithMiddlewarePath = findCallExpression(program, "invokeWithMiddleware")
+        if (invokeWithMiddlewarePath?.length) {
+          console.error(`invokeWithMiddleware found at ${file}.`)
+          errors++
+        }
+      })
+
+      if (errors > 0) {
+        throw new Error(
+          "invokeWithMiddleware is not supported. Use invokeWithCtx instead: https://canary.blitzjs.com/docs/resolver-server-utilities#invoke-with-ctx",
+        )
+      }
+    },
+  })
+
+  // steps.push({
+  //   name: "Update invokeMiddleware to invoke",
+  //   action: async () => {
+  //     getAllFiles(appDir, [], [], [".css"]).forEach((file) => {
+  //       const program = getCollectionFromSource(file)
+  //       const importSpecifier = findImportSpecifier(program, "invokeWithMiddleware")
+  //       importSpecifier?.paths().forEach((path) => {
+  //         path.get().value.imported.name = "invoke"
+  //       })
+
+  //       const invokeWithMiddlewarePath = findCallExpression(program, "invokeWithMiddleware")
+  //       if (invokeWithMiddlewarePath?.length) {
+  //         invokeWithMiddlewarePath?.paths().forEach((path) => {
+  //           path.get().value.callee.name = "invoke"
+  //           if (path.get().value.arguments.length === 3) {
+  //             delete path.get().value.arguments[2]
+  //           }
+  //         })
+  //       }
+
+  //       fs.writeFileSync(path.resolve(file), program.toSource())
+  //     })
+
+  //     getAllFiles(path.resolve("pages"), [], [], [".css"]).forEach((file) => {
+  //       const program = getCollectionFromSource(file)
+  //       const importSpecifier = findImportSpecifier(program, "invokeWithMiddleware")
+  //       importSpecifier?.paths().forEach((path) => {
+  //         path.get().value.imported.name = "invoke"
+  //       })
+
+  //       const invokeWithMiddlewarePath = findCallExpression(program, "invokeWithMiddleware")
+  //       if (invokeWithMiddlewarePath?.length) {
+  //         invokeWithMiddlewarePath?.paths().forEach((path) => {
+  //           path.get().value.callee.name = "invoke"
+  //           if (path.get().value.arguments.length === 3) {
+  //             delete path.get().value.arguments[2]
+  //           }
+  //         })
+  //       }
+
+  //       fs.writeFileSync(path.resolve(file), program.toSource())
+  //     })
+  //   },
+  // })
+
+  // Loop through steps and run the action
+  if ((failedAt && failedAt < steps.length) || failedAt !== "SUCCESS" || isLegacyBlitz) {
+    for (let [index, step] of steps.entries()) {
+      // Ignore previous steps and continue at step that was failed
+      if (failedAt && index + 1 < failedAt) {
+        continue
+      }
+      const spinner = log.spinner(log.withBrand(`Running ${step.name}...`)).start()
+      try {
+        await step.action()
+      } catch (err) {
+        spinner.fail(`${step.name}`)
+        log.error(err as string)
+        failedAt = index + 1
+        fs.writeJsonSync(".migration.json", {
+          failedAt,
+        })
+        process.exit(1)
+      }
+
+      spinner.succeed(`Successfully ran ${step.name}`)
+    }
+
+    fs.writeJsonSync(".migration.json", {
+      failedAt: "SUCCESS",
+    })
+  } else {
+    if (failedAt === "SUCCESS") {
+      log.withBrand("Migration already successful")
+      process.exit(0)
+    }
+    log.error("Legacy blitz config file not found")
+  }
+}
+
+export {upgradeLegacy}

packages/codemod/src/utils.ts

@@ -0,0 +1,234 @@
+import path from "path"
+import * as fs from "fs-extra"
+import j, {
+  ASTPath,
+  Collection,
+  FunctionDeclaration,
+  VariableDeclaration,
+  ExportDefaultDeclaration,
+  ImportDeclaration,
+  CallExpression,
+  ImportSpecifier,
+} from "jscodeshift"
+import {parseSync} from "@babel/core"
+
+export function findFunction(
+  program: Collection<any>,
+  declarationName: string,
+): Collection<FunctionDeclaration> | Collection<VariableDeclaration> | null {
+  const funcDeclaration = program.find(
+    j.FunctionDeclaration,
+    (node) => node.id.name === declarationName,
+  )
+
+  const constDeclaration = program.find(
+    j.VariableDeclaration,
+    (node) => node.declarations[0].id.name === declarationName,
+  )
+
+  const paths = funcDeclaration.length
+    ? funcDeclaration
+    : constDeclaration.length
+    ? constDeclaration
+    : null
+
+  return paths
+}
+
+export function findVariable(
+  program: Collection<any>,
+  declarationName: string,
+): Collection<VariableDeclaration> | null {
+  const constDeclaration = program.find(
+    j.VariableDeclaration,
+    (node) => node.declarations[0].id.name === declarationName,
+  )
+
+  const paths = constDeclaration.length ? constDeclaration : null
+
+  return paths
+}
+
+export function findImport(
+  program: Collection<any>,
+  declarationName: string,
+): Collection<ImportDeclaration> | null {
+  const importDeclaration = program.find(
+    j.ImportDeclaration,
+    (node) => node.source.value === declarationName,
+  )
+
+  const paths = importDeclaration.length ? importDeclaration : null
+
+  return paths
+}
+
+export function findImportSpecifier(
+  program: Collection<any>,
+  declarationName: string,
+): Collection<ImportSpecifier> | null {
+  const importSpecifier = program.find(
+    j.ImportSpecifier,
+    (node) => node.imported.name === declarationName,
+  )
+
+  const paths = importSpecifier.length ? importSpecifier : null
+
+  return paths
+}
+
+export function findCallExpression(
+  program: Collection<any>,
+  declarationName: string,
+): Collection<CallExpression> | null {
+  const callExpression = program.find(
+    j.CallExpression,
+    (node) => node.callee.name === declarationName,
+  )
+
+  const paths = callExpression.length ? callExpression : null
+
+  return paths
+}
+
+export function findDefaultExportPath(
+  program: Collection<any>,
+): ASTPath<ExportDefaultDeclaration> | null | undefined {
+  const defaultDeclaration = program.find(j.ExportDefaultDeclaration)
+  return defaultDeclaration.length ? defaultDeclaration.paths()[0] : null
+}
+
+export function wrapDeclaration(
+  path: ASTPath<FunctionDeclaration> | ASTPath<VariableDeclaration>,
+  declaration: string,
+  wrapper: string,
+) {
+  if (path.node.type === "FunctionDeclaration") {
+    // CASE 1
+    //   function myFunction()
+    // TURNS INTO
+    //   const myFunction = wrapper(function myFunction () {})
+    path.replace(
+      j.variableDeclaration("const", [
+        j.variableDeclarator(
+          j.identifier(declaration),
+          j.callExpression(j.identifier(wrapper), [
+            j.functionExpression.from({
+              id: path.node.id,
+              async: path.node.async,
+              body: path.node.body,
+              params: path.node.params,
+              typeParameters: path.node.typeParameters,
+              defaults: path.node.defaults,
+              expression: path.node.expression,
+              generator: path.node.generator,
+              returnType: path.node.returnType,
+              rest: path.node.rest,
+              comments: path.node.comments ?? null,
+            }),
+          ]),
+        ),
+      ]),
+    )
+  } else if (path.node.type === "VariableDeclaration") {
+    // CASE 2
+    //   const myFunction = () => {}
+    // TURNS INTO
+    //   const myFunction = gSSP(() => {})
+    for (const declaration of path.node.declarations) {
+      if (declaration.type === "VariableDeclarator" && declaration.init) {
+        const init = declaration.init
+
+        // Running the codemod twice should not wrap in `gSSP` twice.
+        if (
+          init.type === "CallExpression" &&
+          init.callee.type === "Identifier" &&
+          init.callee.name === wrapper
+        ) {
+          // For 100% confidence, we could probably check if gSSP is imported from Blitz here
+          // but this codemod adds the gSSP import.
+          continue
+        }
+
+        declaration.init = j.callExpression(j.identifier(wrapper), [init])
+
+        break
+      }
+    }
+  }
+}
+
+export function addNamedImport(
+  program: Collection<any>,
+  importStatement: string,
+  importFrom: string,
+  defaultSpecifier?: boolean,
+) {
+  const existingImport = program.find(
+    j.ImportDeclaration,
+    (node) => node.source.value === importFrom,
+  )
+
+  if (existingImport.length) {
+    existingImport.get().value.specifiers.push(j.importSpecifier(j.identifier(importStatement)))
+  } else {
+    program
+      .get()
+      .value.program.body.unshift(
+        defaultSpecifier
+          ? j.importDeclaration(
+              [j.importDefaultSpecifier(j.identifier(importStatement))],
+              j.stringLiteral(importFrom),
+            )
+          : j.importDeclaration(
+              [j.importSpecifier(j.identifier(importStatement))],
+              j.stringLiteral(importFrom),
+            ),
+      )
+  }
+}
+
+export function getAllFiles(
+  dirPath: string,
+  accFiles: string[] = [],
+  skipDirs?: string[],
+  skipExt?: string[],
+) {
+  let currentFiles = fs.readdirSync(dirPath)
+
+  currentFiles.forEach((file) => {
+    if (fs.statSync(dirPath + "/" + file).isDirectory()) {
+      if (!skipDirs?.includes(file)) {
+        accFiles = getAllFiles(dirPath + "/" + file, accFiles, skipDirs, skipExt)
+      }
+    } else {
+      if (!skipExt?.includes(path.extname(file))) {
+        accFiles.push(path.join(dirPath, "/", file))
+      }
+    }
+  })
+  return accFiles
+}
+
+export function getCollectionFromSource(filename: string) {
+  const fileSource = fs.readFileSync(path.resolve(filename), {encoding: "utf-8"})
+  return j(fileSource, {
+    parser: {
+      parse: (source: string) =>
+        parseSync(source, {
+          configFile: false,
+          plugins: [require(`@babel/plugin-syntax-jsx`)],
+          overrides: [
+            {
+              test: [`**/*.ts`, `**/*.tsx`],
+              plugins: [[require(`@babel/plugin-syntax-typescript`), {isTSX: true}]],
+            },
+          ],
+          filename,
+          parserOpts: {
+            tokens: true, // recast uses this
+          },
+        }),
+    },
+  })
+}

packages/codemod/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@blitzjs/config/tsconfig.library.json",
+  "compilerOptions": {
+    "lib": ["DOM", "ES2015"],
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}