Fork me on GitHub

2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest

Edit on GitHub 編集履歴を見る

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のテストについて紹介されています。

Vitestはテストを分離したWorkerなどで実行できますが、Custom Poolを使うことでテストを実行する環境を独自に定義することができます。
@cloudflare/vitest-pool-workersでは、Miniflareでテストコードを実行できるCustom Poolが実装されています。
これによって、ローカルでもCloudflre Workersのテストを実行することができるようになったという話が紹介されています。


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

JSer.info Sponsors

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


ヘッドライン


Release 5.11.0 · prisma/prisma

github.com/prisma/prisma/releases/tag/5.11.0

prisma ReleaseNote

Prisma 5.11.0リリース。
Cloudflare Workers(Vercel Edge)などのEdge functionがプレビューサポートされた。


Storybook 8

storybook.js.org/blog/storybook-8/

storybook JavaScript Design debug ReleaseNote

Storybook 8リリース。
破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了。
機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。
そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変更、reactをpeerDependenciesから除外するなど


Bun v1.0.31 | Bun Blog

bun.sh/blog/bun-v1.0.31

Bun ReleaseNote

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.com/blog/v3-11

Vue library ReleaseNote

Nuxt v3.11リリース。
ログ表示の改善、usePreviewModeの追加、appMiddlewareの追加。
サーバ専用の.server.vueとクライアント専用の.client.vueをページコンポーネントでもサポートなど


Elysia 1.0 - Lament of the Fallen | ElysiaJS

elysiajs.com/blog/elysia-10

Bun server ReleaseNote

Bun向けのHTTPサーバフレームワークのElysia 1.0リリース。
起動時間の改善、Type Checkのパフォーマンス改善、onBeforeHandleなどにasオプションを追加など


アーティクル


Server Actions時代のformライブラリconform

zenn.dev/akfm/articles/server-actions-with-conform

Next.js React article

Server Actionsに対応したフォームライブラリであるConformについて


Improved Cloudflare Workers testing via Vitest and workerd

blog.cloudflare.com/workers-vitest-integration/

cloudflare vite test article

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 test article

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 safari article

WebKitでのCSS writing-modeによる縦書きフォームのサポートについて。


スライド、動画関係


エディター付きのReact開発環境を ブラウザーだけで実装した話 - Speaker Deck

speakerdeck.com/steelydylan/edeitafu-kinoreactkai-fa-huan-jing-wo-burauzadakedeshi-zhuang-sitahua

React ServiceWorker slide

プレビュー機能付きのエディタの実装についてのスライド。
エディタ上の重たい処理をWeb Worker上に逃す方法、Service Worker内でTypeScriptのトランスパイルの実装などについて


サイト、サービス、ドキュメント


ECSS — Simple Rules for efficient CSS

ecss.info/en/

CSS document Tools

予測可能なCSSを書くためのデザインガイドとstylelintのルール


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


guidepup/virtual-screen-reader: Virtual Screen Reader is a screen reader simulator for unit tests.

github.com/guidepup/virtual-screen-reader

accessibility test library

Unit Testに利用できるスクリーンリーダのシミュレータライブラリ


MistCSS

typicode.github.io/mistcss/

CSS React Tools

CSSからReactコンポーネントを作成するツール。
CSSを書いて、そのCSSからRectコンポーネントを生成する仕組みになっている。
data属性をPropsとして扱う、@scopeでスコープを扱うなど


devongovett/unplugin-parcel-macros

github.com/devongovett/unplugin-parcel-macros

parcel plugin webpack rollup vite esbuild

Parcelのmacroと同じものをwebpack/rollup/Vite/esbuildで利用できるようにするプラグイン。
import attributesの構文を使いビルド時にマクロ的な処理を行う仕組み

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