react strings in tags also highlighted

DeadlySquad13 commented 2 years ago

Hello, thanks for your plugin! Is it possible to highlight components inside React the same way as html tags are highlighted with extended_mode = true?

Have:

Expected:

p00f commented 2 years ago

Can you paste the code? Also the file extension

DeadlySquad13 commented 2 years ago

Can you paste the code? Also the file extension

Of course. App.tsx (extension is tsx, I suppose most people would expect it to also work in jsx):

import React from 'react';
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';

import { FaceMeshApp } from './FaceMeshApp';

export const App = () => {
  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/faceMeshApp">FaceMeshApp</Link>
            </li>
          </ul>
        </nav>

        {/* A <Routes> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Routes>
          <Route path="/about">{/* <About /> */}</Route>
          <Route path="/faceMeshApp">
            <FaceMeshApp />
          </Route>
          <Route path="/">{/* <Home /> */}</Route>
        </Routes>
      </div>
    </Router>
  );
};

p00f commented 2 years ago

DeadlySquad13 commented 2 years ago

Thanks for the attention to my issue! This screenshot looks like what I was hoping to get. Can you please show what I am missing on my side?

My configuration

Output of `TSInstallInfo`: ``` astro [✗] not installed bash [✓] installed beancount [✗] not installed bibtex [✗] not installed c [✓] installed c_sharp [✗] not installed clojure [✗] not installed cmake [✓] installed comment [✗] not installed commonlisp [✗] not installed cooklang [✗] not installed cpp [✓] installed css [✓] installed cuda [✗] not installed d [✗] not installed dart [✗] not installed devicetree [✗] not installed dockerfile [✗] not installed dot [✗] not installed eex [✗] not installed elixir [✗] not installed elm [✗] not installed elvish [✗] not installed embedded_template [✗] not installed erlang [✗] not installed fennel [✗] not installed fish [✗] not installed foam [✗] not installed fortran [✗] not installed fusion [✗] not installed gdscript [✗] not installed gleam [✗] not installed glimmer [✗] not installed glsl [✗] not installed go [✗] not installed godot_resource [✗] not installed gomod [✗] not installed gowork [✗] not installed graphql [✗] not installed hack [✗] not installed haskell [✗] not installed hcl [✗] not installed heex [✗] not installed help [✗] not installed hjson [✗] not installed hocon [✗] not installed html [✓] installed http [✗] not installed java [✗] not installed javascript [✓] installed jsdoc [✓] installed json [✗] not installed json5 [✗] not installed jsonc [✗] not installed julia [✗] not installed kotlin [✗] not installed lalrpop [✗] not installed latex [✗] not installed ledger [✗] not installed llvm [✗] not installed lua [✓] installed m68k [✗] not installed make [✗] not installed markdown [✗] not installed markdown_inline [✗] not installed ninja [✗] not installed nix [✗] not installed norg [✗] not installed ocaml [✗] not installed ocaml_interface [✗] not installed ocamllex [✗] not installed org [✗] not installed pascal [✗] not installed perl [✗] not installed php [✗] not installed phpdoc [✗] not installed pioasm [✗] not installed prisma [✗] not installed proto [✗] not installed pug [✗] not installed python [✓] installed ql [✗] not installed qmljs [✗] not installed query [✗] not installed r [✗] not installed rasi [✗] not installed regex [✓] installed rego [✗] not installed rnoweb [✗] not installed rst [✗] not installed ruby [✗] not installed rust [✗] not installed scala [✗] not installed scheme [✗] not installed scss [✓] installed slint [✗] not installed solidity [✗] not installed sparql [✗] not installed sql [✗] not installed supercollider [✗] not installed surface [✗] not installed svelte [✗] not installed swift [✗] not installed teal [✗] not installed tiger [✗] not installed tlaplus [✗] not installed todotxt [✗] not installed toml [✗] not installed tsx [✓] installed turtle [✗] not installed typescript [✓] installed v [✗] not installed vala [✗] not installed verilog [✗] not installed vim [✗] not installed vue [✗] not installed wgsl [✗] not installed yaml [✗] not installed yang [✗] not installed zig [✗] not installed ``` Output of `TSConfigInfo`: ``` { auto_install = false, ensure_installed = {}, ignore_install = <1>{}, modules = { context_commentstring = { disable = {}, enable = true, enable_autocmd = false, loaded = true, module_path = "ts_context_commentstring.internal" }, highlight = { additional_vim_regex_highlighting = false, custom_captures = {}, disable = {}, enable = true, loaded = true, module_path = "nvim-treesitter.highlight" }, ignore_install = , incremental_selection = { disable = {}, enable = true, keymaps = { init_selection = "gnn", node_decremental = "grm", node_incremental = "grn", scope_incremental = "grc" }, loaded = true, module_path = "nvim-treesitter.incremental_selection" }, indent = { disable = {}, enable = true, loaded = true, module_path = "nvim-treesitter.indent" }, rainbow = { colors = { "#cc241d", "#a89984", "#b16286", "#d79921", "#689d6a", "#d65d0e", "#458588" }, disable = {}, enable = true, extended_mode = true, loaded = true, module_path = "rainbow.internal", termcolors = { "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White" } } }, sync_install = false, update_strategy = "lockfile" } ```

p00f commented 2 years ago

You're missing the update 85ff020

DeadlySquad13 commented 2 years ago

You're missing the update 85ff020

Yes, my mistake, sorry, haven't seen that you mentioned a commit. I have tested it a little bit, everything is fine, however, highlighting is a little bit wrong: attributes and other captures inside tag are not taken into consideration: In html they're highlighted properly, though ("App" is string - so it's green, to is attribute - so it's black, etc...):