Add component render to custom pages (#272)

packages/zudoku/src/config/validators/validate.ts

@@ -9,7 +9,7 @@ import z, {
   ZodUnion,
 } from "zod";
 import { fromError } from "zod-validation-error";
-import type { SlotletComponentProps } from "../../lib/components/SlotletProvider.js";
+import type { ExposedComponentProps } from "../../lib/components/SlotletProvider.js";
 import { DevPortalContext } from "../../lib/core/DevPortalContext.js";
 import type { ApiKey } from "../../lib/plugins/api-keys/index.js";
 import type { MdxComponentsType } from "../../lib/util/MdxComponents.js";
@@ -201,7 +201,7 @@ const ConfigSchema = z
     // slotlets are a concept we are working on and not yet finalized
     UNSAFE_slotlets: z.record(
       z.string(),
-      z.custom<ReactNode | ComponentType<SlotletComponentProps>>(),
+      z.custom<ReactNode | ComponentType<ExposedComponentProps>>(),
     ),
     theme: z
       .object({
@@ -265,7 +265,9 @@ const ConfigSchema = z
     customPages: z.array(
       z.object({
         path: z.string(),
-        element: z.custom<NonNullable<ReactNode>>(),
+        element: z.custom<NonNullable<ReactNode>>().optional(),
+        render: z.custom<ComponentType<ExposedComponentProps>>().optional(),
+        prose: z.boolean().optional(),
       }),
     ),
     plugins: z.array(z.custom<DevPortalPlugin>()),

packages/zudoku/src/index.ts

@@ -1,4 +1,4 @@
 export type { ZudokuConfig } from "./config/config.js";
 export type { ConfigSidebar as Sidebar } from "./config/validators/InputSidebarSchema.js";
-export type { SlotletComponentProps } from "./lib/components/SlotletProvider.js";
+export type { ExposedComponentProps } from "./lib/components/SlotletProvider.js";
 export type { MDXImport } from "./lib/plugins/markdown/index.js";

packages/zudoku/src/lib/components/SlotletProvider.tsx

@@ -5,10 +5,16 @@ import React, {
   useContext,
 } from "react";
 import { isValidElementType } from "react-is";
-import { useLocation } from "react-router-dom";
+import {
+  type Location,
+  type NavigateFunction,
+  type SetURLSearchParams,
+} from "react-router-dom";
+import { useExposedProps } from "../util/useExposedProps.js";
+
 export type Slotlets = Record<
   string,
-  ReactNode | ReactElement | ComponentType<SlotletComponentProps>
+  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
 >;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
@@ -27,19 +33,20 @@ export const SlotletProvider = ({
   );
 };
 
-export type SlotletComponentProps = {
+export type ExposedComponentProps = {
   location: Location;
+  navigate: NavigateFunction;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
 };
 
 export const Slotlet = ({ name }: { name: string }) => {
   const context = useContext(SlotletContext);
   const componentOrElement = context?.[name];
-  const location = useLocation();
+  const slotletProps = useExposedProps();
 
   if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement, {
-      location,
-    });
+    return React.createElement(componentOrElement, slotletProps);
   }
 
   return componentOrElement as ReactNode;

packages/zudoku/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { cn } from "../../util/cn.js";
+import { useExposedProps } from "../../util/useExposedProps.js";
+import type { CustomPageConfig } from "./index.js";
+
+export const CustomPage = ({
+  element,
+  render,
+  prose = true,
+}: Omit<CustomPageConfig, "path">) => {
+  const slotletProps = useExposedProps();
+  const content = render ? React.createElement(render, slotletProps) : element;
+
+  return <div className={cn(prose && "prose max-w-full")}>{content}</div>;
+};

packages/zudoku/src/lib/plugins/custom-pages/index.tsx

@@ -1,22 +1,24 @@
-import type { ReactNode } from "react";
+import { type ComponentType, type ReactNode } from "react";
 import type { RouteObject } from "react-router-dom";
-import { ProseClasses } from "../../components/Markdown.js";
+import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
 import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+import { CustomPage } from "./CustomPage.js";
 
-type CustomPagesConfig = Array<{
+export type CustomPageConfig = {
   path: string;
-  element: ReactNode;
-}>;
+  prose?: boolean;
+  element?: ReactNode;
+  render?: ComponentType<ExposedComponentProps>;
+};
 
 export const customPagesPlugin = (
-  config: CustomPagesConfig,
+  config: CustomPageConfig[],
 ): DevPortalPlugin & NavigationPlugin => {
   return {
     getRoutes: (): RouteObject[] =>
-      config.map(({ path, element }) => ({
+      config.map(({ path, ...props }) => ({
         path,
-        // TODO: we should componentize prose pages
-        element: <div className={ProseClasses + " max-w-full"}>{element}</div>,
+        element: <CustomPage {...props} />,
       })),
   };
 };

packages/zudoku/src/lib/util/useExposedProps.tsx

@@ -0,0 +1,10 @@
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import type { ExposedComponentProps } from "../components/SlotletProvider.js";
+
+export const useExposedProps = (): ExposedComponentProps => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return { location, navigate, searchParams, setSearchParams };
+};