update remix to new v3 flags

Author: bradwestfall

remix/REMOVEremix.config.js

@@ -1,4 +1,3 @@
-import { json } from '@remix-run/node'
 import { Outlet, useLoaderData } from '@remix-run/react'
 import { getBrands, getCategories, getProducts } from '~/utils/db.server'
 import { sortLabel } from '~/utils/helpers'
@@ -19,11 +18,11 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     getCategories(),
   ])
 
-  return json({
+  return {
     products,
     brands: brands.sort(sortLabel),
     categories: categories.sort(sortLabel),
-  })
+  }
 }
 
 export default function () {

remix/app/routes/_products-layout.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import * as z from 'zod'
-import { json } from '@remix-run/node'
+import { data } from '@remix-run/node'
 import { Form, Link, useActionData } from '@remix-run/react'
 import { createUserSession, verifyUser } from '~/utils/auth.server'
 import { FieldWrap } from '~/components/FormFields'
@@ -21,11 +21,11 @@ export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData()
   const formValues = Object.fromEntries(formData)
   const results = formSchema.safeParse(formValues)
-  if (!results.success) return json({ error: 'Invalid Data' }, { status: 400 })
+  if (!results.success) return data({ error: 'Invalid Data' }, { status: 400 })
 
   const { username, password } = results.data
   const userId = await verifyUser(username, password)
-  if (!userId) return json({ error: 'User not found' }, { status: 400 })
+  if (!userId) return data({ error: 'User not found' }, { status: 400 })
 
   return createUserSession(userId, '/')
 }

remix/app/routes/login.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import * as z from 'zod'
-import { json } from '@remix-run/node'
+import { data } from '@remix-run/node'
 import { Form, useActionData, Link } from '@remix-run/react'
 import { createUserSession, registerUser } from '~/utils/auth.server'
 import { usernameExists } from '~/utils/db.server'
@@ -22,14 +22,14 @@ export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData()
   const formValues = Object.fromEntries(formData)
   const results = formSchema.safeParse(formValues)
-  if (!results.success) return json({ error: 'Invalid Data' }, { status: 400 })
+  if (!results.success) return data({ error: 'Invalid Data' }, { status: 400 })
 
   const { username, password } = results.data
   const userExists = await usernameExists(username)
-  if (userExists) return json({ error: 'Username already registered' }, { status: 400 })
+  if (userExists) return data({ error: 'Username already registered' }, { status: 400 })
 
   const userId = await registerUser(username, password)
-  if (!userId) return json({ error: 'We were not able to register this user' }, { status: 400 })
+  if (!userId) return data({ error: 'We were not able to register this user' }, { status: 400 })
 
   return createUserSession(userId, '/')
 }

remix/app/routes/register.tsx

@@ -1,6 +1,6 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
 import { LinksFunction } from '@remix-run/node'
-import stylesheet from '~/styles/app.css'
+import stylesheet from '~/styles/app.css?url'
 
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
 

remix/lessons/01-routes-and-layouts/lecture/root.tsx

@@ -1,6 +1,6 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
 import { LinksFunction } from '@remix-run/node'
-import stylesheet from '~/styles/app.css'
+import stylesheet from '~/styles/app.css?url'
 import { MainLayout } from './components/MainLayout'
 
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]

remix/lessons/01-routes-and-layouts/practice-final/root.tsx

@@ -1,6 +1,6 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
 import { LinksFunction } from '@remix-run/node'
-import stylesheet from '~/styles/app.css'
+import stylesheet from '~/styles/app.css?url'
 import { MainLayout } from './components/MainLayout'
 
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]

remix/lessons/01-routes-and-layouts/practice/root.tsx

@@ -7,7 +7,7 @@
 
 ```ts
 // These are same
-return json({ user: 'brad' })
+return { user: 'brad' }
 
 return new Response(JSON.stringify({ user: 'brad' }), {
   headers: {

remix/lessons/02-loaders/lecture/NOTES.md

@@ -1,14 +1,14 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react'
-import { type LinksFunction, json } from '@remix-run/node'
-import stylesheet from '~/styles/app.css'
+import { type LinksFunction } from '@remix-run/node'
+import stylesheet from '~/styles/app.css?url'
 import { MainLayout } from './components/MainLayout'
 import { LessonProvider } from '~/state/LessonContext'
 
 export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
 
 export async function loader() {
   const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
-  return json({ lesson })
+  return { lesson }
 }
 
 export default function App() {

remix/lessons/02-loaders/lecture/root.tsx

@@ -1,4 +1,4 @@
-import { LoaderFunctionArgs, json } from '@remix-run/node'
+import { LoaderFunctionArgs } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { ProductType } from '~/utils/db.server'