JSer.info #632 - ブラウザ上でコード編集とプレビューができるSandpack 2.0がリリースされました。
Sandpack 2.0では、Node.jsのコードをブラウザ上で実行できるNodeboxという機能が追加されています。
先週、APIとして利用できるようになったWebContainersと仕組みは似ています。
Sandpackでは、厳密なNode.jsのエミュレートよりも、Node.jsで書かれたツールやアプリケーションの実行を目的としています。
また、SharedArrayBufferなどcross origin isolationな環境でしか使えないAPIを避けることで、色々な場所で動作するようになっています。
一方のWebContainersは、SharedArrayBufferが必要なため、COOP/COEPヘッダを設定したページが必要になります。
Safari 16.4 Betaがリリースされました。
Safari 16.4 Betaでは、主要な変更だけを列挙するだけでも、かなりの量の機能追加が含まれています。
- CSS Typed Object Model APIのサポート、Constructable Stylesheetsのサポート
- Declarative Shadow DOM、EmentInternals、Imperative Slot APIのサポート
- RegExp lookbehind assertions、
import.meta.resolve、Atomics.waitAsync、Import Mapsのサポート - iframeの
loading=lazy、Clear-Site-DataHTTPヘッダーのサポート - AudioSession Web APIのサブセットをサポート、Web Codecs APIの一部をサポート
- WebAssembly SIMD、OffscreenCanvas(2Dのみ)、Compression Streams APIのサポート
- Fetch Metadata Request Headers、Scroll to Text Fragmentのサポート
- Screen Orientation API、Screen Wake Lock API、UserActivation APIのサポート
- ホーム画面に追加されたWebアプリ限定でプッシュ通知、Badge APIをサポート
- Web Inspectorの改善、WebDriverでのShadow Rootsのサポート、CookieのSameSite属性をサポート
- Lockdownモードでキャッシュ系のAPIを無効化するなど
ホーム画面に追加したWebアプリ限定でプッシュ通知、Badge APIなどのいわゆるPWAについては、次の記事で解説されています。
React.jsのドキュメンタリー動画が公開されています。
Facebook社内でのReactの誕生から現在までを振り返る形で、Reactの歴史を紹介しています。
また、Reactのユーザー視点からの記事も公開されています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Firefox 110.0, See All New Features, Updates and Fixes
www.mozilla.org/en-US/firefox/110.0/releasenotes/
Firefox 110リリース。
Container Queriesのサポート、Errorのstackプロパティがシリアライズされた際に含まれるように変更。
ReadableStreamがAsync Iterableとして利用できるようになるなど
Announcing Sandpack 2.0 and a Node.js runtime for any browser
codesandbox.io/blog/announcing-sandpack-2
Sandpack 2.0リリース。
ブラウザ上でNode.jsのコードを実行するNodeboxの追加。
WebContainersとの違いとして、Nodeboxはサンプルコードの実行を意図しているので、完全なNode.jsのエミュレータではない点。一方でSharedArrayBufferを使わないことで色々な環境でも動作するようになっている。
Release v0.200.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.200.0
Flow v0.200.0リリース。
generics-escapeの問題の改善、型チェックの厳密化、数値と日付の比較を許可しないように変更など。
flow autofixにmissing-local-annotを追加など
Release v9.5.0 · npm/cli
github.com/npm/cli/releases/tag/v9.5.0
npm v9.5.0リリース。
npm publish --provenanceのサポート。現時点ではGitHub Actionsのみの限定的なサポートで、OIDCを使ったCIからのpublishをサポートするための仕組み。
- Automated publishing of npm packages from CI/CD · Issue #625 · npm/statusboard
- RFC for linking packages to their source and build by feelepxyz · Pull Request #626 · npm/rfcs
Thursday February 16 2023 Security Releases | Node.js
nodejs.org/en/blog/vulnerability/february-2023-security-releases/
Node.jsのセキュリティアップデート。
Node.js v18.14.1 (LTS)/v19.6.1 (Current)/v16.19.1 (LTS)/v14.21.3 (LTS)がそれぞれリリースされている。
Release v3.0.0 · honojs/hono
github.com/honojs/hono/releases/tag/v3.0.0
Hono 3.0.0リリース。
reqをRequestオブジェクトを拡張したHonoRequestオブジェクトに変更、StaticRouterの廃止、Validatorの変更。
zodと組み合わせてrouterからレスポンスの型定義を作成できるjsonTとそれを利用するクライアントのhono/clientの追加。
wintercgのRuntime Keysの名前を返すruntime()の追加など
Release v5.0.0-alpha.0 · chaijs/chai
github.com/chaijs/chai/releases/tag/v5.0.0-alpha.0
chai v5.0.0-alpha.0リリース。
Pure ESMのパッケージに変更。
Node.js 16未満のサポート終了、IEのサポート終了など
Safari 16.4 Beta Release Notes | Apple Developer Documentation
developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes
Safari 16.4 Betaリリース。
- CSS Typed Object Model APIのサポート、Constructable Stylesheetsのサポート
- Declarative Shadow DOM、EmentInternals、Imperative Slot APIのサポート
- RegExp lookbehind assertions、
import.meta.resolve、Atomics.waitAsync、Import Mapsのサポート - iframeの
loading=lazy、Clear-Site-DataHTTPヘッダーのサポート - AudioSession Web APIのサブセットをサポート、Web Codecs APIの一部をサポート
- WebAssembly SIMD、OffscreenCanvas(2Dのみ)、Compression Streams APIのサポート
- Fetch Metadata Request Headers、Scroll to Text Fragmentのサポート
- Screen Orientation API、Screen Wake Lock API、UserActivation APIのサポート
- ホーム画面に追加されたWebアプリ限定でプッシュ通知、Badge APIをサポート
- Web Inspectorの改善、WebDriverでのShadow Rootsのサポート、CookieのSameSite属性をサポート
- Lockdownモードでキャッシュ系のAPIを無効化するなど
アーティクル
State of React Native 2022
results.stateofreactnative.com/
React Nativeについての開発者アンケートであるState of React Native 2022の結果が公開された。
My talk on CSS runtime performance | Read the Tea Leaves
nolanlawson.com/2023/01/17/my-talk-on-css-runtime-performance/
CSSのRuntime Performanceについての動画。
CSS Selectorの動作とコスト、レイアウトのパフォーマンスとCSS Containment、デバッグ方法について
How to Inspect Interactions in the Browser
www.builder.io/blog/inspect-interactions-in-the-browser
Chrome DevToolsのEmulate a focused pageを使ってHoverやFocus中に出る要素をInspectする方法について
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
zenn.dev/yusukehirao/articles/popover-api-and-attributes
HTMLのpopover属性について。
Try out CSS Nesting today | WebKit
webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
CSS NestingがSafari Technology Previewで利用できるようになったため、使い方についての紹介記事
スライド、動画関係
React.js: The Documentary - YouTube
www.youtube.com/watch?v=8pDqJVdNa44
Reactのドキュメンタリー。
Facebook社内でのReactの誕生、社内でのBolt.jsとの選択、オープンソースとしての公開と最初の失敗、設計原則の周知、外部からのContributorと採用、Reactチームについて
ソフトウェア、ツール、ライブラリ関係
codesandbox/nodebox-runtime: The open source version of the nodebox repository, a Node.js runtime for the browser
github.com/codesandbox/nodebox-runtime
Node.jsのコードをブラウザ上で動かすためのNode.js互換のランタイムを実装したライブラリ。
