orzechowskid / tsx-mode.el

a batteries-included Emacs major mode for Typescript, Javascript, TSX, and JSX files

tsx-mode.el: a batteries-included Emacs major mode for TSX/JSX files

Features

• code analysis and completion
• syntax highlighting
• indentation (including JSX/TSX)
• code folding
• code-coverage overlays
• syntax highlighting, indentation, and code completion for CSS-in-JS tagged template strings

Installation

this branch of code is intended for emacs version 29 or newer. support for emacs versions 27 and 28 can be found here: https://github.com/orzechowskid/tsx-mode.el/tree/emacs28.

Dependencies

• Emacs 29 or newer, compiled with treesit support
• coverlay (available on MELPA)
• css-in-js-mode
• origami.el (available on MELPA)

Download

download this package and place the .el files from it in a directory on your load-path.

or install this repository (and all its package dependencies) via straight.el:

(straight-use-package '(tsx-mode :type git :host github :repo "orzechowskid/tsx-mode.el"))

Require

(require 'tsx-mode)

Enable

(tsx-mode t)

Enable by default for JS/TS files

(add-to-list 'auto-mode-alist '("\\.[jt]s[x]?\\'" . tsx-mode)

Keybindings

all tsx-mode keybindings live under the C-c t prefix.

Binding	Function	Purpose
C-c t f	origami-toggle-node	toggle code-folding for current region
C-c t F	origami-toggle-all-nodes	toggle code-folding for all regions
C-c t c	tsx-mode-coverage-toggle	toggle code-coverage overlay

Configuration

Useful variables are members of the tsx-mode customization group and can be viewed and modified with the command M-x customize-group [RET] tsx-mode [RET].

License

GPLv3. see LICENSE in the top level of this repository.

tsx-mode.el's Issues

clean up compiler warnings

each .el file in this project generates at least a handful of warnings when compiled. these should be cleaned up.

Highlighting is broken

Hey there,

highlighting is broken for comments. // foo in TSX code is marked as comment:

The // foo code is not a comment but a string.

I know that (most of?) syntax highlighting is done via TreeSitter, but I am unsure if you do some modifications. So sorry if I report it at the wrong place.

Best regards,
CK

Origami regions for things other than CSS-in-JS

Origami is great since it lets you fold large sections of code such as function bodies or classes. The default behaviour of tsx-mode is to set origami regions exclusively to CSS-in-JS regions, so these can be folded. This is great, but thoroughly counterproductive for anyone that wishes to use origami for folding actual blocks of code. With this issue I'd like to request that origami regions are created not just for CSS-in-JS, but can also be created, configurably, for any tree-sitter node. Curly brace blocks, for example, should be included as default behaviour, as it is for other C-like languages.

CSS in JS Syntax highlighting comes and goes as you exit CSS region

Not sure if this is a bug or working as designed. When you enter a CSS in JS region it gets syntax highlighted, and when the cursor leaves the region it's highlighting as a regular string again:

Generator names aren't highlighted

Repro:

function* myGenerator() {}

myGenerator is rendered with default-face. Removing the asterisk causes it to be rendered with tree-sitter-hl-face:function, as expected.

Generator calls do appear to be highlighted correctly, however.

Indent does not function correctly until `tsi-mode` is reenabled

Hello,

I noticed that when I use this plugin, the tsi plugin's functionality does not seem to work (e.g, indentation is incorrect) until I reenable tsi-mode.

This occurs with emacs 28.1.90.

I can reproduce issue like this:

1. Open tsx file containing:

const TestComp = (): ReactElement => {
  const { thing } = useContext(); <-- put cursor here

  return (
    <div>
    </div>
  );
};

2. Press enter
3. Observe cursor going to beginning of next line without being indented
4. Disable and reenable tsi mode
5. Do the same thing
6. Observe the cursor being indented correctly

Is there some load order of dependencies that is not being followed or something? Thanks.

Malformed dependency metadata: "tsx-mode.el"

I am having trouble making this package work with elpaca. Here is what I am running into:

I've installed all of the dependencies and emacs was built with the tree-sitter support. I am unsure what's going on here.

Comment behavior for JSX incorrect in some edge cases

example 1

// original:
<Component key={k} value={v} data={d} />

// expected:
<Component /* key={k} value={v} */ data={d} />

// actual:
<Component {/* key={k} value={v} */} data={d} />

example 2

// original
const yeet = () => {
  return (
   <Select>
     {items.map(v => { // <--------------------- point A
       const str = JSON.stringify(v);
       return (
         <Select.Option key={str} value={str} data={v}>
           <FieldOption fieldData={v} />
         </Select.Option>
        );
      })} // <---------------------------------- point B
   </Select>
  )
}

// if I do a visual selection from point A to point B and then comment region,
// eventually i get this incorrect output:
const yeet = () => {
  return (
   <Select>
     // {items.map(v => {
     //   const str = JSON.stringify(v);
     //   return (
     //     <Select.Option key={str} value={str} data={v}>
     //       <FieldOption fieldData={v} />
     //     </Select.Option>
     //    );
  //  })}
   </Select>
  )
}

// if I do a visual selection from point B to point A and then comment region,
// usually i get this correct output:
const yeet = () => {
  return (
   <Select>
   {/*   {items.map(v => { */}
   {/*     const str = JSON.stringify(v); */}
   {/*     return ( */}
   {/*       <Select.Option key={str} value={str} data={v}> */}
   {/*         <FieldOption fieldData={v} /> */}
   {/*       </Select.Option> */}
   {/*      ); */}
      {/* })} */}
    </Select>
  )
}

the behavior seems to be kind of flakey, and depends on where you begin the selection.

rjsx-mode seems to handle these cases correctly if you'd like an example to work against

Thanks for the package! looking forward to the increased adoption of tree-sitter for language major modes : )

Indentation is broken, giving this error message: `tsi-indent-line: Symbol’s value as variable is void: node-at-point`

Hey there,

this morning I updated treesitter and now indentation is broken: tsi-indent-line: Symbol’s value as variable is void: node-at-point

Stacktrace:

Debugger entered--Lisp error: (void-variable node-at-point)
  tsi-typescript--get-indent-for-current-line()
  tsi-indent-line(tsi-typescript--get-indent-for tsi-typescript--get-indent-for-current-line)
  tsi-typescript--indent-line()
  indent-according-to-mode()
  #<subr newline-and-indent>()
  apply(#<subr newline-and-indent> nil)
  newline-and-indent()
  funcall-interactively(newline-and-indent)
  command-execute(newline-and-indent)

• elisp-tree-sitter is at commit 5e1091658d625984c6c5756e3550c4d2eebd73a1
• tree-sitter-langs is at commit 0dd5e56e2f5646aa51ed0fc9eb869a8f7090228a
• tsx-mode is at commit 938bb7e
• tsi is at commit 90410f6c0dbdfdd667ed3d10999a036c2a950e6d

Best regards,
CK

eslint LSP integration

I see that in the 29 branch of this plugin, the built-in eglot LSP client is used. I may be wrong but I think eglot on supports one server per buffer. Is there any way to integrate another lsp (commonly eslint) at this point?

Thanks.

define end of CSS-in-JS region by either `:end` regex or `(eobp)`

the following file should font-lock a single CSS-in-JS region which spans from the backtick to EOF:

import styled from 'styled-components';

const StyledCmp = styled.div`

i.e., regions with a start but no end should still be treated as CSS-in-JS.

Initialization error

Following the README.md of this repository and enabling tsx-mode, I'm getting the following error:

⛔ Warning (initialization): An error occurred while loading `.emacs’:

Wrong number of arguments: ((tsx-mode-abbrev-table t) nil A batteries-included major mode for JSX and friends.

In addition to any hooks its parent mode `prog-mode' might have run, this mode
runs the hook `tsx-mode-hook', as the final or penultimate step during
initialization.

Environment

M-x emacs-version
GNU Emacs 29.1.50 (build 1, x86_64-pc-linux-gnu, GTK+ Version 3.24.33, cairo version 1.16.0) of 2023-09-13

Emacs built with tree-sitter support using:

./configure --without-compress-install --with-native-compilation --with-json --with-mailutils --with-tree-sitter

Pertinent part of the .emacs file:

(straight-use-package '(css-in-js-mode :type git :host github :repo "orzechowskid/tree-sitter-css-in-js"))
(straight-use-package '(tsi :type git :host github :repo "orzechowskid/tsi.el"))
(straight-use-package '(tsx-mode :type git :host github :repo "orzechowskid/tsx-mode.el"))

(require 'tsx-mode)
(tsx-mode t)
(add-to-list 'auto-mode-alist '("\\.[jt]s[x]?\\'" . tsx-mode)

fix indentation and autocompletion for JSX/TSX `css` props

example of incorrect indentation:

export const MyComponent = () => (
  <div
    css={css`
  display: block;
  color: tomato;
    `}
  />
);

Auto-close current tag, or close current tag like rjsx-mode does

Hi there,

first of all: thanks for your work!

Is it possible to automatically close the current tag like in web-mode, or, alternatively, mimic the behaviour of rjsx-mode with C-d?

Best regards,
CK

install fails

Hi,
I'm on Emacs 27, and the installation fails with:

error: Could not find package tsi. Updating recipe repositories: (org-elpa melpa gnu-elpa-mirror nongnu-elpa el-get emacsmirror-mirror) with ‘straight-pull-recipe-repositories’ may fix this

Any idea how I can fix this ? Thank you!

Self closing tag inserted in generic params

With tsx-mode-auto-tags on, typing a < for a generic param will insert a self closing tag </>:

I hacked around it by checking (tsx-mode--is-in-jsx-p) in tsx-mode-tsx-maybe-insert-self-closing-tag:

(defun tsx-mode-tsx-maybe-insert-self-closing-tag ()
  "When `tsx-mode-tsx-auto-tags' is non-nil, insert a self-closing element
instead of a plain '<' character (where it makes sense to)."
  (interactive)
  (if (and (tsx-mode--is-in-jsx-p)
           (or (bobp)
           (and tsx-mode-tsx-auto-tags
                (tsx-mode--tsx-self-closing-tag-at-point-p))))
      (progn
        (insert "</>")
        (backward-char 2))
    (insert "<")))

That seems to work, but I suspect the problem is tsx-mode--tsx-self-closing-tag-at-point-p: that should not be returning true here.

Interpolating Javascript Breaks CSS Syntax Highlighting

A interpolated JS string in CSS causes all subsequent CSS to be syntax highlighted as if it were Javascript:

Running describe-face tells me that display, flex-direction and height, are tree-sitter-hl-face:variable, which is correct for CSS.

However background-color and width are tree-sitter-hl-face:tag, which is not correct.

Library Header still blocks installation tsx-mode on Emacs 27 +

The Library Header: ;;; Package-Requires: ((emacs "28.1") still blocks installation on version below 27+ (Debian 11)

Auto-close tags doesn't work reliably when opening an existing file

Given a file Settings.tsx file with this context:

const SevdeskSettings = () => {
  return (
    <fieldset>
      <legend>Foo</legend>
    </fieldset>
  );
};

export default SevdeskSettings;

Auto-closing tags doesn't work. E.g. placing the cursor behind the </legend> and opening a new tag just inserts the left angle bracket, but not, as expected, the />. When I enter e.g. a <span> manually and now enter a <, it inserts a /> automatically.

I cleared the eln-cache directory before trying. With tsx-mode-debug set to t it gives me these messages in the *Messages* buffer when entering <span>< after the </legend>:

old region: nil new region: nil
current CSS region: nil, in jsx:
You can run the command ‘eval-expression’ with M-:
current CSS region: nil, in jsx:
checking current named node jsx_text for self-closing tag support...
checking named node jsx_closing_element and anon node > for self-closing tag support...
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 59-87
fontifying 87-144
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 1-144
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 59-89
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 59-90
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 59-91
fontifying 91-148
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 1-148
fontifying 148-149
checking current named node jsx_text for self-closing tag support...
checking named node jsx_opening_element and anon node > for self-closing tag support...
regions: nil
old region: nil new region: nil [2 times]
current CSS region: nil, in jsx:
fontifying 59-95
fontifying 95-152

However, it does work as expected when I delete the fieldset and enter it manually again.

`comment-region` comments with `//`

Hey there,

comment region comments with //. Within tsx code this is just a string. It should use {/* */} in a TSX context and // within a TS context.

Best regards,
CK

Disabling eldoc-doc-buffer minibuffer popping up all the time

Not sure if it's related to this mode or not, but I'm trying to disable whatever is causing an eldoc-doc-buffer minibuffer to show up all the time when this mode gets activated. I've tried numerous lsp related settings and eldoc related settings but without much luck. I also know that it is eldoc related because if I manually disable eldoc-mode in the buffer it stops appearing. I've also tried various hooks and what not to disable eldoc after a buffer activates tsx-mode, but not having much luck. Clues would be appreciated.

capf functions still getting overwritten by lsp

Doesn't work on Emacs29 / NixOS

Hi,

I have followed your instruction all dependencies are installed. This is my configuration:

  '("elpa-devel" . "https://elpa.gnu.org/devel/packages/") t)

(package-initialize)
(defvar bootstrap-version)
(let ((bootstrap-file
       (expand-file-name
        "straight/repos/straight.el/bootstrap.el"
        (or (bound-and-true-p straight-base-dir)
            user-emacs-directory)))
      (bootstrap-version 7))
  (unless (file-exists-p bootstrap-file)
    (with-current-buffer
        (url-retrieve-synchronously
         "https://raw.githubusercontent.com/radian-software/straight.el/develop/install.el"
         'silent 'inhibit-cookies)
      (goto-char (point-max))
      (eval-print-last-sexp)))
  (load bootstrap-file nil 'nomessage))

;; (straight-use-package 'lsp-mode)
(straight-use-package 'coverlay)
(straight-use-package '(css-in-js-mode :type git :host github :repo "orzechowskid/tree-sitter-css-in-js"))
(straight-use-package '(tsi :type git :host github :repo "orzechowskid/tsi.el"))
(straight-use-package '(tsx-mode :type git :host github :repo "orzechowskid/tsx-mode.el" ))

(add-to-list 'load-path (expand-file-name "/home/mik/.emacs.d/origami.el/"))
(require 'origami)

Emacs 29 is built with tree-sitter:

system-configuration-options is a variable defined in ‘C source code’.

Its value is
"--prefix=/nix/store/0g4xxdsn4xp9qhgc4cylbksqpwsn51vc-emacs-29.1 --disable-build-details --with-modules --with-x-toolkit=lucid --with-xft --with-cairo --with-native-compilation --with-tree-sitter --with-xinput2"

String containing the configuration options Emacs was built with.

But when I try to use tsx-mode I got this warnings and tsx file doesn't seem to be handled (no syntax highlighting):

⛔ Warning (comp): lsp-wgsl.el:179:2: Warning: ‘wgsl-analyzer/requestConfiguration’ is a malformed function
⛔ Warning (comp): lsp-wgsl.el:198:24: Warning: reference to free variable ‘lsp-wgsl’
⛔ Warning (comp): lsp-wgsl.el:198:2: Warning: the function ‘lsp-consistency-check’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:192:42: Warning: the function ‘lsp-package-ensure’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:190:35: Warning: the function ‘lsp-activate-on’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:188:40: Warning: the function ‘lsp--set-configuration’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:185:38: Warning: the function ‘with-lsp-workspace’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:182:43: Warning: the function ‘lsp-package-path’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:180:36: Warning: the function ‘lsp-stdio-connection’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:180:3: Warning: the function ‘make-lsp-client’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:179:2: Warning: the function ‘lsp-register-client’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:173:2: Warning: the function ‘lsp-dependency’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:161:22: Warning: the function ‘lsp--region-to-range’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:141:36: Warning: the function ‘lsp--buffer-uri’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:139:4: Warning: the function ‘lsp-request-async’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:117:41: Warning: the function ‘lsp-json-bool’ is not known to be defined.
⛔ Warning (comp): lsp-wgsl.el:98:37: Warning: the function ‘lsp-ht’ is not known to be defined.
⛔ Warning (comp): eldoc.el:690:35: Warning: ‘eldoc--make-callback’ called with 2 arguments, but accepts only 1
⛔ Warning (comp): eldoc.el:701:40: Warning: ‘eldoc--make-callback’ called with 2 arguments, but accepts only 1
⛔ Warning (comp): eldoc.el:715:41: Warning: ‘eldoc--make-callback’ called with 2 arguments, but accepts only 1
⛔ Warning (comp): eldoc.el:726:41: Warning: ‘eldoc--make-callback’ called with 2 arguments, but accepts only 1
⛔ Warning (comp): eldoc.el:831:8: Warning: function eldoc--make-callback used to take 1 argument, now takes 2
⛔ Warning (comp): lsp-json.el:38:2: Warning: custom-declare-variable `lsp-json-schemas' docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:188:2: Warning: docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:188:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): coverlay.el:198:2: Warning: docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:198:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): coverlay.el:221:2: Warning: docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:400:18: Warning: ‘point-at-bol’ is an obsolete function (as of 29.1); use ‘line-beginning-position’ or ‘pos-bol’ instead.
⛔ Warning (comp): coverlay.el:400:45: Warning: ‘point-at-eol’ is an obsolete function (as of 29.1); use ‘line-end-position’ or ‘pos-eol’ instead.
⛔ Warning (comp): coverlay.el:512:2: Warning: docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:512:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): coverlay.el:524:2: Warning: docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:524:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): coverlay.el:528:2: Warning: docstring wider than 80 characters
⛔ Warning (comp): coverlay.el:528:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): coverlay.el:588:54: Warning: Alias for ‘coverlay-minor-mode-hook’ should be declared before its referent
⛔ Warning (comp): tsc-dyn-get.el:185:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): css-in-js-mode.el:158:2: Warning: defvar `css-in-js-mode--font-lock-feature-list' docstring wider than 80 characters
⛔ Warning (comp): css-in-js-mode.el:198:53: Warning: Unused lexical argument `override'
⛔ Warning (comp): css-in-js-mode.el:198:62: Warning: Unused lexical argument `start'
⛔ Warning (comp): css-in-js-mode.el:198:68: Warning: Unused lexical argument `end'
⛔ Warning (comp): css-in-js-mode.el:216:44: Warning: Unused lexical argument `start'
⛔ Warning (comp): css-in-js-mode.el:216:50: Warning: Unused lexical argument `end'
⛔ Warning (comp): css-in-js-mode.el:218:9: Warning: reference to free variable ‘css-in-js-mode’
⛔ Warning (comp): css-in-js-mode.el:244:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): tree-sitter-hl.el:263:2: Warning: custom-declare-variable `tree-sitter-hl-face-mapping-function' docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): tree-sitter-hl.el:487:12: Warning: ‘inhibit-point-motion-hooks’ is an obsolete variable (as of 25.1); use ‘cursor-intangible-mode’ or ‘cursor-sensor-mode’ instead
⛔ Warning (comp): tree-sitter-hl.el:639:2: Warning: docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): /home/mik/.emacs.d/straight/build/tsi/tsi.test.el: Error: File is missing Cannot open load file
⛔ Warning (comp): tsi-typescript.test.el:11:7: Warning: assignment to free variable ‘tsi--test-indent-fn’
⛔ Warning (comp): tsi-typescript.test.el:744:2: Warning: the function ‘buttercup-run-discover’ is not known to be defined.
⛔ Warning (comp): tsi-typescript.test.el:16:7: Warning: the function ‘expect’ is not known to be defined.
⛔ Warning (comp): tsi-typescript.test.el:15:3: Warning: the function ‘it’ is not known to be defined.
⛔ Warning (comp): tsi-typescript.test.el:13:2: Warning: the function ‘describe’ is not known to be defined.
⛔ Warning (comp): tsi-typescript.el:481:17: Warning: reference to free variable ‘tsi-typescript-mode-map’
⛔ Warning (comp): tsi.el:25:2: Warning: defvar `tsi-debug' docstring wider than 80 characters
⛔ Warning (comp): tsi.el:76:14: Warning: ‘tree-sitter-node-at-point’ is an obsolete function (as of 2021-08-30); use ‘tree-sitter-node-at-pos’ instead.
⛔ Warning (comp): tsi.el:107:9: Warning: Unused lexical variable `empty-line'
⛔ Warning (comp): tsi.el:116:13: Warning: ‘tree-sitter-node-at-point’ is an obsolete function (as of 2021-08-30); use ‘tree-sitter-node-at-pos’ instead.
⛔ Warning (comp): tsi.el:125:14: Warning: ‘tree-sitter-node-at-point’ is an obsolete function (as of 2021-08-30); use ‘tree-sitter-node-at-pos’ instead.
⛔ Warning (comp): tsi-json.test.el:11:7: Warning: assignment to free variable ‘tsi--test-indent-fn’
⛔ Warning (comp): tsi-json.test.el:48:2: Warning: the function ‘buttercup-run-discover’ is not known to be defined.
⛔ Warning (comp): tsi-json.test.el:16:7: Warning: the function ‘expect’ is not known to be defined.
⛔ Warning (comp): tsi-json.test.el:15:3: Warning: the function ‘it’ is not known to be defined.
⛔ Warning (comp): tsi-json.test.el:13:2: Warning: the function ‘describe’ is not known to be defined.
⛔ Warning (comp): tsi-json.el:41:11: Warning: Unused lexical variable `current-type'
⛔ Warning (comp): tsi-json.el:109:17: Warning: reference to free variable ‘tsi-json-mode-map’
⛔ Warning (comp): tsi-css.test.el:11:7: Warning: assignment to free variable ‘tsi--test-indent-fn’
⛔ Warning (comp): tsi-css.test.el:114:2: Warning: the function ‘buttercup-run-discover’ is not known to be defined.
⛔ Warning (comp): tsi-css.test.el:16:7: Warning: the function ‘expect’ is not known to be defined.
⛔ Warning (comp): tsi-css.test.el:15:3: Warning: the function ‘it’ is not known to be defined.
⛔ Warning (comp): tsi-css.test.el:13:2: Warning: the function ‘describe’ is not known to be defined.
⛔ Warning (comp): tsi-css.el:138:17: Warning: reference to free variable ‘tsi-css-mode-map’
⛔ Warning (comp): tsx-mode.el:35:2: Warning: custom-declare-variable `tsx-mode-code-fold-queries' docstring has wrong usage of unescaped single quotes (use \= or different quoting)
⛔ Warning (comp): tsx-mode.el:96:28: Warning: Alias for ‘tsx-mode-use-jsx-auto-tags’ should be declared before its referent
⛔ Warning (comp): tsx-mode.el:100:32: Warning: Alias for ‘tsx-mode-code-fold-queries’ should be declared before its referent
⛔ Warning (comp): tsx-mode.el:121:54: Warning: Unused lexical argument `start'
⛔ Warning (comp): tsx-mode.el:158:12: Warning: Unused lexical argument `content'
⛔ Warning (comp): tsx-mode.el:162:14: Warning: reference to free variable ‘tsx-mode--code-fold-query’
⛔ Warning (comp): tsx-mode.el:251:10: Warning: reference to free variable ‘current-named-node-type’
⛔ Warning (comp): tsx-mode.el:356:7: Warning: reference to free variable ‘origami-parser-alist’
⛔ Warning (comp): tsx-mode.el:356:7: Warning: assignment to free variable ‘origami-parser-alist’
⛔ Warning (comp): tsx-mode.el:358:11: Warning: assignment to free variable ‘tsx-mode--code-fold-query’
⛔ Warning (comp): tsx-mode.el:370:6: Warning: the function ‘corfu-popupinfo-mode’ is not known to be defined.
⛔ Warning (comp): tsx-mode.el:369:6: Warning: the function ‘corfu-mode’ is not known to be defined.
⛔ Warning (comp): tsx-mode.el:363:6: Warning: the function ‘origami-mode’ is not known to be defined.
⛔ Warning (comp): tsx-mode.el:305:6: Warning: the function ‘origami-toggle-all-nodes’ is not known to be defined.
⛔ Warning (comp): tsx-mode.el:298:6: Warning: the function ‘origami-toggle-node’ is not known to be defined.
⛔ Warning (comp): tsx-mode.el:250:28: Warning: the function ‘treesit-node-at-pos’ is not known to be defined.
⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for typescript is unavailable (not-found): (libtree-sitter-typescript libtree-sitter-typescript.0 libtree-sitter-typescript.0.0 libtree-sitter-typescript.so libtree-sitter-typescript.so.0 libtree-sitter-typescript.so.0.0) No such file or directory
⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for tsx is unavailable (not-found): (libtree-sitter-tsx libtree-sitter-tsx.0 libtree-sitter-tsx.0.0 libtree-sitter-tsx.so libtree-sitter-tsx.so.0 libtree-sitter-tsx.so.0.0) No such file or directory
⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for tsx is unavailable (not-found): (libtree-sitter-tsx libtree-sitter-tsx.0 libtree-sitter-tsx.0.0 libtree-sitter-tsx.so libtree-sitter-tsx.so.0 libtree-sitter-tsx.so.0.0) No such file or directory
⛔ Warning (treesit): Cannot activate tree-sitter, because language grammar for tsx is unavailable (not-found): (libtree-sitter-tsx libtree-sitter-tsx.0 libtree-sitter-tsx.0.0 libtree-sitter-tsx.so libtree-sitter-tsx.so.0 libtree-sitter-tsx.so.0.0) No such file or directory

Where I can find these language gramar files ?

Support LSP based CSS completions

I had been using the vscode-style-components plugin with lsp-mode for CSS in JS completion, via this configuration:

(setq lsp-clients-typescript-plugins
      (vector
       (list :name "typescript-styled-plugin"
               :location "/path/to/styled-components.vscode-styled-components-1.7.0")))

CSS mode capf seems to work fine too; can't really say which is better yet. But it'd be nice to support both options. Not a huge issue, but might be nice sort of thing.

incorrect font locking after creating a new css-in-js region

probably safest to re-lock the entire buffer when we detect that the number of regions has changed.

CSS in JS indentation of interpolated string incorrect when first line in CSS in JS region

This does not indent correctly:

const displayFlex = 'display: flex';

const myCss = css`
${displayFlex}
  flex-direction: row;
`;

Note that ${displayFlex} is not indented. If I move that down a line it is indented correctly:

const myCss = css`
  flex-direction: row;
  ${displayFlex}
`;

This is an artificial example, but my projects use a design system library where it's comment to import and insert interpolated constants for typography styles and such - ie ${Typography.importantBig} that might sent font size, weight, etc.

Wrong indentation with indent-region (which calls lsp-format-region)

I know you said indent issues should be sent to the tsi project but this may belong here

When I press TAB on a line the indent is 2 (correct) but when mark a region and use indent-region (ie. lsp-format-region) the indent is 4.

I have set tsi-typescript-indent-offset to 2.

Tracing lsp communication

[Trace - 06:19:45 ] Sending request 'textDocument/rangeFormatting - (172)'.
Params: {
  "textDocument": {
    "uri": "file:///c%3A/Users/vagn/src/vj-react-app/src/App.tsx"
  },
  "options": {
    "tabSize": 4,
    "insertSpaces": true
  },

Note the tabSize.

My local fix is

(add-to-list 'lsp--formatting-indent-alist '(tsx-mode . tsi-typescript-indent-offset))

Should tsx-mode or tsi fix this?

Is it possible to get GraphQL syntax highlighting for `gql` tags?

when working with GraphQL one uses a lot of gql tags. Is it possible to highlight them like CSS?