Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

Unstable Middleware

WARNING

UnstableMiddleware has been deprecated. Please use the new Custom Web Server to handle page requests.

Used to extend the built-in Web Server in Modern.js. UnstableMiddleware will replace Middleware in the future.

Usage

server/index.ts
import { UnstableMiddleware } from '@modern-js/runtime/server';

export const unstableMiddleware: UnstableMiddleware[] = [];

Types

UnstableMiddleware

type UnstableMiddleware<
  V extends Record<string, unknown> = Record<string, unknown>,
> = (
  c: UnstableMiddlewareContext<V>,
  next: UnstableNext,
) => Promise<void | Response>;

UnstableMiddlewareContext

type Body = ReadableStream | ArrayBuffer | string | null;

type UnstableMiddlewareContext<
  V extends Record<string, unknown> = Record<string, unknown>,
> = {
  request: Request;
  response: Response;
  get: Get<V>;
  set: Set<V>;
  header: (name: string, value: string, options?: { append?: boolean }) => void;
  status: (code: number) => void;
  redirect: (location: string, status?: number) => Response;
  body: (data: Body, init?: ResponseInit) => Response;
  html: (
    data: string | Promise<string>,
    init?: ResponseInit,
  ) => Response | Promise<Response>;
};

UnstableNext

type UnstableNext = () => Promise<void>;

Examples

Web Server Timing

import { UnstableMiddleware } from '@modern-js/runtime/server';

const time: UnstableMiddleware = async (c, next) => {
  const start = Date.now();

  await next();

  const end = Date.now();

  console.log(`${end - start}`);
};

export const unstableMiddleware: UnstableMiddleware[] = [time];

Injecting Server Data for DataLoader Consumption

shared/index.ts
export type Vars = {
  message: string;
};
server/index.ts
import {
  UnstableMiddleware,
  UnstableMiddlewareContext,
} from '@modern-js/runtime/server';
import type { Vars } from '../shared/index';

const setPayload: UnstableMiddlewaree<Vars> = async (
  c: UnstableMiddlewareContext<Vars>,
  next,
) => {
  c.set('message', 'facker');

  await next();
};

export const unstableMiddleware: UnstableMiddleware<Vars>[] = [setPayload];
src/routes/page.data.ts
import type { Payload } from '../../shared/index';
import { LoaderFunctionArgs } from '@modern-js/runtime/router';

export const loader = async ({ context }: LoaderFunctionArgs<Vars>) => {
  const message = context?.get('message');

  // ...
};

Redirect

import { UnstableMiddleware } from '@modern-js/runtime/server';

const auth: UnstableMiddleware = async (c, next) => {
  const user = getUser(c.request);

  if (!user) {
    return c.redirect('/login');
  }

  await next();
};

export const unstableMiddleware: UnstableMiddleware[] = [auth];

Modify Response

import { UnstableMiddleware } from '@modern-js/runtime/server';

const modifier: UnstableMiddleware = async (c, next) => {
  await next();

  const { response } = c;

  const text = await response.text();

  const newText = text.replace('<html>', `<html lang="${language}">`);

  const newheaders = response.headers;
  newheaders.set('x-custom-value', 'modern');

  c.response = c.body(newText, {
    status: response.status,
    headers: newheaders,
  });
};

export const unstableMiddleware: UnstableMiddleware[] = [modifier];