Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Proper ES6 module support #4100

Open
sudo-barun opened this issue Aug 27, 2024 · 2 comments
Open

Proper ES6 module support #4100

sudo-barun opened this issue Aug 27, 2024 · 2 comments
Labels
enhancement An enhancement or new feature parser version-12

Comments

@sudo-barun
Copy link
Contributor

Is your request related to a specific problem you're having?

I am having problem importing ES6 modules from highlight.js. Although the README mentions about ES6 Modules / import, it does not work in Browser.

I have installed highlight.js using npm install highlight.js. The following are the contents of files in project:

package.json:

{
  "dependencies": {
    "highlight.js": "^11.10.0"
  },
  "type": "module"
}

index.html:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="./node_modules/highlight.js/styles/default.min.css">

</head>
<body>

<pre><code class="language-html">&lt;span&gt;Hello World!&lt;/span&gt;</code></pre>

<script src="script.js" type="module"></script>

</body>
</html>

script.js:

import hljs from "./node_modules/highlight.js/lib/core.js";
import xml from './node_modules/highlight.js/lib/languages/xml.js';

hljs.registerLanguage('xml', xml);

const highlightedCode = hljs.highlight(
	'<span>Hello World!</span>',
	{ language: 'xml' }
).value;

console.log(highlightedCode);

if (typeof window === 'object') { // check if currently running in browser
	hljs.highlightAll();
}

All the above three files are located inside same directory.

When opening the index.html in Firefox, there is error with following message in console:

Uncaught SyntaxError: The requested module 'http://localhost/node_modules/highlight.js/lib/core.js' doesn't provide an export named: 'default'

However, running node script.js works fine with following output:

<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Hello World!<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>

It seems both the core.js and xml.js are not ES6 modules at all despite what the documentation says. They are just CommonJS modules. They seem to work in NodeJS despite being imported from ES6 modules.

I tried CDN links and they worked. But I needed local copy of those files. I downloaded those files from CDN and used that. But later, after going through the documentation thoroughly, I found that there is another package @highlightjs/cdn-assets that provide those files. After installing @highlightjs/cdn-assets, I replaced import in script.js with the following code and everything works now:

script.js:

import hljs from './node_modules/@highlightjs/cdn-assets/es/core.js';
import xml from './node_modules/@highlightjs/cdn-assets/es/languages/xml.min.js';

hljs.registerLanguage('xml', xml);

const highlightedCode = hljs.highlight(
	'<span>Hello World!</span>',
	{ language: 'xml' }
).value;

console.log(highlightedCode);

hljs.highlightAll();

Although this works, the problem is that @highlightjs/cdn-assets contains generated code, not the original source code. For example, all the language files inside ./node_modules/@highlightjs/cdn-assets/es/languages/ are minified files.

The solution you'd prefer / feature you'd like to see added...

  • I would like to be able to import ES6 modules directly from hightlight.js package instead of @highlightjs/cdn-assets. Following code should work: 
    import hljs from "./node_modules/highlight.js/lib/core.js";
import xml from './node_modules/highlight.js/lib/languages/xml.js';
  • The imported file should be original source code, not generated code.

I think any JS library meant for browser should be developed using ES6 modules. It is better to drop support for CommonJS as ES6 module is already supported in Node.

Additional context...
highlight.js version: 11.10.0
@sudo-barun sudo-barun added enhancement An enhancement or new feature parser labels Aug 27, 2024
@joshgoebel
Copy link
Member

It is better to drop support for CommonJS

Version 12 plans to do this, but it's a big change (along with other changes) and I don't have much free time these days.

minified files.

Curious, what's the issue with minified files? We could consider shipping both, we've done it already for things like CSS assets, etc.

contains generated code, not the original source code.

If you want the "raw" ES6 code you can use this repository (and a custom build process)... future versions might ship non-minified but we always plan to ship "cooked" releases because we want to manage some of dependencies and inter-dependencies ourselves, not leave that up to the end user.

@sudo-barun
Copy link
Contributor Author

Version 12 plans to do this, but it's a big change (along with other changes) and I don't have much free time these days.

I can see that you have started working on version 12 but it has been more than a year since last commit. If you can provide roadmap for version 12, I can help you with the new version.

Curious, what's the issue with minified files? We could consider shipping both, we've done it already for things like CSS assets, etc.

Minified files are not readable. This is a problem when debugging them interactively in the browser.

If you want the "raw" ES6 code you can use this repository (and a custom build process)...

IMO, we should be able to use ES6 source code without having to use build process. Since highlight.js has no dependencies (only devDependencies), this should not be a big deal.

we always plan to ship "cooked" releases

I have no problem with this. We should be able to use hightlight.js in other ways beside ES6 import.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement An enhancement or new feature parser version-12
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@joshgoebel @sudo-barun