JSer.info #685 - Storybook 8.0がリリースされました。
破壊的な変更として、storiesOf
APIの削除、*.stories.mdx
の削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。
詳細はマイグレーションガイドを参照してください。
機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。
そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgen
がデフォルトとなるように変更、react
をpeerDependenciesから除外するなどの変更が行われています。
Nuxt 3.11がリリースされました。
ログ表示の改善、usePreviewMode
の追加、appMiddleware
の追加が行われています。
また、サーバ専用の.server.vue
とクライアント専用の.client.vue
というファイル名による定義がページコンポーネントでもサポートされています。
次の記事では、Vitestを使ったCloudflare Workersのテストについて紹介されています。
- Improved Cloudflare Workers testing via Vitest and workerd
- Vitest integration · Cloudflare Workers docs
Vitestはテストを分離したWorkerなどで実行できますが、Custom Poolを使うことでテストを実行する環境を独自に定義することができます。
@cloudflare/vitest-pool-workersでは、Miniflareでテストコードを実行できるCustom Poolが実装されています。
これによって、ローカルでもCloudflre Workersのテストを実行することができるようになったという話が紹介されています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release 5.11.0 · prisma/prisma
github.com/prisma/prisma/releases/tag/5.11.0
Prisma 5.11.0リリース。
Cloudflare Workers(Vercel Edge)などのEdge functionがプレビューサポートされた。
Storybook 8
storybook.js.org/blog/storybook-8/
Storybook 8リリース。
破壊的な変更として、storiesOf
APIの削除、*.stories.mdx
の削除、StoryShots addonの削除、Yarn v1のサポート終了。
機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。
そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgen
がデフォルトとなるように変更、react
をpeerDependenciesから除外するなど
- Storybook: UI component explorer for frontend developers
- storybook/MIGRATION.md at next · storybookjs/storybook
Bun v1.0.31 | Bun Blog
Bun v1.0.31リリース。
bun --print
の追加、Stdinからコードを実行できるように、bun add --trust <pkg>
の追加、bun pm trust
/bun pm untrusted
の追加。
fetch()
にunix
オプションを追加しUnix Socketsをサポート。
Node.js 21.7.0で追加されたutil.styleText
のサポートなど
Nuxt 3.11 · Nuxt Blog
Nuxt v3.11リリース。
ログ表示の改善、usePreviewMode
の追加、appMiddleware
の追加。
サーバ専用の.server.vue
とクライアント専用の.client.vue
をページコンポーネントでもサポートなど
Elysia 1.0 - Lament of the Fallen | ElysiaJS
Bun向けのHTTPサーバフレームワークのElysia 1.0リリース。
起動時間の改善、Type Checkのパフォーマンス改善、onBeforeHandle
などにas
オプションを追加など
アーティクル
Server Actions時代のformライブラリconform
zenn.dev/akfm/articles/server-actions-with-conform
Server Actionsに対応したフォームライブラリであるConformについて
Improved Cloudflare Workers testing via Vitest and workerd
blog.cloudflare.com/workers-vitest-integration/
VitestでCloudflare Workersのテストを行う方法について。
@cloudflare/vitest-pool-workers
を使うことで、Workerに対するUnit Testができる仕組みについて。
VitestのCustom Poolを使うことで、テストをworkerdのプロセス内で実行している。
Best Practices for Writing Tests with React Testing Library | ClarityDev blog
claritydev.net/blog/improving-react-testing-library-tests
React Testing LibraryでのReactコンポーネントのテストについて。
コンポーネントをRoleでselectする方法やデバッグ方法、userEvent
、"not wrapped in act(...)"の警告についてなど
Implementing Vertical Form Controls | WebKit
www.webkit.org/blog/15190/implementing-vertical-form-controls/
WebKitでのCSS writing-mode
による縦書きフォームのサポートについて。
スライド、動画関係
エディター付きのReact開発環境を ブラウザーだけで実装した話 - Speaker Deck
speakerdeck.com/steelydylan/edeitafu-kinoreactkai-fa-huan-jing-wo-burauzadakedeshi-zhuang-sitahua
プレビュー機能付きのエディタの実装についてのスライド。
エディタ上の重たい処理をWeb Worker上に逃す方法、Service Worker内でTypeScriptのトランスパイルの実装などについて
サイト、サービス、ドキュメント
ECSS — Simple Rules for efficient CSS
予測可能なCSSを書くためのデザインガイドとstylelintのルール
ソフトウェア、ツール、ライブラリ関係
guidepup/virtual-screen-reader: Virtual Screen Reader is a screen reader simulator for unit tests.
github.com/guidepup/virtual-screen-reader
Unit Testに利用できるスクリーンリーダのシミュレータライブラリ
MistCSS
CSSからReactコンポーネントを作成するツール。
CSSを書いて、そのCSSからRectコンポーネントを生成する仕組みになっている。
data属性をPropsとして扱う、@scope
でスコープを扱うなど
devongovett/unplugin-parcel-macros
github.com/devongovett/unplugin-parcel-macros
Parcelのmacroと同じものをwebpack/rollup/Vite/esbuildで利用できるようにするプラグイン。
import attributesの構文を使いビルド時にマクロ的な処理を行う仕組み