Fork me on GitHub

2023-06-11のJS: Rspack 0.2、Modern CSS、polywasm

Edit on GitHub 編集履歴を見る

JSer.info #647 - Rustで書かれたwebpack互換のbundlerであるRspack 0.2がリリースされました。

Plugin Hooksの追加、ESM形式のoutputに対応、SplitChunksPluginの実装、Data URIのサポートが追加されています。
また、Vue/Svelte/NestJSのloaderのサポートが追加されています。


Modern CSS in Real Life - Chris Coyierという記事では、最近CSSに追加され利用できるようになった機能について紹介されています。

Logical Properties、Container Queries、Cascade Layers、CSS Colorsとoklch()、View Transitions APIについて現実のユースケースなどと共に紹介されています。


globalThis.WebAssemblyのpolyfillであるpolywasmが公開されています。

WebAssembly APIは大体のブラウザに実装されていますが、AppleのLockdown Modeが有効だと無効になっています。
そのようなWebAssembly APIが利用できない環境でも、.wasmファイルを実行するためのpolyfillライブラリとなっています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Announcing TypeScript 5.1 - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-5-1/

TypeScript ReleaseNote

TypeScript 5.1リリース。
undefinedreturnする関数の型の扱いを改善、getterとsetter間でそれぞれ異なる型を指定できるように、JSXの改善。
Node.js 14.17未満のサポート終了、typeRootsの上向きのパッケージ解決を無効化など


Bun v0.6.6 | Bun Blog

bun.sh/blog/bun-v0.6.6

Bun ReleaseNote

Bun 0.6.6リリース。
bun testがGitHub Actions向けの出力をサポート、bun test --only/bun test --todo/test.if()/describe.if()の追加。
test()timeoutオプションをサポート、expect()にmatcherを追加。
Fetch Upload Streamingのサポートなど


Chrome 115 beta - Chrome Developers

developer.chrome.com/en/blog/chrome-115-beta/

Chrome ReleaseNote

Chrome 115 Betaリリース。
スクロールベースのアニメーションであるScrollTimelineViewTimelineの追加、WebAssembly.Module()のメインスレッドでのモジュールサイズの制限を8MBに緩和。
メインフレームのナビゲーションで自動的にHTTPSにアップデートし、HTTPへのフォールバックを行うように、Storage Partitioningをデフォルトで有効化など。
Origin TrialとしてCompute Pressure API、マジックコメントでのcompile hintsの追加、Storage Buckets APIの追加など。
document.domainへの代入を非推奨化、Mutation Eventsを非推奨化など


Astro 2.6: Middleware | Astro

astro.build/blog/astro-260/

astro ReleaseNote

Astro 2.6リリース。
Middlewares/output: "hybrid"/Custom client directivesのStable化。
CSSをインライン化するinlineStylesheets: "auto"オプションの追加、実験的にリダイレクト機能の追加など


Open sourcing Ezno's checker and trying out / previewing the JavaScript type checker today · kaleidawave/ezno · Discussion #21

github.com/kaleidawave/ezno/discussions/21

TypeScript Rust ReleaseNote

Rustで書かれたTypeScriptの型チェッカーであるEnzoがリリースされた。
まだサポートされていない構文なども多いがOxc CLIを通して利用できるようになった


Release 7.0.0 · lerna/lerna

github.com/lerna/lerna/releases/tag/7.0.0

JavaScript monorepo ReleaseNote

lerna 7.0.0リリース。
lerna bootstrap/add/linkは削除された。デフォルトでworkspacesを使うようになり、useWorkspacesオプションの削除。
非推奨となっていたオプションの削除など


Node v20.3.0 (Current) | Node.js

nodejs.org/en/blog/release/v20.3.0

node.js ReleaseNote

Node.js v20.3.0リリース。
libuv 1.45.0にアップデート、AbortSignal.any()の実装など


Announcing Rspack 0.2 - Rspack

www.rspack.dev/blog/announcing-0.2.html

webpack rspack ReleaseNote

Rspack 0.2リリース。
Plugin Hooksの追加、ESM形式のoutputに対応、SplitChunksPluginの実装、Data URIのサポート、Vue/Svelte/NestJSの対応など


Bun v0.6.8 | Bun Blog

bun.sh/blog/bun-v0.6.8

Bun ReleaseNote

Bun v0.6.8リリース。
Bun.passwordの追加、bun:testモジュールにmock/spyOn関数を追加。
Bun.serveにブラウザからWebSocketsを使ったデバッガーに接続できるinspectorオプションの追加など


Release v1.35.0 · microsoft/playwright

github.com/microsoft/playwright/releases/tag/v1.35.0

playwright ReleaseNote

playwright v1.35.0リリース。
UI modeでRoute APIが処理したリクエストを表示するように、スクリーンショットにmaskColorオプションを追加、uninstallサブコマンドを追加。
バイナリをplaywrightからplaywright-coreへリネームなど


evanw/polywasm

github.com/evanw/polywasm

WebAssembly JavaScript library polyfill

globalThis.WebAssemblyのpolyfill実装。
Apple/SafariのLockdown ModeのようにWebAssembly APIが利用できない環境でも、.wasmを実行するためのpolyfill。


アーティクル


JavaScript Macros in Bun | Bun Blog

bun.sh/blog/bun-macros

Bun article

Bun 0.6.0で実装されたbundlerを使ったbundle時のマクロ展開について。
import ... with { type: 'macro' }でマクロとして読み込み、bundle時にそのモジュールの評価結果を埋め込む機能。


The origin private file system

web.dev/origin-private-file-system/

JavaScript article

Origin private file systemについて。
Originごとのルートディレクトリがあり、メインスレッドまたはWeb Workerから利用できる。
Web Workerからは同期APIも利用できる。


HTML 全体の CSS を取得して Shadow DOM に適用する | marmooo's blog

marmooo.blogspot.com/2023/06/html-css-shadow-dom.html

CSS WebComponents article

document.styleShetsからスタイルを集めてreplaceSyncでスタイルシートを作り、shadowRoot.adoptedStyleSheetsでスタイルシートを当てる方法について。


Modern CSS in Real Life - Chris Coyier

chriscoyier.net/2023/06/06/modern-css-in-real-life/

CSS article slide

モダンなCSSの機能についてのスライドと解説。
Logical Properties、Container Queries、Cascade Layers、CSS Colorsとoklch()、View Transitions APIについて


サイト、サービス、ドキュメント


RSC From Scratch. Part 1: Server Components · reactwg/server-components · Discussion #5

github.com/reactwg/server-components/discussions/5

React tutorial

React Server Components (RSC)を一から実装してみるチュートリアル。
SSRとRSCの違い。
JSXのHTMLへの変換しHTMLを返しレンダリング、入力状態を維持したままナビゲーションをするためにJSXをオブジェクトとして返しクライアントでレンダリング。


ソフトウェア、ツール、ライブラリ関係


Tresjs/tres: Declarative ThreeJS using Vue Components

github.com/tresjs/tres

Vue WebGL library

ThreeJSとVueを使った宣言的に3DのViewを作成できるライブラリ


NakedJSX - Use JSX without React

nakedjsx.org/

jsx JavaScript library

JSXから静的なHTMLと小さなランタイムを生成するツールキット。
Scoped CSSを扱う機能、開発用サーバ、画像/CSS/HTML/JSの最適化して出力をする機能を持っている。


この記事へ修正リクエストをする
JSer.info Slackに参加する