Storybook 9
Storybook’s superpower is showing every possible state of your UI in one place, from a basic button to an obscure page. That makes it the perfect foundation for automated testing. With Storybook 9, we partnered with the latest generation of testing tools to build the ultimate component testing tool. Vitest ships the fastest test runner available. Playwright delivers unmatched browser fidelity. And
「実装例から見る React のテストの書き方」をアップデートする
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
Lerna 5.1 — New website, new guides, new Lerna example repo, distributed caching support and speed!
Almost exactly a month ago we (Nrwl & the Nx team) took over stewardship of Lerna. It has been a wild ride since then 🤯. We.. made ourselves familiar with the codebase, improved local development and releases for testing with Verdaccio, started setting up e2e tests and tons of more improvements to the development processreleased Lerna 5.0 a couple of weeks later, with some important deprecated pa
2021 JavaScript Rising Stars
Welcome to the 6th edition of the JavaScript Rising Stars, our annual round-up of the JavaScript landscape. If you took a break to escape the JavaScript fatigue in 2021, you are in the right place! We'll be talking about meta frameworks, the need for speed and all-stars are joining forces at tech companies. But first, we have a new "champion" this year, that no one expected, and it's a command lin
Comparing the New Generation of Build Tools | CSS-Tricks
A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app. These new tools aren’t designed to perform the exact same function, and each has different things they’re trying to achieve and features to get there. Despite their di
JSエコシステムぶらり探訪(目次) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 webpackとかbabelとか、JSのすごいエコシステムを基本 (ブラウザ、Node.js, npm) から順番に調べていきます。 経緯 最近は npx create-react-app ... とやるといい感じに環境ができていいのですが、複雑なことをやろうとしたり、既に複雑になってしまったものを触るにはきちんと中身がわかってたほうがいいな……と思い始めたのでぼちぼち自分で調べ始めました。アウトプットしながら調べたほうが効率がいいので、このように記事として残します。 目次 (予定) とりあえず思いつくだけ書き出したもので、全ての
Mocha v7のmocha.optsから.mocharc.{json,js,yml,yaml}にマイグレーションするスクリプト
Mochaではv7からtest/mocha.optsの設定ファイルが非推奨となっています。 mocha.optsファイルはCLIの引数をそのまま書ける設定ファイルです。 mocha.optsファイルを利用すると次のようなDeprecation Warningが表示されるはずです。 (node:64389) DeprecationWarning: Configuration via mocha.opts is DEPRECATED and will be removed from a future version of Mocha. Use RC files or package.json instead. Mocha v6からmocha.optsの代わりに.mocharc.jsonなどの設定ファイルがサポートされました。 .mocharc.{json,js,yml,yaml,cjs}など色
Why JavaScript Tooling Sucks
Home Ideas Writing & Speaking Book Tactics, Strategy, Principles About Bio, Talks, Photos Subscribe RSS, Newsletter, Mixtape JavaScript Tooling is just too hard to use, and it’s not your fault. If you clicked on this title ready to agree, you are part of the problem. Don’t worry, so am I. I work on JavaScript Tooling and I think my tools can be a lot better. ”Let he who is without sin” and all tha
Using Lighthouse to improve page load performance | Blog | Chrome for Developers
Lighthouse is an automated tool for improving the quality of your site. You give it a URL, and it provides a list of recommendations on how to improve page performance, make pages more accessible, adhere to best practices and more. You can run it from within Chrome DevTools, as a Chrome Extension, or even as a Node module, which is useful for continuous integration. For a while now, Lighthouse has
How to use Parcel to bundle your React.js application
By Michael Ozoemena What’s Parcel? Parcel is a web application bundler which offers a blazingly fast performance utilizing multicore processing and requires zero configuration. So like Webpack? Yes, like Webpack, but lighter and with no configuration required. What this article offers. In this article, I’ll show you how you can make use of Parcel to bundle your basic React.js app built with JavaSc
Bankai, the friendly web compiler
The Web Platform is doing amazing! We have a multi-language, standardized Virtual Machine with a graphical layer running on virtually every device. If you want to share your things with an audience, there’s nothing with a wider reach! However, building the Web is by no means simple. There’s a lot that’s possible, which means there’s a lot to learn. But that shouldn’t prevent it from being easy to
Codemods: A Quick and Easy Way to Automate Code Refactoring — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways Codemods, developed by Facebook, offer a powerful solution for automating large-scale refactoring tasks, enabling developers to efficiently update codebases to align with new JavaScript standards
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
Transform your codebase using codemods | _Nec
Unpopular Metrics about JS Bundlers