2023-07-13のJS: Prisma 5.0.0、Prettier 3.0、Convert to ESM

_i18n/ja/_posts/2023/2023-07-13-prisma-5.0.0-prettier-3.0-convert-to-esm.md

@@ -0,0 +1,236 @@
+---
+title: "2023-07-13のJS: Prisma 5.0.0、Prettier 3.0、Convert to ESM"
+author: "azu"
+layout: post
+date : 2023-07-12T21:35:17.212Z
+category: JSer
+tags:
+- node.js
+- CSS
+- Tools
+- TypeScript
+- animation
+
+---
+
+JSer.info #651 - ORMであるPrisma 5.0.0がリリースされました。
+
+- [Release 5.0.0 · prisma/prisma](https://github.com/prisma/prisma/releases/tag/5.0.0)
+
+実験的な機能だった`jsonProtocol`/`fieldReference`/`extendedWhereUnique`をStableに変更しています。
+Wire ProtocolをJSON Protocolに変更することで、Cold Startの時間が大きく改善されています。
+
+- [How We Sped Up Serverless Cold Starts with Prisma by 9x](https://www.prisma.io/blog/prisma-and-serverless-73hbgKnZ6t)
+
+破壊的な変更としてNode.js 14のサポート終了、暗黙的に配列とみなす"array shortcuts"のサポートを削除、非推奨のオプションの削除なども含まれています。
+次のページで、アップデート方法が公開されています。
+
+- [Upgrade to Prisma 5](https://www.prisma.io/docs/guides/upgrade-guides/upgrading-versions/upgrading-to-prisma-5)
+
+---
+
+Prettier 3.0がリリースされました。
+
+- [Prettier 3.0: Hello, ECMAScript Modules! · Prettier](https://prettier.io/blog/2023/07/05/3.0.0.html)
+
+Markdownで日本語/中国語 ⇔ 英語の間にスペースを入れないように変更、CJKの禁則処理に対応などの変更が含まれています。
+`trailingComma`のデフォルト値を`all`に変更や`babel`パーサーでのFlow構文のサポートを削除するといった変更も含まれています。
+その他にも内部的にESMにも対応するためにAPIの変更、プラグインで非同期パーサをサポート、設定ファイルでESMをサポートなども追加されています。
+
+----
+
+[CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか](https://efcl.info/2023/07/05/convert-to-esm/)という記事では、[Secretlint](https://github.com/secretlint/secretlint)のESM移行を例にどのようにパッケージをCommonJSからES Modulesへ移行するかについて書かれています。
+
+Node.jsではESMからCJSは読み込める互換レイヤーがあるため、依存関係の根本からトップダウンでESMへと移行することで、パッケージを少しずつ移行できることについて書かれています。
+
+この記事ではいわゆる[Pure ESM package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)(ESMのみのサポート)の方針についてでしたが、CJSとESMを両方サポートするDual Packageという手法もあります。
+
+Dual Packageの主な手法については次のIssueにまとめてあります。
+
+- https://github.com/microsoft/TypeScript/issues/49462#issuecomment-1633279027
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Node v20.4.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v20.4.0](https://nodejs.org/en/blog/release/v20.4.0 "Node v20.4.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v20.4.0リリース。
+`node:test`がTimerのMockをサポート、ECMAScript Stage 3のExplicit Resource Management(`using`)のサポートなど
+
+
+----
+
+## Bun v0.6.13 | Bun Blog
+[bun.sh/blog/bun-v0.6.13](https://bun.sh/blog/bun-v0.6.13 "Bun v0.6.13 | Bun Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bun v0.6.13リリース。
+`bun:test`がDateのmockに対応、`Buffer.toString("base64")`のパフォーマンス改善、`node:tls`と`node:net`の互換性の改善。
+`Buffer.isUtf8()`と`isAcii()`の実装、`WebSocket`クライアントのバグ修正など
+
+
+----
+
+## Prettier 3.0: Hello, ECMAScript Modules! · Prettier
+[prettier.io/blog/2023/07/05/3.0.0.html](https://prettier.io/blog/2023/07/05/3.0.0.html "Prettier 3.0: Hello, ECMAScript Modules! · Prettier")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Prettier 3.0リリース。
+Markdownで日本語/中国語と英語の間にスペースを入れないように変更、CJKの禁則処理に対応。
+プラグインで非同期パーサをサポート、設定ファイルでESMをサポート、`trailingComma`のデフォルト値を`all`に変更など
+
+
+----
+
+## Announcing typescript-eslint v6 | typescript-eslint
+[typescript-eslint.io/blog/announcing-typescript-eslint-v6/](https://typescript-eslint.io/blog/announcing-typescript-eslint-v6/ "Announcing typescript-eslint v6 | typescript-eslint")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">ESLint</span> <span class="jser-tag">ReleaseNote</span></p>
+
+typescript-eslint 6.0.0リリース。
+プリセットルールをグループに分けて、`strict-type-checked`/`stylistic`/`stylistic-type-checked`を追加、プリセットを組み合わせて設定するように変更。
+非推奨となったルールの削除、Node.js 14のサポート終了、ルールの設定変更など。
+開発者向けのAPIやASTの変更も含まれる。
+
+
+----
+
+## Boa release v0.17 - Boa
+[boajs.dev/posts/2023-07-08-boa-release-17/](https://boajs.dev/posts/2023-07-08-boa-release-17/ "Boa release v0.17 - Boa")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Rust</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Rustで書かれたJavaScriptパーサ/コンパイラーのBoa 0.17リリース。
+ECMAScript Modulesに対応、test262のダッシュボードを追加。
+定数畳み込み、Hidden Classの最適化に対応。
+`--debug-object`フラグの追加、組み込みオブジェクトラッパーの追加、Intlのサポートなど
+
+- [Boa EcmaScript conformance](https://boajs.dev/boa/test262/ "Boa EcmaScript conformance")
+
+----
+
+## Release 5.0.0 · prisma/prisma
+[github.com/prisma/prisma/releases/tag/5.0.0](https://github.com/prisma/prisma/releases/tag/5.0.0 "Release 5.0.0 · prisma/prisma")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">node.js</span> <span class="jser-tag">database</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Prisma 5.0.0リリース。
+実験的な機能だった`jsonProtocol`/`fieldReference`/`extendedWhereUnique`をStableに変更。
+Node.js 14のサポート終了、暗黙的に配列とみなす"array shortcuts"のサポートを削除、非推奨のオプションの削除など
+
+- [Upgrade to Prisma 5](https://www.prisma.io/docs/guides/upgrade-guides/upgrading-versions/upgrading-to-prisma-5 "Upgrade to Prisma 5")
+
+----
+
+## Release v6.0.0 · styled-components/styled-components
+[github.com/styled-components/styled-components/releases/tag/v6.0.0](https://github.com/styled-components/styled-components/releases/tag/v6.0.0 "Release v6.0.0 · styled-components/styled-components")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">alib</span> <span class="jser-tag">ReleaseNote</span></p>
+
+styled-components v6.0.0リリース。
+Node.js 14のサポート終了、TypeScriptでの書き直し、ベンダープレフィックスをデフォルトでは省略するように変更、stylis v4へアップデートなど
+
+- [styled-components: FAQs](https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6 "styled-components: FAQs")
+
+----
+
+## Deno 1.35: A fast and convenient way to build web servers
+[deno.com/blog/v1.35](https://deno.com/blog/v1.35 "Deno 1.35: A fast and convenient way to build web servers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Deno v1.35リリース。
+`Deno.serve()`をStableに変更、Noe.jsとの互換性改善。
+標準モジュールの`semver`の書き直し、`html`モジュールの追加、`http/user_agent`の追加など
+
+
+----
+
+## Bytecode Alliance — Welcoming Javy: A new hosted project
+[bytecodealliance.org/articles/javy-hosted-project](https://bytecodealliance.org/articles/javy-hosted-project "Bytecode Alliance — Welcoming Javy: A new hosted project")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">WebAssembly</span> <span class="jser-tag">news</span></p>
+
+Shopifyによって作成されたJavaScriptを WebAssembly(JS + QuickJS)にコンパイルするJavyがBytecode Allianceのホストプロジェクトとなった。
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Breaking Up with SVG-in-JS in 2023 | Jacob Groß | kurtextrem.de
+[kurtextrem.de/posts/svg-in-js](https://kurtextrem.de/posts/svg-in-js "Breaking Up with SVG-in-JS in 2023 | Jacob Groß | kurtextrem.de")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">SVG</span> <span class="jser-tag">article</span> <span class="jser-tag">performance</span></p>
+
+SVGをJSのbundleに含める問題とパフォーマンスについて
+
+
+----
+
+## アニメーションの実装が劇的に簡単になるFLIPテクニック
+[katashin.info/posts/flip-animation/](https://katashin.info/posts/flip-animation/ "アニメーションの実装が劇的に簡単になるFLIPテクニック")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">animation</span> <span class="jser-tag">article</span></p>
+
+FLIP(First, Last, Invert, Play)というアニメーションのテクニックについて。
+複雑な座標計算をせずにアニメーションを実装する方法。
+
+
+----
+
+## DevTools Tips: Record and replay user flows with the Recorder - Chrome Developers
+[developer.chrome.com/en/blog/devtools-tips-4/](https://developer.chrome.com/en/blog/devtools-tips-4/ "DevTools Tips: Record and replay user flows with the Recorder - Chrome Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">debug</span> <span class="jser-tag">testing</span> <span class="jser-tag">Tools</span> <span class="jser-tag">article</span></p>
+
+Chrome DevToolsのRecord and Replay機能について。
+操作を記録して再生できる。再生に対してブレークポイントを設定したり、内容を編集、拡張機能を使ってCypressなどのテストフレームワーク向けに出力したりできる。
+
+
+----
+
+## CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか | Web Scratch
+[efcl.info/2023/07/05/convert-to-esm/](https://efcl.info/2023/07/05/convert-to-esm/ "CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか | Web Scratch")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">node.js</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">CommonJS</span> <span class="jser-tag">article</span></p>
+
+Node.jsにおけるESMへの移行は、依存関係の読み込み側に影響を与えるため、ボトムアップではなくトップダウンで段階的な移行ができるという話。
+依存ツリーの作成や段階的な移行をするための境界線の見つけ方、CJSからESMをインポートする回避策などについて
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## Scroll-driven Animations
+[scroll-driven-animations.style/](https://scroll-driven-animations.style/ "Scroll-driven Animations")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">animation</span> <span class="jser-tag">document</span></p>
+
+Scroll-driven animationsのデモやユースケースについてまとめたサイト
+
+- [A case study on scroll-driven animations performance - Chrome Developers](https://developer.chrome.com/en/blog/scroll-animation-performance-case-study/ "A case study on scroll-driven animations performance - Chrome Developers")
+
+----
+
+## mdx-editor/editor: An open source rich text React component for markdown editing
+[github.com/mdx-editor/editor](https://github.com/mdx-editor/editor "mdx-editor/editor: An open source rich text React component for markdown editing")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Markdown</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+MarkdownリッチエディタのReactコンポーネント。
+
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.
+[github.com/gibbok/typescript-book](https://github.com/gibbok/typescript-book "gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">book</span> <span class="jser-tag">OpenSource</span></p>
+
+TypeScriptの入門書
+
+
+----