Syntax highlighting in 0.101.0 broken

[calebmer]

Just updated language-javascript and all the syntax highlighting is broken. I use ES7 and JSX, so I am using the most recent version of this package. Here is an image:

Everything is red and blue and incorrectly/inconsistently so. Also note line 40 where the default keyword is in red. This update is definitely not aesthetically pleasing and in no way consistent. Is there a way to downgrade?

PS: Also, are there plans of supporting JSX?

[winstliu]

What version did you update from? In addition, what syntax theme are you using (it seems like One Dark, but I just want to make sure), and do you have any customizations in your local stylesheet? You can downgrade by doing apm install language-javascript@0.xyz.0.

I don't believe there are any plans to support JSX, since it is already well-supported by language-babel and language-jsx.

/cc @simurai @MaximSokolov

[winstliu]

Most of the new highlighting you're seeming seems to be because of #242. I'm aware there's inconsistencies - we're still trying to improve support. In particular, it looks like the query block has been tokenized incorrectly (and the first Promise block isn't tokenizing its function parameters). Can you please paste a code snippet here that reproduces that bug so we can take a look at it? Thanks.

[simurai]

Here the second part of the example:

class Database {
  query(query, values) {
    let {client} = this
    return (
      client
      .then(client =>
        new Promise((resolve, reject) => (
          client.query(query, values, (error, result) => {
            if (error) { return reject(error) }
            resolve(result)
          })
        ))
      )
    )
  }
}

export default Database

And screenshot before vs after:

---

Everything is red and blue

Yeah, in that example it does feel a bit like too much coloring. Most of the red seems to get styled with .variable {}. So we could reset it in themes with:

.variable.other.argument {
    color: @syntax-text-color;
  }

And to reset the blue #242 (comment).

But next to the core themes, there are probably 100s of community themes that are affected too. Well, all that do .variable { color: some-color; }. So maybe another option is to not use the .variable scope, but something else instead. Not sure what though. Or just other argument js? Then no changes to themes are necessary, but themes or in style.less it's still possible to style them.. it would be opt-in instead of opt-out.

@MaximSokolov what do you think about that? I know variable other argument would be more correct, but just to minimize the impact and still make it possible to style for those who want.

[winstliu]

When we (eventually) add tokenization for regular variables (eg var variable1), what will happen then? There'll really be no avoiding using .variable.

[simurai]

Hmm.. I see. Well, I somewhat agree that languages should have the freedom to do anything they want without having to check how/if it affects themes. If something looks visually too noisy it's the theme's responsibility to restyle it. Well, it's easier said than persuade all theme authors. 😅

[MaximSokolov]

note line 40 where the default keyword is in red.

See #237 (comment)

Everything is red and blue

It's a syntax-theme specific issue. "One Dark Syntax" color all variables like that (see variables in PHP). Most of variables just aren't tokenized
Related: atom/atom#9562

Everything is red and blue

I agree that function/method calls should be same color as function name in declaration.
I used entity.name.function because I think we should reuse standart TextMate scopes:
meta.method-call, meta.function-call (provide context) + entity.name.function

It can be entity.other.function-call, entity.other.method-call though

it looks like the query block has been tokenized incorrectly

#260

[calebmer]

I can confirm that I am using both One Dark UI theme and One Dark syntax theme. Also, I'm not entirely sure what I upgraded from, but I've had language-javascript installed as a community package for a while now so I can say, semi-confidently, two versions before 0.101.1 (so 0.100.0 or 0.99.0 I think).

Here is the entire file and another one having problems:

import Postgres from 'pg'

class Database {
  config = null
  client = null

  constructor(config) {
    this.config = config
  }

  connect() {
    let {config} = this

    this.client = new Promise((resolve, reject) => {
      Postgres.connect(config, (error, client) => {
        if (error) { return reject(error) }
        resolve(client)
      })
    })

    return this.client.then(() => null)
  }

  query(query, values) {
    return (
      this.client
      .then(client =>
        new Promise((resolve, reject) => (
          client.query(query, values, (error, result) => {
            if (error) { return reject(error) }
            resolve(result)
          })
        ))
      )
    )
  }
}

export default Database

Another broken file, weirdness happens around the anonymous middleware function:

import ReactDOMServer from 'react-dom/server'
import App from '../app'

App.use(function (req, res, next) {
  Object.assign(res, {
    render(nodes) {
      if (!Array.isArray(nodes)) { nodes = [nodes] }
      let markup = ''
      nodes.forEach(node => markup += ReactDOMServer.renderToStaticMarkup(node))
      res.write(markup)
    }
  })

  next()
})

My custom css:

@import 'colors';

atom-text-editor::shadow {
  .operator {
    color: @hue-3;
  }
}

[lukeapage]

My syntax highlighting is broken after upgrading from 100 to 101.1 - its breaking when comments contain '
e.g.

            _.forOwn(this.subscriptionList, function(priceSub) {

                if (oldFilter == null) { // we don't know what the previous filter was
                    if (newFilter == 'all') { // ? -> all
                        //resume all

[MaximSokolov]

@lukeapage it's fixed on master. Will be available in v102

[lukeapage]

Great thanks