Re: Foo.html.erb -- major mode

[Yuan Fu <casouri@gmail.com>]

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

> 
> Also, I’ve bumped into the Info page about using Tree Sitter for multi language modes.  Is there an example of a mode that uses multiple languages that I can look at for ideas?

I’ve written a tiny html mode to make sure the multi language APIs make sense. Hopefully I’ll find time to expand it a bit and add a tree-sitter HTML mode. (If you are interested in doing it, please go ahead.)

Yuan


[-- Attachment #2: veb-mode.el --]
[-- Type: application/octet-stream, Size: 2659 bytes --]

;;; veb-mode.el --- HTML mode  -*- lexical-binding: t; -*-

;; Author: Yuan Fu <casouri@gmail.com>

;;; Commentary:

;;; Code:

(require 'treesit)
(require 'js)
(require 'css-mode)

(defvar veb-mode--font-lock-settings
  (append
   (treesit-font-lock-rules

    :feature 'html-tag
    :language 'html
    '((tag_name) @font-lock-comment-face)

    :feature 'html-tag-error
    :language 'html
    '((erroneous_end_tag_name) @error)

    :feature 'html-meta
    :language 'html
    '((doctype) @font-lock-comment-face)

    :feature 'html-comment
    :language 'html
    '((comment) @font-lock-comment-face)

    :feature 'html-attribute
    :language 'html
    '((attribute_name) @font-lock-comment-face)

    :feature 'css-selector
    :language 'css
    '((class_selector) @css-selector)

    :feature 'css-property
    :language 'css
    '((property_name) @css-property)

    :feature 'css-comment
    :language 'css
    '((comment) @font-lock-comment-face))

   (mapcar (lambda (rule)
             (list (nth 0 rule)
                   (nth 1 rule)
                   (intern (format "js-%s" (nth 2 rule)))
                   (nth 3 rule)))
           js--treesit-font-lock-settings)))

(defvar veb-mode--range-settings
  (treesit-range-rules
   :embed 'javascript
   :host 'html
   '((script_element (raw_text) @cap))

   :embed 'css
   :host 'html
   '((style_element (raw_text) @cap))))

(defun veb-mode--language-at (pos)
  (let ((node (treesit-node-at pos 'html)))
    (pcase (treesit-node-type (treesit-node-parent node))
      ("script_element" 'javascript)
      ("style_element" 'css)
      (_ 'html))))

(define-derived-mode veb-mode prog-mode "Veb"
  "A mode for HTML + CSS + Javascript."
  (cond
   ((treesit-ready-p '(html css javascript))
    (treesit-parser-create 'javascript)
    (treesit-parser-create 'css)
    (treesit-parser-create 'html)

    (setq-local treesit-font-lock-settings veb-mode--font-lock-settings)
    (setq-local treesit-font-lock-feature-list
                '((html-tag html-comment html-tag-error)
                  ( html-attribute
                    css-comment css-property css-selector
                    js-comment js-string js-declaration
                    js-string js-keyword js-identifier js-expression
                    js-constant)
                  (js-property js-pattern js-jsx)))
    (setq-local treesit-range-settings veb-mode--range-settings)
    (setq-local treesit-language-at-point-function
                #'veb-mode--language-at)

    (treesit-major-mode-setup))))

;;;###autoload
(add-to-list 'auto-mode-alist '("\\.html\\'" . veb-mode))

(provide 'veb-mode)

;;; veb-mode.el ends here