⚙️ More preparation for Remix v2 (1) (#408)

* wip: more preparation for v2 * chore: appease linter * feat: enable v2 dev server * fix: set serverModuleFormat * fix: set loader typeof * Update themes/article/remix.config.prod.js * chore: add changeset --------- Co-authored-by: Rowan Cockett <[email protected]>
jupyter-book · Aug 26, 2024 · 6ca6dbb · 6ca6dbb
1 parent 6fde0d6
commit 6ca6dbb
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 37 deletions.
diff --git a/.changeset/early-bottles-cheat.md b/.changeset/early-bottles-cheat.md
@@ -0,0 +1,7 @@
+---
+'@myst-theme/site': minor
+'@myst-theme/article': patch
+'@myst-theme/book': patch
+---
+
+Prepare for Remix v2
diff --git a/packages/site/src/pages/Article.tsx b/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';
@@ -80,11 +78,3 @@ export const ArticlePage = React.memo(function ({
     </ReferencesProvider>
   );
 });
-
-export function ProjectPageCatchBoundary() {
-  return <ErrorProjectNotFound />;
-}
-
-export function ArticlePageCatchBoundary() {
-  return <ErrorDocumentNotFound />;
-}
diff --git a/packages/site/src/pages/ErrorUnhandled.tsx b/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>
+    </>
+  );
+}
diff --git a/packages/site/src/pages/Root.tsx b/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>

diff --git a/packages/site/src/pages/index.ts b/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';
diff --git a/packages/site/src/seo/meta.ts b/packages/site/src/seo/meta.ts
@@ -1,4 +1,4 @@
-import type { HtmlMetaDescriptor, V2_MetaDescriptor } from '@remix-run/react';
+import type { V2_MetaDescriptor } from '@remix-run/react';
 
 export type SocialSite = {
   title: string;
@@ -17,15 +17,15 @@ export 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>): V2_MetaDescriptor {
+  return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as V2_MetaDescriptor;
 }
 
 export function getMetaTagsForSite_V1({
   title,
   description,
   twitter,
-}: SocialSite): HtmlMetaDescriptor {
+}: SocialSite): V2_MetaDescriptor {
   const meta = {
     title,
     description,
@@ -60,7 +60,7 @@ export function getMetaTagsForArticle_V1({
   image,
   twitter,
   keywords,
-}: SocialArticle): HtmlMetaDescriptor {
+}: SocialArticle): V2_MetaDescriptor {
   const meta = {
     title,
     description,

diff --git a/themes/article/app/root.tsx b/themes/article/app/root.tsx
@@ -1,4 +1,4 @@
-import type { LinksFunction, MetaFunction, LoaderFunction, V2_MetaFunction } from '@remix-run/node';
+import type { LinksFunction, LoaderFunction, V2_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,
   SkipTo,
 } 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: V2_MetaFunction<typeof loader> = ({ data }) => {
   return getMetaTagsForSite({
     title: data?.config?.title,
     description: data?.config?.description,

diff --git a/themes/article/app/routes/$.tsx b/themes/article/app/routes/$.tsx
@@ -5,7 +5,12 @@ import {
   type LoaderFunction,
   type V2_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: V2_MetaFunction<typeof loader> = ({ data, matches, location }) => {
   if (!data) return [];
 
   const config: SiteManifest = data.config;
@@ -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>
   );

diff --git a/themes/article/app/routes/_index.tsx b/themes/article/app/routes/_index.tsx
@@ -1,4 +1,10 @@
-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';
@@ -7,10 +13,11 @@ 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: V2_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>
   );

diff --git a/themes/article/remix.config.dev.js b/themes/article/remix.config.dev.js
@@ -61,9 +61,11 @@ module.exports = {
   ],
   watchPaths: ['../../packages/**/*'],
   future: {
+    v2_dev: true,
     v2_routeConvention: true,
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };
diff --git a/themes/article/remix.config.prod.js b/themes/article/remix.config.prod.js
@@ -12,5 +12,6 @@ module.exports = {
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };
diff --git a/themes/book/app/root.tsx b/themes/book/app/root.tsx
@@ -11,10 +11,10 @@ import {
   ContentReload,
   SkipTo,
 } 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: V2_MetaFunction<typeof loader> = ({ data }) => {
   return getMetaTagsForSite({
     title: data?.config?.title,
     description: data?.config?.description,

diff --git a/themes/book/app/routes/$.tsx b/themes/book/app/routes/$.tsx
@@ -12,7 +12,8 @@ import {
   PrimaryNavigation,
   TopNav,
   getMetaTagsForArticle,
-  ArticlePageCatchBoundary,
+  ErrorDocumentNotFound,
+  ErrorUnhandled,
 } from '@myst-theme/site';
 import { getConfig, getPage } from '~/utils/loaders.server';
 import { useLoaderData } from '@remix-run/react';
@@ -29,9 +30,10 @@ import { MadeWithMyst } from '@myst-theme/icons';
 import { ComputeOptionsProvider, ThebeLoaderAndServer } from '@myst-theme/jupyter';
 import { ArticlePage } from '../components/ArticlePage.js';
 import type { TemplateOptions } from '../types.js';
+import { useRouteError, isRouteErrorResponse } from '@remix-run/react';
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
-export const meta: V2_MetaFunction = ({ data, matches, location }) => {
+export const meta: V2_MetaFunction<typeof loader> = ({ data, matches, location }) => {
   if (!data) return [];
 
   const config: SiteManifest = data.config;
@@ -136,11 +138,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>
   );

diff --git a/themes/book/app/routes/_index.tsx b/themes/book/app/routes/_index.tsx
@@ -13,7 +13,7 @@ import { getProject } from '@myst-theme/common';
 
 type ManifestProject = Required<SiteManifest>['projects'][0];
 
-export const meta: V2_MetaFunction = ({ data, location }) => {
+export const meta: V2_MetaFunction<typeof loader> = ({ data, location }) => {
   if (!data) return [];
 
   const config: SiteManifest = data.config;

diff --git a/themes/book/remix.config.dev.js b/themes/book/remix.config.dev.js
@@ -61,9 +61,11 @@ module.exports = {
   ],
   watchPaths: ['../../packages/**/*'],
   future: {
+    v2_dev: true,
     v2_routeConvention: true,
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };
diff --git a/themes/book/remix.config.prod.js b/themes/book/remix.config.prod.js
@@ -3,6 +3,7 @@ module.exports = {
   appDirectory: 'app',
   assetsBuildDirectory: 'public/build',
   serverBuildPath: 'build/index.js',
+  serverModuleFormat: 'cjs',
   serverMinify: true,
   publicPath: '/myst_assets_folder/',
   ignoredRouteFiles: ['**/.*'],
@@ -12,5 +13,6 @@ module.exports = {
     v2_normalizeFormMethod: true,
     v2_headers: true,
     v2_meta: true,
+    v2_errorBoundary:true,
   },
 };