タグ

ブックマーク / quramy.medium.com (4)

  • TypeScript 4.7 と Native Node.js ESM

    TypeScript 4.7 がリリースされたので、Node.js ESM 対応の現状をまとめておく。 @teppeis さんの TypeScript 4.5 以降で ESM 対応はどうなるのか? を先に読んでおくと、以降の話も読み進めやすいかも。 このエントリの中でも、teppeis さんの定義した用語をそのまま用いさせてもらう。 * CommonJS (CJS): 従来式の Node.js CommonJS で書かれたファイルまたはパッケージ * ES Modules (ESM): ES2015 で定義されたモジュール仕様。Node.js では v12 以降でネイティブにサポートされている。 * Native ESM: ESM 形式で記述されたファイルを、Node.js またはブラウザで直接 ESM として実行する方式またはそのファイル。擬似 ESM と区別するために Native と

  • TypeScript におけるモジュール関連オプションの整理

    TypeScript 4.7 で “module” という名前で始まる Compiler Option がさらに追加されて、さすがに何が何やら感あるので、役割を軽く整理。 この記事では雑な紹介に留めるので、それぞれの詳細は TSConfig Reference を読みに行ってください。 対応関係ソースコードとそれぞれのオプションが何に作用しているのかを雑に図示するとこんな感じ。 重要なことどのオプションをいじっても、import 指定子 (上図の “./hoge” の部分) がコンパイル時に書き換えられることはない。 これが頭に入っていれば、.mts, .cts といった TypeScript のファイルで import "./foo.cjs" と書くことや、 --moduleSuffixes がソースコードの探索にしか影響しないことに得心できるはず。 --moduleTypeScript

    TypeScript におけるモジュール関連オプションの整理
  • Puppeteer と ARIA Handler

    先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。 また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って

    Puppeteer と ARIA Handler
  • storybook-chrome-screenshotとzisuiとStorycapと

    Photo by Filiberto Santillán from unsplash.com先日、Storycap というCLIを公開しました。 Storybookの各storyをキャプチャして画像化するだけのツールです。主として、reg-suit のようなツールと組み合わせ、画像回帰テスト環境を構築することを目的としています。 使い方はとてもシンプルで、CLIの引数としてStorybookのURLを与えるだけです。 $ npx storycap https://storybookjs-next.now.sh/official-storybook 以下のように、Storybook自体の起動コマンドを渡すことも可能です。 $ npx storycap --serverCmd "start-storybook --ci -p 9009" http://localhost:9009CLIのオプシ

    storybook-chrome-screenshotとzisuiとStorycapと
  • 1