zudoku 0.3.0-dev.30 → 0.3.0-dev.31

package/src/app/standalone.tsx

@@ -1,13 +1,16 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+// Styles
 import "./main.css";
 
+// Logger
 import "../lib/util/logInit.js";
 
 // Base React Component
 import { DevPortal } from "../lib/components/DevPortal.js";
 
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import type { NavigationItem } from "../lib/core/DevPortalContext.js";
+// Plugins
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
 
 const root = document.querySelector("[data-api-url]");
@@ -19,13 +22,8 @@ const apiUrl = root.getAttribute("data-api-url");
 const pageTitle = document.getElementsByTagName("title")[0].innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
-const navigation: NavigationItem[] = [
-  {
-    label: "API Reference",
-    path: "/",
-    categories: [],
-  },
-];
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
 
 createRoot(root).render(
   <StrictMode>
@@ -35,7 +33,13 @@ createRoot(root).render(
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         pageTitle: pageTitle ?? "Developer Portal",
       }}
-      navigation={navigation}
+      navigation={[
+        {
+          label: "API Reference",
+          path: "/",
+          categories: [],
+        },
+      ]}
       plugins={[openApiPlugin({ type: "url", input: apiUrl!, path: "/" })]}
     />
   </StrictMode>,

package/src/app/tailwind.ts

@@ -1,19 +1,9 @@
 import typographyPlugin from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme.js";
-const content = [
-  "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
-  "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
-];
 
-//   ,
-// if (process.env.NODE_ENV === "development") {
-//   content.push("../../plugins/*/src/**/*.{js,ts,jsx,tsx}");
-// }
-
-const config: Config = {
+const config: Omit<Config, "content"> = {
   darkMode: "selector",
-  content,
   theme: {
     extend: {
       fontFamily: {

package/src/lib/components/DevPortal.tsx

@@ -1,6 +1,7 @@
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Fragment, memo, Suspense, useEffect, useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import {
   DevPortalContext,
@@ -8,6 +9,7 @@ import {
   ZudokuContextOptions,
 } from "../core/DevPortalContext.js";
 import { hasHead } from "../core/plugins.js";
+import { TopLevelError } from "../errors/TopLevelError.js";
 import { MdxComponents } from "../util/MdxComponents.js";
 import {
   ComponentsProvider,
@@ -81,7 +83,14 @@ const DevPortalInner = (props: ZudokuContextOptions) => {
   );
 };
 
-const DevPortal = memo(DevPortalInner);
+const DevPortal = (props: ZudokuContextOptions) => {
+  const Inner = memo(DevPortalInner);
+  return (
+    <ErrorBoundary FallbackComponent={TopLevelError}>
+      <Inner {...props} />
+    </ErrorBoundary>
+  );
+};
 DevPortal.displayName = "DevPortal";
 
 export { DevPortal };

package/src/lib/components/Router.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { DevPortalPlugin, isNavigationPlugin } from "../core/plugins.js";
-import { ErrorBoundary } from "./Error.js";
+
+import { RouterError } from "../errors/RouterError.js";
 import { Layout } from "./Layout.js";
 
 export function Router({ plugins }: { plugins?: DevPortalPlugin[] }) {
@@ -14,7 +15,7 @@ export function Router({ plugins }: { plugins?: DevPortalPlugin[] }) {
       {
         path: "/",
         element: <Layout />,
-        errorElement: <ErrorBoundary />,
+        errorElement: <RouterError />,
         children: routes,
       },
     ]);

package/src/lib/errors/ErrorAlert.tsx

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function ErrorAlert({ error }: { error: any }) {
+  const message = error?.message ?? "Something went wrong";
+  const stack = error?.stack;
+
+  return (
+    <div className="flex h-screen max-h-screen min-h-full items-center justify-center bg-primary-background px-4 py-16 lg:px-8">
+      <div className="mx-auto max-w-[85%] sm:max-w-[50%]">
+        <h1 className="text-4xl font-bold tracking-tight text-h1-text sm:text-5xl">
+          Something went wrong
+        </h1>
+        <p className="mt-5 text-h1-text">{message}</p>
+        {stack ? (
+          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
+            {stack}
+          </pre>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/lib/errors/RouterError.tsx

@@ -0,0 +1,12 @@
+import { useRouteError } from "react-router-dom";
+import { Layout } from "../components/Layout.js";
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function RouterError() {
+  const error = useRouteError();
+  return (
+    <Layout>
+      <ErrorAlert error={error} />
+    </Layout>
+  );
+}

package/src/lib/errors/TopLevelError.tsx

@@ -0,0 +1,8 @@
+import { FallbackProps } from "react-error-boundary";
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function TopLevelError({ error, resetErrorBoundary }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+
+  return <ErrorAlert error={error} />;
+}

package/dist/lib/components/Error.d.ts

@@ -1 +0,0 @@
-export declare function ErrorBoundary(): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Error.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRouteError } from "react-router-dom";
-import { Layout } from "./Layout.js";
-export function ErrorBoundary() {
-    const error = useRouteError();
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return (_jsx(Layout, { children: _jsx("div", { className: "h-[75vh] flex items-center justify-center", children: "Error, look at the console" }) }));
-}
-//# sourceMappingURL=Error.js.map

package/dist/lib/components/Error.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../src/lib/components/Error.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,UAAU,aAAa;IAC3B,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,sCAAsC;IACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrB,OAAO,CACL,KAAC,MAAM,cACL,cAAK,SAAS,EAAC,2CAA2C,2CAEpD,GACC,CACV,CAAC;AACJ,CAAC"}

package/src/lib/components/Error.tsx

@@ -1,15 +0,0 @@
-import { useRouteError } from "react-router-dom";
-import { Layout } from "./Layout.js";
-
-export function ErrorBoundary() {
-  const error = useRouteError();
-  // eslint-disable-next-line no-console
-  console.error(error);
-  return (
-    <Layout>
-      <div className="h-[75vh] flex items-center justify-center">
-        Error, look at the console
-      </div>
-    </Layout>
-  );
-}