Skip to content
This repository has been archived by the owner on Jan 2, 2023. It is now read-only.

react strings in tags also highlighted #118

Closed
DeadlySquad13 opened this issue Jul 8, 2022 · 13 comments
Closed

react strings in tags also highlighted #118

DeadlySquad13 opened this issue Jul 8, 2022 · 13 comments
Labels
help wanted Extra attention is needed

Comments

@DeadlySquad13
Copy link

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:
image

Expected:
image
@p00f
Copy link
Owner

p00f commented Jul 8, 2022 •
edited
Loading

Can you paste the code? Also the file extension

@DeadlySquad13
Copy link
Author

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
Copy link
Owner

p00f commented Jul 8, 2022

image

@p00f p00f closed this as completed Jul 8, 2022
p00f added a commit that referenced this issue Jul 8, 2022
@p00f
add jsx tags to extended mode
85ff020 
Resolves #118
@DeadlySquad13
Copy link
Author

DeadlySquad13 commented Jul 8, 2022 •
edited
Loading

image

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 = <table 1>,
    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
Copy link
Owner

p00f commented Jul 8, 2022

You're missing the update 85ff020

@DeadlySquad13
Copy link
Author

DeadlySquad13 commented Jul 8, 2022 •
edited
Loading

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:
image
In html they're highlighted properly, though ("App" is string - so it's green, to is attribute - so it's black, etc...):
image

@p00f
Copy link
Owner

p00f commented Jul 8, 2022

If I fix that then I don't think I can highlight the <>:
image

@p00f p00f reopened this Jul 8, 2022
@p00f
Copy link
Owner

p00f commented Jul 8, 2022

Should be fixed now
image

@p00f p00f closed this as completed Jul 8, 2022
@p00f p00f reopened this Jul 14, 2022
@p00f p00f closed this as completed Jul 14, 2022
@p00f p00f reopened this Jul 14, 2022
@p00f p00f changed the title [Feature Request] Extended mode (highlight tags) in react react strings in tags also highlighted Jul 14, 2022
@BerkeleyTrue
Copy link

Has the fix been released?

Also, not sure if it is relavent, but this doesn't seem to effect self-closing tags

image

....also, kinda digging it a bit. Does that make me crazy? Maybe a feature to have the attributes the same color as the rainbow parens?

@p00f
Copy link
Owner

p00f commented Jul 19, 2022

The fix caused another bug which was more serious so I rolled it back

@p00f
Copy link
Owner

p00f commented Jul 19, 2022

Maybe a feature to have the attributes the same color as the rainbow parens?

I think that would be possible if this issue gets fixed

@Dosx001 Dosx001 mentioned this issue Aug 5, 2022
Closed
@p00f p00f added the help wanted Extra attention is needed label Aug 6, 2022
@Gelio Gelio mentioned this issue Aug 6, 2022
Merged
p00f pushed a commit that referenced this issue Aug 6, 2022
@Gelio @p00f
Highlight only tag names in JSX and TSX
f41f9c7 
Changes the behavior of extended mode in JSX and TSX to only highlight
tag names and avoid highlighting props.

Related to #118
@Dosx001
Copy link

Dosx001 commented Aug 6, 2022

@p00f this is looking really great!!!
@Gelio good work!
image

@p00f
Copy link
Owner

p00f commented Aug 7, 2022

Closing as the issue seems to be fixed 🚀

@p00f p00f closed this as completed Aug 7, 2022
@Gelio Gelio mentioned this issue Aug 8, 2022
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@BerkeleyTrue @p00f @DeadlySquad13 @Dosx001