Merge pull request #140 from MichaelDeBoey/remix-v2

feat: upgrade to Remix v2

Dockerfile

@@ -1,5 +1,5 @@
 # Base node image.
-FROM node:16-bullseye-slim as base
+FROM node:18-bullseye-slim as base
 
 # Set global environment variables.
 ENV PORT="8080"

app/entry.server.tsx

@@ -1,7 +1,12 @@
-import type { EntryContext } from '@remix-run/node'
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/docs/en/main/file-conventions/entry.server
+ */
 
-import { PassThrough } from 'stream'
-import { Response } from '@remix-run/node'
+import { PassThrough } from 'node:stream'
+import type { EntryContext } from '@remix-run/node'
+import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from '@remix-run/react'
 import { renderToPipeableStream } from 'react-dom/server'
 import { getSharedEnvs } from './utils/envs'
@@ -35,7 +40,7 @@ function handleBotRequest(
   return new Promise((resolve, reject) => {
     let didError = false
 
-    const { pipe, abort } = renderToPipeableStream(
+    const { abort, pipe } = renderToPipeableStream(
       <RemixServer context={remixContext} url={request.url} />,
       {
         onAllReady() {
@@ -44,7 +49,7 @@ function handleBotRequest(
           responseHeaders.set('Content-Type', 'text/html')
 
           resolve(
-            new Response(body, {
+            new Response(createReadableStreamFromReadable(body), {
               headers: responseHeaders,
               status: didError ? 500 : responseStatusCode,
             }),
@@ -76,7 +81,7 @@ function handleBrowserRequest(
   return new Promise((resolve, reject) => {
     let didError = false
 
-    const { pipe, abort } = renderToPipeableStream(
+    const { abort, pipe } = renderToPipeableStream(
       <RemixServer context={remixContext} url={request.url} />,
       {
         onShellReady() {
@@ -85,7 +90,7 @@ function handleBrowserRequest(
           responseHeaders.set('Content-Type', 'text/html')
 
           resolve(
-            new Response(body, {
+            new Response(createReadableStreamFromReadable(body), {
               headers: responseHeaders,
               status: didError ? 500 : responseStatusCode,
             }),

app/root.tsx

@@ -1,3 +1,4 @@
+import type { LinksFunction } from '@remix-run/node'
 import type { LinksFunction, DataFunctionArgs } from '@remix-run/node'
 import {
   Links,
@@ -16,6 +17,7 @@ export const links: LinksFunction = () => {
   return [{ rel: 'stylesheet', href: TailwindCSS }]
 }
 
+export function loader() {
 export function loader({ request }: DataFunctionArgs) {
   return { ENV: getSharedEnvs() }
 }

app/routes/_layout+/_layout.tsx

@@ -1,4 +1,4 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import type { User } from '@prisma/client'
 
 import { redirect, json } from '@remix-run/node'
@@ -12,7 +12,7 @@ type LoaderData = {
   user: User | null
 }
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request)
 
   // Force redirect to /account on authenticated user.

app/routes/_layout+/account.tsx

@@ -1,4 +1,4 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import type { User, Subscription } from '@prisma/client'
 
 import { json, redirect } from '@remix-run/node'
@@ -17,7 +17,7 @@ type LoaderData = {
   subscription: Omit<Subscription, 'createdAt' | 'updatedAt'>
 }
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })

app/routes/_layout+/checkout.tsx

@@ -1,15 +1,14 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
-import { useState } from 'react'
-import { Link, useLoaderData, useSubmit } from '@remix-run/react'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect, json } from '@remix-run/node'
-import { authenticator } from '~/services/auth/config.server'
+import { Link, useLoaderData, useSubmit } from '@remix-run/react'
+import { useState } from 'react'
 
-import { PlanId } from '~/services/stripe/plans'
 import { getSubscriptionByUserId } from '~/models/subscription/get-subscription'
+import { authenticator } from '~/services/auth/config.server'
+import { PlanId } from '~/services/stripe/plans'
 import { useInterval } from '~/utils/hooks'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })

app/routes/_layout+/login.email.tsx

@@ -1,12 +1,11 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Form, useLoaderData } from '@remix-run/react'
 
 import { authenticator } from '~/services/auth/config.server'
 import { getSession, commitSession } from '~/services/auth/session.server'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const userSession = await authenticator.isAuthenticated(request, {
     successRedirect: '/account',
   })
@@ -28,7 +27,7 @@ export async function loader({ request }: DataFunctionArgs) {
   )
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   await authenticator.authenticate('OTP', request, {
     successRedirect: '/login/email',
     failureRedirect: '/login/email',

app/routes/_layout+/login.tsx

@@ -1,10 +1,9 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Outlet, useLocation } from '@remix-run/react'
 import { authenticator } from '~/services/auth/config.server'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await authenticator.isAuthenticated(request, {
     successRedirect: '/account',
   })

app/routes/_layout+/plans.tsx

@@ -1,8 +1,7 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
-import { useState } from 'react'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Link, useLoaderData } from '@remix-run/react'
+import { useState } from 'react'
 
 import { authenticator } from '~/services/auth/config.server'
 import { getSubscriptionByUserId } from '~/models/subscription/get-subscription'
@@ -11,7 +10,7 @@ import { getDefaultCurrency } from '~/utils/locales'
 import { PlanId, Interval, Currency, PRICING_PLANS } from '~/services/stripe/plans'
 import { CheckoutButton } from '~/components/stripe/checkout-button'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request)
   const subscription = session?.id ? await getSubscriptionByUserId(session.id) : null
 

app/routes/_layout+/register.name.tsx

@@ -1,13 +1,12 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { json, redirect } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 
 import { authenticator } from '~/services/auth/config.server'
 import { getUserById } from '~/models/user/get-user'
 import { updateUserById } from '~/models/user/update-user'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })
@@ -19,7 +18,7 @@ export async function loader({ request }: DataFunctionArgs) {
   return json({})
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })

app/routes/_layout+/register.tsx

@@ -1,10 +1,9 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { Outlet } from '@remix-run/react'
 import { authenticator } from '~/services/auth/config.server'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })

app/routes/api+/healthcheck.ts

@@ -1,11 +1,11 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { db } from '~/utils/db.server'
 
 /**
  * Learn more about Fly.io Health Check:
  * https://fly.io/docs/reference/configuration/#services-http_checks
  */
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const host = request.headers.get('X-Forwarded-Host') ?? request.headers.get('host')
 
   try {

app/routes/api+/webhook.ts

@@ -2,14 +2,13 @@
 // More info: https://bit.ly/3KlNXLs
 /// <reference types="stripe-event-types" />
 
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { ActionFunctionArgs } from '@remix-run/node'
+import { json } from '@remix-run/node'
 import type { Stripe } from 'stripe'
 
-import { json } from '@remix-run/node'
 import { stripe } from '~/services/stripe/config.server'
 import { PlanId } from '~/services/stripe/plans'
 import { retrieveStripeSubscription } from '~/services/stripe/api/retrieve-subscription'
-
 import { getUserByCustomerId } from '~/models/user/get-user'
 import { getSubscriptionById } from '~/models/subscription/get-subscription'
 import { updateSubscriptionByUserId } from '~/models/subscription/update-subscription'
@@ -43,7 +42,7 @@ async function getStripeEvent(request: Request) {
   }
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   const event = await getStripeEvent(request)
 
   try {

app/routes/auth+/$provider.callback.tsx

@@ -1,7 +1,7 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 
-export async function loader({ request, params }: DataFunctionArgs) {
+export async function loader({ params, request }: LoaderFunctionArgs) {
   if (typeof params.provider !== 'string') throw new Error('Invalid provider.')
 
   return await authenticator.authenticate(params.provider, request, {

app/routes/auth+/$provider.tsx

@@ -1,7 +1,7 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { ActionFunctionArgs } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 
-export async function action({ request, params }: DataFunctionArgs) {
+export async function action({ params, request }: ActionFunctionArgs) {
   if (typeof params.provider !== 'string') throw new Error('Invalid provider.')
 
   return await authenticator.authenticate(params.provider, request, {

app/routes/auth+/logout.tsx

@@ -1,7 +1,7 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { ActionFunctionArgs } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   return await authenticator.logout(request, { redirectTo: '/' })
 }
 

app/routes/auth+/magic.tsx

@@ -1,7 +1,7 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await authenticator.authenticate('OTP', request, {
     successRedirect: '/account',
     failureRedirect: '/login',

app/routes/resources+/stripe.create-checkout.ts

@@ -1,4 +1,4 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 
 import { redirect } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
@@ -8,12 +8,12 @@ import { getPlanById } from '~/models/plan/get-plan'
 import { getDefaultCurrency } from '~/utils/locales'
 import { createStripeCheckoutSession } from '~/services/stripe/api/create-checkout'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await authenticator.isAuthenticated(request, { failureRedirect: '/login' })
   return redirect('/account')
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/',
   })

app/routes/resources+/stripe.create-customer-portal.ts

@@ -1,18 +1,17 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { redirect, json } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 import { getUserById } from '~/models/user/get-user'
 import { createStripeCustomerPortalSession } from '~/services/stripe/api/create-customer-portal'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await authenticator.isAuthenticated(request, {
     failureRedirect: '/',
   })
   return redirect('/account')
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/',
   })

app/routes/resources+/stripe.create-customer.ts

@@ -1,4 +1,4 @@
-import type { DataFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from '@remix-run/node'
 
 import { redirect } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
@@ -7,7 +7,7 @@ import { getUserById } from '~/models/user/get-user'
 import { updateUserById } from '~/models/user/update-user'
 import { createStripeCustomer } from '~/services/stripe/api/create-customer'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })

app/routes/resources+/stripe.create-subscription.ts

@@ -1,5 +1,4 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 
@@ -12,7 +11,7 @@ import { PlanId } from '~/services/stripe/plans'
 import { createStripeSubscription } from '~/services/stripe/api/create-subscription'
 import { getDefaultCurrency } from '~/utils/locales'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const session = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })

app/routes/resources+/user.delete.ts

@@ -1,5 +1,4 @@
-import type { DataFunctionArgs } from '@remix-run/node'
-
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { redirect } from '@remix-run/node'
 import { authenticator } from '~/services/auth/config.server'
 import { getSession, destroySession } from '~/services/auth/session.server'
@@ -8,12 +7,12 @@ import { getUserById } from '~/models/user/get-user'
 import { deleteUserById } from '~/models/user/delete-user'
 import { deleteStripeCustomer } from '~/services/stripe/api/delete-customer'
 
-export async function loader({ request }: DataFunctionArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   await authenticator.isAuthenticated(request, { failureRedirect: '/login' })
   return redirect('/account')
 }
 
-export async function action({ request }: DataFunctionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   const userSession = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
   })