Upgrade to Native ESM (epicweb-dev#47)

app/components/error-boundary.tsx

@@ -4,7 +4,7 @@ import {
 	useRouteError,
 } from '@remix-run/react'
 import { type ErrorResponse } from '@remix-run/router'
-import { getErrorMessage } from '~/utils/misc'
+import { getErrorMessage } from '~/utils/misc.ts'
 
 type StatusHandler = (info: {
 	error: ErrorResponse

app/entry.client.tsx

@@ -3,7 +3,7 @@ import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
 if (ENV.MODE === 'development') {
-	import('~/utils/devtools').then(({ init }) => init())
+	import('~/utils/devtools.tsx').then(({ init }) => init())
 }
 startTransition(() => {
 	hydrateRoot(document, <RemixBrowser />)

app/entry.server.tsx

@@ -4,7 +4,7 @@ import { type EntryContext, Response } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import isbot from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
-import { init, getEnv } from './utils/env.server'
+import { init, getEnv } from './utils/env.server.ts'
 import { getInstanceInfo } from 'litefs-js'
 
 const ABORT_DELAY = 5000

app/root.tsx

@@ -1,5 +1,5 @@
-import * as Checkbox from '@radix-ui/react-checkbox'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import Checkbox from '@radix-ui/react-checkbox/dist/index.js'
+import DropdownMenu from '@radix-ui/react-dropdown-menu/dist/index.js'
 import { cssBundleHref } from '@remix-run/css-bundle'
 import {
 	json,
@@ -20,15 +20,15 @@ import {
 	useLoaderData,
 	useSubmit,
 } from '@remix-run/react'
-import clsx from 'clsx'
+import { clsx } from 'clsx'
 import { useState } from 'react'
 import tailwindStylesheetUrl from './styles/tailwind.css'
-import { authenticator } from './utils/auth.server'
-import { prisma } from './utils/db.server'
-import { getEnv } from './utils/env.server'
-import { ButtonLink } from './utils/forms'
-import { getUserImgSrc } from './utils/misc'
-import { useUser } from './utils/user'
+import { authenticator } from './utils/auth.server.ts'
+import { prisma } from './utils/db.server.ts'
+import { getEnv } from './utils/env.server.ts'
+import { ButtonLink } from './utils/forms.tsx'
+import { getUserImgSrc } from './utils/misc.ts'
+import { useUser } from './utils/user.ts'
 
 export const links: LinksFunction = () => {
 	return [

app/routes/_auth+/forgot-password.tsx

@@ -8,14 +8,14 @@ import {
 } from '@remix-run/node'
 import { Link, useFetcher } from '@remix-run/react'
 import { z } from 'zod'
-import { GeneralErrorBoundary } from '~/components/error-boundary'
-import { prisma } from '~/utils/db.server'
-import { sendEmail } from '~/utils/email.server'
-import { decrypt, encrypt } from '~/utils/encryption.server'
-import { Button, ErrorList, Field } from '~/utils/forms'
-import { getDomainUrl } from '~/utils/misc.server'
-import { commitSession, getSession } from '~/utils/session.server'
-import { emailSchema, usernameSchema } from '~/utils/user-validation'
+import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
+import { prisma } from '~/utils/db.server.ts'
+import { sendEmail } from '~/utils/email.server.ts'
+import { decrypt, encrypt } from '~/utils/encryption.server.ts'
+import { Button, ErrorList, Field } from '~/utils/forms.tsx'
+import { getDomainUrl } from '~/utils/misc.server.ts'
+import { commitSession, getSession } from '~/utils/session.server.ts'
+import { emailSchema, usernameSchema } from '~/utils/user-validation.ts'
 
 export const resetPasswordSessionKey = 'resetPasswordToken'
 const resetPasswordTokenQueryParam = 'token'

app/routes/_auth+/login.tsx

@@ -4,11 +4,11 @@ import {
 	type V2_MetaFunction,
 } from '@remix-run/node'
 import { useLoaderData, useSearchParams } from '@remix-run/react'
-import { GeneralErrorBoundary } from '~/components/error-boundary'
-import { Spacer } from '~/components/spacer'
-import { authenticator } from '~/utils/auth.server'
-import { commitSession, getSession } from '~/utils/session.server'
-import { InlineLogin } from '../resources+/login'
+import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
+import { Spacer } from '~/components/spacer.tsx'
+import { authenticator } from '~/utils/auth.server.ts'
+import { commitSession, getSession } from '~/utils/session.server.ts'
+import { InlineLogin } from '../resources+/login.tsx'
 
 export async function loader({ request }: DataFunctionArgs) {
 	await authenticator.isAuthenticated(request, {

app/routes/_auth+/logout.tsx

@@ -1,5 +1,5 @@
 import { redirect, type DataFunctionArgs } from '@remix-run/node'
-import { authenticator } from '~/utils/auth.server'
+import { authenticator } from '~/utils/auth.server.ts'
 
 export async function action({ request }: DataFunctionArgs) {
 	await authenticator.logout(request, { redirectTo: '/' })

app/routes/_auth+/onboarding.tsx

@@ -15,18 +15,18 @@ import {
 	useSearchParams,
 } from '@remix-run/react'
 import { z } from 'zod'
-import { Spacer } from '~/components/spacer'
-import { authenticator, createUser } from '~/utils/auth.server'
-import { Button, CheckboxField, ErrorList, Field } from '~/utils/forms'
-import { safeRedirect } from '~/utils/misc'
-import { commitSession, getSession } from '~/utils/session.server'
+import { Spacer } from '~/components/spacer.tsx'
+import { authenticator, createUser } from '~/utils/auth.server.ts'
+import { Button, CheckboxField, ErrorList, Field } from '~/utils/forms.tsx'
+import { safeRedirect } from '~/utils/misc.ts'
+import { commitSession, getSession } from '~/utils/session.server.ts'
 import {
 	nameSchema,
 	passwordSchema,
 	usernameSchema,
-} from '~/utils/user-validation'
-import { onboardingEmailSessionKey } from './signup'
-import { checkboxSchema } from '~/utils/zod-extensions'
+} from '~/utils/user-validation.ts'
+import { onboardingEmailSessionKey } from './signup.tsx'
+import { checkboxSchema } from '~/utils/zod-extensions.ts'
 
 const OnboardingFormSchema = z
 	.object({

app/routes/_auth+/reset-password.tsx

@@ -12,14 +12,14 @@ import {
 	useNavigation,
 } from '@remix-run/react'
 import { z } from 'zod'
-import { GeneralErrorBoundary } from '~/components/error-boundary'
-import { authenticator, resetUserPassword } from '~/utils/auth.server'
-import { Button, ErrorList, Field } from '~/utils/forms'
+import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
+import { authenticator, resetUserPassword } from '~/utils/auth.server.ts'
+import { Button, ErrorList, Field } from '~/utils/forms.tsx'
 import { useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { commitSession, getSession } from '~/utils/session.server'
-import { passwordSchema } from '~/utils/user-validation'
-import { resetPasswordSessionKey } from './forgot-password'
+import { commitSession, getSession } from '~/utils/session.server.ts'
+import { passwordSchema } from '~/utils/user-validation.ts'
+import { resetPasswordSessionKey } from './forgot-password.tsx'
 
 const ResetPasswordSchema = z
 	.object({

app/routes/_auth+/signup.tsx

@@ -6,16 +6,16 @@ import {
 } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 import { z } from 'zod'
-import { GeneralErrorBoundary } from '~/components/error-boundary'
-import { prisma } from '~/utils/db.server'
-import { sendEmail } from '~/utils/email.server'
-import { decrypt, encrypt } from '~/utils/encryption.server'
-import { Button, ErrorList, Field } from '~/utils/forms'
+import { GeneralErrorBoundary } from '~/components/error-boundary.tsx'
+import { prisma } from '~/utils/db.server.ts'
+import { sendEmail } from '~/utils/email.server.ts'
+import { decrypt, encrypt } from '~/utils/encryption.server.ts'
+import { Button, ErrorList, Field } from '~/utils/forms.tsx'
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { getDomainUrl } from '~/utils/misc.server'
-import { commitSession, getSession } from '~/utils/session.server'
-import { emailSchema } from '~/utils/user-validation'
+import { getDomainUrl } from '~/utils/misc.server.ts'
+import { commitSession, getSession } from '~/utils/session.server.ts'
+import { emailSchema } from '~/utils/user-validation.ts'
 
 export const onboardingEmailSessionKey = 'onboardingToken'
 const onboardingTokenQueryParam = 'token'

app/routes/admin+/cache.tsx

@@ -7,18 +7,18 @@ import {
 	useSubmit,
 } from '@remix-run/react'
 import { getAllInstances, getInstanceInfo } from 'litefs-js'
-import { ensureInstance } from 'litefs-js/remix'
+import { ensureInstance } from 'litefs-js/remix.js'
 import invariant from 'tiny-invariant'
-import { Spacer } from '~/components/spacer'
+import { Spacer } from '~/components/spacer.tsx'
 import {
 	cache,
 	getAllCacheKeys,
 	lruCache,
 	searchCacheKeys,
-} from '~/utils/cache.server'
-import { Button, Field } from '~/utils/forms'
-import { useDebounce, useDoubleCheck } from '~/utils/misc'
-import { requireAdmin } from '~/utils/permissions.server'
+} from '~/utils/cache.server.ts'
+import { Button, Field } from '~/utils/forms.tsx'
+import { useDebounce, useDoubleCheck } from '~/utils/misc.ts'
+import { requireAdmin } from '~/utils/permissions.server.ts'
 
 export async function loader({ request }: DataFunctionArgs) {
 	await requireAdmin(request)
@@ -99,7 +99,7 @@ export default function CacheAdminRoute() {
 					<div className="flex flex-1 gap-4">
 						<button
 							type="submit"
-							className="flex h-16 items-center justify-center"
+							className="flex items-center justify-center h-16"
 						>
 							🔎
 						</button>
@@ -112,7 +112,7 @@ export default function CacheAdminRoute() {
 								defaultValue: query,
 							}}
 						/>
-						<div className="flex h-16 w-14 items-center text-lg font-medium text-slate-500">
+						<div className="flex items-center h-16 text-lg font-medium w-14 text-slate-500">
 							<span title="Total results shown">
 								{data.cacheKeys.sqlite.length + data.cacheKeys.lru.length}
 							</span>

app/routes/admin+/cache_.lru.$cacheKey.ts

@@ -2,9 +2,9 @@ import type { DataFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import invariant from 'tiny-invariant'
 import { getAllInstances, getInstanceInfo } from 'litefs-js'
-import { ensureInstance } from 'litefs-js/remix'
-import { lruCache } from '~/utils/cache.server'
-import { requireAdmin } from '~/utils/permissions.server'
+import { ensureInstance } from 'litefs-js/remix.js'
+import { lruCache } from '~/utils/cache.server.ts'
+import { requireAdmin } from '~/utils/permissions.server.ts'
 
 export async function loader({ request, params }: DataFunctionArgs) {
 	await requireAdmin(request)

app/routes/admin+/cache_.sqlite.$cacheKey.ts

@@ -2,9 +2,9 @@ import type { DataFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import invariant from 'tiny-invariant'
 import { getAllInstances, getInstanceInfo } from 'litefs-js'
-import { ensureInstance } from 'litefs-js/remix'
-import { cache } from '~/utils/cache.server'
-import { requireAdmin } from '~/utils/permissions.server'
+import { ensureInstance } from 'litefs-js/remix.js'
+import { cache } from '~/utils/cache.server.ts'
+import { requireAdmin } from '~/utils/permissions.server.ts'
 
 export async function loader({ request, params }: DataFunctionArgs) {
 	await requireAdmin(request)

app/routes/admin+/cache_.sqlite.tsx

@@ -2,7 +2,7 @@ import type { DataFunctionArgs } from '@remix-run/node'
 import { json, redirect } from '@remix-run/node'
 import { z } from 'zod'
 import { getInstanceInfo, getInternalInstanceDomain } from 'litefs-js'
-import { cache } from '~/utils/cache.server'
+import { cache } from '~/utils/cache.server.ts'
 
 export async function action({ request }: DataFunctionArgs) {
 	const { currentIsPrimary, primaryInstance } = await getInstanceInfo()

app/routes/me.tsx

@@ -1,6 +1,6 @@
 import { redirect, type DataFunctionArgs } from '@remix-run/node'
-import { authenticator, requireUserId } from '~/utils/auth.server'
-import { prisma } from '~/utils/db.server'
+import { authenticator, requireUserId } from '~/utils/auth.server.ts'
+import { prisma } from '~/utils/db.server.ts'
 
 export async function loader({ request }: DataFunctionArgs) {
 	const userId = await requireUserId(request)

app/routes/resources+/delete-image.test.tsx

@@ -3,12 +3,12 @@
  */
 import { faker } from '@faker-js/faker'
 import fs from 'fs'
-import { createPassword, createUser } from 'prisma/seed-utils'
-import { BASE_URL, getUserSetCookieHeader } from 'tests/vitest-utils'
+import { createPassword, createUser } from 'prisma/seed-utils.ts'
+import { BASE_URL, getUserSetCookieHeader } from 'tests/vitest-utils.ts'
 import invariant from 'tiny-invariant'
 import { expect } from 'vitest'
-import { prisma } from '~/utils/db.server'
-import { ROUTE_PATH, action } from './delete-image'
+import { prisma } from '~/utils/db.server.ts'
+import { ROUTE_PATH, action } from './delete-image.tsx'
 
 const RESOURCE_URL = `${BASE_URL}${ROUTE_PATH}`
 

app/routes/resources+/delete-image.tsx

@@ -1,8 +1,8 @@
 import { parse } from '@conform-to/zod'
 import { json, type DataFunctionArgs } from '@remix-run/node'
 import { z } from 'zod'
-import { requireUserId } from '~/utils/auth.server'
-import { prisma } from '~/utils/db.server'
+import { requireUserId } from '~/utils/auth.server.ts'
+import { prisma } from '~/utils/db.server.ts'
 
 export const ROUTE_PATH = '/resources/delete-image'
 

app/routes/resources+/delete-note.tsx

@@ -1,11 +1,11 @@
 import { json, type DataFunctionArgs, redirect } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
-import { Button, ErrorList } from '~/utils/forms'
+import { Button, ErrorList } from '~/utils/forms.tsx'
 import { useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { z } from 'zod'
-import { requireUserId } from '~/utils/auth.server'
-import { prisma } from '~/utils/db.server'
+import { requireUserId } from '~/utils/auth.server.ts'
+import { prisma } from '~/utils/db.server.ts'
 
 const DeleteFormSchema = z.object({
 	noteId: z.string(),

app/routes/resources+/file.$fileId.tsx

@@ -1,5 +1,5 @@
 import { type DataFunctionArgs } from '@remix-run/node'
-import { prisma } from '~/utils/db.server'
+import { prisma } from '~/utils/db.server.ts'
 
 export async function loader({ params }: DataFunctionArgs) {
 	const image = await prisma.image.findUnique({

app/routes/resources+/healthcheck.tsx

@@ -1,7 +1,7 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
 import { type DataFunctionArgs } from '@remix-run/node'
 
-import { prisma } from '~/utils/db.server'
+import { prisma } from '~/utils/db.server.ts'
 
 export async function loader({ request }: DataFunctionArgs) {
 	const host =

app/routes/resources+/image-upload.tsx

@@ -6,7 +6,7 @@ import {
 } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 import invariant from 'tiny-invariant'
-import { prisma } from '~/utils/db.server'
+import { prisma } from '~/utils/db.server.ts'
 
 const MAX_SIZE = 1024 * 1024 * 5 // 5MB
 

app/routes/resources+/login.tsx

@@ -5,12 +5,12 @@ import { Link, useFetcher } from '@remix-run/react'
 import { AuthorizationError } from 'remix-auth'
 import { FormStrategy } from 'remix-auth-form'
 import { z } from 'zod'
-import { authenticator } from '~/utils/auth.server'
-import { Button, CheckboxField, ErrorList, Field } from '~/utils/forms'
-import { safeRedirect } from '~/utils/misc'
-import { commitSession, getSession } from '~/utils/session.server'
-import { passwordSchema, usernameSchema } from '~/utils/user-validation'
-import { checkboxSchema } from '~/utils/zod-extensions'
+import { authenticator } from '~/utils/auth.server.ts'
+import { Button, CheckboxField, ErrorList, Field } from '~/utils/forms.tsx'
+import { safeRedirect } from '~/utils/misc.ts'
+import { commitSession, getSession } from '~/utils/session.server.ts'
+import { passwordSchema, usernameSchema } from '~/utils/user-validation.ts'
+import { checkboxSchema } from '~/utils/zod-extensions.ts'
 
 export const LoginFormSchema = z.object({
 	username: usernameSchema,

app/routes/resources+/note-editor.tsx

@@ -3,9 +3,9 @@ import { getFieldsetConstraint, parse } from '@conform-to/zod'
 import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 import { z } from 'zod'
-import { requireUserId } from '~/utils/auth.server'
-import { prisma } from '~/utils/db.server'
-import { Button, ErrorList, Field, TextareaField } from '~/utils/forms'
+import { requireUserId } from '~/utils/auth.server.ts'
+import { prisma } from '~/utils/db.server.ts'
+import { Button, ErrorList, Field, TextareaField } from '~/utils/forms.tsx'
 
 export const NoteEditorSchema = z.object({
 	id: z.string().optional(),

app/routes/settings+/profile.photo.tsx

@@ -1,6 +1,6 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import * as Dialog from '@radix-ui/react-dialog'
+import Dialog from '@radix-ui/react-dialog/dist/index.js'
 import {
 	type DataFunctionArgs,
 	json,
@@ -18,18 +18,18 @@ import {
 } from '@remix-run/react'
 import { useState } from 'react'
 import { z } from 'zod'
-import * as deleteImageRoute from '~/routes/resources+/delete-image'
-import { authenticator, requireUserId } from '~/utils/auth.server'
-import { prisma } from '~/utils/db.server'
-import { Button, ErrorList, LabelButton } from '~/utils/forms'
-import { getUserImgSrc } from '~/utils/misc'
+import * as deleteImageRoute from '~/routes/resources+/delete-image.tsx'
+import { authenticator, requireUserId } from '~/utils/auth.server.ts'
+import { prisma } from '~/utils/db.server.ts'
+import { Button, ErrorList, LabelButton } from '~/utils/forms.tsx'
+import { getUserImgSrc } from '~/utils/misc.ts'
 
 const MAX_SIZE = 1024 * 1024 * 3 // 3MB
 
-/* 
+/*
 The preprocess call is needed because a current bug in @remix-run/web-fetch
 for more info see the bug (https://github.com/remix-run/web-std-io/pull/28)
-and the explanation here: https://conform.guide/file-upload 
+and the explanation here: https://conform.guide/file-upload
 */
 const PhotoFormSchema = z.object({
 	photoFile: z.preprocess(