Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5分でわかるPreactのVDOMで作るWebエディタ

did0es
June 25, 2024

 5分でわかるPreactのVDOMで作るWebエディタ

めぐろLT #16 ( https://meguro-lt.connpass.com/event/316885 )にて発表した LT の資料です。

紹介したライブラリのデモは こちら です。

did0es

June 25, 2024
Tweet

More Decks by did0es

Other Decks in Technology

Transcript

  1. did0es(Hirai Shuta) SWE @ CyberAgent, Inc. Main organizer @ Meguro.es

    最近の供養したいこと: EURO2024 をリアタイ観戦して サッカー意識を高めていたところ 寝不足で怪我をしてしまい まさかの自分が負傷退場する羽目に 自己紹介
  2. 実装フロー 1. lexical の実装を読む 2. React の技術の転用だと気づき、React の実装を読む 3. lexical,

    React の規模では再現できないと思い、よりミニマルな Preact の実装を読む 4. Preact から Reconciler を取り出す 5. Reconciler を好きなエディタライブラリに移植する 6. lexical かな それって lexical だね 差分検出大好き(完成🐲)
  3. lexical と似ている React を読んでみる https://github.com/facebook/react の Reconciler を中心に読みつつ、量が膨大 なので 以下の参考資料と併せて読んでいく

    ・https://ja.legacy.reactjs.org/docs/implementation-notes.html  ・旧型の差分検出(Stack)の話 ・https://jsconf.jp/2022/talk/internal-implementation-of-react  ・新型の差分検出(Fiber)の話 ・https://github.com/shuta13/react-deep-dive(注: 手前味噌)  ・Stack, Fiber 両方を再現する話
  4. Preact から Reconciler を取り出す preact/src/diff 配下の実装から、VDOM を比較・更新している処理だけを 取り出して動かす ・Preact は可読性よりも

    Perf を意識したコードになっているので  人間に優しいように、適宜処理の流れや変数名を書き換え ・そもそも元の実装は Pure JS なので TypeScript で書き換え
  5. 余談: react-reconciler をインストールすれば解決? react-reconciler というパッケージが React から独立して存在する ・これをインストールすれば差分検出できそう... ・しかし peerDeps

    に React が入っているのでスタンドアロンでは動かない ちなみに Preact は、reconciler などを個別にパッケージ化しない方針 ・react-three-fiber on Preact? (discussion) · Issue #2538
  6. エディタライブラリへ移植 View ライブラリ非依存のエディタライブラリの選定 ・選ばれたのは Editor.js でした Editor.js ハック ・また内部実装を持ってくるわけにはいかないので  プラグインとして、Reconciler

    を入れる  ・プラグインを選択すると VDOM からブロックが生成される   ・ブロックごとに state を持つ   ・もはや lexical とは別物に...
  7. 苦労した点 Preact の hooks 周辺 ・内部状態を扱う箇所が副作用多めで難解 ・useState を中心に、自分が再現できるものだけ再現 型 ・元の実装は

    Pure JS だったので TS 化したが、工数が膨れ上がった  だけだった  ・一部で型の恩恵を得られたが ts-expect-error まみれ  ・Preact の処理をほぼそのまま動かせたのでテスト書くだけで十分だった