OSS Gate Workshop: PHP Lovers: 2024-02-12: hayato07: quill: Work log

[hayato07]

This is a work log of a "OSS Gate workshop". "OSS Gate workshop" is an activity to increase OSS developers. Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓：

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

• スライド：ワークショップの進行に使っているスライドがあります。
• チャット：OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう！
• シナリオ：ワークショップの目的・内容・進め方の詳細が書いています。
• 過去のビギナーの作業ログ：他の人の作業ログから学べることがいろいろあるはずです。

[hayato07]

https://github.com/quilljs/quill きになる

ライセンスは、BSD 3-Clause "New" or "Revised" License https://github.com/quilljs/quill/blob/main/LICENSE

[hayato07]

公式ドキュメントでインストールしてみる

1. クイックスタートはすぐできた https://github.com/quilljs/quill?tab=readme-ov-file#quickstart

2. Downloadも試す https://github.com/quilljs/quill?tab=readme-ov-file#download Github上だとこの先どうすればいいのかわからない

ドキュメントの方に、その後の使い方が書いてあった https://v2.quilljs.com/docs/installation#npm

[hayato07]

Vite(vanillaJS)を使った方法だと、どうすればいいのかわからず、立ち上げられなかった。

npm create vite@latest # quillディレクトリを作成
cd quill
npm install

# quillをインストール
npm install quill@2.0.0-rc.0

npm run dev
# error発生
[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/quill/modules/normalizeExternalHTML/normalizers/msWord.js:7:45: ERROR: Could not resolve "lodash"

[hayato07]

エラー時のコード

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'
import Quill from 'quill'

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
    <div id="editor"></div>
  </div>
`

setupCounter(document.querySelector('#counter'))

const quill = new Quill('#editor');

[hayato07]

エラーのissueを作成した。 https://github.com/quilljs/quill/issues/4003

[hayato07]

lodashをinstallすると、エラーが解消されたため、その点をissueに追記した。 https://github.com/quilljs/quill/issues/4003#issuecomment-1937998828

[hayato07]

エラーは解消されたが、表示崩れが発生していた。

[hayato07]

表示崩れについては、quillの作者の方のおかげで解消した。 CSSファイルの適用ができていなかった。 https://github.com/quilljs/quill/issues/4003#issuecomment-1938006371

[hayato07]

lodashのエラーについては、時期バージョンでは不要のため取り除くプルリクが作成されていた。

[hayato07]

対応が完了しissueがcloseされたので、他に対応できそうなissueがないか探してみる

[hayato07]

偶然、DEVELOPMENT.mdというものを見つけた。なにかわかっていないが、開発者向けのものな気がするので、調べてみる https://github.com/quilljs/quill/blob/develop/.github/DEVELOPMENT.md

[hayato07]

cloneしたものに対して、DEVELOPMENT.mdにかかれている内容を進めるとローカルにドキュメントサイトを作成できた。

[hayato07]

テストも試しに実行してみたいので、以下のモジュールを追加 npx playwright install

[hayato07]

UnitテストフレームワークとしてVitestを, E2EテストとしてPlaywrightというものを使っているらしい。 It uses Vitest for unit testing, and Playwright for E2E testing.

[hayato07]

developブランチで、ユニットテストを実行したところ、数件失敗する。

npm run test:unit -w quill

Test Files 2 failed | 29 passed (31) Tests 4 failed | 488 passed (492)

[hayato07]

E2Eについては、 84 passed (38.2s)となったので、エラーは発生しなかった。

一点きになったのが、「✓」と「✘」の２つのマークが存在していること。Playwrightを調べてみる。

✓ 81 …ext › with Enter key (789ms) ✘ 82 …ored text › with IME (814ms) ✓ 83 … › after a bold text (712ms) ✓ 84 … text › across lines (622ms)

[hayato07]

npm run test:e2e -w quill

上記を何度か実行すると、失敗することもある様子。

[hayato07]

typeWordWithIMEという関数を利用しているときにだけ、緑色の✘になっている様子。 緑色の✘がなにかはまだ不明。

(IME関係なので、日本語環境が影響している可能性も考えられるかも)

[hayato07]

npm run test:unit -w quill

unitテスト側では、以下のdeprecatedが発生していた。 Vite CJS Node API deprecated

以下のURLを元にすれば、修正可能かも。 https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

[hayato07]

vitest.config.tsのファイル名をvitest.config.mtsにするか、 一番近いpackage.jsonにtypeフィールドを追加し、値に"module"を設定すれば良い様子

[hayato07]

そもそものこの変更内容の基本的知識として、以下のサイトが参考になる。

https://zenn.dev/uhyo/articles/typescript-module-option

[hayato07]

ただし、vitest.config.tsのファイル名をvitest.config.mtsにする対応だと、__dirnameがnot definedになってしまう。 vitest.config.tsに一番近いpackage.jsonにtypeフィールドを追加し、値に"module"を設定する方法だと問題なく動作し、エラーも解消した。

[github-actions[bot]]

おつかれさまでした！

ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません :ok_hand:

ワークショップの感想を集めています！

ブログなどに書かれた際は、このページへリンクの追加をお願いします :pray:

またの参加をお待ちしています！