Subject: bug#59904: 29.0.60; js-ts-mode does not fontify method-call to object-instances using font-lock-function-name

From: Jostein Kjønigsen <[email-masked]>
Date: Thu, 8 Dec 2022 15:46:13 +0100

Looking into the code, a minimal code-repro looks like this:

someObject.someMethod();

Activating treesit-explore-mode on that, yields the following tree:

(expression_statement
  (call_expression
   function: (member_expression object: (identifier) . property: 
(property_identifier))
   arguments: (arguments ( )))
  ;)

Now looking in js.el I see the following which looks like it's trying to 
fontify this, but for some reason it's not working:

      (call_expression
       function: [(identifier) @font-lock-function-name-face
                  (member_expression
                   property:
                   (property_identifier) @font-lock-function-name-face)])

I'm guessing this fontification is being overridden further down (just 
like for csharp-ts-mode). From what I can tell, reversing the order of 
declarations seems to fix this for me.

See attached path.

--
Jostein

On 08.12.2022 14:56, Jostein Kjønigsen wrote:
>
> As the title says, using js-ts-mode method-names are not fontified 
> properly.
>
> myFunction();
> myObject.myMethod();
>
> In the above examples myFunction is fontified using 
> font-lock-function-name (expected) bit myMethod() is fontified using 
> font-lock-property-face (not expected).
>
> I would expect both calls to use font-lock-function-name for 
> fontification.
>
> --
> Jostein
>
> In GNU Emacs 29.0.60 (build 1, x86_64-pc-linux-gnu, GTK+ Version
>  3.24.33, cairo version 1.16.0) of 2022-12-08 built on dev-jostein
> Repository revision: 8fb2afe051168b2eac2bba0ee102039d0af90a05
> Repository branch: emacs-29
> Windowing system distributor 'The X.Org Foundation', version 11.0.12201001
> System Description: Ubuntu 22.04.1 LTS
>
> Configured using:
>  'configure --with-tree-sitter'
>
> Configured features:
> ACL CAIRO DBUS FREETYPE GIF GLIB GMP GNUTLS GPM GSETTINGS HARFBUZZ JPEG
> LCMS2 LIBOTF LIBSELINUX LIBSYSTEMD LIBXML2 M17N_FLT MODULES NOTIFY
> INOTIFY PDUMPER PNG RSVG SECCOMP SOUND THREADS TIFF TOOLKIT_SCROLL_BARS
> TREE_SITTER X11 XDBE XIM XINPUT2 XPM GTK3 ZLIB
>
> Important settings:
>   value of $LC_MONETARY: nb_NO.UTF-8
>   value of $LC_NUMERIC: nb_NO.UTF-8
>   value of $LC_TIME: nb_NO.UTF-8
>   value of $LANG: en_US.UTF-8
>   locale-coding-system: utf-8-unix
>
> Major mode: JavaScript
>
> Minor modes in effect:
>   lsp-diagnostics-mode: t
>   lsp-headerline-breadcrumb-mode: t
>   lsp-modeline-workspace-status-mode: t
>   lsp-modeline-diagnostics-mode: t
>   lsp-modeline-code-actions-mode: t
>   electric-pair-mode: t
>   lsp-completion-mode: t
>   editorconfig-mode: t
>   treesit-explore-mode: t
>   flycheck-mode: t
>   which-function-mode: t
>   nlinum-mode: t
>   company-mode: t
>   global-ede-mode: t
>   ede-minor-mode: t
>   dap-tooltip-mode: t
>   dap-ui-many-windows-mode: t
>   dap-ui-controls-mode: t
>   dap-ui-mode: t
>   treemacs-filewatch-mode: t
>   treemacs-follow-mode: t
>   treemacs-git-mode: t
>   treemacs-fringe-indicator-mode: t
>   dap-auto-configure-mode: t
>   dap-mode: t
>   global-undo-tree-mode: t
>   undo-tree-mode: t
>   doom-modeline-mode: t
>   projectile-mode: t
>   ido-yes-or-no-mode: t
>   helm-mode: t
>   helm-minibuffer-history-mode: t
>   shell-dirtrack-mode: t
>   helm--remap-mouse-mode: t
>   async-bytecomp-package-mode: t
>   delete-selection-mode: t
>   global-auto-revert-mode: t
>   server-mode: t
>   global-hl-line-mode: t
>   lsp-managed-mode: t
>   lsp-mode: t
>   yas-global-mode: t
>   yas-minor-mode: t
>   tooltip-mode: t
>   global-eldoc-mode: t
>   eldoc-mode: t
>   show-paren-mode: t
>   electric-indent-mode: t
>   mouse-wheel-mode: t
>   menu-bar-mode: t
>   file-name-shadow-mode: t
>   global-font-lock-mode: t
>   font-lock-mode: t
>   blink-cursor-mode: t
>   column-number-mode: t
>   line-number-mode: t
>   auto-fill-function: yas--auto-fill
>   transient-mark-mode: t
>   auto-composition-mode: t
>   auto-encryption-mode: t
>   auto-compression-mode: t
>
> Load-path shadows:
> /home/jostein/.emacs.d/elpa/transient-20221202.1727/transient hides 
> /home/jostein/build/emacs/lisp/transient
>
> Features:
> (shadow sort flyspell ispell emacsbug message yank-media rfc822 mml
> mml-sec epa derived mm-decode mm-bodies mm-encode mail-parse rfc2231
> mailabbrev gmm-utils mailheader sendmail rfc2047 rfc2045 ietf-drums
> mail-extr helm-command helm-elisp helm-eval typescript-ts-mode
> lsp-diagnostics lsp-headerline lsp-icons lsp-modeline view elec-pair js
> cc-mode cc-fonts cc-guess cc-menus cc-cmds cc-styles cc-align cc-engine
> cc-vars cc-defs executable misearch multi-isearch vc-git diff-mode
> vc-dispatcher winner ffap disp-table tramp-archive tramp-gvfs
> tramp-cache warnings time-stamp zeroconf dbus helm-bookmark helm-net
> helm-adaptive helm-info treemacs-bookmarks treemacs-tags bookmark
> face-remap add-log lsp-zig lsp-steep lsp-svelte lsp-sqls
> lsp-ruby-syntax-tree lsp-yaml lsp-xml lsp-vimscript lsp-vhdl lsp-volar
> lsp-vetur lsp-html lsp-verilog lsp-vala lsp-v lsp-typeprof lsp-ttcn3
> lsp-toml lsp-terraform lsp-tex lsp-sorbet lsp-solargraph lsp-rust lsp-rf
> lsp-remark lsp-racket lsp-r lsp-purescript lsp-pylsp lsp-pyls lsp-php
> lsp-pls lsp-perlnavigator lsp-perl lsp-openscad lsp-ocaml lsp-magik
> lsp-nix lsp-nim lsp-nginx lsp-mint lsp-marksman lsp-markdown lsp-lua
> lsp-kotlin lsp-json lsp-javascript lsp-idris lsp-haxe lsp-groovy
> lsp-hack lsp-graphql lsp-gleam lsp-go lsp-completion lsp-gdscript
> lsp-fsharp lsp-fortran lsp-eslint lsp-erlang lsp-emmet lsp-elixir
> lsp-elm lsp-dockerfile lsp-dhall lsp-d lsp-css lsp-csharp gnutls
> lsp-crystal lsp-cmake lsp-clojure lsp-semantic-tokens lsp-clangd
> lsp-beancount lsp-bash lsp-astro lsp-ansible lsp-angular lsp-ada
> lsp-actionscript ido-completing-read+ memoize minibuf-eldef
> elisp-slime-nav paredit editorconfig editorconfig-core
> editorconfig-core-handle editorconfig-fnmatch realgud realgud-zshdb
> realgud:zshdb-track-mode realgud:zshdb-core realgud:zshdb-init
> realgud-trepan3k realgud:trepan3k-track-mode realgud:trepan3k-core
> realgud:trepan3k-init realgud-trepan2 realgud:trepan2-track-mode
> realgud:trepan2-core realgud:trepan2-init realgud-trepanpl
> realgud:trepanpl-track-mode realgud:trepanpl-core realgud:trepanpl-init
> realgud-trepanjs realgud:trepanjs-track-mode realgud:trepanjs-core
> realgud:trepanjs-init realgud-lang-js realgud-trepan
> realgud:trepan-track-mode realgud:trepan-core realgud:trepan-init
> realgud-remake realgud:remake-track-mode realgud:remake-core
> realgud:remake-init realgud-rdebug realgud-rdebug-track-mode
> realgud-rdebug-core realgud-rdebug-init realgud-lang-ruby realgud-perldb
> realgud:perldb-track-mode realgud:perldb-core realgud:perldb-init
> realgud-lang-perl realgud-pdb realgud:pdb-track-mode realgud:pdb-core
> realgud:pdb-init realgud-lang-python python treesit realgud-kshdb
> realgud:kshdb-track-mode realgud:kshdb-core realgud:kshdb-init
> realgud-gub realgud:gub-track-mode realgud:gub-core realgud:gub-init
> realgud-gdb realgud:gdb-track-mode realgud:gdb-init realgud:gdb-core
> realgud-bashdb realgud:bashdb-track-mode realgud:bashdb-core
> realgud:bashdb-init realgud-lang-posix-shell realgud:run
> realgud-locals-mode realgud-breakpoint-mode realgud-backtrack-mode
> realgud-track-mode realgud-backtrace-mode realgud-attach
> realgud-lang-java realgud-track realgud-shortkey realgud-menu
> realgud-eval realgud-cmds realgud-send realgud-window realgud-utils
> eshell realgud-init realgud-file realgud-core realgud-reset
> realgud-buffer-helper realgud-buffer-breakpoint realgud-buffer-backtrace
> realgud-locals realgud-buffer-locals realgud-buffer-command
> realgud-buffer-info realgud-lochist realgud-bp realgud-bp-image-data
> realgud-lang esh-mode esh-cmd esh-ext esh-opt esh-proc esh-io esh-arg
> esh-module esh-groups esh-util cus-start realgud-loc
> realgud-buffer-source realgud-key key realgud-follow realgud-fringe
> realgud-helper loc-changes realgud-regexp realgud-custom load-relative
> flycheck highlight-symbol which-func edebug debug backtrace nlinum linum
> company-oddmuse company-keywords company-etags etags fileloop generator
> company-gtags company-dabbrev-code company-dabbrev company-files
> company-clang company-capf company-cmake company-semantic
> company-template company-bbdb company-web-html company-web company-css
> web-completion-data company eww url-queue shr pixel-fill kinsoku
> url-file svg mm-url gnus nnheader gnus-util mail-utils range mm-util
> mail-prsvr ede/speedbar ede/files ede ede/detect ede/base ede/auto
> ede/source eieio-base eieio-speedbar speedbar ezimage dframe
> eieio-custom cedet dap-mouse dap-ui lsp-treemacs lsp-treemacs-generic
> lsp-treemacs-themes treemacs-treelib treemacs treemacs-header-line
> treemacs-compatibility treemacs-mode treemacs-interface
> treemacs-persistence treemacs-filewatch-mode treemacs-follow-mode
> treemacs-rendering treemacs-annotations treemacs-async
> treemacs-workspaces treemacs-dom treemacs-visuals
> treemacs-fringe-indicator treemacs-scope pulse treemacs-faces
> treemacs-icons treemacs-themes treemacs-core-utils pfuture
> treemacs-logging treemacs-customization treemacs-macros gdb-mi bindat
> gud bui bui-list bui-info bui-entry bui-core bui-history bui-button
> bui-utils lsp-lens dap-gdb-lldb dap-netcore dap-node dap-utils dom xml
> dap-pwsh lsp-pwsh dap-python dap-mode dap-tasks dap-launch lsp-docker
> yaml posframe dap-overlays undo-tree diff queue doom-modeline
> doom-modeline-segments doom-modeline-env doom-modeline-core shrink-path
> compat compat-macs projectile lisp-mnt grep ibuf-ext ibuffer
> ibuffer-loaddefs helm-imenu ob-plantuml org ob ob-tangle ob-ref ob-lob
> ob-table ob-exp org-macro org-src ob-comint org-pcomplete org-list
> org-footnote org-faces org-entities ob-emacs-lisp ob-core ob-eval
> org-cycle org-table ol org-fold org-fold-core org-keys oc org-loaddefs
> find-func cal-menu calendar cal-loaddefs org-version org-compat org-macs
> ido-yes-or-no advice ido helm-mode helm-misc helm-files image-dired
> image-dired-tags image-dired-external image-dired-util xdg image-mode
> dired dired-loaddefs exif tramp tramp-loaddefs trampver
> tramp-integration cus-edit pp cus-load files-x tramp-compat shell
> pcomplete parse-time iso8601 time-date ls-lisp helm-buffers helm-occur
> helm-tags helm-locate helm-grep helm-regexp format-spec helm-utils
> helm-help helm-types helm helm-global-bindings helm-easymenu edmacro
> kmacro helm-core easy-mmode async-bytecomp helm-source helm-multi-match
> helm-lib async helm-config delsel cl-extra autorevert server hl-line
> lsp-mode lsp-protocol yasnippet help-mode xref project tree-widget
> wid-edit spinner pcase network-stream puny nsm markdown-mode color
> thingatpt noutline outline icons lv inline imenu ht filenotify f
> f-shortdoc shortdoc s ewoc epg rfc6068 epg-config dash dracula-theme
> compile-eslint compile text-property-search comint ansi-osc ansi-color
> ring cl finder-inf tree-sitter-indent-autoloads expand-region-autoloads
> ido-yes-or-no-autoloads nodejs-repl-autoloads marmalade-client-autoloads
> doom-modeline-autoloads elisp-slime-nav-autoloads
> multiple-cursors-autoloads dracula-theme-autoloads
> git-timemachine-autoloads crontab-mode-autoloads
> highlight-symbol-autoloads ssh-config-mode-autoloads langtool-autoloads
> dap-mode-autoloads lsp-treemacs-autoloads treemacs-autoloads
> cfrs-autoloads posframe-autoloads gh-autoloads marshal-autoloads
> logito-autoloads pcache-autoloads kv-autoloads toml-mode-autoloads
> company-web-autoloads shrink-path-autoloads realgud-autoloads
> realgud-recursive-autoloads load-relative-autoloads paredit-autoloads
> bui-autoloads tree-sitter-langs-autoloads helpful-autoloads
> elisp-refs-autoloads magit-autoloads magit-section-autoloads
> git-commit-autoloads with-editor-autoloads flycheck-package-autoloads
> package-lint-autoloads rust-mode-autoloads yaml-mode-autoloads
> macrostep-autoloads lsp-docker-autoloads yaml-autoloads
> lsp-mode-autoloads spinner-autoloads f-autoloads hydra-autoloads
> nlinum-autoloads ht-autoloads loc-changes-autoloads transient-autoloads
> compat-autoloads web-mode-autoloads undo-tree-autoloads queue-autoloads
> ace-window-autoloads avy-autoloads bmx-mode-autoloads company-autoloads
> test-simple-autoloads js2-mode-autoloads web-autoloads s-autoloads
> ido-completing-read+-autoloads memoize-autoloads lv-autoloads
> imenu-anywhere-autoloads helm-projectile-autoloads projectile-autoloads
> helm-autoloads popup-autoloads helm-core-autoloads async-autoloads
> tree-sitter-autoloads tsc-autoloads editorconfig-autoloads
> json-mode-autoloads rx json-snatcher-autoloads yasnippet-autoloads
> web-completion-data-autoloads cargo-autoloads markdown-mode-autoloads
> pfuture-autoloads flycheck-autoloads pkg-info-autoloads epl-autoloads
> info dash-autoloads package browse-url url url-proxy url-privacy
> url-expand url-methods url-history url-cookie generate-lisp-file
> url-domsuf url-util mailcap url-handlers url-parse auth-source cl-seq
> eieio eieio-core cl-macs password-cache json subr-x map byte-opt gv
> bytecomp byte-compile url-vars cl-loaddefs cl-lib rmc iso-transl tooltip
> cconv eldoc paren electric uniquify ediff-hook vc-hooks lisp-float-type
> elisp-mode mwheel term/x-win x-win term/common-win x-dnd tool-bar dnd
> fontset image regexp-opt fringe tabulated-list replace newcomment
> text-mode lisp-mode prog-mode register page tab-bar menu-bar rfn-eshadow
> isearch easymenu timer select scroll-bar mouse jit-lock font-lock syntax
> font-core term/tty-colors frame minibuffer nadvice seq simple cl-generic
> indonesian philippine cham georgian utf-8-lang misc-lang vietnamese
> tibetan thai tai-viet lao korean japanese eucjp-ms cp51932 hebrew greek
> romanian slovak czech european ethiopic indian cyrillic chinese
> composite emoji-zwj charscript charprop case-table epa-hook
> jka-cmpr-hook help abbrev obarray oclosure cl-preloaded button loaddefs
> theme-loaddefs faces cus-face macroexp files window text-properties
> overlay sha1 md5 base64 format env code-pages mule custom widget keymap
> hashtable-print-readable backquote threads dbusbind inotify lcms2
> dynamic-setting system-font-setting font-render-setting cairo
> move-toolbar gtk x-toolkit xinput2 x multi-tty make-network-process
> emacs)
>
> Memory information:
> ((conses 16 581099 38842)
>  (symbols 48 54552 1)
>  (strings 32 185380 10974)
>  (string-bytes 1 6025106)
>  (vectors 16 107595)
>  (vector-slots 8 2034690 131866)
>  (floats 8 551 525)
>  (intervals 56 4514 1049)
>  (buffers 992 27))
>
> -- 
> *Jostein Kjønigsen*
> jostein.kjønigsen.no <https://jostein.kjønigsen.no>
> [email-masked] - [email-masked]

From 1ac8c803a01b4a16a147bda392e5efb92fce2de0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jostein=20Kj=C3=B8nigsen?= <[email-masked]>
Date: Thu, 8 Dec 2022 15:45:00 +0100
Subject: [PATCH 2/2] lisp/progmodes/js.el: Fix fontification of
 method-invocations in js-ts-mode.

---
 lisp/progmodes/js.el | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/lisp/progmodes/js.el b/lisp/progmodes/js.el
index 45dfef372cd..864fc1303cf 100644
--- a/lisp/progmodes/js.el
+++ b/lisp/progmodes/js.el
@@ -3543,6 +3543,17 @@ js--treesit-font-lock-settings
      (arrow_function
       parameter: (identifier) @font-lock-variable-name-face))
 
+   :language 'javascript
+   :override t
+   :feature 'property
+   `((property_identifier) @font-lock-property-face
+
+     (pair value: (identifier) @font-lock-variable-name-face)
+
+     ((shorthand_property_identifier) @font-lock-property-face)
+
+     ((shorthand_property_identifier_pattern) @font-lock-property-face))
+
    :language 'javascript
    :override t
    :feature 'expression
@@ -3611,18 +3622,7 @@ js--treesit-font-lock-settings
    :language 'javascript
    :feature 'escape-sequence
    :override t
-   '((escape_sequence) @font-lock-escape-face)
-
-   :language 'javascript
-   :override t
-   :feature 'property
-   `((property_identifier) @font-lock-property-face
-
-     (pair value: (identifier) @font-lock-variable-name-face)
-
-     ((shorthand_property_identifier) @font-lock-property-face)
-
-     ((shorthand_property_identifier_pattern) @font-lock-property-face)))
+   '((escape_sequence) @font-lock-escape-face))
   "Tree-sitter font-lock settings.")
 
 (defun js--fontify-template-string (node override start end &rest _)
-- 
2.34.1