highlightjs / highlight.js

JavaScript syntax highlighter with language auto-detection and zero dependencies.
https://highlightjs.org/
BSD 3-Clause "New" or "Revised" License
23.52k stars 3.57k forks source link

.d.ts needs updating for version 11 #3722

Closed PeterWone closed 6 months ago

PeterWone commented 1 year ago

Updating to 11.* causes code like this to break. Revert to 10.7.3 and the weirdness stops.

renderedCode = hljs.highlight(raw, { language: languageId }).value;

Adding .default helps

renderedCode = hljs.default.highlight(raw, { language: languageId }).value;

but then there is a new problem reported

Module not found: Error: Package path ./styles is not exported from package C:\pathto\node_modules\highlight.js (see exports field in C:\pathto\node_modules\highlight.js\package.json)

Revert to 10.7.3 and the weirdness stops.

I had a look at .d.ts definition at https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/highlightjs/index.d.ts but the problem wasn't evident.

joshgoebel commented 1 year ago

Updating to 11.* causes code like this to break.

Break how? How are you using the library? CJS? ES? Browser/Node?

Adding .default helps

This is definitely not intended, this only exists to make some bundlers happy with how we export things.

I had a look at .d.ts definition at

That is for version 9, so it's very incorrect and outdated now.

PeterWone commented 1 year ago

My code is a VS Code extension which makes the answer to your second question "node".

It breaks in the sense that VS Code says the hljs.highlight and hljs.highlightAuto methods do not exist until I rewrite as described (hljs.default.highlight) and also webpack cannot find ./styles/ even though I can see the files are present in node_modules.

As soon as I revert to 10.7.3 everything is good - although it hasn't been updated since 9.x those typings work fine for both vscode and webpack.

joshgoebel commented 1 year ago

which makes the answer to your second question "node".

And how exactly are you importing the library?

and also webpack cannot find ./styles/

We export ./styles/* in exports, so this may be a bug with webpack. Webpack has had it's share of issues trying to keep up with this stuff. If there is something we need to change, I'm all ears if anyone knows.

Our types file exports hljs as default, which means this "just works":

import hljs from 'highlight.js';
hljs.getLanguages() // etc

This certainly works (in practice) with just pulling in the library directly with Node. As far as why VS Code or TypeScript might dislike that I dunno - we really could use a Typescript expert to help us with such matters...

PeterWone commented 1 year ago

Yep did as I said and while you were writing my autoimporter (code tool) figured out import hljs from 'highlight.js'; and it works so that part is 100% good.

This is what webpack reports:


Module not found: Error: Package path ./styles is not exported from package C:\projects\vsc-print\node_modules\highlight.js (see exports field in C:\projects\vsc-print\node_modules\highlight.js\package.json)
 @ ./src/extension.ts 15:24-50
joshgoebel commented 1 year ago

What style are you trying to import exactly?

PeterWone commented 1 year ago

All the light ones. I let users pick at runtime and my embedded webserver serves by name out of the bundle. I don't let them pick dark themes because users don't seem to understand that it doesn't matter what they do on-screen, paper continues to be white.

            switch (urlParts[3]) {
                case "colour-scheme.css":
                    let colourScheme = vscode.workspace.getConfiguration("print").colourScheme;
                    let colourSchemeName: string = filenameByCaption[colourScheme];
                    logger.debug(`Loading colour scheme from ${colourSchemeName}`);
                    let colourSchemeCss: string = require(`highlight.js/styles/${colourSchemeName}.css`).default.toString();
                    response.writeHead(200, {
                        "Content-Type": "text/css; charset=utf-8",
                        "Content-Length": colourSchemeCss.length,
                        'Cache-Control': 'no-cache'
                    });
                    response.end(colourSchemeCss);
                    break;
joshgoebel commented 1 year ago

So the import works now? Great!

The styles issues is a dup of https://github.com/highlightjs/highlight.js/issues/3634... which I've closed - you'll need to take the issue up with Webpack.

PeterWone commented 1 year ago

blergh... guess I'll stick with 10.7.3