;;; lisp/langs/web.el --- JS / TS / HTML / CSS / React  -*- lexical-binding: t -*-

;; web-mode for JSX, TSX, and HTML template files
(use-package web-mode
  :mode (("\\.jsx\\'"  . web-mode)
         ("\\.tsx\\'"  . web-mode)
         ("\\.html?\\'" . web-mode))
  :custom
  (web-mode-markup-indent-offset 2)
  (web-mode-css-indent-offset    2)
  (web-mode-code-indent-offset   2))

;; typescript-language-server handles JS, TS, JSX, TSX
(with-eval-after-load 'eglot
  (add-to-list 'eglot-server-programs
               '((js-mode js-ts-mode typescript-ts-mode tsx-ts-mode web-mode)
                 . ("typescript-language-server" "--stdio")))
  (add-to-list 'eglot-server-programs
               '((html-mode mhtml-mode)
                 . ("vscode-html-language-server" "--stdio")))
  (add-to-list 'eglot-server-programs
               '((css-mode css-ts-mode)
                 . ("vscode-css-language-server" "--stdio"))))

(dolist (hook '(js-mode-hook js-ts-mode-hook
                typescript-ts-mode-hook tsx-ts-mode-hook
                web-mode-hook
                html-mode-hook mhtml-mode-hook
                css-mode-hook css-ts-mode-hook))
  (add-hook hook #'eglot-ensure))

;; Async formatting via Prettier (apheleia runs formatters without blocking)
(use-package apheleia
  :hook ((js-mode           . apheleia-mode)
         (js-ts-mode        . apheleia-mode)
         (typescript-ts-mode . apheleia-mode)
         (tsx-ts-mode       . apheleia-mode)
         (css-mode          . apheleia-mode)
         (css-ts-mode       . apheleia-mode)
         (web-mode          . apheleia-mode))
  :config
  (setf (alist-get 'web-mode apheleia-mode-alist) '(prettier)))