🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

PreactでもMobXを使いたい

正確には、`mobx-react-lite`を使いたい。
そんなときにどうすればいいか。

そしてできることなら`preact/compat`ではなく、素の`preact`でやりたいが・・。

追記: やりたい気持ちが高まったので、自分でそれ用のライブラリを作りました。
https://github.com/leader22/mobx-preact-super-lite

順当: `preact/compat`を使う

  • `preact`ではなく、同梱されてる`preact/compat`を使う
  • バンドラで`react`と`react-dom`からエイリアスを貼る

だいたいのReact向けのライブラリは、これでなんとかなる。

Rollupを使ってる場合は、`@rollup/plugin-alias`を使う。

import alias from "@rollup/plugin-alias";

// ...
plugins: [
  alias({
    entries: {
      react: "preact/compat",
    },
  }),
],
// ...

ほかのReact用のライブラリもそのまま使えるし、これでいいといえばいい、が。

素の`preact`に比べると、サイズが大きくなる。
なんとかならんだろうか・・。

却下: `mobx-preact`

GitHub - mobxjs/mobx-preact: MobX bindings for Preact

いちおう公式のオーガナイゼーションに存在するリポジトリ
ただし2018年から更新されてない。

そして`mobx-react-lite`が生まれる前の`mobx-react`のAPIしかないので、現世において使う必要はない。

却下: `mobx-preact-lite`

GitHub - philmander/mobx-preact-lite: Preact bindings for MobX

なんとnpmでこのネームスペースが取られてる!と思ったら、中身はさっきの`mobx-preact`と一緒だった・・・。

却下: `@sgratzl/mobx-preact-lite`

GitHub - sgratzl/mobx-preact-lite: Wrapper around mobx-react-lite with Preact typings

型まわりだけパッチを充ててる・・?

とにかく、求めていたものではない。

まとめ

エイリアスなし`preact`で、`mobx-react-lite`相当の機能を使うためのパッケージは、現時点でこの世には存在しない。

ゆえに、`preact/compat`を使ってエイリアスを貼るしかない。

こうなると、もはやMobXではないナニカを採用するという手もあるなと最近は思う・・。
MobXも地味にバンドルサイズが大きいからな〜でもしっくりくるライブラリないしな〜。

これこそ、無いものは作れの精神なのか・・。

しれっと`preact`にエイリアスを向けるとどうなるか

`import { useState } from "react"`が解決できなくて落ちる。

PreactのHooksは、`preact/hooks`にあるので、当然の結果であった・・。

作った

というわけで無いものは作れの精神で作りました。

GitHub - leader22/mobx-preact-super-lite: Super lightweight Preact bindings for MobX based on Preact 10.x+ and Hooks

APIは`mobx-react-lite`と一緒ですが、`memo()`と`forwardRef()`に依存してる`observer()`のHOCだけがないです。