Incorrect coloring with Colorcoder

[Sawtaytoes]

When using Colorcoder for semantic syntax highlighting, Svelte coloring looks weird:

It should look like this:

I tried changing the syntax highlighting to Sublime Text's HTML, and it looked the same. My assumption is it's something about the JS formatter used.

I normally use Babel style which shows up correctly. Sublime Text's default JS formatting has this coloring issue.

[corneliusio]

When you say it looks the same with syntax set to the standard HTML, do you mean it looks the same as the first screenshot where it's messed up or the second screenshot where it's correct?

Also, could you post the actual code too so I can test with it?

I suspect that this is not an issue with this specific package but actually with Colorcoder conflicting with something else. I am not seeing this specific issue when I install Colorcoder, but I'll def dig a little deeper to make sure.

This syntax really only works in the template area, once you hit a script or style tag it pretty much just hands everything off to the respective language scope.

[Sawtaytoes]

It looks like the first screenshot irregardless of setting it to Svelte or HTML syntax highlighting. In the second screenshot, I pulled that segment out and used JavaScript (Babel) syntax.

<script>
  import { onDestroy, onMount } from 'svelte'

  import Node from './Node.svelte'
  import { getRandomColor, getRandomValue } from './utils.js'

  const numberOfColumns = 100

  const generateNodes = (
    numberOfNodes,
  ) => (
    Array(numberOfNodes)
    .fill()
    .map((
      item,
      index,
    ) => ({
      color: 'black',
      id: index,
      value: 'F',
      x: index % numberOfColumns,
      y: Math.floor(index / numberOfColumns),
    }))
  )

  let nodes = generateNodes(10000)

  let queue1 = []
  let queue2 = []

  let currentQueue = queue1

  const addToQueue = (
    id,
  ) => (
    currentQueue
    .push(id)
  )

  let intervalId

  let updateNodes = () => {
    currentQueue = (
      queue1.length > 0
      ? queue2
      : queue1
    )

    const tempQueue = (
      queue1.length > 0
      ? queue1
      : queue2
    )

    if (tempQueue.length < 0) {
      return
    }

    for (const id of tempQueue) {
      nodes[id] = {
        ...nodes[id],
        color: getRandomColor(),
        value: getRandomValue(),
      }
    }

    // Removes all items from `tempQueue`
    tempQueue
    .splice(
      0,
      tempQueue.length,
    )
  }

  onMount(() => {
    intervalId = (
      setInterval(
        updateNodes,
        40,
      )
    )
  })

  onDestroy(() => {
    clearInterval(intervalId)
  })
</script>

{#each nodes as { color, id, value, x, y } (id)}
  <Node
    addToQueue={addToQueue}
    color={color}
    id={id}
    value={value}
    x={x}
    y={y}
  />
{/each}

Looks like it has to do with callbacks in callbacks at some depth.

Here's another odd one in this same file:

[corneliusio]

Yeah, this is definitely not an issue with this package. Looks like there's something up with the version of the Javascript.sublime-syntax you have on your machine right now. That said, I could write in an escape hatch for just such an occasion—I've been considering adding <script type="text/babel"> as a way to force Sublime to use the Javascript (Babel) package since Sublime only let's you assign it as default for certain file extensions and not language scopes (in this case, source.js).

If that sounds good to you, I'll get it put in asap. But, there's nothing else I'll be able to do resolve the issue you're seeing.

[corneliusio]

I've added this escape hatch. If you'd like to use Babel's JS syntax highlighting then you can add type="text/babel" to your opening script tag.

[Sawtaytoes]

That works for me. Not ideal, but it works.