JSer.info #714 - Node.js v22.11.0がリリースされました。
Node.js v22.11.0は、Node.js v22.xのLTS(Long Term Support)リリースとなります。
Node.js v22.xは、2027-04-30までのサポートが予定されています。
Nuxt.js v3.14がリリースされました。
クライアントとサーバで共有するコードを置くshared/フォルダの追加、rspackの対応。
useResponseHeaderとuseRuntimeHookの追加などが行われています。
また、v4での変更をopt-inできるcompatibilityVersion: 4の追加も行われています。
npm互換のパッケージマネージャーであるvltと、npm registry互換のサーバレスレジストリであるvsrがリリースされました。
vltは、npmコマンドと同じようにパッケージのインストールやscriptの実行ができるパッケージマネージャーです。
特徴的なものとしてvlt queryのようなクエリ検索とその結果をMermaidやGUIで表示できる機能があります。(クエリ自体はnpm-queryも似たような仕組みがあります)
また、vlt guiコマンドでGUIで、プロジェクトの依存関係を確認できる機能もあります。
vsrは、npm registry互換のサーバレスレジストリです。
こちらはFair SourceとしてFunctional Source Licenseで公開されており、セルフホスティングができるようになっています。ホスティングとしてはCloudflare Workersで利用できるものが提供されています。
また、npmやGitHubのように、権限が細かい Granular Access Tokens を発行できる仕組みを持っています。
次のページに、vsr/verdaccio/jsrの比較が記載されています。
vltのロードマップは公開されていませんが、vltはnpm, incのfounderであるIsaacや元々npmを開発していた人たちが開発しています。
vltを作成し始めたモチベーションの一つに、npm registryの問題があるため、vsrのホスティングサービスなどを開発に力を入れているようです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node.js — Node v22.11.0 (LTS)
nodejs.org/en/blog/release/v22.11.0
Node.js v22.11.0リリース。
Node.js 22.xがLTSとなり、2027年4月までメンテナンスされる。
Nuxt 3.14 · Nuxt Blog
Nuxt v3.14リリース。
jitiのアップデート、クライアントとサーバで共有するコードを置くshared/フォルダの追加、rspackの対応。
useResponseHeaderとuseRuntimeHookの追加。
v4での変更をopt-inできるcompatibilityVersion: 4の追加など
Release v5.0.0 · immutable-js/immutable-js
github.com/immutable-js/immutable-js/releases/tag/v5.0.0
imutable-js v5.0.0リリース。
非推奨のメソッドを削除、default exportを削除、TypeScriptの型定義を改善など
mylesmmurphy/prettify-ts: Prettify TypeScript: Better Type Previews
github.com/mylesmmurphy/prettify-ts
TypeScriptの型情報を読みやすい形に展開して表示してくれるVSCode拡張
happy-dom allows for server side code to be executed by a <script> tag · CVE-2024-51757 · GitHub Advisory Database
github.com/advisories/GHSA-96g7-g7g9-jxw8
happy-domのSSRFのセキュリティ修正。
<script>のsrc属性に書かれているコードを実行してしまう問題の修正。
happy-dom v15.10.2で修正されている。
アーティクル
Making content-aware components using CSS :has(), grid, and quantity queries - Piccalilli
piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/
Quantity QueriesやContainer Queriesを使って要素の数や横幅でGrid Layoutを変更するテクニックについて。
Re-implementing JavaScript's == in JavaScript
evanhahn.com/re-implementing-javascript-double-equals-in-javascript/
== をJavaScriptで実装していく話。
== がどのような変換や比較を行っているかを仕様のStepごとに実装していき、そのアルゴリズムを見ていく記事
CSS sprite sheet animations · leanrada.com
leanrada.com/notes/css-sprite-sheets/
CSS spriteでのアニメーションについて。
APNGやSVGでのアニメーションと比べたメリットやデメリット、CSS spriteでのアニメーションの実装方法について
Introducing the vlt Package Manager & Serverless Registry
blog.vlt.sh/blog/introducing-vlt-and-vsr
npmと互換性のあるパッケージマネージャーのvltとnpm registry互換のvsrが公開された。
スライド、動画関係
Next.js App Router セキュリティ - Speaker Deck
speakerdeck.com/zaru_sakuraba/nextjssekiyuritei
Next.jsのServer Actionなどのセキュリティについてのスライド。
"use server";で意図せずにサーバの関数を公開してしまうケース、Server ComponentからClientにデータを丸ごとPropsとして渡してしてしまうケースなどについて。
サイト、サービス、ドキュメント
astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox
github.com/astahmer/atomic-css-devtools
Atomic CSSのスタイルをまとめたパネルを提供することで、Atomic CSSのデバッグをしやすくするブラウザ拡張
NPM Chart
npmパッケージのインストール数のグラフを生成してくれるサービス
