feat: new middleware context prop

Author: gerardnico

apps/site/cms/remote-markdown.tsx

@@ -1,14 +1,15 @@
-import type {MiddlewarePageResponse} from "@combostrap/interact/types";
+import type {Page} from "@combostrap/interact/types";
 import {markdownToPageSync} from "@combostrap/interact/markdown";
+import type {ContextProps, MiddlewareHandler} from "@combostrap/interact/types";
 
 // noinspection JSUnusedGlobalSymbols - loaded dynamically
 export async function handler({
                                   basePath = "https://raw.githubusercontent.com",
                                   prefix = "/github"
-                              }: { basePath: string, prefix: string }) {
-    return async (request: Request): Promise<MiddlewarePageResponse | undefined> => {
+                              }: { basePath: string, prefix: string }): Promise<MiddlewareHandler> {
+    return async (context: ContextProps): Promise<Page | undefined> => {
 
-        const pathname = new URL(request.url).pathname
+        const pathname = context.url.pathname
 
         // check if you handle the request
         if (!(pathname.startsWith(prefix) && pathname.endsWith(".md"))) {
@@ -22,25 +23,21 @@ export async function handler({
 
         // parse and return
         try {
-            return {
-                page: markdownToPageSync(markdown, {format: 'md'})
-            };
+            return markdownToPageSync(markdown, {format: 'md'})
         } catch (e) {
+            context.response.status = 500
             return {
-                status: 500,
-                page: {
-                    default:
-                        () => {
-                            return (
-                                <>
-                                    <p>An error has been seen while parsing:</p>
-                                    <p>{String(e)}</p>
-                                    <p>Content:</p>
-                                    <pre dangerouslySetInnerHTML={{__html: markdown}}></pre>
-                                </>
-                            )
-                        }
-                }
+                default:
+                    () => {
+                        return (
+                            <>
+                                <p>An error has been seen while parsing:</p>
+                                <p>{String(e)}</p>
+                                <p>Content:</p>
+                                <pre dangerouslySetInnerHTML={{__html: markdown}}></pre>
+                            </>
+                        )
+                    }
             }
         }
     }

apps/site/pages/reference/markdown-component.md

@@ -38,6 +38,7 @@ All [default syntax with gfm](markdown-syntax.md) is supported
 You can also use:
 
 * [svg](../components/svg.md) to embed and optimize SVG files
+* [icon](../components/icon.md) to embed and optimize SVG files as icon
 * [image](../components/image.md) to process and transform Raster Image
 
 

apps/site/pages/reference/page-provider-cms.md

@@ -2,7 +2,7 @@
 title: Page Provider and CMS Binding
 ---
 
-A page provider is a handler function that returns a [page](page.md).
+A page provider is a middleware function that returns a [page](page.md).
 
 All CMS would be implemented as a page provider.
 
@@ -15,12 +15,15 @@ You can create a provider plugin with a module:
   * with as default, a mandatory React Element
   * and optionally, a [frontmatter](frontmatter.md) and a `toc`
 
-```javascript
+```tsx
 // ./src/cms/my-provider.js
-export async function handler(props) {
-    return async (request) => {
+import {ContextProps} from "@combostrap/interact/types";
+import {MiddlewareHandler} from "./interactMiddleware";
 
-        const pathname = new URL(request.url).pathname
+export async function handler(props): Promise<MiddlewareHandler> {
+    return async (context: ContextProps) => {
+
+        const pathname = context.url.pathname
 
         // check if you handle the request
         if (!pathname.startsWith("/my-provider")) {
@@ -49,7 +52,7 @@ export async function handler(props) {
 
 * You can take a look to the `localPagesMiddleware.tsx` file, it's a CMS plugin that returns
   local [Markdown file as page](md-page.md).
-* The [remote markdown example](https://github.com/combostrap/interact/blob/main/apps/site/cms/remote-markdown.tsx) page
+* The [remote Markdown example](https://github.com/combostrap/interact/blob/main/apps/site/cms/remote-markdown.tsx) page
   provider that returns Markdown page from GitHub.
 
 ## Registration

apps/site/pages/reference/rsc.md

@@ -78,6 +78,27 @@ Why? Here are the possible reasons:
 * The imported component from the `interact:components` module was not registered in
   the [component section of the configuration file](conf.md)
 * your [layout component](layout.md) is a [client component](#use-client) and it should not.
+* you are passing to the context to a page component as props
+
+Example: This [partial](layout.md#partials) is passing explicitly the context to the `html` tag that has a null value
+
+```tsx
+export default async function Html({page, ...props}: LayoutProps) {
+
+    return (
+        <html {...props}>
+        {props.children}
+        </html>
+    )
+}
+```
+
+The correct fix is:
+
+```tsx
+export default async function Html({page, context, ...props}: LayoutProps) {
+}
+```
 
 ### Invalid Hook Call Warning in Rsc environment
 

src/interact/componentsProvider/contextProps.d.ts

@@ -1,10 +1,32 @@
 // don't use the relative path (not resolved)
 import type {Page} from "@combostrap/interact/types"
 
+// Parsed request information used to route between RSC/SSR rendering.
+// Created by parseRenderRequest() from incoming HTTP requests.
+export type RscProps = {
+    isRsc: boolean // true if request should return RSC payload (via _.rsc suffix)
+    isAction: boolean // true if this is a server action call (POST request)
+    actionId?: string // server action ID from x-rsc-action header
+}
+
 /**
- * These props are passed to layout and partials component
+ * The context request props
+ * These props are passed to:
+ * * Middleware
+ * * and finally to layout and partials components
+ * Page is not in the context because it receives it as props
  */
 export type ContextProps = {
-    page: Page,
     request: Request,
+    url: URL // normalized URL with _.rsc suffix removed
+    rsc: RscProps
+    response: {
+        status?: number
+        headers?: HeadersInit;
+    }
+};
+
+export type LayoutProps = {
+    page: Page,
+    context: ContextProps
 };

src/interact/middlewareEngine/interactMiddleware.d.ts

@@ -1,26 +1,18 @@
 import type {Page} from "../pages/interactPage.js";
 import type {ReactNode} from "react";
+import type {ContextProps} from "../componentsProvider/contextProps.js";
+
 
-export type MiddlewarePageResponse = {
-    status?: number;
-    headers?: HeadersInit;
-    page: Page
-}
 
-export type ReactNodeResponse = {
-    status?: number;
-    headers?: HeadersInit;
-    root: ReactNode
-}
 
 
 type MiddlewareResponseValue =
     | Response
     | (() => Response)
     | (() => Promise<Response>)
-    | MiddlewarePageResponse
-    | (() => MiddlewarePageResponse)
-    | (() => Promise<MiddlewarePageResponse>)
+    | Page
+    | (() => Page)
+    | (() => Promise<Page>)
 
 type MiddlewareResult =
     | MiddlewareResponseValue  // short-circuit with a response
@@ -33,5 +25,5 @@ export type Middleware = {
     handler: MiddlewareHandler
 }
 
-export type MiddlewareHandler = (request: Request) => MiddlewareResult | Promise<MiddlewareResult>;
+export type MiddlewareHandler = (context: ContextProps) => MiddlewareResult | Promise<MiddlewareResult>;
 

src/interact/pages/interactPage.d.ts

@@ -3,8 +3,9 @@
  */
 
 import type {ComponentType} from "react";
+import type {ContextProps} from "../componentsProvider/contextProps.js";
 
-export type PageComponent = ComponentType<{ request: Request }>
+export type PageComponent = ComponentType<ContextProps>
 
 export interface TocNode {
     value: string;

src/interact/vite/layoutProviderModule.d.ts

@@ -3,8 +3,8 @@
 declare module 'interact:layouts' {
 
     import type {ComponentType} from "react";
-    import type {ContextProps} from "@combostrap/interact/types";
+    import type {LayoutProps} from "@combostrap/interact/types";
 
-    export function getLayoutComponent(name: string): ComponentType<ContextProps> | undefined
+    export function getLayoutComponent(name: string): ComponentType<LayoutProps> | undefined
 
 }

src/interact/vite/ssg.ts

@@ -43,7 +43,7 @@ async function renderStatic(config: ResolvedConfig) {
      * Import the created rsc build
      */
     const rscIndexFilePath = path.join(rscEnv.build.outDir, 'index.js')
-    // @ts-ignore - error TS6142: Module 'entry.rsc.js' was resolved to entry.rsc.tsx', but '--jsx' is not set.
+    // @ts-ignore - argh we need jsx and if it follows, it will need explicit file extensions - we need a bundler or just start with tsx
     const entryRscModule: typeof import('../../resources/rsc/server/entry.rsc.tsx') = await import(/* @vite-ignore */ pathToFileURL(rscIndexFilePath).href)
 
     // entry provides a list of static paths

src/resources/components/layouts/Hamburger.tsx

@@ -1,30 +1,30 @@
-import type {ContextProps} from "@combostrap/interact/types";
+import type {LayoutProps} from "@combostrap/interact/types";
 import {getInteractConfig} from "@combostrap/interact/config";
 import Header from "../partials/Header";
 import Body from "../partials/Body";
 import Html from "../partials/Html";
 import Head from "../partials/Head";
-import {cn} from "../../lib/utils";
+import {cn} from "@/lib/utils";
 
 /**
  * Hamburger Layout
  */
 // noinspection JSUnusedGlobalSymbols - imported dynamically
-export default function Hamburger(contextProps: ContextProps) {
-    let Component = contextProps.page.default
+export default function Hamburger(layoutProps: LayoutProps) {
+    let Component = layoutProps.page.default
     let interactConfig = getInteractConfig();
     return (
-        <Html {...contextProps}>
-            <Head {...contextProps}/>
-            <Body {...contextProps}>
-                <Header {...contextProps} />
+        <Html {...layoutProps}>
+            <Head {...layoutProps}/>
+            <Body {...layoutProps}>
+                <Header {...layoutProps} />
                 <div className={
                     cn(
                         interactConfig.style.container.containerClass,
                         "position-relative",
                     )}>
                     <main>
-                        <Component request={contextProps.request}/>
+                        <Component {...layoutProps.context}/>
                     </main>
                 </div>
             </Body>