Fork me on GitHub

2021-08-03のJS: Yarn 3.0、Chrome 93 beta、cross origin iframeでのalert/prompt/confirmを削除

Edit on GitHub 編集履歴を見る

JSer.info #551 - Yarn 3.0がリリースされました。

Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解などの変更を含んでいます。

  • @yarnpkg/sdks: Editor SDKs
  • @yarnpkg/pnpify: PnPと互換性のないツールを実行するツール
  • @yarnpkg/nm: node_modules linker

また、 exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuildでのbundleをサポートする@yarnpkg/esbuild-plugin-pnpの追加なども含まれています。


Chrome 93 betaがリリースされました。

Origin TrialとしてCOEPの導入をより手軽にするためのCross-Origin-Embedder-Policy:credentiallessURL Handlersの追加などが含まれています。
また、 AbortSignal.abort()メソッドのサポート、Stage 3のError causeとObject.hasOwnのサポートも含まれています。

ダークモード対応などではCSSのprefers-color-scheme media queryを使い、ユーザーエージェントがどのcolor schemeを優先するかを判定していました。しかし、CSSではページロード後となるため、ページロード時にその判定ができるようにClient Hint HeaderのSec-CH-Prefers-Color-Schemeが追加されています。
また、navigator.userAgentUser-Agentヘッダの後継となる、User-Agent Client Hintsに関するAPIやヘッダの変更も含まれています。


Chrome 92では、cross originのiframe内からwindow.{alert, prompt, confirm}が利用できなくなりました。

この問題への対処方法として、次のような方法があげられています。

この影響で、CodePenなどのiframeを使ってコードを実行する環境、Google Apps Scriptをウェブサイトとして公開しているケース、Salesforceの一部機能などが動かなくなるなどの影響が出ています。
いくつかのウェブサイトで影響があったため、Chromeでは2021年8月15日まで無効化されています。(Reverse Origin Trialのための猶予期間)2022年1月まで延期されています。

他のブラウザもこの仕様に追従する予定となっています。

詳しくは次のページも参照してください。


ヘッドライン


Headless UI v1.4: The One With Tabs – Tailwind CSS

blog.tailwindcss.com/headless-ui-v1-4

React Vue JavaScript library ReleaseNote

Headless UI 1.4リリース。
Tagコンポーネントの追加、DisclosuresPopoverのPanel内にButtonを置くとPanelを閉じれるように


Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-3-0-performances-esbuild-better-patches-e07

yarn ReleaseNote

Yarn 3.0リリース。
Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解など。
exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuildのサポートなど


Release 3.16.0 - 2021.07.30 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.16.0

JavaScript polyfill library ReleaseNote

core.js 3.16.0リリース。
Stage 3のArray#findLast、Stage 1のArray#filterOutArray#groupByのサポート。
Denoのサポートなど


Node v16.6.0 (Current) | Node.js

nodejs.org/en/blog/release/v16.6.0/

node.js ReleaseNote

Node.js 16.6.0リリース。
V8 9.2へアップデート、http2のセキュリティ修正など


Recoil 0.4 | Recoil

recoiljs.org/blog/2021/07/30/0.4.0-release/

React JavaScript library ReleaseNote

Recoil 0.4リリース。
キャッシュポリシーをcachePolicy_UNSTABLEで設定できるように、トランザクションをするuseRecoilTransaction_UNSTABLEで利用できるように。
TypeScriptの型改善など


Chromium Blog: Chrome 93: Multi-Screen Window Placement, PWAs as URL Handlers, and More

blog.chromium.org/2021/07/chrome-93-multi-screen-window-placement.html

Chrome ReleaseNote

Chrome 93 betaリリース。
Origin TrialとしてCross-Origin-Embedder-Policy:credentialless、URL Handlersの追加など。
AbortSignal.abort()メソッドのサポート、Stage 3のError causeとObject.hasOwnのサポート。
Client Hint HeaderのSec-CH-Prefers-Color-Schemeの追加やUA Client Hintの更新など


1065085 - Implement window.{alert, prompt, confirm} removal from cross-origin iframes - chromium

bugs.chromium.org/p/chromium/issues/detail?id=1065085

Chrome security DOM news

Chrome 92でcross origin iframeからのalert/dialog/promptが無効化された。
回避方法として、Chrome 96まで有効なReverse Origin Trial、ダイアログUIを自作する方法、postMessageを使って親ドキュメントでダイアログを出す方法など。


Release Version 16.7.0 · jsdom/jsdom

github.com/jsdom/jsdom/releases/tag/16.7.0

JavaScript DOM library ReleaseNote

jsdom 16.7.0リリース。
AbortSignal.abort()のサポート、getBoundingClientRect()の返り値にxyを追加。
<textarea>の改行コードのノーマライゼーションを仕様に準拠するように変更など


アーティクル


How do Chrome extensions impact browser performance?

www.debugbear.com/blog/chrome-extension-performance-2021

browser Extension performance article

ブラウザ拡張がウェブサイトのパフォーマンスにどのように影響を与えているかについての記事。
CPU負荷、初回のレンダリングへの影響、バックグラウンでのCPU処理、、メモリ消費量。
またAdBlocker系とデータ量やメモリ消費量の削減について


WebView2 and Electron | Electron Blog

www.electronjs.org/blog/webview2

Electron windows article

ElectronとWindowsのWebView2のアーキテクチャ的な違いについて。


GraphQLクライアントにurqlをおすすめしたい

zenn.dev/adwd/articles/f4c5c5120467bb

JavaScript GraphQL article

GraphQLクライアントライブラリのurqlについて。
レスポンスをキャッシュの仕組みとキャッシュを破棄する仕組みについて


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


BlueBlazin/thislang: An implementation of a subset of javascript in that subset of javascript.

github.com/BlueBlazin/thislang

JavaScript AST language

JavaScriptでのJavaScript subsetの実装。


arcanis/clipanion: Type-safe CLI library with no runtime dependencies

github.com/arcanis/clipanion

JavaScript node.js console library TypeScript

CLI向けのコマンドライン引数パーサライブラリ。
ネストされたコマンドのサポート、typanionと連携したバリデーション、ヘルプのサポートなど。
Yarnで利用されている。


crcn/sift.js: Use Mongodb queries in JavaScript

github.com/crcn/sift.js

JavaScript library

JavaScriptのオブジェクトに対してMongoDB Queryライクな構文や演算子で検索できるライブラリ


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