bug#61081: 29.0.60; typescript-ts-mode does not correctly fontify imports with aliases [PATCH]

bug#61081: 29.0.60; typescript-ts-mode does not correctly fontify imports with aliases [PATCH]

[Jostein Kjønigsen]

[-- Attachment #1.1: Type: text/plain, Size: 9337 bytes --]

Currently typescript-ts-mode and tsx-ts-mode handles imports with 
aliases incorrectly.

Consider the following case:

import { someFunc as someAlias } from "module";

In this case the entire import ("someFunc as someAlias") will be 
highlighted as a variable name. "as" is also highlighted as a variable, 
rather than a reserved keyword.

To be consistent with how we otherwise do things, we should only 
highlight the variable which is new and/or introduced, in this case 
"someAlias".

Attached is a patch which fontifies import-declarations somewhat more 
correctly.

The following cases have been tested and all fontify properly:

import gnu from "fsf";              // highlights gnu
import { gnu2 } from "fsf2";        // highlights gnu2
import { gnu as gnu3 } from "fsf3"; // highlights gnu3
import * as gnu4 from "fsf4";       // highlights gnu4

*Theo:* Looks good to you?

*Yuan:* I believe these same sort of fixes could be applied to 
js-ts-mode and friends.

--
Jostein

In GNU Emacs 29.0.60 (build 1, x86_64-pc-linux-gnu, GTK+ Version
  3.24.36, cairo version 1.17.6) of 2023-01-15 built on thinkpad-t14s
Repository revision: 59c3c53efa43e82f0f2e48a4c27d5bd623201d4a
Repository branch: emacs-29
Windowing system distributor 'The X.Org Foundation', version 11.0.12201007
System Description: Arch Linux

Configured using:
  'configure --with-json --with-tree-sitter'

Configured features:
ACL CAIRO DBUS FREETYPE GIF GLIB GMP GNUTLS GPM GSETTINGS HARFBUZZ JPEG
JSON LCMS2 LIBOTF LIBSYSTEMD LIBXML2 M17N_FLT MODULES NOTIFY INOTIFY
PDUMPER PNG RSVG SECCOMP SOUND SQLITE3 THREADS TIFF TOOLKIT_SCROLL_BARS
TREE_SITTER WEBP X11 XDBE XIM XINPUT2 XPM GTK3 ZLIB

Important settings:
   value of $LANG: en_US.UTF-8
   locale-coding-system: utf-8-unix

Major mode: TypeScript

Minor modes in effect:
   electric-pair-mode: t
   global-git-commit-mode: t
   magit-auto-revert-mode: t
   highlight-symbol-mode: t
   flycheck-mode: t
   editorconfig-mode: t
   company-mode: t
   eglot--managed-mode: t
   flymake-mode: t
   which-function-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
   yas-global-mode: t
   yas-minor-mode: t
   global-nlinum-mode: t
   nlinum-mode: t
   ido-yes-or-no-mode: t
   override-global-mode: t
   server-mode: t
   global-hl-line-mode: t
   pixel-scroll-precision-mode: t
   doom-modeline-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
   transient-mark-mode: t
   auto-composition-mode: t
   auto-encryption-mode: t
   auto-compression-mode: t
   hs-minor-mode: t

Load-path shadows:
/home/jostein/.emacs.d/elpa/transient-20230107.1528/transient hides 
/home/jostein/build/emacs/lisp/transient

Features:
(grep two-column shadow emacsbug sort find-dired dired-aux pulse tabify
cus-start helm-command helm-elisp helm-eval edebug helm-info
markdown-mode color mail-extr json-ts-mode elec-pair typescript-ts-mode
js c-ts-mode cc-mode cc-fonts cc-guess cc-menus cc-cmds cc-styles
cc-align cc-engine cc-vars cc-defs treesit winner ffap tramp-archive
tramp-gvfs tramp-cache time-stamp zeroconf dbus vc-hg vc-bzr vc-src
vc-sccs vc-cvs vc-rcs log-view vc bug-reference flyspell ispell
magit-extras magit-bookmark magit-submodule magit-obsolete magit-blame
magit-stash magit-reflog magit-bisect magit-push magit-pull magit-fetch
magit-clone magit-remote magit-commit magit-sequence magit-notes
magit-worktree magit-tag magit-merge magit-branch magit-reset
magit-files magit-refs magit-status magit magit-repos magit-apply
magit-wip magit-log magit-diff smerge-mode diff git-commit log-edit
message sendmail yank-media rfc822 mml mml-sec epa derived epg rfc6068
epg-config mm-decode mm-bodies mm-encode mail-parse rfc2231 rfc2047
rfc2045 ietf-drums mailabbrev gmm-utils mailheader pcvs-util magit-core
magit-autorevert magit-margin magit-transient magit-process with-editor
magit-mode transient magit-git magit-base magit-section crm misearch
multi-isearch face-remap vc-git diff-mode vc-dispatcher conf-mode
executable display-line-numbers disp-table vc-svn bookmark add-log
ido-completing-read+ memoize minibuf-eldef elisp-slime-nav paredit
highlight-symbol flycheck editorconfig editorconfig-core
editorconfig-core-handle editorconfig-fnmatch 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 eglot external-completion array jsonrpc ert ewoc
debug backtrace flymake-proc flymake warnings which-func hideshow eww
url-queue thingatpt shr pixel-fill kinsoku url-file svg xml dom puny
mm-url gnus nnheader gnus-util mail-utils range mm-util mail-prsvr
helm-imenu 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 wid-edit files-x tramp-compat shell parse-time
iso8601 ls-lisp helm-buffers helm-occur helm-tags helm-locate helm-grep
helm-regexp helm-utils helm-help helm-types helm helm-global-bindings
helm-easymenu helm-core async-bytecomp helm-source helm-multi-match
helm-lib async pcase imenu ob-plantuml org ob ob-tangle ob-ref ob-lob
ob-table ob-exp org-macro org-src ob-comint org-pcomplete pcomplete
org-list org-footnote org-faces org-entities time-date noutline outline
icons 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 format-spec delsel
autorevert filenotify yasnippet nlinum linum ido-yes-or-no advice ido
edmacro kmacro use-package-bind-key bind-key easy-mmode xref project
server hl-line pixel-scroll cua-base compile-eslint compile
text-property-search comint ansi-osc ansi-color ring doom-modeline
doom-modeline-segments doom-modeline-env doom-modeline-core
all-the-icons all-the-icons-faces data-material data-weathericons
data-octicons data-fileicons data-faicons data-alltheicons shrink-path
rx f f-shortdoc s dash compat dracula-theme cl-extra help-mode
use-package-ensure use-package-core finder-inf yasnippet-autoloads
ido-yes-or-no-autoloads elisp-slime-nav-autoloads cmake-mode-autoloads
flycheck-autoloads pkg-info-autoloads magit-autoloads
all-the-icons-autoloads crontab-mode-autoloads powershell-autoloads
doom-modeline-autoloads undo-tree-autoloads rust-mode-autoloads
magit-section-autoloads paredit-autoloads dracula-theme-autoloads
cargo-autoloads yaml-mode-autoloads helm-autoloads popup-autoloads
queue-autoloads nlinum-autoloads bmx-mode-autoloads company-autoloads
git-commit-autoloads multiple-cursors-autoloads dap-mode-autoloads
lsp-treemacs-autoloads treemacs-autoloads cfrs-autoloads
posframe-autoloads hydra-autoloads pfuture-autoloads
ace-window-autoloads avy-autoloads bui-autoloads transient-autoloads
ido-completing-read+-autoloads memoize-autoloads with-editor-autoloads
compat-autoloads epl-autoloads lsp-docker-autoloads yaml-autoloads
highlight-symbol-autoloads expand-region-autoloads lsp-mode-autoloads
lv-autoloads markdown-mode-autoloads spinner-autoloads ht-autoloads
shrink-path-autoloads f-autoloads dash-autoloads s-autoloads info
editorconfig-autoloads helm-core-autoloads async-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:
nil

-- 
Vennlig hilsen
*Jostein Kjønigsen*

jostein@kjonigsen.net 🍵 jostein@gmail.com
https://jostein.kjønigsen.no <https://jostein.kjønigsen.no>

[-- Attachment #1.2: Type: text/html, Size: 12851 bytes --]

[-- Attachment #2: 0001-typescript-ts-mode-fix-fontification-of-import-state.patch --]
[-- Type: text/x-patch, Size: 2366 bytes --]

From 8e7eaa5eba3f82be75157801f4137c7130983864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jostein=20Kj=C3=B8nigsen?= <jostein@kjonigsen.net>
Date: Thu, 26 Jan 2023 19:54:27 +0100
Subject: [PATCH] typescript-ts-mode: fix fontification of import-statements.

Currently typescript-ts-mode and tsx-ts-mode handles imports with
aliases incorrectly.

Consider the following case:

import { someFunc as someAlias } from "module";

In this case the entire import ("someFunc as someAlias") will be
highlighted as a variable name. "as" is also highlighted as a
variable, rather than a reserved keyword.

To be consistent with how we otherwise do things, we should only
highlight the variable which is new and/or introduced, in this case
"someAlias".

Attached is a patch which fontifies import-declarations somewhat more
correctly.

The following cases have been tested and all fontify properly:

import gnu from "fsf";              // highlights gnu
import { gnu2 } from "fsf2";        // highlights gnu2
import { gnu as gnu3 } from "fsf3"; // highlights gnu3
import * as gnu4 from "fsf4";       // highlights gnu4
---
 lisp/progmodes/typescript-ts-mode.el | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/lisp/progmodes/typescript-ts-mode.el b/lisp/progmodes/typescript-ts-mode.el
index 25cc327d05f..561b90deedd 100644
--- a/lisp/progmodes/typescript-ts-mode.el
+++ b/lisp/progmodes/typescript-ts-mode.el
@@ -196,8 +196,18 @@ typescript-ts-mode--font-lock-settings
      (catch_clause
       parameter: (identifier) @font-lock-variable-name-face)
 
+     ;; full module imports
      (import_clause (identifier) @font-lock-variable-name-face)
-     (import_clause (named_imports (import_specifier (identifier)) @font-lock-variable-name-face)))
+     ;; named imports with aliasing
+     (import_clause (named_imports (import_specifier
+                                    alias: (identifier) @font-lock-variable-name-face)))
+     ;; named imports without aliasing
+     (import_clause (named_imports (import_specifier
+                                    !alias
+                                    name: (identifier) @font-lock-variable-name-face)))
+
+     ;; full namespace import (* as alias)
+     (import_clause (namespace_import (identifier) @font-lock-variable-name-face)))
 
    :language language
    :feature 'identifier
-- 
2.39.1

bug#61081: 29.0.60; typescript-ts-mode does not correctly fontify imports with aliases [PATCH]

[Dmitry Gutov]

On 26/01/2023 20:55, Jostein Kjønigsen wrote:
> *Yuan:* I believe these same sort of fixes could be applied to js-ts-mode

Sounds reasonable.

bug#61081: 29.0.60; typescript-ts-mode does not correctly fontify imports with aliases [PATCH]

[Theodor Thornhill via Bug reports for GNU Emacs, the Swiss army knife of text editors]

Jostein Kjønigsen <jostein@secure.kjonigsen.net> writes:

> Currently typescript-ts-mode and tsx-ts-mode handles imports with aliases incorrectly.
>
> Consider the following case:
>
> import { someFunc as someAlias } from "module";
>
> In this case the entire import ("someFunc as someAlias") will be highlighted as a variable name. "as" is also
> highlighted as a variable, rather than a reserved keyword.
>
> To be consistent with how we otherwise do things, we should only highlight the variable which is new and/or
> introduced, in this case "someAlias".
>
> Attached is a patch which fontifies import-declarations somewhat more correctly.
>
> The following cases have been tested and all fontify properly:
>
> import gnu from "fsf";              // highlights gnu
> import { gnu2 } from "fsf2";        // highlights gnu2
> import { gnu as gnu3 } from "fsf3"; // highlights gnu3
> import * as gnu4 from "fsf4";       // highlights gnu4
>
> Theo: Looks good to you?
>
> Yuan: I believe these same sort of fixes could be applied to js-ts-mode and friends.
>

Thanks! Installing today :)

Theo