popcodeorg / popcodeorg/popcode

Highlight jQuery selectors that match 0 elements

Open
#1,357 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
JavaScript
Stars
191
Forks
143
Avg merge
4d 11h
Merged PRs (30d)
5

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing related issue #1355 and comparing the proposed static-analysis and runtime monkey-patching approaches. The work is done when zero-match jQuery selectors receive the requested gutter warning and, if feasible, a squiggly underline without treating valid element-creation strings such as $("

") as selectors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.