|
| 1 | +--- |
| 2 | +title: "2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC" |
| 3 | +author: "azu" |
| 4 | +layout: post |
| 5 | +date: 2024-05-03T14:32:53.375Z |
| 6 | +category: JSer |
| 7 | +tags: |
| 8 | +- HTML |
| 9 | +- Bun |
| 10 | +- document |
| 11 | +- React |
| 12 | +- CSS |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +JSer.info #691 - Bun v1.1.5がリリースされました。 |
| 17 | + |
| 18 | +- [Bun v1.1.5 | Bun Blog](https://bun.sh/blog/bun-v1.1.5) |
| 19 | + |
| 20 | +`bun build --compile`がクロスコンパイルに対応し、Windows/Linux/macOSに対応したSingle Executable Binaryを出力できるようになっています。 |
| 21 | +また、`package.json`の末尾カンマを許可するようになる変更や`bun.report`が追加されています。 |
| 22 | +その他には、Import Attributesで任意ファイルをtext/json/toml/fileとしてインポートできるようになるといった変更があります。 |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +React v18.3.0がリリースされました。 |
| 27 | + |
| 28 | +- [Release 18.3.0 (April 25, 2024) · facebook/react](https://github.com/facebook/react/releases/tag/v18.3.0) |
| 29 | + |
| 30 | +[React 19 Beta](https://react.dev/blog/2024/04/25/react-19)もリリースされていますが、React 19では一部APIの変更が予定されています。 |
| 31 | +React 18.3.0では、React 19での変更予定の機能に対してDeprecatedの警告を出す実装が追加されています。 |
| 32 | +React 19での変更予定については、アップグレードガイドが公開されています。 |
| 33 | + |
| 34 | +- [React 19 Beta Upgrade Guide – React](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) |
| 35 | + |
| 36 | +--- |
| 37 | + |
| 38 | +Svelte v5 RCがリリースされました。 |
| 39 | + |
| 40 | +- [Svelte 5 Release Candidate](https://svelte.dev/blog/svelte-5-release-candidate) |
| 41 | +- [Breaking changes • Docs • Svelte 5 preview](https://svelte-5-preview.vercel.app/docs/breaking-changes) |
| 42 | + |
| 43 | +Svelte 5では[runes](https://svelte.dev/blog/runes)の追加、Snippetsの追加、`.svelte`でTypeScriptをネイティブサポート、イベントハンドラーの記述方法の変更などが行われています。 |
| 44 | + |
| 45 | + |
| 46 | +---- |
| 47 | + |
| 48 | +{% include inline-support.html %} |
| 49 | + |
| 50 | +---- |
| 51 | + |
| 52 | +<h1 class="site-genre">ヘッドライン</h1> |
| 53 | + |
| 54 | +---- |
| 55 | + |
| 56 | +## Bun v1.1.6 | Bun Blog |
| 57 | +[bun.sh/blog/bun-v1.1.6](https://bun.sh/blog/bun-v1.1.6 "Bun v1.1.6 | Bun Blog") |
| 58 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p> |
| 59 | + |
| 60 | +Bun v1.1.6リリース。 |
| 61 | +UDP Socketsのサポート、`node:dgram`をサポート、`dd-trace`や`@clickhouse/client`などが動作するようにバグ修正など |
| 62 | + |
| 63 | + |
| 64 | +---- |
| 65 | + |
| 66 | +## Announcement of Release - Module federation |
| 67 | +[module-federation.io/blog/announcement.html](https://module-federation.io/blog/announcement.html "Announcement of Release - Module federation") |
| 68 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">webpack</span> <span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span></p> |
| 69 | + |
| 70 | +Module Federation 2.0リリース。 |
| 71 | + |
| 72 | + |
| 73 | +---- |
| 74 | + |
| 75 | +## Bun v1.1.5 | Bun Blog |
| 76 | +[bun.sh/blog/bun-v1.1.5](https://bun.sh/blog/bun-v1.1.5 "Bun v1.1.5 | Bun Blog") |
| 77 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p> |
| 78 | + |
| 79 | +Bun v1.1.5リリース。 |
| 80 | +`bun build --compile`がクロスコンパイルに対応、`package.json`の末尾カンマを許可するように、`bun.report`の追加。 |
| 81 | +Import Attributesで任意ファイルをtext/json/toml/fileとしてインポートできるようになるなど |
| 82 | + |
| 83 | + |
| 84 | +---- |
| 85 | + |
| 86 | +## Node.js — Node v22.1.0 (Current) |
| 87 | +[nodejs.org/en/blog/release/v22.1.0](https://nodejs.org/en/blog/release/v22.1.0 "Node.js — Node v22.1.0 (Current)") |
| 88 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p> |
| 89 | + |
| 90 | +Node.js v22.1.0リリース。 |
| 91 | +V8コンパイルキャッシュの保存場所を指定する`NODE_COMPILE_CACHE`環境変数を追加、Test Runnerに`--test-skip-pattern`フラグの追加など |
| 92 | + |
| 93 | + |
| 94 | +---- |
| 95 | + |
| 96 | +## remix/CHANGELOG.md at main · remix-run/remix |
| 97 | +[github.com/remix-run/remix/blob/main/CHANGELOG.md#v290](https://github.com/remix-run/remix/blob/main/CHANGELOG.md#v290 "remix/CHANGELOG.md at main · remix-run/remix") |
| 98 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Remix</span> <span class="jser-tag">ReleaseNote</span></p> |
| 99 | + |
| 100 | +Remix 2.9.0リリース。 |
| 101 | +`future.unstable_singleFetch`フラグで利用できるSingle Fetchの実装。 |
| 102 | +Fetch API/`undici`を使う`installGlobals({ nativeFetch: true })`の追加など |
| 103 | + |
| 104 | +- [🗺️ Single Data Fetch · remix-run/remix · Discussion #7640](https://github.com/remix-run/remix/discussions/7640 "🗺️ Single Data Fetch · remix-run/remix · Discussion #7640") |
| 105 | +- [Remix v2.9 で導入された Single Fetch](https://azukiazusa.dev/blog/single-fetch-in-remix/ "Remix v2.9 で導入された Single Fetch") |
| 106 | + |
| 107 | +---- |
| 108 | + |
| 109 | +## May 1, 2024 Release – React Spectrum Releases |
| 110 | +[react-spectrum.adobe.com/releases/2024-05-01.html](https://react-spectrum.adobe.com/releases/2024-05-01.html "May 1, 2024 Release – React Spectrum Releases") |
| 111 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 112 | + |
| 113 | +React Aria Components May 1, 2024リリース。 |
| 114 | +Submenu, unavailable menu items, DropZone, FileTriggerを正式サポート。 |
| 115 | +Color Componentの追加、TreeViewをαリリース、`RouterProvider`の追加など |
| 116 | + |
| 117 | + |
| 118 | +---- |
| 119 | + |
| 120 | +## Release 18.3.0 (April 25, 2024) · facebook/react |
| 121 | +[github.com/facebook/react/releases/tag/v18.3.0](https://github.com/facebook/react/releases/tag/v18.3.0 "Release 18.3.0 (April 25, 2024) · facebook/react") |
| 122 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p> |
| 123 | + |
| 124 | +React v18.3.0リリース。 |
| 125 | +React 19での変更予定の機能に対してDeprecatedの警告を出す実装が追加されている。 |
| 126 | + |
| 127 | +- [React 19 Beta Upgrade Guide – React](https://react.dev/blog/2024/04/25/react-19-upgrade-guide "React 19 Beta Upgrade Guide – React") |
| 128 | + |
| 129 | +---- |
| 130 | + |
| 131 | +## Svelte 5 Release Candidate |
| 132 | +[svelte.dev/blog/svelte-5-release-candidate](https://svelte.dev/blog/svelte-5-release-candidate "Svelte 5 Release Candidate") |
| 133 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">ReleaseNote</span></p> |
| 134 | + |
| 135 | +Svelte 5 RCリリース。 |
| 136 | +runesの追加、Snippetsの追加、イベントハンドラーの記述方法の変更など。 |
| 137 | + |
| 138 | +- [Breaking changes • Docs • Svelte 5 preview](https://svelte-5-preview.vercel.app/docs/breaking-changes "Breaking changes • Docs • Svelte 5 preview") |
| 139 | + |
| 140 | +---- |
| 141 | +<h1 class="site-genre">アーティクル</h1> |
| 142 | + |
| 143 | +---- |
| 144 | + |
| 145 | +## MoonBit adds JS backend, up to 25x faster than native JS | MoonBit |
| 146 | +[www.moonbitlang.com/blog/js-support](https://www.moonbitlang.com/blog/js-support "MoonBit adds JS backend, up to 25x faster than native JS | MoonBit") |
| 147 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> |
| 148 | + |
| 149 | +Rustライクな構文でWebAssemblyへ出力できる言語/ツールキットであるMoonBitが、JavaScriptへの出力をサポート。 |
| 150 | +Iteratorのコストが減るような変換や文字列をUnicode Code Pointとして整数値で持つなどの工夫をしている |
| 151 | + |
| 152 | + |
| 153 | +---- |
| 154 | + |
| 155 | +## Design System Generations. How to discuss and describe a design… | by Nathan Curtis | Medium |
| 156 | +[medium.com/@nathanacurtis/design-system-generations-65f99960dc3d](https://medium.com/@nathanacurtis/design-system-generations-65f99960dc3d "Design System Generations. How to discuss and describe a design… | by Nathan Curtis | Medium") |
| 157 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Design</span> <span class="jser-tag">article</span> <span class="jser-tag">opinion</span></p> |
| 158 | + |
| 159 | +デザインシステムについての連載。 |
| 160 | +デザインシステムとは何か、どのように実践するか、どのようにスケールするかについて |
| 161 | + |
| 162 | + |
| 163 | +---- |
| 164 | + |
| 165 | +## Popover API lands in Baseline | Blog | web.dev |
| 166 | +[web.dev/blog/popover-api?hl=en](https://web.dev/blog/popover-api?hl=en "Popover API lands in Baseline | Blog | web.dev") |
| 167 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> |
| 168 | + |
| 169 | +Popover APIについての紹介記事。 |
| 170 | +`popover`属性と`popovertarget`属性を使ったPopover APIの使い方について。 |
| 171 | +`<dialog>`要素と`popover`属性の違いについて |
| 172 | + |
| 173 | + |
| 174 | +---- |
| 175 | + |
| 176 | +## Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine |
| 177 | +[www.smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/](https://www.smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/ "Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine") |
| 178 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> |
| 179 | + |
| 180 | +`<select>`と`:has()`を組み合わせて、選択した値によってスタイルを変化させる方法について |
| 181 | + |
| 182 | + |
| 183 | +---- |
| 184 | +<h1 class="site-genre">サイト、サービス、ドキュメント</h1> |
| 185 | + |
| 186 | +---- |
| 187 | + |
| 188 | +## ARIA Authoring Practices Guide | APG | WAI | W3C |
| 189 | +[www.w3.org/WAI/ARIA/apg/](https://www.w3.org/WAI/ARIA/apg/ "ARIA Authoring Practices Guide | APG | WAI | W3C") |
| 190 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">WAI-ARIA</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">document</span></p> |
| 191 | + |
| 192 | +WAI-ARIAを使ったデザインパターン、ランドマークの使い方、名前の付け方について紹介しているドキュメント |
| 193 | + |
| 194 | + |
| 195 | +---- |
| 196 | + |
| 197 | +## Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン |
| 198 | +[dxcriteria.cto-a.org/frontend](https://dxcriteria.cto-a.org/frontend "Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン") |
| 199 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">document</span></p> |
| 200 | + |
| 201 | +Webフロントエンド版DX Criteria |
| 202 | + |
| 203 | +- [日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開 | 一般社団法人日本CTO協会のプレスリリース](https://prtimes.jp/main/html/rd/p/000000024.000081310.html "日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開 | 一般社団法人日本CTO協会のプレスリリース") |
| 204 | + |
| 205 | +---- |
| 206 | +<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> |
| 207 | + |
| 208 | +---- |
| 209 | + |
| 210 | +## jacob-ebey/turbo-stream: A streaming data transport format that aims to support built-in features such as Promises, Dates, RegExps, Maps, Sets and more. |
| 211 | +[github.com/jacob-ebey/turbo-stream](https://github.com/jacob-ebey/turbo-stream "jacob-ebey/turbo-stream: A streaming data transport format that aims to support built-in features such as Promises, Dates, RegExps, Maps, Sets and more.") |
| 212 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> |
| 213 | + |
| 214 | +PromiseやDateなどをシリアライズしてWeb Streamとして送受信するためのecode/decodeライブラリ |
| 215 | + |
| 216 | + |
| 217 | +---- |
| 218 | +<h1 class="site-genre">書籍関係</h1> |
| 219 | + |
| 220 | +---- |
| 221 | + |
| 222 | +## The Front End Developer/Engineer Handbook 2024 |
| 223 | +[frontendmasters.com/guides/front-end-handbook/2024/](https://frontendmasters.com/guides/front-end-handbook/2024/ "The Front End Developer/Engineer Handbook 2024") |
| 224 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">CSS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">book</span></p> |
| 225 | + |
| 226 | +The Front End Developer/Engineer Handbookの2024年版 |
| 227 | + |
| 228 | + |
| 229 | +---- |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments