JSer.info #579 - Parcel 2.3.0がリリースされました。
ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。
Vite 2.8.0がリリースされています。
macOS Montereyで5000 portが利用されているため、vite previewのデフォルトportが4173へと変更されています。
また、Workerとしてbundleする対象をURL使ったものへと変更して、これを推奨として扱うように変更されています。
- import MyWorker from './worker.js?worker'
- const worker = new MyWorker()
+ const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })
Parcel 2.3.0の変更もそうですが、Vite 2.8.0でもパッケージのインストールサイズの削減が含まれています。
依存関係を含めたパッケージのインストールサイズの測定には、Package Phobiaというサイトが使われることが多いですが、それぞれのパッケージのサイズは次のページで見られます。
Parcelのインストールサイズが大きくなっているのは、実行する端末とは別のアーキテクチャのネイティブバイナリも含まれているためです。
Vite(esbuild)ではoptionalDependenciesを使って、実行する端末のアーキテクチャのバイナリだけをダウンロードしようとしています。
ただし、このoptionalDependenciesでアーキテクチャ別のパッケージ(バイナリ)を配布した時の挙動は、npm/yarn/pnpmで統一されているわけではありません。
現在SWCやesbuild、napi-rsを使ったnative moduleの需要が高まってきたため、この挙動を定義する方法について議論がされています。
- [RRFC] Add libc fields to select optionalDependencies should be installed or skipped · Issue #438 · npm/rfcs
- RFC: Package Distributions by darcyclarke · Pull Request #519 · npm/rfcs
How the Angular Compiler Works. The Angular Compiler (which we call… | by Alex Rickabaugh | Feb, 2022 | Angular Blogという記事では、AngularのコンパイラーであるAngular Compilerがどのようにコンポーネントをコンパイルしてるかについて解説されています。
どのようにコンポーネントの型チェックをしているかや、Transpileしているかについて解説されています。
Implementing DDD, CQRS and Event Sourcingという書籍は、コードにJavaScript/Node.jsを使ってDDD(ドメイン駆動開発)について解説しています。
書籍では、DDDの概念とその実装について書かれていて、特定のフレームワークを使わずに理論と実装を進めながらアーキテクチャについて解説しています。
なぜ、DDDの解説にJavaScriptを使ったかやサードパーティのライブラリを使わずに解説したのかについてなどのFAQは次の記事で解説されています。
- Why my book uses Node.js and JavaScript - Alex Lawrence
- Using the filesystem for illustration purposes - Alex Lawrence
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release 5.0.0 · google/zx
github.com/google/zx/releases/tag/5.0.0
zx 5.0.0リリース。
YAMLのサポート、
.tsのビルトインサポートを削除、Node.js 16未満のサポート終了など
Release v2.3.0 · parcel-bundler/parcel
github.com/parcel-bundler/parcel/releases/tag/v2.3.0
Parcel 2.3.0リリース。
ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。
Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更など
Release v8.5.0 · npm/cli
github.com/npm/cli/releases/tag/v8.5.0
npm 8.5.0リリース。
workspace内でのnpm installなどのコマンドがコンテキストに基づいて実行されるように変更など
Release Notes for Safari Technology Preview 140 | WebKit
webkit.org/blog/12255/release-notes-for-safari-technology-preview-140/
Safari Technology Preview 140リリース。
CSSの:has()擬似クラスのサポート、FetchEvent.handledのサポート、form.requestSubmit()の有効化。
script要素がサポートしているtypeを判定する
HTMLScriptElement.supports(type)の実装など
- Add FetchEvent.handled (#1397) by tingshao · Pull Request #1496 · w3c/ServiceWorker
- HTMLScriptElement.supports() - Web APIs | MDN
Announcing TypeScript 4.6 RC - TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/
TypeScript 4.6 RCリリース。
再帰型、インターフェースへのインデックスアクセス、関数の引数における型推論の改善。
--target es2022のサポート、checkJsが有効時のJavaScriptの構文エラーのチェックを改善。
--generateTraceで出力できるビルドのトレースデータを分析するための@typescript/analyze-traceパッケージの公開など
vite/CHANGELOG.md at main · vitejs/vite
github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#280-2022-02-09
Vite 2.8.0リリース。
vite previewのデフォルトportの変更、Workerとしてbundleする対象をURL使ったものへと変更、設定にworkerオプションを追加など。
また、パッケージのファイルサイズの削減など
Release v28.0.0-alpha.0 · facebook/jest
github.com/facebook/jest/releases/tag/v28.0.0-alpha.0
Jest 28αリリース。
27でjest-circusがデフォルトとなったため、JSDOMとjasmin2のenviromentをデフォルトでは含めないように変更。
package.jsonのexportsフィールドに対応など
ESLint v8.9.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2022/02/eslint-v8.9.0-released
ESLint 8.9.0リリース。
envにes2016/es2018/es2019/es2022オプションの追加、ES3のコードでは"use strict"を無視するように変更など
Firefox 97.0, See All New Features, Updates and Fixes
www.mozilla.org/en-US/firefox/97.0/releasenotes/
Firefox 97リリース。
CSSのcapとic unitをサポート、CSS cascade layersをデフォルトで有効化。
AbortController.abort()/AbortSignal.throwIfAborted()/AbortSignal.reasonプロパティのサポートなど
Node v17.5.0 (Current) | Node.js
nodejs.org/en/blog/release/v17.5.0/
Node.js 17.5.0リリース。
--experimental-fetchフラグ付きでundiciベースのFetch APIの実装を追加、Streamにiterator-helper proposalの実装など
アーティクル
How the Angular Compiler Works. The Angular Compiler (which we call… | by Alex Rickabaugh | Feb, 2022 | Angular Blog
blog.angular.io/how-the-angular-compiler-works-42111f9d2549
Angular Compilerがどのように動いているかについての解説記事。
どのようにAngular componentのテンプレートの型チェックをして変換しているのかについて。
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
blog.drsprime.com/entry/2022/02/10/170000
Web VitalsのメトリクスをGoogle Analyticsに送信し、Google データポータルで可視化する方法について
サイト、サービス、ドキュメント
checkly/puppeteer-to-playwright: Puppeteer to Playwright conversion script
github.com/checkly/puppeteer-to-playwright
Puppeter向けのスクリプトをPlaywright向けに変換するツール
ソフトウェア、ツール、ライブラリ関係
papyrs/stylo: Another kind of rich text editor
ContentEditableベースのWYSIWYGなWeb Components
hikerpig/pintora: An extensible text-to-diagrams library that works in both browser and node.js
Mermaid.jsやPlantUMLのようにテキストでダイアグラムを書くライブラリ。
Sequence Diagram、Component Diagram、Activity Diagram、Mind Mapなどの形式に対応していて、プラグインでカスタマイズできる
Aslemammad/react-worker-components-plugin: ⚡ Something like react server components, but web workers instead of a server
github.com/Aslemammad/react-worker-components-plugin
importしたReactコンポーネントをreact-worker-componentsを使ってWebWorkerで動かすように変換するViteプラグイン
書籍関係
Implementing DDD, CQRS and… by Alex Lawrence [PDF/iPad/Kindle]
leanpub.com/implementing-ddd-cqrs-and-event-sourcing
JavaScriptで書かれたDDD/CQRS/Event Sourcingについての書籍。
ドメイン駆動設計の理論的な話から、JavaScript/Node.jsを使った実装について。
Event Sourcingでは、ブラウザ上のUIとEventSourceを使ったRead Modelについても扱っている
