Improve React compability with NPM Aliases

[gaetan-puleo]

What is the feature you are proposing?

We could create a package to alias hono/jsx/dom.

This package will only reexport everything coming from hono/jsx/dom.

Inspiration : https://www.npmjs.com/package/@preact/compat

It will be possible to do something like this yarn add react@npm:@hono/jsx-dom-compat, bun add react@npm:@hono/jsx-dom-compat to create a React alias without Vite.

It's native and use npm aliases https://bun.sh/guides/install/npm-alias

[yusukebe]

@gaetan-puleo Thank you for the request!

@usualoma I'll check it later, but I want you to take a look. It would be super cool if we could do it.

[gaetan-puleo]

On my side I created a POC to test the idea.

https://www.npmjs.com/package/hono-jsx-dom-compat

I get the Vite Starter page working with Hono

To test the POC, you can create a new vite project with react and do yarn add react@npm:hono-jsx-dom-compat react-dom@npm:hono-jsx-dom-compat

I will describe the steps I used to make it works

[gaetan-puleo]

First I cloned https://github.com/honojs/middleware

I duplicated the hello middleware.

I created three files in the src folder.
index.ts, jsx-dev-runtime.ts and client.ts

Here the content of the files.

client.ts

export * from 'hono/jsx/dom/client';
import {hydrateRoot, createRoot} from 'hono/jsx/dom/client'

export default {hydrateRoot, createRoot}

index.ts

export * from 'hono/jsx/dom';
export * as default from 'hono/jsx/dom'

and jsx-dev-runtime.ts

export * from 'hono/jsx/dom/jsx-dev-runtime';

After I updated the package.json

{
  "name": "hono-jsx-dom-compat",
  "version": "0.1.8",
  "description": "hono react compatibility layer",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "test": "vitest --run",
    "build": "tsup ./src/index.ts src/client.ts src/jsx-dev-runtime.ts --format esm,cjs --dts",
    "publint": "publint",
    "release": "yarn build && yarn test && yarn publint && yarn publish"
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },

    "./client": {
      "types": "./dist/client.d.mts",
      "import": "./dist/client.mjs",
      "require": "./dist/client.js"
    },

    "./jsx-dev-runtime": {
      "types": "./dist/jsx-dev-runtime.d.mts",
      "import": "./dist/jsx-dev-runtime.mjs",
      "require": "./dist/jsx-dev-runtime.js"
    }
  },
  "license": "MIT",
  "publishConfig": {
    "registry": "https://registry.npmjs.org",
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/honojs/middleware.git"
  },
  "homepage": "https://github.com/honojs/middleware",
  "peerDependencies": {
    "hono": "*"
  },
  "devDependencies": {
    "tsup": "^8.0.1",
    "vitest": "^1.0.4"
  }
}

I updated the exports part and the build script.

After that I published everything on npm

[gaetan-puleo]

The package is not perfect, The types are not managed, I only ran yarn vite without building the starter project. I think we should dig deeper.

[usualoma]

Hi @gaetan-puleo
Thank you!

This is super cool. I would love to add it to "hono/middleware". I think the type issue can be solved by adjusting the build process and package.json.

I think one point is which aliases should be used.

• hono/jsx/dom : this is dedicated to the client again and is very small in size
• hono/jsx : This can be used both server-side and client-side, but its size is a bit bigger
  • this needs to be added like feat(jsx/server): introduce jsx/dom/server module for compatibility with react-dom/server #2930

[gaetan-puleo]

Hi @usualoma
We can move the issue to hono/middleware if you want. You can add all the code to hono/middleware.

I just want to add, you can export jsx-middleware to build with Vite, it works.

[usualoma]

I created a pull request in "honojs/middleware".
honojs/middleware#563

There is no third-party dependency, so it should be in "honojs/hono", but the current directory structure makes it a bit difficult to do, so I created it in "honojs/middleware". "honojs/middleware" also contains tools such as "eslint-config", which is used internally, so I think this is fine for the time being.

[yusukebe]

Thanks @usualoma

There is no third-party dependency, so it should be in "honojs/hono", but the current directory structure makes it a bit difficult to do, so I created it in "honojs/middleware". "honojs/middleware" also contains tools such as "eslint-config", which is used internally, so I think this is fine for the time being.

No problem. This will be the best place and name. I'll check it.

[yusukebe]

Hi @gaetan-puleo !

I've released @hono/react-compat 0.0.1 now. It sets peerDependencies as "hono": ">=4.5.*" so it will throw warnings or errors but you can try it with hono 4.5.0-rc.1:

 yarn add hono@4.5.0-rc.1 react@npm:@hono/react-compat react-dom@npm:@hono/react-compat

This works well. Thank you for your awesome idea!

[gaetan-puleo]

Thank you @yusukebe !!