Features

• middlewares support
• typescript support
• return data in some middleware
• 0 dependencies

Getting Started

import compose from "remix-compose";
import { useLoaderData } from "@remix-run/react";
export const loader = compose<Request>(
  async (ctx, next) => {
    ctx.message = "hello word!";
    await next();
  },
  async (ctx, next) => {
    await next();
    ctx.return(ctx.message);
  }
);
export default function Page() {
  const message = useLoaderData();
  return <div>{message}</div>;
}

Installation

• npm

npm install remix-compose

• yarn

yarn add remix-compose

• pnpm

pnpm install remix-compose

Running Tests

To run tests, run the following command

  pnpm run  test

Build

To run tests, run the following command

  pnpm run build

Usage

import compose from "remix-compose";

type Context={
  name:string
}
const withLoader=compose<Context>(
  async(ctx,next)=>{
    // when ctx.return called,useMiddlewares will resolved
    ...
  }
)
const data=await withLoader({
  name:'my-name'
})

Error catch

import { redirect } from "@remix-run/node";
const errorCatch = async (ctx, next) => {
  try {
    await next();
  } catch (error) {
    ctx.return(redirect("/500"));
  }
};
export const loader = compose(errorCatch, async (ctx, next) => {
  const data = await fetch("http://xxx");
  ctx.return(data);
});

Auto logs

import { redirect } from "@remix-run/node";
const autoLogs = async (ctx, next) => {
  console.log("request in!");
  await next();
  console.log("request out!");
};
export const loader = compose(autoLogs, async (ctx, next) => {
  const data = await fetch("http://xxx");
  ctx.return(data);
});

Contributing

Contributions are always welcome!