Skip to content

tsx: JSX elements render mostly unhighlighted #22

Description

@danilrwx

JSX in .tsx diffs comes out inconsistently coloured: intrinsic elements (<section>, <ul>, <li>) and their punctuation stay at the default foreground, attribute names get the generic property colour, and capitalized components (<For>) pick up a colour only by accident (captured as a type identifier). Example that renders badly:

return (
  <section class="devices">
    <input placeholder="filter..." onInput={(e) => setFilter(e.currentTarget.value)} />
    <ul>
      <For each={shown()}>{(d) => <li data-status={d.status}>{d.uuid}</li>}</For>
    </ul>
  </section>
);

Why

Both .ts and .tsx parse with the tsx grammar (src/background.ts:24), but highlights for both come from typescript.scm (src/background.ts:178), and that query file carries zero JSX capturesgrep -r jsx assets/queries/ finds nothing. The parse tree has proper jsx_element / jsx_attribute / jsx_opening_element nodes; we just never capture them.

Fix direction

scripts/fetch-queries.sh pins upstream query revisions — the upstream tree-sitter-typescript / nvim-treesitter query sets ship a JSX layer (jsx.scm / ecma queries with @tag, @tag.attribute, @tag.delimiter captures). Append that layer to the fetched typescript queries (or fetch a dedicated tsx.scm) and map the tag* captures to theme colours like the html grammar already does.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions