bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Yuan Fu]

[-- Attachment #1: Type: text/plain, Size: 258 bytes --]

X-Debbugs-CC: theo@thornhill.no

Hey Theo, I want to add separate faces for JSX tags and attributes.
Otherwise users will be in a world of pain if they want to use different
fontification for JSX tag and funcall, and JSX attribute and constant. WDYT?

Yuan


[-- Attachment #2: faces.patch --]
[-- Type: application/octet-stream, Size: 2034 bytes --]

From 6a52f34fff83908312881b9f46f07bf54597ff6f Mon Sep 17 00:00:00 2001
From: Yuan Fu <casouri@gmail.com>
Date: Fri, 24 Mar 2023 16:45:15 -0700
Subject: [PATCH] Add two typescript-ts-mode faces

* lisp/progmodes/typescript-ts-mode.el:
(typescript-ts-mode-jsx-tag-face)
(typescript-ts-mode-jsx-attribute-face): New faces.
(typescript-ts-mode--font-lock-settings): Use new faces.
---
 lisp/progmodes/typescript-ts-mode.el | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/lisp/progmodes/typescript-ts-mode.el b/lisp/progmodes/typescript-ts-mode.el
index a9ca85d5d35..207c3f03b88 100644
--- a/lisp/progmodes/typescript-ts-mode.el
+++ b/lisp/progmodes/typescript-ts-mode.el
@@ -41,6 +41,14 @@ typescript-ts-mode-indent-offset
   :safe 'integerp
   :group 'typescript)
 
+(defface typescript-ts-jsx-tag-face
+  '((t . (:inherit font-lock-function-call-face)))
+  "Face for HTML tags like <div> and <p> in JSX.")
+
+(defface typescript-ts-jsx-attribute-face
+  '((t . (:inherit font-lock-constant-face)))
+  "Face for HTML attributes like name and id in JSX.")
+
 (defvar typescript-ts-mode--syntax-table
   (let ((table (make-syntax-table)))
     ;; Taken from the cc-langs version
@@ -284,17 +292,17 @@ typescript-ts-mode--font-lock-settings
    :feature 'jsx
    `((jsx_opening_element
       [(nested_identifier (identifier)) (identifier)]
-      @font-lock-function-call-face)
+      @typescript-ts-jsx-tag-face)
 
      (jsx_closing_element
       [(nested_identifier (identifier)) (identifier)]
-      @font-lock-function-call-face)
+      @typescript-ts-jsx-tag-face)
 
      (jsx_self_closing_element
       [(nested_identifier (identifier)) (identifier)]
-      @font-lock-function-call-face)
+      @typescript-ts-jsx-tag-face)
 
-     (jsx_attribute (property_identifier) @font-lock-constant-face))
+     (jsx_attribute (property_identifier) @typescript-ts-jsx-attribute-face))
 
    :language language
    :feature 'number
-- 
2.33.1

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

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

On 25 March 2023 00:49:35 CET, Yuan Fu <casouri@gmail.com> wrote:
>X-Debbugs-CC: theo@thornhill.no
>
>Hey Theo, I want to add separate faces for JSX tags and attributes.
>Otherwise users will be in a world of pain if they want to use different
>fontification for JSX tag and funcall, and JSX attribute and constant. WDYT?
>
>Yuan
>

Sounds reasonable :)

Theo

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Eli Zaretskii]

> Cc: theo@thornhill.no
> From: Yuan Fu <casouri@gmail.com>
> Date: Fri, 24 Mar 2023 16:49:35 -0700
> 
> Hey Theo, I want to add separate faces for JSX tags and attributes.
> Otherwise users will be in a world of pain if they want to use different
> fontification for JSX tag and funcall, and JSX attribute and constant. WDYT?

We never had any mode-specific faces for font-lock, AFAIK.  Why is
this case different?  Why not use one of the existing font-lock faces,
or even add new ones (but not specific to JSX)?

(Adding Stefan.)

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Yuan Fu]

> On Mar 25, 2023, at 5:30 AM, Eli Zaretskii <eliz@gnu.org> wrote:
> 
>> Cc: theo@thornhill.no
>> From: Yuan Fu <casouri@gmail.com>
>> Date: Fri, 24 Mar 2023 16:49:35 -0700
>> 
>> Hey Theo, I want to add separate faces for JSX tags and attributes.
>> Otherwise users will be in a world of pain if they want to use different
>> fontification for JSX tag and funcall, and JSX attribute and constant. WDYT?
> 
> We never had any mode-specific faces for font-lock, AFAIK.  Why is
> this case different?  Why not use one of the existing font-lock faces,
> or even add new ones (but not specific to JSX)?
> 
> (Adding Stefan.)

IFIAK, css-mode has its own face. These two faces are specific to HTML and not widely applicable to other languages like other font-lock faces do.

JSX is basically HTML mixed with Javascript, so JSX tags and attributes are just HTML tags and attributes. Normally it’s fine to just use some semi-related font-lock face for them; mhtml.el uses function-call-face and constant-face for tags and attributes. But because in JSX, HTML tags and attribtues appear in the same buffer with Javascript code, if we use function-call-face and constant-face for tags and attributes, it’s impossible to change their appearance and not affect the functions and constants in Javascript code, because we are using the same face for JS functions and HTML tags, and JS constants and HTML attributes.

Yuan

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Eli Zaretskii]

> From: Yuan Fu <casouri@gmail.com>
> Date: Sat, 25 Mar 2023 12:45:01 -0700
> Cc: Stefan Monnier <monnier@iro.umontreal.ca>,
>  62429@debbugs.gnu.org,
>  theo@thornhill.no
> 
> > On Mar 25, 2023, at 5:30 AM, Eli Zaretskii <eliz@gnu.org> wrote:
> > 
> > We never had any mode-specific faces for font-lock, AFAIK.  Why is
> > this case different?  Why not use one of the existing font-lock faces,
> > or even add new ones (but not specific to JSX)?
> > 
> > (Adding Stefan.)
> 
> IFIAK, css-mode has its own face. These two faces are specific to HTML and not widely applicable to other languages like other font-lock faces do.
> 
> JSX is basically HTML mixed with Javascript, so JSX tags and attributes are just HTML tags and attributes. Normally it’s fine to just use some semi-related font-lock face for them; mhtml.el uses function-call-face and constant-face for tags and attributes. But because in JSX, HTML tags and attribtues appear in the same buffer with Javascript code, if we use function-call-face and constant-face for tags and attributes, it’s impossible to change their appearance and not affect the functions and constants in Javascript code, because we are using the same face for JS functions and HTML tags, and JS constants and HTML attributes.

OK, but then how will these JSX-specific faces fit into the overall
scheme of treesit-font-lock faces?  For example, in what level will
they be used, and how will users know what level to set to see these
faces in their buffers?

These are the downsides of mode-specific faces, and if we think it's
important enough to have them, we should resolve these issues when we
install such faces.

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Yuan Fu]

> On Mar 25, 2023, at 9:37 PM, Eli Zaretskii <eliz@gnu.org> wrote:
> 
>> From: Yuan Fu <casouri@gmail.com>
>> Date: Sat, 25 Mar 2023 12:45:01 -0700
>> Cc: Stefan Monnier <monnier@iro.umontreal.ca>,
>> 62429@debbugs.gnu.org,
>> theo@thornhill.no
>> 
>>> On Mar 25, 2023, at 5:30 AM, Eli Zaretskii <eliz@gnu.org> wrote:
>>> 
>>> We never had any mode-specific faces for font-lock, AFAIK.  Why is
>>> this case different?  Why not use one of the existing font-lock faces,
>>> or even add new ones (but not specific to JSX)?
>>> 
>>> (Adding Stefan.)
>> 
>> IFIAK, css-mode has its own face. These two faces are specific to HTML and not widely applicable to other languages like other font-lock faces do.
>> 
>> JSX is basically HTML mixed with Javascript, so JSX tags and attributes are just HTML tags and attributes. Normally it’s fine to just use some semi-related font-lock face for them; mhtml.el uses function-call-face and constant-face for tags and attributes. But because in JSX, HTML tags and attribtues appear in the same buffer with Javascript code, if we use function-call-face and constant-face for tags and attributes, it’s impossible to change their appearance and not affect the functions and constants in Javascript code, because we are using the same face for JS functions and HTML tags, and JS constants and HTML attributes.
> 
> OK, but then how will these JSX-specific faces fit into the overall
> scheme of treesit-font-lock faces?  For example, in what level will
> they be used, and how will users know what level to set to see these
> faces in their buffers?

At level 3 for tsx-ts-mode, under the “jsx” feature. So they are enabled by default. Though it’s true that it’s not immediately obvious what face to customize. At the very least these faces appear in the customize group of typescript. We can add something to the docstring of the major mode, too.

> 
> These are the downsides of mode-specific faces, and if we think it's
> important enough to have them, we should resolve these issues when we
> install such faces.


Yuan

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Eli Zaretskii]

> From: Yuan Fu <casouri@gmail.com>
> Date: Wed, 29 Mar 2023 17:28:40 -0700
> Cc: monnier@iro.umontreal.ca,
>  62429@debbugs.gnu.org,
>  theo@thornhill.no
> 
> >> JSX is basically HTML mixed with Javascript, so JSX tags and attributes are just HTML tags and attributes. Normally it’s fine to just use some semi-related font-lock face for them; mhtml.el uses function-call-face and constant-face for tags and attributes. But because in JSX, HTML tags and attribtues appear in the same buffer with Javascript code, if we use function-call-face and constant-face for tags and attributes, it’s impossible to change their appearance and not affect the functions and constants in Javascript code, because we are using the same face for JS functions and HTML tags, and JS constants and HTML attributes.
> > 
> > OK, but then how will these JSX-specific faces fit into the overall
> > scheme of treesit-font-lock faces?  For example, in what level will
> > they be used, and how will users know what level to set to see these
> > faces in their buffers?
> 
> At level 3 for tsx-ts-mode, under the “jsx” feature. So they are enabled by default. Though it’s true that it’s not immediately obvious what face to customize. At the very least these faces appear in the customize group of typescript. We can add something to the docstring of the major mode, too.
> 
> > 
> > These are the downsides of mode-specific faces, and if we think it's
> > important enough to have them, we should resolve these issues when we
> > install such faces.

Then it is fine by me, as long as those measures you mentioned are
taken to make sure users know how to customize font-lock with these
faces.

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Yuan Fu]

> On Mar 29, 2023, at 10:25 PM, Eli Zaretskii <eliz@gnu.org> wrote:
> 
>> From: Yuan Fu <casouri@gmail.com>
>> Date: Wed, 29 Mar 2023 17:28:40 -0700
>> Cc: monnier@iro.umontreal.ca,
>> 62429@debbugs.gnu.org,
>> theo@thornhill.no
>> 
>>>> JSX is basically HTML mixed with Javascript, so JSX tags and attributes are just HTML tags and attributes. Normally it’s fine to just use some semi-related font-lock face for them; mhtml.el uses function-call-face and constant-face for tags and attributes. But because in JSX, HTML tags and attribtues appear in the same buffer with Javascript code, if we use function-call-face and constant-face for tags and attributes, it’s impossible to change their appearance and not affect the functions and constants in Javascript code, because we are using the same face for JS functions and HTML tags, and JS constants and HTML attributes.
>>> 
>>> OK, but then how will these JSX-specific faces fit into the overall
>>> scheme of treesit-font-lock faces?  For example, in what level will
>>> they be used, and how will users know what level to set to see these
>>> faces in their buffers?
>> 
>> At level 3 for tsx-ts-mode, under the “jsx” feature. So they are enabled by default. Though it’s true that it’s not immediately obvious what face to customize. At the very least these faces appear in the customize group of typescript. We can add something to the docstring of the major mode, too.
>> 
>>> 
>>> These are the downsides of mode-specific faces, and if we think it's
>>> important enough to have them, we should resolve these issues when we
>>> install such faces.
> 
> Then it is fine by me, as long as those measures you mentioned are
> taken to make sure users know how to customize font-lock with these
> faces.

Cool. I pushed the change.

Yuan

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Eli Zaretskii]

> From: Yuan Fu <casouri@gmail.com>
> Date: Thu, 30 Mar 2023 01:11:48 -0700
> Cc: Stefan Monnier <monnier@iro.umontreal.ca>,
>  62429-done@debbugs.gnu.org,
>  theodor thornhill <theo@thornhill.no>
> 
> >>> OK, but then how will these JSX-specific faces fit into the overall
> >>> scheme of treesit-font-lock faces?  For example, in what level will
> >>> they be used, and how will users know what level to set to see these
> >>> faces in their buffers?
> >> 
> >> At level 3 for tsx-ts-mode, under the “jsx” feature. So they are enabled by default. Though it’s true that it’s not immediately obvious what face to customize. At the very least these faces appear in the customize group of typescript. We can add something to the docstring of the major mode, too.
> >> 
> >>> 
> >>> These are the downsides of mode-specific faces, and if we think it's
> >>> important enough to have them, we should resolve these issues when we
> >>> install such faces.
> > 
> > Then it is fine by me, as long as those measures you mentioned are
> > taken to make sure users know how to customize font-lock with these
> > faces.
> 
> Cool. I pushed the change.

Thanks, but please also tell in the doc string of the mode which
font-lock level uses these special faces.

bug#62429: 30.0.50; Add jsx faces to typescript-ts-mode

[Yuan Fu]

> On Mar 30, 2023, at 7:31 AM, Eli Zaretskii <eliz@gnu.org> wrote:
> 
>> From: Yuan Fu <casouri@gmail.com>
>> Date: Thu, 30 Mar 2023 01:11:48 -0700
>> Cc: Stefan Monnier <monnier@iro.umontreal.ca>,
>> 62429-done@debbugs.gnu.org,
>> theodor thornhill <theo@thornhill.no>
>> 
>>>>> OK, but then how will these JSX-specific faces fit into the overall
>>>>> scheme of treesit-font-lock faces?  For example, in what level will
>>>>> they be used, and how will users know what level to set to see these
>>>>> faces in their buffers?
>>>> 
>>>> At level 3 for tsx-ts-mode, under the “jsx” feature. So they are enabled by default. Though it’s true that it’s not immediately obvious what face to customize. At the very least these faces appear in the customize group of typescript. We can add something to the docstring of the major mode, too.
>>>> 
>>>>> 
>>>>> These are the downsides of mode-specific faces, and if we think it's
>>>>> important enough to have them, we should resolve these issues when we
>>>>> install such faces.
>>> 
>>> Then it is fine by me, as long as those measures you mentioned are
>>> taken to make sure users know how to customize font-lock with these
>>> faces.
>> 
>> Cool. I pushed the change.
> 
> Thanks, but please also tell in the doc string of the mode which
> font-lock level uses these special faces.

Done.

Yuan