Highlighting bug when having template string literals

[ryyppy]

I experience some issues with syntax highlighting whenever I browse some bigger template string codeblocks, mixed with normal ReScript code:

%%bs.raw(
  `
function PromiseBox(p) {
    this.nested = p;
};
function unbox(value) {
    if (value instanceof PromiseBox)
        return value.nested;
    else
        return value;
}
function box(value) {
    if (value != null && typeof value.then === 'function')
        return new PromiseBox(value);
    else
        return value;
}
function make(executor) {
    return new Promise(function (resolve, reject) {
        var boxingResolve = function(value) {
            resolve(box(value));
        };
        executor(boxingResolve, reject);
    });
};
function resolved(value) {
    return Promise.resolve(box(value));
};
function then(promise, callback) {
    return promise.then(function (value) {
        try {
            return callback(unbox(value));
        }
        catch (exception) {
            onUnhandledException.contents(exception);
        }
    });
};
function catch_(promise, callback) {
    var safeCallback = function (error) {
        try {
            return callback(error);
        }
        catch (exception) {
            onUnhandledException.contents(exception);
        }
    };
    return promise.catch(safeCallback);
};
`
)

type result<'a, 'e> = Belt.Result.t<'a, 'e> = Ok('a) | Error('e)

module Js_ = {
  type t<'a, 'e> = rejectable<'a, 'e>

  external relax: promise<'a> => rejectable<'a, _> = "%identity"

  @bs.val
  external jsNew: (('a => unit, 'e => unit) => unit) => rejectable<'a, 'e> = "make"

  let pending = () => {
    let resolve = ref(ignore)
    let reject = ref(ignore)
    let p = jsNew((resolve', reject') => {
      resolve := resolve'
      reject := reject'
    })
    (p, resolve.contents, reject.contents)
  }

  @bs.val
  external resolved: 'a => rejectable<'a, _> = "resolved"

  @bs.val
  external flatMap: (rejectable<'a, 'e>, 'a => rejectable<'b, 'e>) => rejectable<'b, 'e> = "then"

  let map = (promise, callback) => flatMap(promise, v => resolved(callback(v)))

  let get = (promise, callback) => ignore(map(promise, callback))

  let tap = (promise, callback) => {
    get(promise, callback)
    promise
  }

  @bs.scope("Promise") @bs.val
  external rejected: 'e => rejectable<_, 'e> = "reject"

  @bs.val
  external catch: (rejectable<'a, 'e>, 'e => rejectable<'a, 'e2>) => rejectable<'a, 'e2> = "catch_"

  @bs.val
  external unbox: 'a => 'a = "unbox"

  @bs.scope("Promise") @bs.val
  external jsAll: 'a => 'b = "all"

  let allArray = promises => map(jsAll(promises), promises => Belt.Array.map(promises, unbox))

  let all = promises => map(allArray(Belt.List.toArray(promises)), Belt.List.fromArray)

  let all2 = (p1, p2) => jsAll((p1, p2))

  let all3 = (p1, p2, p3) => jsAll((p1, p2, p3))

  let all4 = (p1, p2, p3, p4) => jsAll((p1, p2, p3, p4))

  let all5 = (p1, p2, p3, p4, p5) => jsAll((p1, p2, p3, p4, p5))

  let all6 = (p1, p2, p3, p4, p5, p6) => jsAll((p1, p2, p3, p4, p5, p6))

  @bs.scope("Promise") @bs.val
  external jsRace: array<rejectable<'a, 'e>> => rejectable<'a, 'e> = "race"

  let race = promises =>
    if promises == list{} {
      raise(Invalid_argument("Promise.race([]) would be pending forever"))
    } else {
      jsRace(Belt.List.toArray(promises))
    }

  let toResult = promise => catch(map(promise, v => Ok(v)), e => resolved(Error(e)))

  let fromResult = promise => flatMap(relax(promise), x =>
      switch x {
      | Ok(v) => resolved(v)
      | Error(e) => rejected(e)
      }
    )

  external fromJsPromise: Js.Promise.t<'a> => rejectable<'a, Js.Promise.error> = "%identity"

  external toJsPromise: rejectable<'a, _> => Js.Promise.t<'a> = "%identity"
}

As soon as I navigate to the beginning of the Js_ module, the highlighting bugs out and marks all the rest of my current view buffer as a string:

Notice how the content of the template string gets highlighted as regular ReScript code, while the code outside of the template string is highlighted as a string.

This behavior is sometimes hard to reproduce. Sometimes i just j,h,k,l navigate to a point where this behavior gets triggered, sometimes the reformatter triggers a rerender of the syntax highlighting.

Oftentimes :e! or inserting a line in the current code position temporarily fixes the problem. It's really annoying though.

[amiralies]

There's a synchronization issue with vim when highlighting longer tokens/regions.
I'll try to fix this soon

[ryyppy]

Thanks for the pointers. Seems like a temporary solution is to set the minimum lines for the syntax parsing range to a higher number:

:syntax sync minlines=200

Would be good to have a more general fix for this though, since this will break again when a template string spans over 200 lines.

[amiralies]

maybe we can use a higher value?

some fixes on other language plugins:
Elixir: https://github.com/elixir-editors/vim-elixir/blob/master/syntax/elixir.vim#L181
Scala: https://github.com/derekwyatt/vim-scala/blob/master/syntax/scala.vim#L38
Elm: https://github.com/ElmCast/elm-vim/blob/master/syntax/elm.vim#L79
Javascript : https://github.com/pangloss/vim-javascript/blob/92a2b46bf37bd5cd2fe421ff850728420895801b/syntax/javascript.vim#L22

[ryyppy]

oh wow, I thought 200 as already too much, ... well then, I think for our use-cases 600-800 would be more than enough then?

[amiralies]

I think that would be ok.
We can go with a value and change that later if needed (whether longer use cases or bad behaviour I.e. performance issue)