@remix-run/render-middleware 0.0.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,99 @@
-# Placeholder Package
+# render-middleware
 
-This package is a placeholder published at `0.0.0` to reserve the npm name and configure CI publish permissions.
+Request-scoped renderer middleware for Remix. It stores a renderer in `fetch-router` request context so route actions can render responses without passing request-specific rendering details through every action.
+
+## Features
+
+- **Generic renderers** - Render any input type to a `Response`
+- **Request-scoped setup** - Create renderers from the current `RequestContext`
+- **Typed context** - Typed `context.render` (or `context.get(Renderer)`)
+- **Small runtime** - The package only stores a renderer in request context
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Usage
+
+Use `renderWith()` to add a renderer to `context.render` and `context.get(Renderer)`.
+
+```ts
+import { createRouter, type MiddlewareContext } from 'remix/router'
+import { renderWith } from 'remix/middleware/render'
+
+const render = renderWith(
+  (context) =>
+    function render(value: string, init?: ResponseInit) {
+      return new Response(`${context.url.pathname}: ${value}`, init)
+    },
+)
+
+type AppContext = MiddlewareContext<[typeof render]>
+
+const router = createRouter<AppContext>({
+  middleware: [render],
+})
+
+router.get('/hello', (context) => {
+  return context.render('Hello')
+})
+```
+
+Use `context.render(...)` (or `context.get(Renderer)(...)`).
+
+Renderers may render any value type, not just UI nodes.
+
+```ts
+import { renderWith } from 'remix/middleware/render'
+
+const json = renderWith(
+  () =>
+    function render(data: unknown, init?: ResponseInit) {
+      return Response.json(data, init)
+    },
+)
+
+router.get('/api', (context) => {
+  return context.render({ ok: true })
+})
+```
+
+For Remix UI, create a renderer that owns frame resolution and response creation.
+
+```tsx
+import { createHtmlResponse } from 'remix/response/html'
+import { renderWith } from 'remix/middleware/render'
+import type { RemixNode } from 'remix/ui'
+import { renderToStream } from 'remix/ui/server'
+
+const render = renderWith(
+  ({ router, url }) =>
+    function render(node: RemixNode, init?: ResponseInit) {
+      let stream = renderToStream(node, {
+        async resolveFrame(src) {
+          let response = await router.fetch(new URL(src, url))
+
+          if (!response.ok) {
+            return `<pre>Frame error: ${response.status}</pre>`
+          }
+
+          return response.body ?? response.text()
+        },
+      })
+
+      return createHtmlResponse(stream, init)
+    },
+)
+```
+
+## Related Packages
+
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Request routing and context
+- [`ui`](https://github.com/remix-run/remix/tree/main/packages/ui) - Remix UI rendering primitives
+- [`response`](https://github.com/remix-run/remix/tree/main/packages/response) - Response helpers
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Renderer, renderWith } from './lib/render.ts';
+export type { AnyRenderer } from './lib/render.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export { Renderer, renderWith } from "./lib/render.js";

package/dist/lib/render.d.ts

@@ -0,0 +1,37 @@
+import { type Middleware, type RequestContext } from '@remix-run/fetch-router';
+/**
+ * A function that converts application data into a `Response`.
+ */
+export interface Renderer<input = unknown, responseInit = ResponseInit> {
+    /**
+     * Render input data into a response.
+     *
+     * @param input The value to render.
+     * @param init Optional renderer-specific response options.
+     * @returns A rendered response.
+     */
+    (input: input, init?: responseInit): Response | Promise<Response>;
+}
+/**
+ * A renderer of any input and options shape.
+ */
+export type AnyRenderer = Renderer<never, never>;
+/**
+ * Context key used to read the current request renderer with `context.get(Renderer)`.
+ * The `renderWith()` middleware also installs the renderer as `context.render`.
+ */
+export declare const Renderer: import("../../../fetch-router/src/lib/request-context.ts").ContextKey<AnyRenderer>;
+type RendererFactory<renderer extends AnyRenderer> = (context: RequestContext<any, any>) => renderer;
+/**
+ * Adds a renderer to request context.
+ *
+ * @param createRenderer A function that creates a renderer for each request.
+ * @returns Middleware that stores the renderer in request context.
+ */
+export declare function renderWith<const renderer extends AnyRenderer>(createRenderer: RendererFactory<renderer>): Middleware<{
+    key: typeof Renderer;
+    value: renderer;
+    property: 'render';
+}>;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/lib/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/lib/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAEhG;;GAEG;AACH,MAAM,WAAW,QAAQ,CAAC,KAAK,GAAG,OAAO,EAAE,YAAY,GAAG,YAAY;IACpE;;;;;;OAMG;IACH,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;CAClE;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;AAEhD;;;GAGG;AACH,eAAO,MAAM,QAAQ,oFAAkC,CAAA;AAEvD,KAAK,eAAe,CAAC,QAAQ,SAAS,WAAW,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,QAAQ,CAAA;AAEpG;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,CAAC,QAAQ,SAAS,WAAW,EAC3D,cAAc,EAAE,eAAe,CAAC,QAAQ,CAAC,GACxC,UAAU,CAAC;IAAE,GAAG,EAAE,OAAO,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,CAI3E"}

package/dist/lib/render.js

@@ -0,0 +1,17 @@
+import { createContextKey } from '@remix-run/fetch-router';
+/**
+ * Context key used to read the current request renderer with `context.get(Renderer)`.
+ * The `renderWith()` middleware also installs the renderer as `context.render`.
+ */
+export const Renderer = createContextKey();
+/**
+ * Adds a renderer to request context.
+ *
+ * @param createRenderer A function that creates a renderer for each request.
+ * @returns Middleware that stores the renderer in request context.
+ */
+export function renderWith(createRenderer) {
+    return (context) => {
+        context.set(Renderer, createRenderer(context), { property: 'render' });
+    };
+}

package/package.json

@@ -1,14 +1,53 @@
 {
   "name": "@remix-run/render-middleware",
-  "version": "0.0.0",
-  "description": "Placeholder package for Remix CI/OIDC setup",
+  "version": "0.1.1",
+  "description": "Middleware for adding request-scoped renderers to fetch-router context",
+  "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/remix-run/remix.git",
     "directory": "packages/render-middleware"
   },
-  "publishConfig": {
-    "access": "public"
+  "homepage": "https://github.com/remix-run/remix/tree/main/packages/render-middleware#readme",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "@typescript/native-preview": "7.0.0-dev.20251125.1",
+    "@remix-run/assert": "0.2.1",
+    "@remix-run/fetch-router": "0.19.1",
+    "@remix-run/test": "0.4.1"
+  },
+  "dependencies": {
+    "@remix-run/fetch-router": "^0.19.1"
+  },
+  "keywords": [
+    "fetch",
+    "router",
+    "middleware",
+    "render",
+    "renderer",
+    "response"
+  ],
+  "scripts": {
+    "build": "tsgo -p tsconfig.build.json",
+    "clean": "git clean -fdX",
+    "test": "remix-test",
+    "test:bun": "bun x --bun remix-test",
+    "typecheck": "tsgo --noEmit"
   }
-}
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Renderer, renderWith } from './lib/render.ts'
+export type { AnyRenderer } from './lib/render.ts'

package/src/lib/render.ts

@@ -0,0 +1,42 @@
+import { createContextKey, type Middleware, type RequestContext } from '@remix-run/fetch-router'
+
+/**
+ * A function that converts application data into a `Response`.
+ */
+export interface Renderer<input = unknown, responseInit = ResponseInit> {
+  /**
+   * Render input data into a response.
+   *
+   * @param input The value to render.
+   * @param init Optional renderer-specific response options.
+   * @returns A rendered response.
+   */
+  (input: input, init?: responseInit): Response | Promise<Response>
+}
+
+/**
+ * A renderer of any input and options shape.
+ */
+export type AnyRenderer = Renderer<never, never>
+
+/**
+ * Context key used to read the current request renderer with `context.get(Renderer)`.
+ * The `renderWith()` middleware also installs the renderer as `context.render`.
+ */
+export const Renderer = createContextKey<AnyRenderer>()
+
+type RendererFactory<renderer extends AnyRenderer> = (context: RequestContext<any, any>) => renderer
+
+/**
+ * Adds a renderer to request context.
+ *
+ * @param createRenderer A function that creates a renderer for each request.
+ * @returns Middleware that stores the renderer in request context.
+ */
+export function renderWith<const renderer extends AnyRenderer>(
+  createRenderer: RendererFactory<renderer>,
+): Middleware<{ key: typeof Renderer; value: renderer; property: 'render' }> {
+  return (context) => {
+    context.set(Renderer, createRenderer(context), { property: 'render' })
+  }
+}