Allow injection of Highlight.js instance (module singleton not guaranteed across submodules)

Any import of Highlight.js refers to the same singleton instance of the library, so configuring the library anywhere configures it everywhere.

The module singleton works most of the time but it’s not guaranteed across submodules in node.js.

A module “singleton” is based on the resolved file path of the imported module url (that’s not a “great article” but it does define the import process).

Normally, when version requirements match, all packages will collapse down to a single highlight.js in the parent package. It is perfectly acceptable for the main project code and every sub module to rely on a separate version of highlight.js though as they can each resolve to their own node_modules copy of the module and each have their own “singleton” (per resolved file path).

I haven’t dug into the new vue plugin completely so if there is some window.hljs magic happening that was briefly mentioned above ignore this…

It looks like with the current setup @highlightjs/vue-plugin has a dependency of "highlight.js": "^10.7.1". If the parent package that imports @highlightjs/vue-plugin had a lock file at 10.7.0 the project would end up structured like this:

my-super-project/
  node_modules/
    highlight.js/ (10.7.0 "singleton")
    @hightlightjs/
      vue-plugin/
        node_modules/
          highlight.js/ (10.7.1 "singleton")

Here the docco example hljs.registerLanguage('javascript', javascript) would not be seen by the hljs instance in the @highlightjs/vue-plugin module.

Barring the parent package injecting hljs into the plugin already suggested above, you start needing peer dependencies which have their own issues.

It’s a bit of a wat moment when you do run into the “not quite a singleton” issue in the wild, so personally I only rely on module singletons within a single module/package. The super esoteric version of this I’ve seen is when running on case insensitive file systems and one file in your project does an import on a differently cased name of a file : /

_Originally posted by @mhio in https://github.com/highlightjs/highlight.js/issues/2815#issuecomment-813751467_

[joshgoebel]

I think this is closed with #17 also and 2.1.0.

[HelixHexagon]

Thanks for the speedy reply! 🙂 I’m not sure what I did wrong yesterday but from testing today things are starting to make a bit more sense. So, as you already know, the problem comes from installing @highlightjs/vue-plugin@next and highlight.js at a version other than ^10.7.1 (e.g. highlight.js@9, highlight.js@10.7.0, or highlight.js@11.)

In any of these cases, NPM will also install a separate copy of highlight.js@^10.7.1 within the vue plugin folder and hljs will not work as a singleton. This structure will be saved in the package-lock.json and I’m not sure how to fix it without deleting the lock file and node_modules then starting afresh with npm install highlight.js@10 @highlightjs/vue-plugin@next.

I’m still in favour of using injection to allow people to bring whatever version they please, but for the time being we could update the readme to specify ^10.7.1 should be used? I think I got in to this mess by allowing highlight.js to install @ latest, i.e. 11.0.1.