Upgrade lots of dependencies and move to Hono (#51)

* Upgrade lots of dependencies and move to Hono

* Update use-i18n.hook.ts

* Fix coverage

* Fix linter

* Update deploy.yml

* Update wrangler.toml

* Update wrangler.toml

* Update package.json

* Revert "Update package.json"

This reverts commit d5b590e.

* Revert "Update wrangler.toml"

This reverts commit 15e26b7.

.eslintrc.js

@@ -3,17 +3,16 @@ module.exports = {
 		"import",
 		"jsx-a11y",
 		"prefer-let",
-		"prettier",
 		"react-hooks",
 		"react",
 	],
 	extends: [
+    "prettier",
 		"@remix-run/eslint-config",
 		"plugin:import/errors",
 		"plugin:import/typescript",
 		"plugin:import/warnings",
 		"plugin:jsx-a11y/recommended",
-		"plugin:prettier/recommended",
 		"plugin:react-hooks/recommended",
 		"plugin:react/recommended",
 	],
@@ -23,9 +22,13 @@ module.exports = {
 	},
 	rules: {
 		"prefer-const": "off",
-		"prefer-let/prefer-let": 2,
-		"no-unused-vars": "off",
+    "no-unused-vars": "off",
 		"no-var": "off",
+
+    "no-useless-constructor": "off",
+
+		"prefer-let/prefer-let": 2,
+
 		"react/function-component-definition": [
 			"error",
 			{
@@ -38,6 +41,7 @@ module.exports = {
 		"react/no-unescaped-entities": "off",
 		"react-hooks/rules-of-hooks": "error",
 		"react-hooks/exhaustive-deps": "error",
+
 		"jsx-a11y/anchor-is-valid": "off",
 
 		"import/order": [

.github/workflows/deploy.yml

@@ -1,14 +1,14 @@
 name: Deploy
 
-on: [push]
+on: [push, workflow_dispatch]
 
 jobs:
-  cloudflare:
+  website:
+    name: Website
     runs-on: ubuntu-latest
     permissions:
       contents: read
       deployments: write
-    name: Cloudflare Pages
     steps:
       - uses: actions/checkout@v3
 

.gitignore

@@ -7,11 +7,8 @@ node_modules
 .env
 
 # Built files
-/server/build
 /public/build
-/functions/_assets
-/functions/\[\[path\]\].js
-/functions/\[\[path\]\].js.map
+/functions
 .dev.vars
 .DS_Store
 /coverage

app/components/feed.tsx

@@ -167,7 +167,7 @@ function Item({
 						<span
 							className={cn(
 								iconColor,
-								"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white"
+								"flex h-8 w-8 items-center justify-center rounded-full ring-8 ring-white",
 							)}
 						>
 							{icon}

app/entry.client.tsx

@@ -35,7 +35,7 @@ function hydrate(instance: i18n) {
 				<StrictMode>
 					<RemixBrowser />
 				</StrictMode>
-			</I18nextProvider>
+			</I18nextProvider>,
 		);
 	});
 }

app/entry.server.tsx

@@ -16,7 +16,7 @@ export default async function handleRequest(
 	status: number,
 	headers: Headers,
 	context: EntryContext,
-	{ time }: AppLoadContext
+	{ time }: AppLoadContext,
 ) {
 	let instance = await time("setup-i18next", async () => {
 		let instance = createInstance().use(initReactI18next);
@@ -47,7 +47,7 @@ export default async function handleRequest(
 					console.error(error);
 					status = 500;
 				},
-			}
+			},
 		);
 
 		if (isbot(request.headers.get("user-agent"))) await body.allReady;

app/helpers/use-i18n.hook.ts

@@ -1,12 +1,12 @@
 import type { KeyPrefix, Namespace } from "i18next";
-import type { DefaultNamespace } from "react-i18next/TransWithoutContext";
+import type { _DefaultNamespace } from "react-i18next/TransWithoutContext";
 
 import { useTranslation } from "react-i18next";
 
 export function useT<
-	N extends Namespace = DefaultNamespace,
-	TKPrefix extends KeyPrefix<N> = undefined
->(ns?: N | Readonly<N>, keyPrefix?: TKPrefix) {
+	N extends Namespace = _DefaultNamespace,
+	TKPrefix extends KeyPrefix<N> = undefined,
+>(ns?: string, keyPrefix?: TKPrefix) {
 	return useTranslation(ns, { keyPrefix }).t;
 }
 

app/root.tsx

@@ -61,11 +61,11 @@ export function loader({ request, context }: LoaderArgs) {
 				},
 				async user() {
 					return await context.services.auth.authenticator.isAuthenticated(
-						request
+						request,
 					);
 				},
 			},
-			{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } }
+			{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
 		);
 	});
 }

app/routes/_index/route.tsx

@@ -49,7 +49,7 @@ export default function Index() {
 			} as const;
 		}),
 	].sort(
-		(a, b) => b.payload.createdAt.getTime() - a.payload.createdAt.getTime()
+		(a, b) => b.payload.createdAt.getTime() - a.payload.createdAt.getTime(),
 	);
 
 	return (

app/routes/articles.tsx

@@ -44,7 +44,7 @@ export function loader({ request, context }: LoaderArgs) {
 					return meta;
 				},
 			},
-			{ headers }
+			{ headers },
 		);
 	});
 }

app/routes/articles_.$.tsx

@@ -63,14 +63,14 @@ export function loader({ request, context, params }: LoaderArgs) {
 						];
 					},
 				},
-				{ headers }
+				{ headers },
 			);
 		} catch (error) {
 			if (error instanceof NoteNotFoundError) {
 				let t = await i18n.getFixedT(request);
 				throw jsonHash(
 					{ message: t("error.NOTE_NOT_FOUND", { path }) },
-					{ status: 404 }
+					{ status: 404 },
 				);
 			}
 

app/routes/auth.$provider.callback.ts

@@ -9,7 +9,7 @@ export function loader(_: LoaderArgs) {
 		return await _.context.services.auth.authenticator.authenticate(
 			provider,
 			_.request,
-			{ successRedirect: "/", failureRedirect: "/auth/login" }
+			{ successRedirect: "/", failureRedirect: "/auth/login" },
 		);
 	});
 }

app/routes/auth.login.tsx

@@ -9,7 +9,7 @@ import { useT } from "~/helpers/use-i18n.hook";
 export function loader(_: DataFunctionArgs) {
 	return _.context.time("routes/login#loader", async () => {
 		let session = await _.context.services.auth.sessionStorage.getSession(
-			_.request.headers.get("Cookie")
+			_.request.headers.get("Cookie"),
 		);
 		let error = session.get("auth:error");
 		return json({ error });
@@ -21,7 +21,7 @@ export function action(_: DataFunctionArgs) {
 		return await _.context.services.auth.authenticator.authenticate(
 			"github",
 			_.request,
-			{ successRedirect: "/", failureRedirect: "/login," }
+			{ successRedirect: "/", failureRedirect: "/login," },
 		);
 	});
 }

app/routes/auth.logout.tsx

@@ -8,7 +8,7 @@ export async function loader(_: DataFunctionArgs) {
 	return _.context.time("routes/auth.logout#loader", async () => {
 		return await _.context.services.auth.authenticator.isAuthenticated(
 			_.request,
-			{ successRedirect: "/" }
+			{ successRedirect: "/" },
 		);
 	});
 }

app/routes/components.editor/create-change-event.ts

@@ -15,7 +15,7 @@ export function createChangeEvent(
 	selected: string,
 	selection: SelectionType,
 	markdown: string,
-	native: ChangeEvent<HTMLTextAreaElement>
+	native: ChangeEvent<HTMLTextAreaElement>,
 ) {
 	return { selected, selection, markdown, native };
 }

app/routes/components.editor/route.tsx

@@ -24,7 +24,7 @@ export async function action({ request, context }: DataFunctionArgs) {
 	});
 
 	let content = await context.time("parseMarkdown", async () =>
-		parseMarkdown(markdown)
+		parseMarkdown(markdown),
 	);
 
 	return json({ content });
@@ -45,7 +45,7 @@ export function Editor() {
 	useEffect(() => {
 		submit(
 			{ content: stateValue },
-			{ action: "/components/editor", method: "post" }
+			{ action: "/components/editor", method: "post" },
 		);
 	}, [submit, stateValue]);
 

app/routes/components.editor/set-selection-range.ts

@@ -7,7 +7,7 @@ import type { SelectionType } from "./get-selection";
  */
 export function setSelectionRange(
 	field: HTMLTextAreaElement,
-	selection: SelectionType
+	selection: SelectionType,
 ) {
 	field.setSelectionRange(selection.start, selection.end, "forward");
 	return null;

app/routes/components.editor/update-content.ts

@@ -10,7 +10,7 @@ import type { SelectionType } from "./get-selection";
 export function updateContent(
 	content: string,
 	selection: SelectionType,
-	updated: string
+	updated: string,
 ) {
 	return (
 		content.slice(0, selection.start) + updated + content.slice(selection.end)

app/routes/components.editor/use-editor.ts

@@ -77,6 +77,6 @@ export function useUpdate() {
 		(payload: Extract<Actions, { type: "update" }>["payload"]) => {
 			dispatch({ type: "update", payload });
 		},
-		[dispatch]
+		[dispatch],
 	);
 }

app/routes/projects.$project.ts

@@ -16,7 +16,7 @@ export async function loader({ params }: LoaderArgs) {
 		invariant(project, "The project is required");
 		invariant(
 			Object.keys(PROJECTS).includes(project),
-			`The project "${project}" is not supported`
+			`The project "${project}" is not supported`,
 		);
 
 		return redirect(PROJECTS[project as keyof typeof PROJECTS]);

app/routes/r.$redirectId.ts

@@ -20,7 +20,7 @@ export async function loader({ params }: LoaderArgs) {
 		invariant(redirectId, "The redirectId is required");
 		invariant(
 			Object.keys(REDIRECTS).includes(redirectId),
-			`The redirectId "${redirectId}" is not valid`
+			`The redirectId "${redirectId}" is not valid`,
 		);
 
 		return redirect(REDIRECTS[redirectId as keyof typeof REDIRECTS]);

app/routes/tutorials.tsx

@@ -52,7 +52,7 @@ export function loader(_: DataFunctionArgs) {
 					return meta;
 				},
 			},
-			{ headers }
+			{ headers },
 		);
 	});
 }

app/routes/tutorials_.$slug.tsx

@@ -95,7 +95,7 @@ function Header() {
 	let t = useT("translation", "tutorial.header");
 
 	let editUrl = new URL(
-		`https://github.com/sergiodxa/sergiodxa.com/edit/main/content/tutorials/${tutorial.slug}.md`
+		`https://github.com/sergiodxa/sergiodxa.com/edit/main/content/tutorials/${tutorial.slug}.md`,
 	);
 
 	return (

app/routes/write.tsx

@@ -26,7 +26,7 @@ export let meta: V2_MetaFunction<typeof loader> = ({ data }) => {
 export default function Component() {
 	return (
 		<main className="mx-auto max-w-screen-xl">
-			<Editor />
+			<Editor key="editor" />
 		</main>
 	);
 }

app/utils/generate-id.ts

@@ -2,7 +2,7 @@ import type { RenderableTreeNode } from "@markdoc/markdoc";
 
 export function generateID(
 	children: RenderableTreeNode[],
-	attributes: Record<string, any>
+	attributes: Record<string, any>,
 ) {
 	if (attributes.id && typeof attributes.id === "string") {
 		return attributes.id;

app/utils/measure.ts

@@ -1,6 +1,6 @@
 export async function measure<Result>(
 	key: string,
-	callback: () => Result | Promise<Result>
+	callback: () => Result | Promise<Result>,
 ) {
 	let start = Date.now();