JSer.info #553 - Next.js 11.1 がリリースされました。

Blog - Next.js 11.1 | Next.js

オープンリダイレクタの脆弱性が修正されています。
experimental.esmExternalsオプションでNode.jsのESMをサポートしています。
その他には、node-fetchのkeepAliveをデフォルトで有効化、Source Map/ESLint/next/imageの改善なども含まれています。

また、Rust製のJS/TS Compiler/BundlerであるSWCの作者であるDongYoon KangがVercelに入り、Next.jsでのコンパイルにSWCを利用できるように開発中とのことです。

Rails 7.0では、現在のwebpacker(webpack)ではなく、Import mapsを使ってJavaScriptライブラリを利用する方法をデフォルトする方針が提案されています。

Import mapsはES Modulesでimportする際に、importするモジュールの名前解決を定義するウェブ標準です。

次のようにtype="importmap"でImport mapsを定義します。

<script type="importmap">
{
  "imports": {
    "app": "./src/app.js",
    "md5": "https://cdn.skypack.dev/md5"
  }
}
</script>

このImport mapsの定義が、各モジュールでの名前解決に利用されます。

import app from "app"; // ./src/app.js をロードする
import md5 from "md5"; // https://cdn.skypack.dev/md5 をロードする

Import mapsはChrome系ブラウザのみがサポートしているため、他のブラウザではES Module Shimsを利用する必要があります。(rails/importmap-railsにはshimが同梱されています)

Rails 7では、JavaScriptのbuildやbundleをせずにCDNからライブラリを取得できる仕組みをImport mapsを使って実現して、現在のwebpackerをオプションへと変更する予定となっています。
TypeScriptやReactのようなビルドを前提とする仕組みはwebpackerを利用する必要があります。

詳しい動作については次の動画でデモが公開されています。

Alpha preview: Modern JavaScript in Rails 7 without Webpack - YouTube

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

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

August 2021 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/aug-2021-security-releases/

node.js security ReleaseNote

Node.jsのセキュリティアップデート。
それぞれ対応するNode v12.22.5 (LTS)、 Node v14.17.5 (LTS)、Node v16.6.2がリリースされている。
DNSライブラリc-aresのセキュリティ修正、http2のstreamを閉じた際のUse after freeの修正。
rejectUnauthorizedにundefinedを渡すと期限切れの証明書を受け付けていた問題の修正など

Hopping on Firefox 91 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/08/hopping-on-firefox-91/

Firefox ReleaseNote

Firefox 91リリース。
Visual Viewport API、Intl.DateTimeFormatの改善、Error Causeのサポートなど。
またGamepad APIがSecure Contextでのみ動作するようになる変更など

Blog - Next.js 11.1 | Next.js

nextjs.org/blog/next-11-1

Next.js ReleaseNote

Next.js 11.1リリース。
オープンリダイレクタの脆弱性の修正、experimentalでNode.jsのESMをサポート。
node-fetchのkeepAliveをデフォルトで有効化、Source Map/ESLint/next/imageの改善など

Announcing TypeScript 4.4 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-4-rc/

TypeScript ReleaseNote

TypeScript 4.4 RCリリース。
Control Flow Analysisの改善、Index SignaturesにSymbolやTemplate Stringを利用できるように。
Catch節のデフォルトをunknown型にするuseUnknownInCatchVariablesオプションの追加。
optionalとundefined値の区別をするexactOptionalPropertyTypesオプションの追加。
また、ES Proposal Stage 3のclass static blockをサポート。
declarationの生成やstrictモードでのビルドパフォーマンスの改善も含まれている

Release v6.0.0 · vueuse/vueuse

github.com/vueuse/vueuse/releases/tag/v6.0.0

Vue ReleaseNote library

vueuse 6.0.0リリース。
Vue 3.2のeffectScope APIに対応、createSharedComposable/toReactive/useEventBusの追加。
useStorageにonErrorコールバックの追加など

アーティクル

JavaScript Development: Making a Web Worker optional | by Tobias Uhlig | Aug, 2021 | ITNEXT

itnext.io/javascript-development-making-a-web-worker-optional-f23a13490b28

JavaScript webworker article

重たいロジックを別のWeb Workerで分けることには意味があるが、スレッドがほとんどアイドル状態の場合にWorkerを分けるとpostMessage分の遅延が発生してしまう。
Workerとして分けて実行していた処理を、同じAPIを維持しつつ同じスレッドで実行するように処理を変更するアプローチについて。
neo.mjs 2.3.4ではどのように対応したかについて。

neomjs/neo: The application worker driven frontend framework

<Lazy> rendering in Vue to improve performance | by Martin Malinda | Vue.js Developers | Aug, 2021 | Medium

medium.com/js-dojo/lazy-rendering-in-vue-to-improve-performance-dcccd445d5f

Vue article performance

Vueでの遅延レンダリングを使ったパフォーマンス改善について。
レンダリングのタイミングをずらす、Intersection Observerを使ってviewportに入るタイミングでレンダリング、無限リストの実装についてなど

Slinkity

slinkity.dev/

JavaScript Tools React Vue Svelte

静的サイトジェネレータである11tyにReact/Vue/Svelteなどのコンポーネントをimportとして利用できるようにする拡張

Modern web apps without JavaScript bundling or transpiling

world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755

rails JavaScript article

Rails 7.0でwebpacker(webpack)ではなくimport mapsベースのbundlerを使わないアプローチをデフォルトにすることを検討しているという話。

Don’t attach tooltips to document.body - Atif Afzal

atfzl.com/don-t-attach-tooltips-to-document-body

JavaScript DOM CSS performance article

document.body直下にツールチップ表示用の要素を追加すると、多くの要素のスタイル更新処理が行われパフォーマンスの問題となった話。
どのようにレイアウト計算の影響を確認したか、ツールチップを表示用の要素をラップすることでスタイル更新の影響範囲を小さくした話

CSS Grid tooling in DevTools - Chrome Developers

developer.chrome.com/blog/css-grid-tooling/

CSS Chrome debug article

Chrome DevToolsのCSS Gridのデバッグ機能と追加されたCDP(chrome devtools protocol)について。
DevToolsのGridのオーバーレイ表示を永続化、DOMの変更を即時反映、ComputedなStyleでの要素検索を実現するために、CDPに対して新しいコマンドを実装したという話。