popcodeorg / popcodeorg/popcode

Highlight jQuery selectors that match 0 elements

オープン
#1,357 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

feature
主要言語
JavaScript
スター
191
フォーク
143
平均マージ
4日 11時間
マージ済み PR(30日)
5

説明

Related to #1355 , but probably harder.

If the user's JS code calls jQuery with a selector that doesn't match any elements on the page, there's probably a mistake in their code. Whatever they do with that jQuery collection afterwards (trying to change something or attaching a click handler) will have no effect, but jQuery won't error on it because it's perfectly valid to attach a click handler to a collection with zero elements. These kinds of bugs are hard to find, and they're frequent, because students often typo IDs or forget to prefix with a #.

We should highlight these selectors the same way as #1355 (a warning symbol in the gutter and, if feasible, a squiggly yellow/orange underline).

Capturing these might be tricky. One approach could be to use static code analysis to find code that looks like $("some string") and check whether the string is a syntactically valid selector that matches zero elements. We'd have to be careful here, because $("<div>") is not a valid CSS selector but is a valid thing to pass to jQuery. Another approach could be to detect these at run-time by monkey-patching jQuery (i.e. make the $ function a wrapper around the actual jQuery function that first checks if the input is a zero-match selector), but that could cause us to miss broken selectors in code that isn't immediately executed.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

関連する issue #1355 を確認し、提案されている静的解析とランタイム monkey-patching のアプローチを比較することから始めます。jQuery のゼロマッチセレクターに要求されたガター警告が表示され、可能であれば波線の下線も表示される一方で、$("

") のような有効な要素作成文字列をセレクターとして扱わない状態になれば、作業は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, jquery
領域
tooling
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。