📦 NEW: Remix 2.4.0 support

rphlmr · Dec 21, 2023 · 3c3f305 · 3c3f305
1 parent a23202e
commit 3c3f305
Show file tree

Hide file tree

Showing 22 changed files with 76 additions and 8,721 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -36,7 +36,6 @@
 		],
 		//import
 		"import/no-cycle": "error",
-		"import/no-unresolved": "error",
 		"import/no-default-export": "warn",
 		"import/order": [
 			"error",

diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { RemixBrowser } from "@remix-run/react";
 import { hydrateRoot } from "react-dom/client";
-import type { Locales } from "remix-utils";
+import type { Locales } from "remix-utils/locales/server";
 
 import { LocaleProvider } from "~/utils";
 

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,11 +1,13 @@
 import { PassThrough } from "stream";
 
-import { Response } from "@remix-run/node";
-import type { EntryContext } from "@remix-run/node";
+import {
+	createReadableStreamFromReadable,
+	type EntryContext,
+} from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
-import { getClientLocales } from "remix-utils";
+import { getClientLocales } from "remix-utils/locales/server";
 
 import { LocaleProvider, getCookie, Logger } from "~/utils";
 
@@ -34,11 +36,12 @@ export default function handleRequest(
 			{
 				[callbackName]() {
 					const body = new PassThrough();
+					const stream = createReadableStreamFromReadable(body);
 
 					responseHeaders.set("Content-Type", "text/html");
 
 					resolve(
-						new Response(body, {
+						new Response(stream, {
 							status: didError ? 500 : responseStatusCode,
 							headers: responseHeaders,
 						}),

diff --git a/app/root.tsx b/app/root.tsx
@@ -2,11 +2,10 @@ import { Fragment, useEffect, useState } from "react";
 
 import { Dialog, Transition } from "@headlessui/react";
 import { Bars3Icon, XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { cssBundleHref } from "@remix-run/css-bundle";
 import type {
 	LinksFunction,
-	LoaderArgs,
-	V2_MetaFunction as MetaFunction,
+	LoaderFunctionArgs,
+	MetaFunction,
 } from "@remix-run/node";
 import {
 	Form,
@@ -31,22 +30,16 @@ import { getUserTier } from "./modules/user";
 import tailwindStylesheetUrl from "./styles/tailwind.css";
 
 export const links: LinksFunction = () => [
-	{ rel: "preload", href: tailwindStylesheetUrl, as: "style" },
-	{ rel: "stylesheet", href: tailwindStylesheetUrl, as: "style" },
-	...(cssBundleHref
-		? [
-				{ rel: "preload", href: cssBundleHref, as: "style" },
-				{ rel: "stylesheet", href: cssBundleHref },
-		  ]
-		: []),
+	{ rel: "stylesheet preload prefetch", href: tailwindStylesheetUrl, as: "style" },
+
 ];
 
 export const meta: MetaFunction = () => [
 	{ title: "Notee" },
 	{ name: "description", content: "Notee App" },
 ];
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const isAnonymous = await isAnonymousSession(request);
 
 	if (isAnonymous) {

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,12 +1,12 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 
 import { ButtonLink } from "~/components";
 import { isAnonymousSession } from "~/modules/auth";
 import { getPricingPlan, PricingTable } from "~/modules/price";
 import { getDefaultCurrency, response } from "~/utils";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const isAnonymous = await isAnonymousSession(request);
 
 	if (!isAnonymous) {

diff --git a/app/routes/api.customer-portal.ts b/app/routes/api.customer-portal.ts
@@ -1,11 +1,11 @@
-import type { ActionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
 
 import { requireAuthSession } from "~/modules/auth";
 import { createBillingPortalSession } from "~/modules/billing-portal";
 import { getBillingInfo } from "~/modules/user";
 import { response } from "~/utils";
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 

diff --git a/app/routes/api.subscribe.ts b/app/routes/api.subscribe.ts
@@ -1,4 +1,4 @@
-import type { ActionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { parseFormAny } from "react-zorm";
 import { z } from "zod";
 
@@ -10,7 +10,7 @@ import { response, parseData, SupaStripeStackError } from "~/utils";
 
 export type SubscribeApiAction = typeof action;
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 

diff --git a/app/routes/api.webhook.ts b/app/routes/api.webhook.ts
@@ -1,4 +1,4 @@
-import type { ActionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { z } from "zod";
 
 import { stripe } from "~/integrations/stripe";
@@ -52,7 +52,7 @@ async function getStripeEvent(request: Request) {
 	}
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const event = await getStripeEvent(request);
 	const eventId = event.id;
 

diff --git a/app/routes/app.tsx b/app/routes/app.tsx
@@ -1,5 +1,5 @@
 import { CloudArrowUpIcon, TrashIcon } from "@heroicons/react/24/outline";
-import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import {
 	Form,
 	useActionData,
@@ -27,7 +27,7 @@ import {
  *
  */
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 
@@ -56,7 +56,7 @@ const NoteFormSchema = z.object({
 	content: z.string().trim().min(1),
 });
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 

diff --git a/app/routes/checkout.tsx b/app/routes/checkout.tsx
@@ -1,13 +1,13 @@
 import { SparklesIcon } from "@heroicons/react/24/outline";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { Link, useLoaderData, useSubmit } from "@remix-run/react";
 
 import { useInterval } from "~/hooks";
 import { requireAuthSession } from "~/modules/auth";
 import { getSubscription } from "~/modules/subscription";
 import { response } from "~/utils";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 

diff --git a/app/routes/healthcheck.tsx b/app/routes/healthcheck.tsx
@@ -1,9 +1,9 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { db } from "~/database";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const host =
 		request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
 

diff --git a/app/routes/join.tsx b/app/routes/join.tsx
@@ -1,6 +1,4 @@
-import * as React from "react";
-
-import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import {
 	Form,
 	Link,
@@ -21,7 +19,7 @@ import {
 	SupaStripeStackError,
 } from "~/utils";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	try {
 		const isAnonymous = await isAnonymousSession(request);
 
@@ -45,7 +43,7 @@ const JoinFormSchema = z.object({
 	redirectTo: z.string().optional(),
 });
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	try {
 		const payload = await parseData(
 			parseFormAny(await request.formData()),

diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -1,4 +1,4 @@
-import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import {
 	Form,
 	Link,
@@ -17,7 +17,7 @@ import {
 } from "~/modules/auth";
 import { response, isFormProcessing, parseData } from "~/utils";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	try {
 		const isAnonymous = await isAnonymousSession(request);
 
@@ -40,7 +40,7 @@ const LoginFormSchema = z.object({
 	redirectTo: z.string().optional(),
 });
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	try {
 		const payload = await parseData(
 			parseFormAny(await request.formData()),

diff --git a/app/routes/logout.tsx b/app/routes/logout.tsx
@@ -1,9 +1,9 @@
-import type { ActionArgs } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
 
 import { destroyAuthSession } from "~/modules/auth";
 import { response } from "~/utils";
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	return destroyAuthSession(request);
 }
 

diff --git a/app/routes/subscription.tsx b/app/routes/subscription.tsx
@@ -1,5 +1,5 @@
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import {
 	Form,
 	useFetcher,
@@ -14,7 +14,7 @@ import { getSubscription } from "~/modules/subscription";
 import { deleteUser, getBillingInfo, getUserTier } from "~/modules/user";
 import { getDefaultCurrency, response, isFormProcessing, tw } from "~/utils";
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 
@@ -42,7 +42,7 @@ export async function loader({ request }: LoaderArgs) {
 	}
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	const authSession = await requireAuthSession(request);
 	const { userId } = authSession;
 

diff --git a/app/utils/http.server.ts b/app/utils/http.server.ts
@@ -1,8 +1,7 @@
 import { Currency } from "@prisma/client";
-import type { ResponseInit } from "@remix-run/node";
 import { redirect, json, defer } from "@remix-run/node";
 import countryToCurrency from "country-to-currency";
-import { getClientLocales } from "remix-utils";
+import { getClientLocales } from "remix-utils/locales/server";
 import { z } from "zod";
 
 import { DEFAULT_CURRENCY } from "./env";

diff --git a/app/utils/locale-provider.tsx b/app/utils/locale-provider.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useMemo } from "react";
 
-import type { Locales } from "remix-utils";
+import type { Locales } from "remix-utils/locales/server";
 
 import { SupaStripeStackError } from "./error";
 

diff --git a/package.json b/package.json
@@ -24,47 +24,48 @@
 	},
 	"dependencies": {
 		"@headlessui/react": "^1.7.17",
-		"@heroicons/react": "^2.0.18",
+		"@heroicons/react": "^2.1.1",
 		"@paralleldrive/cuid2": "^2.2.2",
-		"@prisma/client": "^5.2.0",
-		"@remix-run/css-bundle": "^1.19.3",
+		"@prisma/client": "^5.7.1",
 		"@remix-run/node": "*",
 		"@remix-run/react": "*",
 		"@remix-run/serve": "*",
-		"@supabase/supabase-js": "^2.33.1",
-		"cookie": "^0.5.0",
-		"country-to-currency": "^1.0.11",
-		"isbot": "^3.6.13",
-		"pino": "^8.15.0",
+		"@supabase/supabase-js": "^2.39.1",
+		"autoprefixer": "^10.4.16",
+		"cookie": "^0.6.0",
+		"country-to-currency": "^1.1.0",
+		"intl-parse-accept-language": "^1.0.0",
+		"isbot": "^3.7.1",
+		"pino": "^8.17.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-zorm": "^0.9.0",
-		"remix-utils": "^6.6.0",
+		"remix-utils": "^7.4.0",
 		"stripe": "^11.18.0",
-		"tailwind-merge": "^1.14.0",
-		"zod": "^3.22.2"
+		"tailwind-merge": "^2.1.0",
+		"zod": "^3.22.4"
 	},
 	"devDependencies": {
 		"@remix-run/dev": "*",
 		"@remix-run/eslint-config": "*",
-		"@tailwindcss/forms": "^0.5.6",
-		"@tailwindcss/typography": "^0.5.9",
-		"@types/react": "^18.2.21",
-		"@types/react-dom": "^18.2.7",
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.10",
+		"@types/react": "^18.2.45",
+		"@types/react-dom": "^18.2.18",
 		"cross-env": "^7.0.3",
 		"dotenv-cli": "^7.3.0",
-		"eslint": "^8.48.0",
-		"eslint-config-prettier": "^9.0.0",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-tailwindcss": "^3.13.0",
 		"npm-run-all": "^4.1.5",
-		"pino-pretty": "^10.2.0",
-		"prettier": "3.0.3",
-		"prisma": "^5.2.0",
+		"pino-pretty": "^10.3.0",
+		"prettier": "3.1.1",
+		"prisma": "^5.7.1",
 		"tailwind-scrollbar": "^3.0.5",
-		"tailwindcss": "^3.3.3",
-		"ts-node": "^10.9.1",
+		"tailwindcss": "^3.4.0",
+		"ts-node": "^10.9.2",
 		"tsconfig-paths": "^4.2.0",
-		"typescript": "^5.2.2"
+		"typescript": "^5.3.3"
 	},
 	"engines": {
 		"node": ">=18"