⬆️ Use Remix v2 (Classic Compiler) (2)

package.json

@@ -30,8 +30,8 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
-    "@remix-run/node": "~1.17.0",
-    "@remix-run/react": "~1.17.0",
+    "@remix-run/node": "^2.0.0",
+    "@remix-run/react": "^2.0.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",

packages/site/package.json

@@ -37,8 +37,8 @@
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
-    "@remix-run/node": "^1.17 || ^2.0",
-    "@remix-run/react": "^1.17 || ^2.0",
+    "@remix-run/node": "^2.0.0",
+    "@remix-run/react": "^2.0.0",
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
     "react": "^16.8 || ^17.0 || ^18.0",

packages/site/src/pages/Article.tsx

@@ -7,8 +7,6 @@ import {
   FrontmatterParts,
   BackmatterParts,
 } from '../components/index.js';
-import { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
-import { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 import type { PageLoader } from '@myst-theme/common';
 import { copyNode, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
@@ -98,11 +96,3 @@ export const ArticlePage = React.memo(function ({
     </ReferencesProvider>
   );
 });
-
-export function ProjectPageCatchBoundary() {
-  return <ErrorProjectNotFound />;
-}
-
-export function ArticlePageCatchBoundary() {
-  return <ErrorDocumentNotFound />;
-}

packages/site/src/pages/ErrorUnhandled.tsx

@@ -0,0 +1,14 @@
+export type ErrorResponse = {
+  status: number;
+  statusText: string;
+  data: any;
+};
+export function ErrorUnhandled({ error }: { error: ErrorResponse }) {
+  return (
+    <>
+      <h1>Unexpected Error Occurred</h1>
+      <p>Status: {error.status}</p>
+      <p>{error.data.message}</p>
+    </>
+  );
+}

packages/site/src/pages/Root.tsx

@@ -12,10 +12,13 @@ import {
   useLoaderData,
   Link,
   NavLink,
+  useRouteError,
+  isRouteErrorResponse,
 } from '@remix-run/react';
 import { DEFAULT_NAV_HEIGHT, renderers as defaultRenderers } from '../components/index.js';
 import { Analytics } from '../seo/index.js';
 import { Error404 } from './Error404.js';
+import { ErrorUnhandled } from './ErrorUnhandled.js';
 import classNames from 'classnames';
 
 export function Document({
@@ -86,12 +89,13 @@ export function App() {
   );
 }
 
-export function AppCatchBoundary() {
+export function AppErrorBoundary() {
+  const error = useRouteError();
   return (
     <Document theme={Theme.light}>
       <article className="article">
         <main className="article-grid subgrid-gap col-screen">
-          <Error404 />
+          {isRouteErrorResponse(error) ? <Error404 /> : <ErrorUnhandled error={error as any} />}
         </main>
       </article>
     </Document>

packages/site/src/pages/index.ts

@@ -1,5 +1,6 @@
 export { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 export { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
 export { Error404 } from './Error404.js';
-export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article.js';
-export { App, Document, AppCatchBoundary } from './Root.js';
+export { ErrorUnhandled } from './ErrorUnhandled.js';
+export { ArticlePage } from './Article.js';
+export { App, Document, AppErrorBoundary } from './Root.js';

packages/site/src/seo/meta.ts

@@ -1,4 +1,4 @@
-import type { HtmlMetaDescriptor, V2_MetaDescriptor } from '@remix-run/react';
+import type { MetaDescriptor } from '@remix-run/react';
 
 type SocialSite = {
   title: string;
@@ -17,15 +17,11 @@ type SocialArticle = {
   keywords?: string[];
 };
 
-function allDefined(meta: Record<string, string | null | undefined>): HtmlMetaDescriptor {
-  return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as HtmlMetaDescriptor;
+function allDefined(meta: Record<string, string | null | undefined>): MetaDescriptor {
+  return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as MetaDescriptor;
 }
 
-export function getMetaTagsForSite_V1({
-  title,
-  description,
-  twitter,
-}: SocialSite): HtmlMetaDescriptor {
+export function getMetaTagsForSite_V1({ title, description, twitter }: SocialSite): MetaDescriptor {
   const meta = {
     title,
     description,
@@ -34,12 +30,8 @@ export function getMetaTagsForSite_V1({
   return allDefined(meta);
 }
 
-export function getMetaTagsForSite({
-  title,
-  description,
-  twitter,
-}: SocialSite): V2_MetaDescriptor[] {
-  const meta: V2_MetaDescriptor[] = [
+export function getMetaTagsForSite({ title, description, twitter }: SocialSite): MetaDescriptor[] {
+  const meta: MetaDescriptor[] = [
     { title },
     { property: 'og:title', content: title },
     { name: 'generator', content: 'mystmd' },
@@ -60,7 +52,7 @@ export function getMetaTagsForArticle_V1({
   image,
   twitter,
   keywords,
-}: SocialArticle): HtmlMetaDescriptor {
+}: SocialArticle): MetaDescriptor {
   const meta = {
     title,
     description,
@@ -88,8 +80,8 @@ export function getMetaTagsForArticle({
   image,
   twitter,
   keywords,
-}: SocialArticle): V2_MetaDescriptor[] {
-  const meta: V2_MetaDescriptor[] = [
+}: SocialArticle): MetaDescriptor[] {
+  const meta: MetaDescriptor[] = [
     { title },
     { property: 'og:title', content: title },
     { name: 'generator', content: 'mystmd' },

themes/article/app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, MetaFunction, LoaderFunction, V2_MetaFunction } from '@remix-run/node';
+import type { LinksFunction, LoaderFunction, MetaFunction } from '@remix-run/node';
 import tailwind from '~/styles/app.css';
 import thebeCoreCss from 'thebe-core/dist/lib/thebe-core.css';
 import { getConfig } from '~/utils/loaders.server';
@@ -11,10 +11,10 @@ import {
   ContentReload,
   SkipToArticle,
 } from '@myst-theme/site';
+export { AppErrorBoundary as ErrorBoundary } from '@myst-theme/site';
 import { Outlet, useLoaderData } from '@remix-run/react';
-export { AppCatchBoundary as CatchBoundary } from '@myst-theme/site';
 
-export const meta: V2_MetaFunction = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return getMetaTagsForSite({
     title: data?.config?.title,
     description: data?.config?.description,

themes/article/app/routes/$.tsx

@@ -3,9 +3,14 @@ import {
   json,
   type LinksFunction,
   type LoaderFunction,
-  type V2_MetaFunction,
+  type MetaFunction,
 } from '@remix-run/node';
-import { getMetaTagsForArticle, KatexCSS, ArticlePageCatchBoundary } from '@myst-theme/site';
+import {
+  getMetaTagsForArticle,
+  KatexCSS,
+  ErrorDocumentNotFound,
+  ErrorUnhandled,
+} from '@myst-theme/site';
 import { getConfig, getPage } from '~/utils/loaders.server';
 import { useLoaderData } from '@remix-run/react';
 import type { SiteManifest } from 'myst-config';
@@ -14,10 +19,11 @@ import { ArticlePage } from '../components/ArticlePage';
 import { ComputeOptionsProvider } from '@myst-theme/jupyter';
 import { ProjectProvider, useBaseurl } from '@myst-theme/providers';
 import { ThebeLoaderAndServer } from '@myst-theme/jupyter';
+import { useRouteError, isRouteErrorResponse } from '@remix-run/react';
 
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
-export const meta: V2_MetaFunction = ({ data, matches, location }) => {
+export const meta: MetaFunction<typeof loader> = ({ data, matches, location }) => {
   if (!data) return [];
 
   const config: SiteManifest = data.config;
@@ -60,7 +66,7 @@ export default function Page() {
   // const { container, outline } = useOutlineHeight();
   // const { hide_outline } = (article.frontmatter as any)?.options ?? {};
   const baseurl = useBaseurl();
-  const { page: article } = useLoaderData() as { page: PageLoader };
+  const { page: article } = useLoaderData<typeof loader>();
 
   return (
     <ArticlePageAndNavigation>
@@ -77,11 +83,16 @@ export default function Page() {
   );
 }
 
-export function CatchBoundary() {
+export function ErrorBoundary() {
+  const error = useRouteError();
   return (
     <ArticlePageAndNavigation>
       <main className="article">
-        <ArticlePageCatchBoundary />
+        {isRouteErrorResponse(error) ? (
+          <ErrorDocumentNotFound />
+        ) : (
+          <ErrorUnhandled error={error as any} />
+        )}
       </main>
     </ArticlePageAndNavigation>
   );

themes/article/app/routes/_index.tsx

@@ -1,16 +1,23 @@
-import { getMetaTagsForArticle, responseNoArticle, responseNoSite, ProjectPageCatchBoundary} from '@myst-theme/site';
+import {
+  getMetaTagsForArticle,
+  responseNoArticle,
+  responseNoSite,
+  ErrorDocumentNotFound,
+  ErrorUnhandled,
+} from '@myst-theme/site';
 import Page from './$';
 import { ArticlePageAndNavigation } from '../components/ArticlePageAndNavigation';
 import { getConfig, getPage } from '../utils/loaders.server';
-import type { LoaderFunction, V2_MetaFunction } from '@remix-run/node';
+import type { LoaderFunction, MetaFunction } from '@remix-run/node';
 import { redirect } from '@remix-run/node';
 import { SiteManifest } from 'myst-config';
 import { getProject } from '@myst-theme/common';
 export { links } from './$';
+import { useRouteError, isRouteErrorResponse } from '@remix-run/react';
 
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
-export const meta: V2_MetaFunction = ({ data, location }) => {
+export const meta: MetaFunction<typeof loader> = ({ data, location }) => {
   if (!data) return [];
 
   const config: SiteManifest = data.config;
@@ -39,11 +46,16 @@ export const loader: LoaderFunction = async ({ params, request }) => {
 
 export default Page;
 
-export function CatchBoundary() {
+export function ErrorBoundary() {
+  const error = useRouteError();
   return (
     <ArticlePageAndNavigation>
       <main className="article">
-        <ProjectPageCatchBoundary />
+        {isRouteErrorResponse(error) ? (
+          <ErrorDocumentNotFound />
+        ) : (
+          <ErrorUnhandled error={error as any} />
+        )}
       </main>
     </ArticlePageAndNavigation>
   );

themes/article/package.json

@@ -22,19 +22,18 @@
     "@myst-theme/common": "^0.9.6",
     "@myst-theme/site": "^0.9.6",
     "@myst-theme/styles": "^0.9.6",
-    "@remix-run/node": "~1.17.0",
-    "@remix-run/react": "~1.17.0",
-    "@remix-run/vercel": "~1.17.0",
+    "@remix-run/node": "^2.2.0",
+    "@remix-run/react": "^2.2.0",
     "myst-common": "^1.4.4",
     "myst-config": "^1.4.4",
     "node-fetch": "^2.6.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "~1.17.0",
-    "@remix-run/eslint-config": "~1.17.0",
-    "@remix-run/serve": "~1.17.0",
+    "@remix-run/dev": "^2.2.0",
+    "@remix-run/eslint-config": "^2.2.0",
+    "@remix-run/serve": "^2.2.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/node-fetch": "^2.6.4",
     "@types/react": "^18.2.24",

themes/article/remix.config.dev.js

@@ -1,3 +1,5 @@
+const { builtinModules } = require("node:module");
+
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
   publicPath: '/myst_assets_folder/',
@@ -60,10 +62,7 @@ module.exports = {
     'jats-utils',
   ],
   watchPaths: ['../../packages/**/*'],
-  future: {
-    v2_routeConvention: true,
-    v2_normalizeFormMethod: true,
-    v2_headers: true,
-    v2_meta: true,
+  browserNodeBuiltinsPolyfill: {
+    modules: builtinModules,
   },
 };

themes/article/remix.config.prod.js

@@ -1,16 +1,16 @@
+const { builtinModules } = require("node:module");
+
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
   appDirectory: 'app',
   assetsBuildDirectory: 'public/build',
   serverBuildPath: 'build/index.js',
+  serverModuleFormat: 'cjs',
   serverMinify: true,
   publicPath: '/myst_assets_folder/',
   ignoredRouteFiles: ['**/.*'],
   serverDependenciesToBundle: [/.*/],
-  future: {
-    v2_routeConvention: true,
-    v2_normalizeFormMethod: true,
-    v2_headers: true,
-    v2_meta: true,
+  browserNodeBuiltinsPolyfill: {
+    modules: builtinModules,
   },
 };

themes/book/app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, V2_MetaFunction, LoaderFunction } from '@remix-run/node';
+import type { LinksFunction, MetaFunction, LoaderFunction } from '@remix-run/node';
 import tailwind from '~/styles/app.css';
 import thebeCoreCss from 'thebe-core/dist/lib/thebe-core.css';
 import { getConfig } from '~/utils/loaders.server';
@@ -11,10 +11,10 @@ import {
   ContentReload,
   SkipToArticle,
 } from '@myst-theme/site';
+export { AppErrorBoundary as ErrorBoundary } from '@myst-theme/site';
 import { Outlet, useLoaderData } from '@remix-run/react';
-export { AppCatchBoundary as CatchBoundary } from '@myst-theme/site';
 
-export const meta: V2_MetaFunction = ({ data }) => {
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return getMetaTagsForSite({
     title: data?.config?.title,
     description: data?.config?.description,