学習のすすめになるJS（TypeScript）ライブラリ2選

素朴なライブラリを読むのは学習に大変おすすめ

ReactやVueのない純粋なJavaScriptコードを見るのであればこれらの素朴なライブラリをチェックするのは学習の面からとても大変おすすめです。
そんな初心者や読みやすく、意外に知られていない（筆者も今日知りました）ライブラリをいくつか紹介します。
これらのコードは1ファイル、index.ts を読むだけで、いわゆるフロントエンドフレームワークやライブラリに左右されない素朴なTypeScript(JavaScript)のコードを見ることができます。
知られていないといっても開発元はGitHubであり、一定の品質は担保されていると思っていいです。
もっというとテストもこんな感じで書いたらいいのか、というのがとてもヒントになると思います。

1. github/check-all

GitHubのissuesにあるような、checkboxで
チェックされている件数を表示したり、チェックボックスをクリックすると全部チェックするような機能を提供するライブラリです。

https://github.com/github/check-all

簡単な使い方

import checkAll from '@github/check-all'
checkAll(document.querySelector('[data-check-all-container]'))

HTMLは下記の感じです。

<div data-check-all-container>
  Count: <span data-check-all-count>0</span>
  <label><input type="checkbox" data-check-all> Check All</label>
  <label><input type="checkbox" data-check-all-item> github/fetch</label>
  <label><input type="checkbox" data-check-all-item> github/textarea-autosize</label>
  <label><input type="checkbox" data-check-all-item> github/eventlistener-polyfill</label>
  <label><input type="checkbox" data-check-all-item> github/quote-selection</label>
</div>

2. github/session-resume

こちらもGitHubでissueやPullRequestの編集画面で実現されている、
ページを離脱しても離脱する直前のフォームの内容を再現する仕組みを実装したものです。

https://github.com/github/session-resume/tree/main

簡単な使い方

このライブラリで実装されているのは、inputやtextareaの内容をsessionStorageに保存する部分と復旧するところで、自身で復旧のタイミングや記録のタイミングは設定しなければなりません。

<form>
  <input id="new-comment" class="js-session-resumable"/>
</form>

import {persistResumableFields, restoreResumableFields, setForm} from '@github/session-resume'

function getPageID() {
  return window.location.pathname
}

// Listen for all form submit events and to see if their default submission
// behavior is invoked.
window.addEventListener('submit', setForm, {capture: true})

// Resume field content on regular page loads.
window.addEventListener('pageshow', function() {
  restoreResumableFields(getPageID())
})

// Persist resumable fields when page is unloaded
window.addEventListener('pagehide', function() {
  persistResumableFields(getPageID())
})

他のおすすめ

github-elementsは上記のような素朴な実装をWebComponentsにまとめたものです。
autocompleteなどGitHubに実装されているおなじみの機能がこのライブラリを介して実装されていると思いますので、こちらもコードリーディングに大変お勧めです。
https://github.com/github/github-elements