chore: stop relying on remix magic export

app/components/About.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { useMatches } from 'remix';
+import { useMatches } from '@remix-run/react';
 import SvgIcon from '~/components/SvgIcon';
 import logo from '~/icons/logo.svg';
 

app/components/BackupForm.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { Form } from 'remix';
+import { Form } from '@remix-run/react';
 
 interface BackupFormProps {
 	data: any;

app/components/BookmarkDetails.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useMemo } from 'react';
-import { useLocation } from 'remix';
+import { useLocation } from '@remix-run/react';
 import { PaneContainer, PaneHeader, PaneContent, PaneFooter } from '~/layout';
 import IconLink from '~/components/IconLink';
 import InputOption from '~/components/InputOption';

app/components/Card.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'remix';
+import { Link } from '@remix-run/react';
 import type { ReactElement } from 'react';
 import type { Resource } from '~/types';
 import { getSite, getResourceURL } from '~/search';

app/components/Feed.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
-import { useLocation } from 'remix';
+import { useLocation } from '@remix-run/react';
 import clsx from 'clsx';
 import SearchList from '~/components/SearchList';
 import ResourcesList from '~/components/ResourcesList';

app/components/IconLink.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ComponentProps, ReactElement } from 'react';
-import { Link } from 'remix';
+import { Link } from '@remix-run/react';
 import SvgIcon from '~/components/SvgIcon';
 
 interface IconLinkProps {

app/components/Progress.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, RefObject } from 'react';
 import { useEffect, useRef } from 'react';
-import { useTransition } from 'remix';
+import { useTransition } from '@remix-run/react';
 
 export function useProgress(): RefObject<HTMLElement> {
 	const el = useRef<HTMLElement>(null);

app/components/ResourcesDetails.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation, useFetcher } from 'remix';
+import { Link, useLocation, useFetcher } from '@remix-run/react';
 import type { ReactElement, ReactNode } from 'react';
 import { useEffect, useMemo } from 'react';
 import type { Resource } from '~/types';

app/components/ResourcesList.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from 'remix';
+import { Link, useLocation } from '@remix-run/react';
 import Card from '~/components/Card';
 import SvgIcon from '~/components/SvgIcon';
 import searchIcon from '~/icons/search.svg';

app/components/SearchList.tsx

@@ -1,4 +1,4 @@
-import { Form, Link } from 'remix';
+import { Form, Link } from '@remix-run/react';
 import { useRef, useState } from 'react';
 import clsx from 'clsx';
 import SvgIcon from '~/components/SvgIcon';

app/components/ShowMoreButton.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'remix';
+import { Link } from '@remix-run/react';
 import { useInView } from 'react-intersection-observer';
 import { getResourceSearchParams } from '~/search';
 import { SearchOptions } from '~/types';

app/components/SidebarNavigation.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import { useMemo } from 'react';
-import { Form, Link, NavLink, useLocation } from 'remix';
+import { Form, Link, NavLink, useLocation } from '@remix-run/react';
 import clsx from 'clsx';
 import SvgIcon from '~/components/SvgIcon';
 import logo from '~/icons/logo.svg';

app/entry.client.tsx

@@ -1,4 +1,4 @@
 import ReactDOM from 'react-dom';
-import { RemixBrowser } from 'remix';
+import { RemixBrowser } from '@remix-run/react';
 
 ReactDOM.hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -1,6 +1,6 @@
 import ReactDOMServer from 'react-dom/server';
-import type { EntryContext } from 'remix';
-import { RemixServer } from 'remix';
+import type { EntryContext } from '@remix-run/cloudflare';
+import { RemixServer } from '@remix-run/react';
 
 export default function handleRequest(
 	request: Request,

app/hooks.ts

@@ -1,4 +1,4 @@
-import { useMatches } from 'remix';
+import { useMatches } from '@remix-run/react';
 import { GuideMetadata, SessionData } from '~/types';
 
 export function useSessionData(): SessionData {

app/root.tsx

@@ -2,17 +2,17 @@ import type {
 	LinksFunction,
 	MetaFunction,
 	LoaderFunction,
-	ShouldReloadFunction,
-} from 'remix';
+} from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
+import type { ShouldReloadFunction } from '@remix-run/react';
 import {
 	Meta,
 	Links,
 	Scripts,
 	LiveReload,
 	useCatch,
 	Outlet,
-	json,
-} from 'remix';
+} from '@remix-run/react';
 import type { Context } from '~/types';
 import stylesUrl from '~/styles/tailwind.css';
 

app/routes/__layout.tsx

@@ -1,5 +1,7 @@
-import type { LoaderFunction, ShouldReloadFunction } from 'remix';
-import { Outlet, json, useLoaderData, useLocation } from 'remix';
+import type { ShouldReloadFunction } from '@remix-run/react';
+import { Outlet, useLoaderData, useLocation } from '@remix-run/react';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
 import clsx from 'clsx';
 import Progress from '~/components/Progress';
 import SidebarNavigation from '~/components/SidebarNavigation';

app/routes/__layout/$guide.$list.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import type { LoaderFunction, ShouldReloadFunction } from 'remix';
-import { Outlet, useLoaderData, useLocation, json } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
+import { Outlet, useLoaderData, useLocation } from '@remix-run/react';
+import type { ShouldReloadFunction } from '@remix-run/react';
 import Feed from '~/components/Feed';
 import { notFound } from '~/helpers';
 import { search } from '~/resources';
@@ -50,8 +52,10 @@ export const unstable_shouldReload: ShouldReloadFunction = ({
 };
 
 export default function List() {
-	const { entries, count } =
-		useLoaderData<{ entries: Resource[]; count: number }>();
+	const { entries, count } = useLoaderData<{
+		entries: Resource[];
+		count: number;
+	}>();
 	const location = useLocation();
 	const resourceId = useMemo(() => {
 		const searchParams = new URLSearchParams(location.search);

app/routes/__layout/$guide.$list/index.tsx

@@ -1,10 +1,11 @@
 import type {
 	LoaderFunction,
 	ActionFunction,
-	ShouldReloadFunction,
 	MetaFunction,
-} from 'remix';
-import { Form, useLocation, useLoaderData, json, redirect } from 'remix';
+} from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import type { ShouldReloadFunction } from '@remix-run/react';
+import { Form, useLocation, useLoaderData } from '@remix-run/react';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import About from '~/components/About';

app/routes/__layout/$guide.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import type { LoaderFunction, ShouldReloadFunction } from 'remix';
-import { Outlet, useLoaderData, useLocation, json, redirect } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import { Outlet, useLoaderData, useLocation } from '@remix-run/react';
+import type { ShouldReloadFunction } from '@remix-run/react';
 import Feed from '~/components/Feed';
 import { notFound } from '~/helpers';
 import { search } from '~/resources';
@@ -42,8 +44,10 @@ export const unstable_shouldReload: ShouldReloadFunction = ({
 };
 
 export default function List() {
-	const { entries, count } =
-		useLoaderData<{ entries: Resource[]; count: number }>();
+	const { entries, count } = useLoaderData<{
+		entries: Resource[];
+		count: number;
+	}>();
 	const location = useLocation();
 	const resourceId = useMemo(() => {
 		const searchParams = new URLSearchParams(location.search);

app/routes/__layout/$guide/index.tsx

@@ -1,10 +1,11 @@
 import type {
 	ActionFunction,
 	LoaderFunction,
-	ShouldReloadFunction,
 	MetaFunction,
-} from 'remix';
-import { Form, useLoaderData, useLocation, json, redirect } from 'remix';
+} from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import type { ShouldReloadFunction } from '@remix-run/react';
+import { Form, useLoaderData, useLocation } from '@remix-run/react';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import About from '~/components/About';

app/routes/__layout/admin.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunction } from 'remix';
-import { Outlet, useLoaderData, useLocation } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { Outlet, useLoaderData, useLocation } from '@remix-run/react';
 import { useMemo } from 'react';
 import menuIcon from '~/icons/menu.svg';
 import FlashMessage from '~/components/FlashMessage';

app/routes/__layout/admin/pages.statistics.tsx

@@ -1,5 +1,6 @@
-import type { ActionFunction } from 'remix';
-import { json, useActionData, redirect } from 'remix';
+import type { ActionFunction } from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import { useActionData } from '@remix-run/react';
 import { requireAdministrator } from '~/helpers';
 import BackupForm from '~/components/BackupForm';
 import type { Context } from '~/types';

app/routes/__layout/admin/pages.tsx

@@ -1,5 +1,6 @@
-import { LoaderFunction, ActionFunction, Link } from 'remix';
-import { Form, useLoaderData, useLocation, json, redirect } from 'remix';
+import type { LoaderFunction, ActionFunction } from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import { Link, Form, useLoaderData, useLocation } from '@remix-run/react';
 import { requireAdministrator } from '~/helpers';
 import { getSite } from '~/search';
 import type { Context, PageMetadata } from '~/types';

app/routes/__layout/admin/resources.tsx

@@ -1,5 +1,6 @@
-import type { ActionFunction } from 'remix';
-import { json, useActionData, redirect } from 'remix';
+import type { ActionFunction } from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import { useActionData } from '@remix-run/react';
 import { requireAdministrator } from '~/helpers';
 import BackupForm from '~/components/BackupForm';
 import type { Context } from '~/types';

app/routes/__layout/admin/users.$userId.backup.tsx

@@ -1,5 +1,6 @@
-import type { ActionFunction } from 'remix';
-import { json, useActionData, redirect } from 'remix';
+import type { ActionFunction } from '@remix-run/cloudflare';
+import { json, redirect } from '@remix-run/cloudflare';
+import { useActionData } from '@remix-run/react';
 import { requireAdministrator, notFound } from '~/helpers';
 import BackupForm from '~/components/BackupForm';
 import type { Context } from '~/types';

app/routes/__layout/admin/users.tsx

@@ -1,5 +1,6 @@
-import type { LoaderFunction } from 'remix';
-import { Link, useLoaderData, json } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
+import { Link, useLoaderData } from '@remix-run/react';
 import { requireAdministrator } from '~/helpers';
 import type { Context, UserProfile } from '~/types';
 

app/routes/__layout/resources/$resourceId.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunction } from 'remix';
-import { redirect } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
 import { getRelatedSearchParams } from '~/search';
 
 export let loader: LoaderFunction = async ({ request, params }) => {

app/routes/__layout/resources/index.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunction } from 'remix';
-import { redirect } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
 import { getRelatedSearchParams } from '~/search';
 
 export let loader: LoaderFunction = async ({ request }) => {

app/routes/__layout/submit.tsx

@@ -1,5 +1,6 @@
-import type { MetaFunction, ActionFunction } from 'remix';
-import { Form, redirect, useLocation } from 'remix';
+import type { MetaFunction, ActionFunction } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
+import { Form, useLocation } from '@remix-run/react';
 import { useMemo } from 'react';
 import menuIcon from '~/icons/menu.svg';
 import FlashMessage from '~/components/FlashMessage';

app/routes/auth.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
 
 export let loader: LoaderFunction = async ({ context }) => {
 	return await context.session.login();

app/routes/index.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunction, MetaFunction } from 'remix';
-import { redirect } from 'remix';
+import type { LoaderFunction, MetaFunction } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
 import { formatMeta } from '~/helpers';
 
 export let meta: MetaFunction = () => {

app/routes/login.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction, ActionFunction } from 'remix';
+import type { LoaderFunction, ActionFunction } from '@remix-run/cloudflare';
 import { notFound } from '~/helpers';
 
 export let loader: LoaderFunction = async ({ context }) => {

app/routes/logout.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction } from 'remix';
+import type { ActionFunction, LoaderFunction } from '@remix-run/cloudflare';
 import { notFound } from '~/helpers';
 
 export let action: ActionFunction = async ({ context }) => {

app/routes/news.$list.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunction } from 'remix';
-import { redirect } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
 
 export let loader: LoaderFunction = ({ params }) => {
 	throw redirect(`/discover/${params.list}`);

app/routes/news.tsx

@@ -1,5 +1,5 @@
-import type { LoaderFunction } from 'remix';
-import { redirect } from 'remix';
+import type { LoaderFunction } from '@remix-run/cloudflare';
+import { redirect } from '@remix-run/cloudflare';
 
 export let loader: LoaderFunction = () => {
 	throw redirect('/discover');

app/scroll.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { useBeforeUnload, useLocation, useTransition } from 'remix';
+import { useBeforeUnload, useLocation, useTransition } from '@remix-run/react';
 
 let STORAGE_KEY = 'feed-positions';
 

package.json

@@ -14,7 +14,6 @@
 		"dev:remix": "remix watch",
 		"dev:style": "tailwindcss -o ./app/styles/tailwind.css --watch",
 		"dev": "concurrently \"npm:dev:*\"",
-		"postinstall": "remix setup cloudflare",
 		"prebuild": "npm run cleanup",
 		"test": "NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" playwright test",
 		"start": "miniflare",

worker/context/session.ts

@@ -1,6 +1,6 @@
 import { Authenticator } from 'remix-auth';
 import { GitHubStrategy } from 'remix-auth-github';
-import { createCookieSessionStorage, redirect } from 'remix';
+import { createCookieSessionStorage, redirect } from '@remix-run/cloudflare';
 import type { Env, MessageType, SessionData, UserProfile } from '../types';
 import { getUserStore } from '../store/UserStore';