Many symbols without scopes

[benogle]

The support for js is pretty bad. Most of the issues are in the way of parsing variable names.

Load this example into atom. When I say something is not tagged I mean its scope is only .source.js.

import * as p from 'point';  //test
import { x as y } from 'coordinates';  //test
const ANSWER = 42;            // ANSWER not tagged (fixed by #138, #140)

var one, two, three, four;    // variables not tagged
var five = 5, six = 6;        // variables not tagged

function someFunc(arg1, arg2, arg3) {
  var aVariable = 'ok';       // aVariable not tagged
  aVariable = 'nope';         // aVariable not tagged
  var anArray = new Array()   // anArray not tagged (fixed)
  anArray.slice()             // anArray not tagged (fixed)
  anArray.otherMethod()       // anArray, otherMethod not tagged (fixed)
  randomGlobal.prop.omg()     // not tagged (fixed)

  var anObject = {
    key1: 'val1'              // key1 not tagged
    key2: function(one, two) {
    }
  }
}

var funcVar = function(arg1, arg2, arg3) {
}

class Car extends Vehicle {
  constructor(speed, cost) {
    super(speed);

    var cindex = Symbol('cost'); // cindex not tagged
    this[cindex] = cost;      // cindex not tagged

    this.intro = `This is a car runs at ${speed}.`;
  }
}

for (let num of [1, 2, 3]) {  // num not tagged
  console.log(num + 0b111110111);
}

Giving these symbols correct scopes will greatly improve the support in the coming SymbolProvider in the soon-to-be-bundled-in-core autocomplete-plus.

[coopermaruyama]

+1

[off-by-some]

👍

[JamesMowery]

👍

I'd love to see better JS support, as I'd really like to see this made possible: https://discuss.atom.io/t/is-it-possible-to-change-the-color-of-declared-variables/16731/1

It's the one thing that keeps me from being totally in love with Atom.

[coopermaruyama]

@JamesMowery this might be of interest to you: https://atom.io/packages/language-javascript-semantic

[bobrocke]

Here are some other examples:

But there are many others. This grammar appears to be pretty young.

[jonkwheeler]

Here's a simple one. Most text is white. Objects, Methods, Props all the same.

I came here from this Atom thread.

It would really help me if the highlighting worked right.

[coopermaruyama]

I've temporarily worked around this by having my theme manually wrap any unwrapped scopes, and then adding a data-word attribute containing the 1st word. Here's the relevant code if anyone wants:

Observer:

    # ____________________________________________________
    # Custom text wraps
    @textWrapObservers ||= new CompositeDisposable()
    @textWrapObservers.add atom.workspace.observeTextEditors (editor) =>
      @textWrapObservers.add editor.onDidStopChanging =>
        editorView = atom.views.getView editor
        @wrapTextNodes editorView, '.line > .source', '<span class="apathy-span"/>'

Method that does the wrapping:

  ###*
   * Looks for text nodes and wraps them with a tag. Assuming we have the
   *  following HTML:
   *   <span>
   *     <span>lorem</span>
   *     hello // wraps this since we can't select just this via CSS otherwise.
   *   </span>
   *  There's no way to select just 'hello' with a CSS selector. Therefore, this
   *  method looks for these and wraps them with a `<span>` to make them
   *  selectable, and adds the first word in the tag into data-word attribute.
   * @method wrapTextNodes
   * @param  {string}      selector - Selector to .source.grammar nodes.
   * @param  {string}      wrapWith - String that will be used to generate a
   *                                  jQuery object to wrap matched text nodes
   *                                  with. example: '<span class="js"></span>'.
  ###
  wrapTextNodes: (editorView, selector, wrapWith) ->
    @customWrappedTextNodes ?= []
    self = this
    # FIXME Currently this doesn't happen until the 1st time the cursor
    #       moves, because jQuery.ready fires BEFORE the text has been added
    #       to the buffer. Need to get it to run just once on activation at the
    #       right time.
    $(editorView.shadowRoot).find(selector).each ->
      contents = $(this).contents()
      $.each contents, (i,val) ->
        if val.nodeType is 3
          # add tag which can be used for CSS
          match = $(this).text().trim().match /\b[\w]+\b/g
          firstWord = match?[0]
          # wrap the text
          $wrapped = $(this).wrap wrapWith
          $wrapped.parent().attr 'data-apathy-word', firstWord
          self.customWrappedTextNodes.push $wrapped
  ###*
   * Unwrap nodes wrapped by @wrapTextNodes().
   * @method unwrapTextNodes
  ###
  unwrapTextNodes: ->
    for node in @customWrappedTextNodes
      $(node).unwrap()

[junewunder]

Another issue I have with the highlighting is that some variables will get special coloring, and others won't, example here:

x and y are in orange, but z isn't the same color. This is annoying when working with 3D, but it would be nice if all the variables were the same color. Thanks

[winstliu]

Hi @jaywunder, I actually just fixed that. If you upgrade to Atom 0.206.0, z should be highlighted as well ✨.