JSer.info #588 - Lexicalというテキストエディタを作るためのJavaScriptフレームワークが公開されました。
エディタの状態をdouble-bufferingで管理して、状態の変更をdiff/patchで表示に反映させる仕組みを持っている。
またcontentEditableを使っているが、外部からの変更をMutationObserverで監視し、エディタの状態を更新している。
Lexicalは同じくFacebookが作成しているDraft.jsの後継となるライブラリで、APIの互換性はありませんが、今後マイグレーションガイドを作成していく予定とのことです。
React DOMのテストライブラリであるReact Testing Library v13.1.0がリリースされました。
React Testing Library v13.1.0では、renderHookというAPIが追加されています。
このAPIは、React Hooksのテストをするためのもので、@testing-library/react-hooksの実装を元にしています。
詳しい経緯は次のPRで書かれていますが、@testing-library/react-hooksはReact 18の対応が難しい部分があったため、renderHookというシンプルなAPIが@testing-library/reactへと実装されました。
そのため、今後@testing-library/react-hooksは非推奨する予定となっています。
Building a dialog componentという記事では<dialog>要素を使ったダイアログコンポーネントの作成について書かれています。
inert属性、autofocus属性、CSSのoverscroll-behaviorプロパティなど、関連するアクセシビリティの機能などについても書かれているので、興味がある人は読んでみると良さそうです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release 3.22.0 - 2022.04.15 · zloirock/core-js
github.com/zloirock/core-js/releases/tag/v3.22.0
core-js v3.22.0リリース。
Change Array by copy proposalの仕様追従、atob/btoaの修正、compat dataの更新など
Release v1.4.0 · remix-run/remix
github.com/remix-run/remix/releases/tag/v1.4.0
Remix v1.4.0リリース。
remixという単独のパッケージを参照させる"magic imports"という仕組みのために、node_modulesを直接編集してたがpnpmなどで動かない問題があった。
そのため、それぞれのパッケージを参照するようにするためのマイグレーションスクリプトの公開とそれに関連する変更が含まれている。
Release v8.0.0 · reduxjs/react-redux
github.com/reduxjs/react-redux/releases/tag/v8.0.0
React-Redux v8.0.0リリース。
コードベースをTypeScriptに書き換え、APIの互換性は維持している。
useSyncExternalStoreを使ったReact 18の対応、TypeScriptの型定義からDefaultRootStateを削除、connectAdvancedの削除など
util: add parseArgs module by bcoe · Pull Request #42675 · nodejs/node
github.com/nodejs/node/pull/42675
Node.jsにコマンドライン引数のパースをするutil.parseArgsを追加するProposal
Release v13.1.0 · testing-library/react-testing-library
github.com/testing-library/react-testing-library/releases/tag/v13.1.0
react-testing-library 13.1.0リリース。
React 18のHooksをテストするためのrenderHook APIを追加。
- feat: Add `renderHook` by eps1lon · Pull Request #991 · testing-library/react-testing-library
- testing-library/react-hooks-testing-library: 🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
Release 2.0.0-beta.1 · vercel/swr
github.com/vercel/swr/releases/tag/2.0.0-beta.1
SWR 2.0.0-beta.1リリース。
useSWRがisLoadingを返すように、keepPreviousDataオプションの追加など
アーティクル
New React 18 features and changes - Xebia
xebia.com/new-react-18-features-and-changes/
React 18の変更点についての解説。
Concurrent renderer、createRoot/hydrateRootとonRecoverableErrorについて。
Automatic batchingとflushSync。
新しく追加されたHooks APIであるuseTransition/useDeferredValue、useId、useSyncExternalStore、useInsertionEffectについて
なぜ我々はsession.cookieを変更しなければならなかったのか - BASEプロダクトチームブログ
devblog.thebase.in/entry/2022/04/13/114714
Public Suffix Listへの追加申請と、ブラウザに同梱されるタイミングの話。
ブラウザの復元機能によって、変更前と変更後の同名Cookieが存在してしまう問題とブラウザごとの挙動の違いについて。
Building a dialog component
web.dev/building-a-dialog-component/
<dialog>要素を使ったダイアログの作成とアクセシビリティについての記事。
ダイアログ表示とユーザー入力を無視するinert属性、autofocus属性、ESCキーでの非表示。
<dialog>要素のスタイル、Header/Footerのデザイン、overscroll-behaviorでのbody scroll lock、JavaScriptとの連携方法について
Boost Resource Loading With fetchpriority, a New Priority Hint — Smashing Magazine
www.smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/
リソースロードの優先度を定義するfetchpriority属性について。
- WICG/priority-hints: A browser API to enable developers signal the priorities of the resources they need to download.
- HTMLIFrameElement.fetchpriority - Web APIs | MDN
从 Turborepo 看 Monorepo 工具的任务编排能力 · Issue #13 · worldzhao/blog
github.com/worldzhao/blog/issues/13
monorepoにおける依存関係の管理、タスクのスケジューリング、バージョン管理について。
タスクの並列実行、トポロジカルソース、TurborepoとRushのアプローチ、リモートキャッシュについての解説。
サイト、サービス、ドキュメント
facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
テキストエディタを作るためのJavaScriptフレームワーク。
エディタの状態をdouble-bufferingで管理している。
状態の変更をdiff/patchで表示に反映させる。
またcontentEditableを使っているが、外部からの変更をMutationObserverで監視し、エディタの状態を更新している。
ソフトウェア、ツール、ライブラリ関係
ThomasAribart/json-schema-to-ts: Infer TS types from JSON schemas 📝
github.com/ThomasAribart/json-schema-to-ts
JSON SchemaからTypeScriptの型へ変換するライブラリ
Shopify/javy: JS to WebAssembly toolchain
JavaScriptのコードを実行するWebAssembly。
JavaScriptエンジンにはQuickJSを利用している。
Shopifyで利用されている。
ehmicky/wild-wild-path: 🤠 Object property paths with wildcards and regexps 🌵
github.com/ehmicky/wild-wild-path
*と正規表現でマッチしたオブジェクトのプロパティの取得と設定ができるライブラリ
