From mboxrd@z Thu Jan  1 00:00:00 1970
Path: news.gmane.io!.POSTED.blaine.gmane.org!not-for-mail
From: Vincenzo Pupillo <v.pupillo@gmail.com>
Newsgroups: gmane.emacs.bugs
Subject: bug#74610: 31.0.50;
 Submitting mhtml-ts-mode, treesitter alternative to mhtml-mode
Date: Sat, 14 Dec 2024 11:37:01 +0100
Message-ID: <26683715.1r3eYUQgxm@fedora>
References: <3532547.LZWGnKmheA@fedora>
 <2551656.XAFRqVoOGU@3-191.divsi.unimi.it>
 <0083FFEF-128F-4C5C-B6BC-92CF657416C4@gmail.com>
Mime-Version: 1.0
Content-Type: multipart/mixed; boundary="nextPart2282944.vFx2qVVIhK"
Content-Transfer-Encoding: 7Bit
Injection-Info: ciao.gmane.io; posting-host="blaine.gmane.org:116.202.254.214";
	logging-data="6474"; mail-complaints-to="usenet@ciao.gmane.io"
Cc: Eli Zaretskii <eliz@gnu.org>, 74610@debbugs.gnu.org
To: Yuan Fu <casouri@gmail.com>
Original-X-From: bug-gnu-emacs-bounces+geb-bug-gnu-emacs=m.gmane-mx.org@gnu.org Sat Dec 14 11:39:24 2024
Return-path: <bug-gnu-emacs-bounces+geb-bug-gnu-emacs=m.gmane-mx.org@gnu.org>
Envelope-to: geb-bug-gnu-emacs@m.gmane-mx.org
Original-Received: from lists.gnu.org ([209.51.188.17])
	by ciao.gmane.io with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256)
	(Exim 4.92)
	(envelope-from <bug-gnu-emacs-bounces+geb-bug-gnu-emacs=m.gmane-mx.org@gnu.org>)
	id 1tMPYR-0001XO-Cg
	for geb-bug-gnu-emacs@m.gmane-mx.org; Sat, 14 Dec 2024 11:39:23 +0100
Original-Received: from localhost ([::1] helo=lists1p.gnu.org)
	by lists.gnu.org with esmtp (Exim 4.90_1)
	(envelope-from <bug-gnu-emacs-bounces@gnu.org>)
	id 1tMPY8-0005ER-0G; Sat, 14 Dec 2024 05:39:04 -0500
Original-Received: from eggs.gnu.org ([2001:470:142:3::10])
 by lists.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256)
 (Exim 4.90_1) (envelope-from <Debian-debbugs@debbugs.gnu.org>)
 id 1tMPY6-0005EH-Nt
 for bug-gnu-emacs@gnu.org; Sat, 14 Dec 2024 05:39:02 -0500
Original-Received: from debbugs.gnu.org ([2001:470:142:5::43])
 by eggs.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_128_GCM_SHA256:128)
 (Exim 4.90_1) (envelope-from <Debian-debbugs@debbugs.gnu.org>)
 id 1tMPY6-0002A9-F6
 for bug-gnu-emacs@gnu.org; Sat, 14 Dec 2024 05:39:02 -0500
DKIM-Signature: v=1; a=rsa-sha256; q=dns/txt; c=relaxed/relaxed;
 d=debbugs.gnu.org; s=debbugs-gnu-org; 
 h=MIME-Version:References:In-Reply-To:Date:From:To:Subject;
 bh=VlrrXP43XJoyjlIAN7jB4uXqtH1wDYO+bF/cSX1vv0A=; 
 b=cALzNPVB+uzUHQNQFk0TQsyIlS6iB8N8quWzOIDglAHbRs91qbVg0DP1LnSVILsj7G+2Nxd8S+HSZ5H2Y9XW28QxNyME/JbmbwENxjg2Un2r6EbDLN/piSSneFYhmFL2VJPIa+auCEJYlk0jaB2w5hEBFYZtzUEfdAiKaBCh0VZuuEApF941HJtCoSYm7JVZ1dxctXkyZ+ZaJE5mZSKW7vwY8wIQ7Ek2z0iyAb1SZNknH3ad7rIQZabrkc5k5BpmO8kQu63lNx+z3bieNaIW94FftyaplGy4PAIBVCLRr+O4m4kIJRO7+LImBzUiLkPXwIbd5FZjPTlkrau6qFUTiQ==;
Original-Received: from Debian-debbugs by debbugs.gnu.org with local (Exim 4.84_2)
 (envelope-from <Debian-debbugs@debbugs.gnu.org>) id 1tMPY6-0001Ts-8y
 for bug-gnu-emacs@gnu.org; Sat, 14 Dec 2024 05:39:02 -0500
X-Loop: help-debbugs@gnu.org
Resent-From: Vincenzo Pupillo <v.pupillo@gmail.com>
Original-Sender: "Debbugs-submit" <debbugs-submit-bounces@debbugs.gnu.org>
Resent-CC: bug-gnu-emacs@gnu.org
Resent-Date: Sat, 14 Dec 2024 10:39:02 +0000
Resent-Message-ID: <handler.74610.B74610.17341726895603@debbugs.gnu.org>
Resent-Sender: help-debbugs@gnu.org
X-GNU-PR-Message: followup 74610
X-GNU-PR-Package: emacs
Original-Received: via spool by 74610-submit@debbugs.gnu.org id=B74610.17341726895603
 (code B ref 74610); Sat, 14 Dec 2024 10:39:02 +0000
Original-Received: (at 74610) by debbugs.gnu.org; 14 Dec 2024 10:38:09 +0000
Original-Received: from localhost ([127.0.0.1]:45648 helo=debbugs.gnu.org)
 by debbugs.gnu.org with esmtp (Exim 4.84_2)
 (envelope-from <debbugs-submit-bounces@debbugs.gnu.org>)
 id 1tMPXE-0001SG-1W
 for submit@debbugs.gnu.org; Sat, 14 Dec 2024 05:38:09 -0500
Original-Received: from mail-wm1-f51.google.com ([209.85.128.51]:45471)
 by debbugs.gnu.org with esmtp (Exim 4.84_2)
 (envelope-from <v.pupillo@gmail.com>) id 1tMPXB-0001S7-Fb
 for 74610@debbugs.gnu.org; Sat, 14 Dec 2024 05:38:06 -0500
Original-Received: by mail-wm1-f51.google.com with SMTP id
 5b1f17b1804b1-4361c705434so18202635e9.3
 for <74610@debbugs.gnu.org>; Sat, 14 Dec 2024 02:38:05 -0800 (PST)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
 d=gmail.com; s=20230601; t=1734172625; x=1734777425; darn=debbugs.gnu.org;
 h=content-transfer-encoding:mime-version:references:in-reply-to
 :message-id:date:subject:cc:to:from:from:to:cc:subject:date
 :message-id:reply-to;
 bh=VlrrXP43XJoyjlIAN7jB4uXqtH1wDYO+bF/cSX1vv0A=;
 b=C6/wxdnB40Yy7XvKJ1K1hcat+O3IPLZYLSPaSeYscK5wDlMlqfE28hFCIEVl7jHbuU
 v3fuksXA3+sDbb2yc/DedRiSnbit8Lf5gp7JcAWLCVvu4AMedJ6ZdMinshTfe3B9qP+A
 0dZTq08u5pnuSWsDIib4wf3sKU4CyejLYwysngHT4hwMhtdanNUJ47JFsDHO0H0PcwoP
 cUhROPK+cxlMBHkWCaeC8lYOvWvTH+n2F2e6gd+IHD5jwH4dqBSykQMtvFOFe078jPti
 uWJ2WyNgwpLs0v/IKh95Aga+SqFAGun7bLXehIx9J1eMHFIisXZ0NzRu8rxbTqkoEbha
 QzDA==
X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
 d=1e100.net; s=20230601; t=1734172625; x=1734777425;
 h=content-transfer-encoding:mime-version:references:in-reply-to
 :message-id:date:subject:cc:to:from:x-gm-message-state:from:to:cc
 :subject:date:message-id:reply-to;
 bh=VlrrXP43XJoyjlIAN7jB4uXqtH1wDYO+bF/cSX1vv0A=;
 b=q+hEJhBoqe2iC5pyY+UH1KIx/3rAE1zTZmhKuES5S7V9v5pSPGb+9SAdh7uvtegF+F
 8lLCLYy2vQaB7hkirEjmEu1V0rI06qbd8WZQO4v6DzlEKxZewRZds2b9uvO1g6QdAWck
 p8dFKJ9dH8nP9OWvquWgA8RZinXdipnpnwdo8a30TbmsMsGzaeeLaVRx/xP/ira7Hhaa
 6h0kyd/4NjeBfiN26D3/GQ7t3PaFvG5HaRfESt5qK9FXw0BL20BNc5YlOeMwPzHqOGk/
 Fb4r/ue3bWB60yE5aJ5blbGkktJmLMdJSFCpowuhPo4Wra7OC4PiTJMDPKOinfVCNy3x
 iKZw==
X-Gm-Message-State: AOJu0YyEKQVut2uUy5uPvv7ENy1lero1XdRNsYX8Klo4v8o6Wp5XfaBc
 EBNwC8ILuzXtmEWJ2/X3YX9aZoxOcus34/p1MhFZQlNfdgny1nNf
X-Gm-Gg: ASbGncsn+jOQbcepHhvl2ledRH6+TW0u5e4gO4pOL4d6vWvtEzlRwl3gBC4EFP0JAhK
 eRvv6DlzFf5H8KLDoBdez610IyjydZMHfu2b9h5lQ4HbdFk/YxZZq68s5UthQsgjdr0QZ0D04tS
 3YGTV21O4uHzAxsMkQW9GIP0rbhffxGDPvPFbuSxTdCZqS5NAH2G2gpDGs2gyvN/hn+E8Zbv9MH
 5k0cNEUKgQY3J085b1Jfcl+aP3rrXiHDOfQvgXZNviwKSG5vuiWt6wQ9ANgM8PQM60wOUPHxSA8
 JGQt7uwULwcIPGgURXsU
X-Google-Smtp-Source: AGHT+IG4nQGYC3iWX+10zrpgRCOnwEG/HF9sWVjXlRk2UowdXcDeUxtlADJRpMHhaDa3m4P/D5s6XA==
X-Received: by 2002:a05:6000:4613:b0:385:ed16:c8b with SMTP id
 ffacd0b85a97d-38880ad1d9emr4595714f8f.23.1734172624201; 
 Sat, 14 Dec 2024 02:37:04 -0800 (PST)
Original-Received: from fedora.localnet (2-230-139-124.ip202.fastwebnet.it.
 [2.230.139.124]) by smtp.gmail.com with ESMTPSA id
 ffacd0b85a97d-388c8046f8bsm2167450f8f.68.2024.12.14.02.37.02
 (version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256);
 Sat, 14 Dec 2024 02:37:03 -0800 (PST)
In-Reply-To: <0083FFEF-128F-4C5C-B6BC-92CF657416C4@gmail.com>
X-BeenThere: debbugs-submit@debbugs.gnu.org
X-Mailman-Version: 2.1.18
Precedence: list
X-BeenThere: bug-gnu-emacs@gnu.org
List-Id: "Bug reports for GNU Emacs,
 the Swiss army knife of text editors" <bug-gnu-emacs.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/bug-gnu-emacs>,
 <mailto:bug-gnu-emacs-request@gnu.org?subject=unsubscribe>
List-Archive: <https://lists.gnu.org/archive/html/bug-gnu-emacs>
List-Post: <mailto:bug-gnu-emacs@gnu.org>
List-Help: <mailto:bug-gnu-emacs-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/bug-gnu-emacs>,
 <mailto:bug-gnu-emacs-request@gnu.org?subject=subscribe>
Errors-To: bug-gnu-emacs-bounces+geb-bug-gnu-emacs=m.gmane-mx.org@gnu.org
Original-Sender: bug-gnu-emacs-bounces+geb-bug-gnu-emacs=m.gmane-mx.org@gnu.org
Xref: news.gmane.io gmane.emacs.bugs:297032
Archived-At: <http://permalink.gmane.org/gmane.emacs.bugs/297032>

This is a multi-part message in MIME format.

--nextPart2282944.vFx2qVVIhK
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain; charset="utf-8"

In data mercoled=C3=AC 11 dicembre 2024 05:54:09 Ora standard dell=E2=80=99=
Europa centrale,=20
Yuan Fu ha scritto:
> > On Dec 3, 2024, at 6:29=E2=80=AFAM, Vincenzo Pupillo <v.pupillo@gmail.c=
om> wrote:
> >=20
> > In data domenica 1 dicembre 2024 07:01:21 Ora standard dell=E2=80=99Eur=
opa
> > centrale,>=20
> > Yuan Fu ha scritto:
> >> It's not uncommon to see different indent offset for CSS and
> >> Javascript, so it's a good idea to have separate control for them.
> >=20
> > Is the behavior the same as mhtml-mode, or would you like something like
> > this?>=20
> >    <style>
> >   =20
> >                                  z {
> >                                 =20
> >                                      color: red;
> >                                 =20
> >                                  }
> >   =20
> >    </style>
> >    <script>
> >   =20
> >        function myFunction(p1, p2) {
> >       =20
> >            return p1 * p2;
> >       =20
> >        }
> >   =20
> >    </script>
> >=20
> > The mhtml-ts-mode-js-css-indent-offset variable controls only the
> > indentation relative to the <style> and <script> tags.
>=20
> Ah, I see, it=E2=80=99s the offset from the enclosing tag. In that case i=
t should be
> fine to use a common variable.
>=20
> Yuan
Thank you Yuan.
Attached is the revised patch following your previous comments.
As I already wrote to Dmitry, I am doing some tests to see if html-ts-mode =
can=20
be extended and if there is a way to integrate one multi-language mode into=
=20
another multi-language mode.

Vincenzo

--nextPart2282944.vFx2qVVIhK
Content-Disposition: attachment; filename="0001-Add-mhtml-ts-mode.patch"
Content-Transfer-Encoding: quoted-printable
Content-Type: text/x-patch; charset="UTF-8";
 name="0001-Add-mhtml-ts-mode.patch"

=46rom 355075793eff5a58dac83756d96881b6932d5838 Mon Sep 17 00:00:00 2001
=46rom: Vincenzo Pupillo <v.pupillo@gmail.com>
Date: Fri, 29 Nov 2024 22:48:45 +0100
Subject: [PATCH] Add mhtml-ts-mode.

New major-mode alternative to mhtml-mode, based on treesitter, for
editing files containing html, javascript and css.

* etc/NEWS: Mention the new mode.
* lisp/textmodes/mhtml-ts-mode.el: New file.
=2D--
 etc/NEWS                        |   8 +
 lisp/textmodes/mhtml-ts-mode.el | 429 ++++++++++++++++++++++++++++++++
 2 files changed, 437 insertions(+)
 create mode 100644 lisp/textmodes/mhtml-ts-mode.el

diff --git a/etc/NEWS b/etc/NEWS
index 4d2a2c893d0..8f9a04dcf01 100644
=2D-- a/etc/NEWS
+++ b/etc/NEWS
@@ -797,6 +797,14 @@ destination window is chosen using 'display-buffer-ali=
st'.  Example:
 =0C
 * New Modes and Packages in Emacs 31.1
=20
+** New major modes based on the tree-sitter library
+
++++
+*** New major mode 'mhtml-ts-mode'.
+An optional major mode based on the tree-sitter library for editing html
+files. This mode handles indentation, fontification, and commenting for
+embedded JavaScript and CSS.
+
 =0C
 * Incompatible Lisp Changes in Emacs 31.1
=20
diff --git a/lisp/textmodes/mhtml-ts-mode.el b/lisp/textmodes/mhtml-ts-mode=
=2Eel
new file mode 100644
index 00000000000..746300efc33
=2D-- /dev/null
+++ b/lisp/textmodes/mhtml-ts-mode.el
@@ -0,0 +1,429 @@
+;;; mhtml-ts-mode.el --- Major mode for HTML using tree-sitter -*- lexical=
=2Dbinding: t; -*-
+
+;; Copyright (C) 2024 Free Software Foundation, Inc.
+
+;; Author: Vincenzo Pupillo <v.pupillo@gmail.com>
+;; Maintainer: Vincenzo Pupillo <v.pupillo@gmail.com>
+;; Created: Nov 2024
+;; Keywords: HTML language tree-sitter
+
+;; This file is part of GNU Emacs.
+
+;; GNU Emacs is free software: you can redistribute it and/or modify
+;; it under the terms of the GNU General Public License as published by
+;; the Free Software Foundation, either version 3 of the License, or
+;; (at your option) any later version.
+
+;; GNU Emacs is distributed in the hope that it will be useful,
+;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;; GNU General Public License for more details.
+
+;; You should have received a copy of the GNU General Public License
+;; along with GNU Emacs.  If not, see <https://www.gnu.org/licenses/>.
+
+;;; Commentary:
+;;
+;; This package provides `mhtml-ts-mode' which is a major mode
+;; for editing HTML files with embedded JavaScript and CSS.
+;; Tree Sitter is used to parse each of these languages.
+;;
+;; Please note that this package requires `html-ts-mode', which
+;; registers itself as the major mode for editing HTML.
+;;
+;; This package is compatible and has been tested with the following
+;; tree-sitter grammars:
+;; * https://github.com/tree-sitter/tree-sitter-html
+;; * https://github.com/tree-sitter/tree-sitter-javascript
+;; * https://github.com/tree-sitter/tree-sitter-jsdoc
+;; * https://github.com/tree-sitter/tree-sitter-css
+;;
+;; Features
+;;
+;; * Indent
+;; * IMenu
+;; * Navigation
+;; * Which-function
+;; * Tree-sitter parser installation helper
+
+;;; Code:
+
+(require 'treesit)
+(require 'html-ts-mode)
+(require 'css-mode) ;; for embed css into html
+(require 'js) ;; for embed javascript into html
+
+(eval-when-compile
+  (require 'rx))
+
+;; This tells the byte-compiler where the functions are defined.
+;; Is only needed when a file needs to be able to byte-compile
+;; in a Emacs not built with tree-sitter library.
+(treesit-declare-unavailable-functions)
+
+;; In a multi-language major mode can be useful to have an "installer" to
+;; simplify the installation of the grammars supported by the major-mode.
+(defvar mhtml-ts-mode--language-source-alist
+  '((html . ("https://github.com/tree-sitter/tree-sitter-html"  "v0.23.0"))
+    (javascript . ("https://github.com/tree-sitter/tree-sitter-javascript"=
 "v0.23.0"))
+    (jsdoc . ("https://github.com/tree-sitter/tree-sitter-jsdoc" "v0.23.0"=
))
+    (css . ("https://github.com/tree-sitter/tree-sitter-css" "v0.23.0")))
+  "Treesitter language parsers required by `mhtml-ts-mode'.
+You can customize this variable if you want to stick to a specific
+commit and/or use different parsers.")
+
+(defun mhtml-ts-mode-install-parsers ()
+  "Install all the required treesitter parsers.
+`mhtml-ts-mode--language-source-alist' defines which parsers to install."
+  (interactive)
+  (let ((treesit-language-source-alist mhtml-ts-mode--language-source-alis=
t))
+    (dolist (item mhtml-ts-mode--language-source-alist)
+      (treesit-install-language-grammar (car item)))))
+
+;;; Custom variables
+
+(defgroup mhtml-ts-mode nil
+  "Major mode for editing HTML files, based on `html-ts-mode'.
+Works with JS and CSS and for that use `js-ts-mode' and `css-ts-mode'."
+  :prefix "mhtml-ts-mode-"
+  ;; :group 'languages
+  :group 'html)
+
+(defcustom mhtml-ts-mode-js-css-indent-offset 2
+  "JavaScript and CSS indent spaces related to the <script> and <style> HT=
ML tags.
+By default should have same value as `html-ts-mode-indent-offset'."
+  :tag "HTML javascript or css indent offset"
+  :version "31.1"
+  :type 'integer
+  :safe 'integerp)
+
+(defvar mhtml-ts-mode--js-css-indent-offset
+  mhtml-ts-mode-js-css-indent-offset
+  "Internal copy of `mhtml-ts-mode-js-css-indent-offset'.
+The value changes, by `mhtml-ts-mode--tag-relative-indent-offset' accordin=
g to
+the value of `mhtml-ts-mode-tag-relative-indent'.")
+
+(defun mhtml-ts-mode--tag-relative-indent-offset (sym val)
+  "Custom setter for `mhtml-ts-mode-tag-relative-indent'.
+
+Apart from setting the default value of SYM to VAL, also change the
+value of SYM in `mhtml-ts-mode' buffers to VAL.  SYM should be
+`mhtml-ts-mode-tag-relative-indent', and VAL should be t, nil or
+`ignore'.  When sym is `mhtml-ts-mode-tag-relative-indent' set the
+value of `mhtml-ts-mode--js-css-indent-offset' to 0 if VAL is t,
+otherwise to `mhtml-ts-mode-js-css-indent-offset'."
+  (set-default sym val)
+  (when (eq sym 'mhtml-ts-mode-tag-relative-indent)
+    (setq-local
+     mhtml-ts-mode--js-css-indent-offset
+     (if (eq val t)
+         mhtml-ts-mode-js-css-indent-offset
+       0))))
+
+(defcustom mhtml-ts-mode-tag-relative-indent t
+  "How <script> and <style> bodies are indented relative to the tag.
+
+When t, indentation looks like:
+
+  <script>
+    code();
+  </script>
+
+When nil, indentation of the script body starts just below the
+tag, like:
+
+  <script>
+  code();
+  </script>
+
+When `ignore', the script body starts in the first column, like:
+
+  <script>
+code();
+  </script>"
+  :type '(choice (const nil) (const t) (const ignore))
+  :safe 'symbolp
+  :set #'mhtml-ts-mode--tag-relative-indent-offset
+  :version "31.1")
+
+(defcustom mhtml-ts-mode-css-fontify-colors t
+  "Whether CSS colors should be fontified using the color as the backgroun=
d.
+If non-nil, text representing a CSS color will be fontified
+such that its background is the color itself.
+Works like `css--fontify-region'."
+  :tag "HTML colors the CSS properties values."
+  :version "31.1"
+  :type 'boolean
+  :safe 'booleanp)
+
+;; To enable some basic treesiter functionality, you should define
+;; a function that recognizes which grammar is used at-point.
+;; This function should be assigned to `treesit-language-at-point-function'
+(defun mhtml-ts-mode--language-at-point (point)
+  "Return the language at POINT assuming the point is within a HTML buffer=
=2E"
+  (let* ((node (treesit-node-at point 'html))
+         (parent (treesit-node-parent node))
+         (node-query (format "(%s (%s))"
+                             (treesit-node-type parent)
+                             (treesit-node-type node))))
+    (cond
+     ((string-equal "(script_element (raw_text))" node-query) 'javascript)
+     ((string-equal "(style_element (raw_text))" node-query) 'css)
+     (t 'html))))
+
+;; Custom font-lock function that's used to apply color to css color
+;; The signature of the function should be conforming to signature
+;; QUERY-SPEC required by `treesit-font-lock-rules'.
+(defun mhtml-ts-mode--colorize-css-value (node override start end &rest _)
+  "Colorize CSS property value like `css--fontify-region'.
+For NODE, OVERRIDE, START, and END, see `treesit-font-lock-rules'."
+  (if (and mhtml-ts-mode-css-fontify-colors
+           (string-equal "plain_value" (treesit-node-type node)))
+      (let ((color (css--compute-color start (treesit-node-text node t))))
+        (when color
+          (with-silent-modifications
+            (add-text-properties
+             (treesit-node-start node) (treesit-node-end node)
+             (list 'face (list :background color
+                               :foreground (readable-foreground-color
+                                            color)
+                               :box '(:line-width -1)))))))
+    (treesit-fontify-with-override
+     (treesit-node-start node) (treesit-node-end node)
+     'font-lock-variable-name-face
+     override start end)))
+
+;; Embedded languages =E2=80=8B=E2=80=8Bshould be indented according to th=
e language
+;; that embeds them.
+;; This function signature complies with `treesit-simple-indent-rules'
+;; ANCHOR.
+(defun mhtml-ts-mode--js-css-tag-bol (_node _parent &rest _)
+  "Find the first non-space characters of html tags <script> or <style>.
+Return `line-beginning-position' when `treesit-node-at' is html, or
+`mhtml-ts-mode-tag-relative-indent' is equal to ignore.
+NODE and PARENT are ignored."
+  (if (or (eq (treesit-language-at (point)) 'html)
+          (eq mhtml-ts-mode-tag-relative-indent 'ignore))
+      (line-beginning-position)
+    ;; Ok, we are in js or css block.
+    (save-excursion
+      (re-search-backward "<script.*>\\|<style.*>" nil t))))
+
+;; Treesit supports 4 level of decoration, `treesit-font-lock-level'
+;; define which level to use.  Major modes categorize their fontification
+;; features, these categories are defined by `treesit-font-lock-rules' of
+;; each major-mode using :feature keyword.
+;; In a multiple language Major mode it's a good idea to provide, for each
+;; level, the union of the :feature of the same level.
+(defvar mhtml-ts-mode--feature-list
+  '(;; level 1
+    (;; common
+     comment definition
+     ;; JS specific
+     document
+     ;; CSS specific
+     query selector)
+    ;; level 2
+    (keyword name property string type)
+    ;; level 3
+    (;; common
+     attribute assignment constant escape-sequence
+     base-clause literal variable-name variable
+     ;; Javascript specific
+     jsx number pattern string-interpolation)
+    ;; level 4
+    (bracket delimiter error operator function)))
+
+;; In order to support `which-fuction-mode' we should define
+;; a function that return the defun name.
+;; In a multilingual treesit mode, this can be implemented simply by
+;; calling language-specific functions.
+(defun mhtml-ts-mode--defun-name (node)
+  "Return the defun name of NODE.
+Return nil if there is no name or if NODE is not a defun node."
+  (let ((lang (mhtml-ts-mode--language-at-point (point))))
+    (message "lang =3D %s" lang)
+    (cond
+     ((eq lang 'html) (html-ts-mode--defun-name node))
+     ((eq lang 'javascript) (js--treesit-defun-name node))
+     ((eq lang 'css) (css--treesit-defun-name node)))))
+
+(define-derived-mode mhtml-ts-mode html-mode
+  '("HTML+" (:eval (let ((lang (mhtml-ts-mode--language-at-point (point))))
+                     (cond ((eq lang 'html) "")
+                           ((eq lang 'javascript) "JS")
+                           ((eq lang 'css) "CSS")))))
+  "Major mode for editing HTML with embedded JavaScript and CSS.
+Powered by tree-sitter."
+  (if (not (and
+            (treesit-ready-p 'html)
+            (treesit-ready-p 'javascript)
+            (treesit-ready-p 'css)))
+      (error "Tree-sitter parsers for HTML isn't
+    available.  You can install the parsers with M-x
+    `mhtml-ts-mode-install-parsers'")
+
+    ;; When an language is embedded, you should initialize some variable
+    ;; just like it's done in the original mode.
+
+    ;; Comment.
+    ;; indenting settings for js-ts-mode.
+    (c-ts-common-comment-setup)
+    (setq-local comment-multi-line t)
+
+    ;; Font-lock.
+
+    ;; There are two ways to handle embedded code:
+    ;; 1. Use a single parser for all the embedded code in the buffer. In
+    ;; this case, the embedded code blocks are concatenated together and a=
re
+    ;; seen as a single continuous document to the parser.
+    ;; 2. Each embedded code block gets its own parser. Each parser only s=
ees
+    ;; that particular code block.
+
+    ;; If you go with 2 for a language, the local parsers are created and
+    ;; destroyed automatically by Emacs. So don't create a global parser f=
or
+    ;; that embedded language here.
+
+    ;; Create the parsers, only the global ones.
+    ;; jsdoc is a local parser, don't create a parser for it.
+    (treesit-parser-create 'css)
+    (treesit-parser-create 'javascript)
+
+    ;; Multi-language modes must set the  primary parser.
+    (setq-local treesit-primary-parser (treesit-parser-create 'html))
+
+    (setq-local treesit-range-settings
+                (treesit-range-rules
+                 :embed 'javascript
+                 :host 'html
+                 :offset '(1 . -1)
+                 '((script_element
+                    (start_tag (tag_name))
+                    (raw_text) @cap))
+
+                 :embed 'css
+                 :host 'html
+                 :offset '(1 . -1)
+                 '((style_element
+                    (start_tag (tag_name))
+                    (raw_text) @cap))))
+
+    ;; jsdoc is not mandatory for js-ts-mode, so we respect this by
+    ;; adding jsdoc range rules only when jsdoc is available.
+    (when (treesit-ready-p 'jsdoc t)
+      (setq-local treesit-range-settings
+                  (append treesit-range-settings
+                          (treesit-range-rules
+                           :embed 'jsdoc
+                           :host 'javascript
+                           :local t
+                           `(((comment) @cap
+                              (:match ,js--treesit-jsdoc-beginning-regexp =
@cap))))))
+      (setq-local c-ts-common--comment-regexp
+            (rx (or "comment" "line_comment" "block_comment" "description"=
))))
+
+
+    ;; Many treesit fuctions need to know the language at-point.
+    ;; So you should define such a function.
+    (setq-local treesit-language-at-point-function #'mhtml-ts-mode--langua=
ge-at-point)
+
+    ;; Indent.
+
+    ;; Since mhtl-ts-mode inherits indentation rules from html-ts-mode, js
+    ;; and css, if you want to change the offset you have to act on the
+    ;; *-offset variables defined for those languages.
+
+    ;; JavaScript and CSS must be indented relative to their code block.
+    ;; This is done by inserting a special rule before the normal
+    ;; indentation rules of these languages.
+    ;; The value of mhtml-ts-mode--js-css-indent-offset changes based on
+    ;; mhtml-ts-mode-tag-relative-indent and can be used to indent
+    ;; JavaScript and CSS code relative to the HTML that contains them,
+    ;; just like in mhtml-mode.
+    (setq-local treesit-simple-indent-rules
+                (append html-ts-mode--indent-rules
+                        ;; Extended rules for js and css, to
+                        ;; indent appropriately when injected
+                        ;; into html
+                        `((javascript ((parent-is "program")
+                                       mhtml-ts-mode--js-css-tag-bol
+                                       mhtml-ts-mode--js-css-indent-offset)
+                                      ,@(cdr (car js--treesit-indent-rules=
))))
+                        `((css ((parent-is "stylesheet")
+                                mhtml-ts-mode--js-css-tag-bol
+                                mhtml-ts-mode--js-css-indent-offset)
+                               ,@(cdr (car css--treesit-indent-rules))))))
+    ;; Navigation.
+
+    ;; This is for finding defun name, it's used by IMenu as default
+    ;; function no specific functions are defined.
+    (setq-local treesit-defun-name-function #'mhtml-ts-mode--defun-name)
+
+    ;; Define what are 'thing' for treesit.
+    ;; 'Thing' is a symbol representing the thing, like `defun', `sexp', or
+    ;; `sentence'.
+    ;; As an alternative, if you want just defun, you can define a `treesi=
t-defun-type-regexp'.
+    (setq-local treesit-thing-settings
+                `((html
+                   (defun "element")
+                   (sexp ,(regexp-opt '("element"
+                                        "text"
+                                        "attribute"
+                                        "value")))
+                   (sentence "tag")
+                   (text ,(regexp-opt '("comment" "text"))))
+                  (javascript
+                   (defun ,(rx (or "class_declaration"
+                                   "method_definition"
+                                   "function_declaration"
+                                   "lexical_declaration")))
+                   (sexp ,(regexp-opt js--treesit-sexp-nodes 'symbols))
+                   (sentence ,(regexp-opt js--treesit-sentence-nodes 'symb=
ols))
+                   (text ,(regexp-opt
+                           '("comment"
+                             "string_fragment")
+                           'symbols)))
+                  (css
+                   (defun "rule_set"))))
+
+    ;; Font-lock.
+
+    ;; In a multi-language scenario, font lock settings are usually a
+    ;; concatenation of language rules. As you can see, it is possible
+    ;; to extend/modify the default rule or use a different set of
+    ;; rules. See `php-ts-mode--custom-html-font-lock-settings' for more
+    ;; advanced usage.
+    (setq-local treesit-font-lock-settings
+                (append html-ts-mode--font-lock-settings
+                        js--treesit-font-lock-settings
+                        (append
+                         ;; Rule for coloring CSS property values.
+                         ;; Placed before `css--treesit-settings'
+                         ;; to win against the same rule contained therein.
+                         (treesit-font-lock-rules
+                          :language 'css
+                          :override t
+                          :feature 'variable
+                          '((plain_value) @mhtml-ts-mode--colorize-css-val=
ue))
+                         css--treesit-settings)))
+
+    ;; Tells treesit the list of features to fontify.
+    (setq-local treesit-font-lock-feature-list mhtml-ts-mode--feature-list)
+
+    ;; Imenu
+
+    ;; Setup Imenu: if no function is specified, try to find an object
+    ;; using `treesit-defun-name-function'.
+    ;; TODO: we need to see if it is possible to extend Imenu to
+    ;; embedded languages =E2=80=8B=E2=80=8Bas well.
+    (setq-local treesit-simple-imenu-settings
+                `(("Element" "\\`tag_name\\'" nil nil)))
+
+    (treesit-major-mode-setup)))
+
+(when (and (treesit-ready-p 'html) (treesit-ready-p 'javascript) (treesit-=
ready-p 'css))
+  (add-to-list
+   'auto-mode-alist '("\\.[sx]?html?\\(\\.[a-zA-Z_]+\\)?\\'" . mhtml-ts-mo=
de)))
+
+(provide 'mhtml-ts-mode)
+;;; mhtml-ts-mode.el ends here
=2D-=20
2.47.1


--nextPart2282944.vFx2qVVIhK--