solidjs/solid-site

Missing word "constructor": Possible issue with syntax highlighting

Closed this issue · 2 comments

You can see in the site the word constructor is visibly missing from the following sentence:

Instead of thinking of function components as the render function, think of them as a .

There were a couple issues (1, 2) logged in the solid-docs repo. After digging through the compiled objects, I believe the issue comes from the Vite build configuration. Edit: The code seems to be building properly here as well, so I think it's a runtime issue.

Building the solid-docs project creates this output, which you can see in both the solid-docs repo after building with rollup, and is also visible compiled objects of solid-site/node_modules. Filenames might be different due to hashing algorithm.

comparison-62d00558.js

/* ... */
        children: "render"
      }), " function, think of them as a ", jsx(_components.code, {
        children: "constructor"
      }), "."]
/* ... */

The issue appears to go away when the constructor is changed in any way. This includes capitalizing to CONSTRUCTOR, or simply moving the word out of the code formatting. I believe that Vite got caught up in this specific syntax, and I have no idea if it will trigger on other keywords. I feel it may be worth investigating the build script to see if there's an issue there, or possibly the issue is with Vite and/or one of the plugins.

If we feel this issue isn't worth investigating, I think the simplest fix would be to unwrap constructor from the tick marks in solid-docs and just call it a day.

Perhaps the syntax highlighter is trying to highlight constructor (as it has special meaning in JavaScript) and somehow failing?

That seems likely. I noticed the docs mention shiki being used as the syntax highlighter but I don't see it installed anywhere.

I did a production build and noticed the constructor child also doesn't get dropped. Thinking this is a runtime issue.