Skip to content

Commit

Permalink
Use Bun for tests
Browse files Browse the repository at this point in the history
  • Loading branch information
sergiodxa committed Dec 6, 2024
1 parent 72d6e1b commit 37a5bd7
Show file tree
Hide file tree
Showing 15 changed files with 234 additions and 235 deletions.
3 changes: 1 addition & 2 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,4 @@
.gitignore
.npmignore
tsconfig.json
prettier.config.mjs
vitest.config.ts
prettier.config.mjs
73 changes: 36 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# Remix + Hono
# Remix/React Router + Hono

> [Remix](https://remix.run) is a web framework for building web applications,
> which can run on the Edge.
> [React Router](https://remix.run) is a web framework for building web
> applications, which can run on the Edge.
> [Hono](https://hono.dev) is a small and ultrafast web framework for the Edges.
This adapter allows you to use Hono with Remix, so you can use the best of each
one.
This adapter allows you to use Hono with React Router, so you can use the best
of each one.

Let Hono power your HTTP server and its middlewares, then use Remix to build
your web application.
Let Hono power your HTTP server and its middlewares, then use React Router to
build your web application.

## Installation

Expand All @@ -22,26 +22,26 @@ npm add remix-hono
The following packages are optional dependencies, you will need to install them
depending on what features from remix-hono you're using.

- `@remix-run/cloudflare` if you're using Cloudflare integration.
- `@react-router/cloudflare` if you're using Cloudflare integration.
- `i18next` and `remix-i18next` if you're using the i18n middleware.
- `zod` if you're using `typedEnv`.

> [!NOTE]
> You don't really need to install them if you don't use them, but you
> [!NOTE] You don't really need to install them if you don't use them, but you
> will need to install them yourself (they don't come not automatically) if you
> use the features that depends on those packages.
## Usage

Create your Hono + Remix server:
Create your Hono + React Routers server:

```ts
import { logDevReady } from "@remix-run/cloudflare";
import * as build from "@remix-run/dev/server-build";
import { logDevReady } from "@react-router/cloudflare";
import { Hono } from "hono";
// You can also use it with other runtimes
import { handle } from "hono/cloudflare-pages";
import { remix } from "remix-hono/handler";
import { reactRouter } from "remix-hono/handler";

import build from "./build/server";

if (process.env.NODE_ENV === "development") logDevReady(build);

Expand All @@ -55,10 +55,10 @@ type ContextEnv = { Bindings: Bindings; Variables: Variables };

const server = new Hono<ContextEnv>();

// Add the Remix middleware to your Hono server
// Add the React Router middleware to your Hono server
server.use(
"*",
remix({
reactRouter({
build,
mode: process.env.NODE_ENV as "development" | "production",
// getLoadContext is optional, the default function is the same as here
Expand All @@ -79,9 +79,9 @@ import { basicAuth } from "hono/basic-auth";

server.use(
"*",
basicAuth({ username: "hono", password: "remix" }),
// Ensure Remix request handler is the last one
remix(options),
basicAuth({ username: "hono", password: "react-router" }),
// Ensure React Router request handler is the last one
reactRouter(options),
);
```

Expand All @@ -90,20 +90,18 @@ great of preview applications.

## Session Management

Additionally to the `remix` Hono middleware, there are other three middlewares
to work with Remix sessions.
Additionally to the `reactRouter` Hono middleware, there are other three
middlewares to work with React Router sessions.

Because Remix sessions typically use a secret coming from the environment you
will need access to Hono `c.env` to use them. If you're using the Worker KV
Because React Router sessions typically use a secret coming from the environment
you will need access to Hono `c.env` to use them. If you're using the Worker KV
session storage you will also need to pass the KV binding to the middleware.

You can use the different middlewares included in this package to do that:

```ts
import { session } from "remix-hono/session";
// Install the `@remix-run/*` package for your server adapter to grab the
// factory functions for session storage
import { createWorkerKVSessionStorage } from "@remix-run/cloudflare";
import { createWorkerKVSessionStorage } from "@react-router/cloudflare";

server.use(
"*",
Expand All @@ -123,7 +121,7 @@ server.use(
);
```

Now, setup the Remix middleware after your session middleware and use the
Now, setup the React Router middleware after your session middleware and use the
helpers `getSessionStorage` and `getSession` to access the SessionStorage and
Session objects.

Expand All @@ -136,7 +134,7 @@ import { getSessionStorage, getSession } from "remix-hono/session";

server.use(
"*",
remix<ContextEnv>({
reactRouter<ContextEnv>({
build,
mode: process.env.NODE_ENV as "development" | "production",
// getLoadContext is optional, the default function is the same as here
Expand Down Expand Up @@ -205,32 +203,33 @@ If you're using Remix Hono with Cloudflare, you will need to serve your static
from the public folder (except for `public/build`). The `staticAssets`
middleware serves this purpose.

First install `@remix-run/cloudflare` if you haven't installed it yet.
First install `@react-router/cloudflare` if you haven't installed it yet.

```sh
npm add @remix-run/cloudflare
npm add @react-router/cloudflare
```

Then use the middleware in your server.

```ts
import { staticAssets } from "remix-hono/cloudflare";
import { remix } from "remix-hono/handler";
import { reactRouter } from "remix-hono/handler";

server.use(
"*",
staticAssets(),
// Add Remix request handler as the last middleware
remix(options),
// Add React Router request handler as the last middleware
reactRouter(options),
);
```

## i18next integration

If you're using [remix-i18next](https://github.com/sergiodxa/remix-i18next) to
support i18n in your Remix app, the `i18next` middleware let's you setup it for
your Remix app as a middleware that you can later use in your `getLoadContext`
function to pass the `locale` and `t` functions to your loaders and actions.
support i18n in your React Router app, the `i18next` middleware let's you setup
it for your React Router app as a middleware that you can later use in your
`getLoadContext` function to pass the `locale` and `t` functions to your loaders
and actions.

First install `i18next` and `remix-i18next` if you haven't already.

Expand All @@ -253,7 +252,7 @@ functions using the helpers `i18next.getLocale` and `i18next.getFixedT`.
```ts
server.use(
"*",
remix({
reactRouter({
build,
mode: process.env.NODE_ENV as "development" | "production",
// getLoadContext is optional, the default function is the same as here
Expand Down
Binary file modified bun.lockb
Binary file not shown.
2 changes: 2 additions & 0 deletions bunfig.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
[test]
preload = "./test/setup.ts"
17 changes: 9 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"keywords": [
"remix",
"remix-run",
"react-router",
"hono",
"cloudflare",
"cloudflare-pages"
Expand Down Expand Up @@ -62,10 +63,10 @@
"url": "https://github.com/sponsors/sergiodxa"
},
"scripts": {
"build": "tsc --project tsconfig.json --outDir ./build",
"typecheck": "tsc --project tsconfig.json --noEmit",
"lint": "eslint --ext .ts,.tsx src/ test/",
"test": "vitest",
"build": "tsc",
"typecheck": "tsc --noEmit",
"quality": "biome check .",
"quality:fix": "biome check . --write --unsafe",
"exports": "bun run ./scripts/exports.ts"
},
"dependencies": {
Expand All @@ -80,6 +81,9 @@
"zod": "^3.0.0"
},
"peerDependenciesMeta": {
"react-router": {
"optional": true
},
"@react-router/cloudflare": {
"optional": true
},
Expand All @@ -95,14 +99,12 @@
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20241112.0",
"@edge-runtime/vm": "^4.0.4",
"@react-router/cloudflare": "^7.0.1",
"@react-router/node": "^7.0.1",
"@total-typescript/tsconfig": "^1.0.4",
"@types/bun": "^1.1.14",
"@types/node": "^20.11.28",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitest/coverage-v8": "^2.1.5",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
Expand All @@ -118,7 +120,6 @@
"typescript": "^5.7.2",
"vite": "^5.4.11",
"vite-tsconfig-paths": "^5.1.3",
"vitest": "^2.1.5",
"zod": "^3.22.4"
}
}
14 changes: 11 additions & 3 deletions src/cloudflare.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import type {
Fetcher,
RequestInit,
KVNamespace,
} from "@cloudflare/workers-types";
import type { Context } from "hono";

import { createWorkersKVSessionStorage } from "@react-router/cloudflare";
import { createMiddleware } from "hono/factory";
import { cacheHeader } from "pretty-cache-header";
import {
CookieOptions,
SessionData,
type CookieOptions,
type SessionData,
createCookieSessionStorage,
} from "react-router";

Expand All @@ -26,7 +31,10 @@ export function staticAssets(options: StaticAssetsOptions = {}) {
c.req.raw.headers.delete("if-none-match");

try {
response = await binding.fetch(c.req.url, c.req.raw.clone());
response = (await binding.fetch(
c.req.url,
c.req.raw.clone() as unknown as RequestInit,
)) as unknown as globalThis.Response;

// If the request failed, we just call the next middleware
if (response.status >= 400) return await next();
Expand Down
8 changes: 3 additions & 5 deletions src/handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import type { AppLoadContext, ServerBuild } from "react-router";
import { createMiddleware } from "hono/factory";
import { createRequestHandler } from "react-router";

export interface RemixMiddlewareOptions {
export interface ReactRouterMiddlewareOptions {
build: ServerBuild;
mode?: "development" | "production";
getLoadContext?(c: Context): Promise<AppLoadContext> | AppLoadContext;
}

export function remix({
export function reactRouter({
mode,
build,
getLoadContext = (c) => c.env as unknown as AppLoadContext,
}: RemixMiddlewareOptions) {
}: ReactRouterMiddlewareOptions) {
return createMiddleware(async (c) => {
let requestHandler = createRequestHandler(build, mode);
let loadContext = getLoadContext(c);
Expand All @@ -24,5 +24,3 @@ export function remix({
);
});
}

export { createRequestHandler } from "react-router";
4 changes: 1 addition & 3 deletions src/session.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ export function session<Data = SessionData, FlashData = Data>(options: {
// If autoCommit is disabled, we just create the SessionStorage and make it
// available with c.get(sessionStorageSymbol), then call next() and
// return.
if (!options.autoCommit) {
return await next();
}
if (!options.autoCommit) return await next();

// If autoCommit is enabled, we get the Session from the request.
let session = await sessionStorage.getSession(
Expand Down
Loading

0 comments on commit 37a5bd7

Please sign in to comment.