ESM config support

[what1s1ove]

Hello, everyone! Thanks for such a cool linter!

Is there any plan to support ESM in the near future (linthtml.config.js 😍)? I have only a few of my favorite packages left that don't have ESM support (hopefully, their number will decrease, lol).

[KamiKillertO]

Hi,

It is planned. I didn't had the time to work on LintHTML recently, but I am planning on restarting developments in January.
I am planning on migrating the whole project to ESM and adding support for ESM config files.

[MrHBS]

I hope progress can be made on this.

[KamiKillertO]

Hi,
I have restarted the developments. I am currently working on migrating to ESM but it is a slow process has I need to change or update most of the tools and building setting. I hope to have something beta ready for the end of the month 🤞

[KamiKillertO]

Hi, sorry it took longer than I thought to take this.
Weirdly migrating the code to ESM was not very difficult, what was difficult was to set up the tooling. For example, I wanted to give Jest a try but it's impossible to make it work correctly with nodeJS ESM code

[what1s1ove]

Hi, sorry it took longer than I thought to take this. Weirdly migrating the code to ESM was not very difficult, what was difficult was to set up the tooling. For example, I wanted to give Jest a try but it's impossible to make it work correctly with nodeJS ESM code

Hey @KamiKillertO !

Thank you for all you do!

What about trying the Node.js testruner? 🙂

[KamiKillertO]

I thought about it and might give it a try in the future. But for now I already spend too much time setting up things 😬

[KamiKillertO]

I have merged the ESM migration PR and I'll release a beta version soon

[KamiKillertO]

Done. I have released @linthtml/[email protected]. Everything should work has before but let me know if you see something weird

[what1s1ove]

Hey @KamiKillertO

I tried the new version. A few things it would be nice to fix

1. Now there is no access to the type, although there used to be

2. Please, support linthtml.config.js as one of default name for the config file.
3. It seems that the --config CLI flag does not work.

"ci:lint:html": "npx @linthtml/linthtml --config linthtml.config.js \"build/**/*.html\"",

I get an error, Error: Cannot find the config file whatislove.dev/apps/whatislove-dev/linthtml.config.js

but I have it

4. Even with a default name (.linthtmlrc.js) and ESM I get this error:

> @whatislove.dev/[email protected] ci:lint:html
> npx @linthtml/linthtml "build/**/*.html"

✖ Searching for files
TypeError: Cannot read properties of undefined (reading 'undefined')
    at print_errors (whatislove.dev/apps/whatislove-dev/node_modules/@linthtml/linthtml/dist/src/print-errors.js:6:57)
    at lint (whatislove.dev/apps/whatislove-dev/node_modules/@linthtml/linthtml/dist/src/index.js:90:9)
    at cli (whatislove.dev/apps/whatislove-dev/node_modules/@linthtml/linthtml/dist/src/index.js:79:12)
    at whatislove.dev/apps/whatislove-dev/node_modules/@linthtml/linthtml/bin/linthtml.js:5:1

but if I switch config back (to .linthtmlrc.cjs and CJS syntax), everything is fine

> @whatislove.dev/[email protected] ci:lint:html
> npx @linthtml/linthtml "build/**/*.html"

✔ Found 2 files
✔ Files analyzed

✨  There's no problem, good job 👏

[KamiKillertO]

For the first point.
I didn't know people were using the internal types for the config file 😅. So yeah I have broken the types because I've renamed two packages to fix a circular dependency when building the packages.
The package @linthtml/linthml is now @linthtml/core and @linthtml/cli is now @linthtml/linthtml.
/** @type {import('@linthtml/core').LinterConfig} */ should fix your issue for now. I will find a way to bring back the type in @linthtml/linthtml
For the third point, is your config file in esm?

[KamiKillertO]

@what1s1ove I've just released @linthtml/[email protected] which should solve your issue with the ESM config file. Just be careful, under the hood, I use cosmiconfig to get the config files and cosmiconfig only treats config file as esm if the package.json contains "type": "module" otherwise it will treat them as cjs.
This release also unlock the config file linthtml.config.js 👍

[what1s1ove]

Hey @KamiKillertO! I wanted to express my gratitude for all your hard work!

I've just finished addressing all the comments. You can find the PR here if anyone wants to take a look.

I have one more request for future consideration. Would it be possible to move the types back to @linthtml/linthtml? Currently, I have to explicitly add another package to package.json (@linthtml/core) because I use a linter that requires all dependencies to be listed explicitly. Thank you!

[KamiKillertO]

@what1s1ove I've published an new version 0.10.0-beta.5 that include types for the config files.
⚠️ The types are Config and LegacyConfig and will be auto included in the config files generated by the CLI

[what1s1ove]

Hey @KamiKillertO ! Now it looks perfect! Thank you so much!

[what1s1ove]

Hey @KamiKillertO ! I think I found one more issue with the new version. After updating the NPM to a new version my package-lock.json file was regenerated and I started to receive this error:

Error: Cannot find plugin "linthtml-rules-htmlacademy", make sure it's installed locally.

Here is my linthtml.config.js file:

/** @type {import('@linthtml/linthtml').Config} */
let config = {
	extends: `linthtml-config-htmlacademy`,
	rules: {
		'doctype-first': false,
	},
}

export default config

The linthtml-config-htmlacademy package has the linthtml-rules-htmlacademy package as a dependency. So it's strange that I received this error. It happened only with the linthtml package, after NPM updating. All other linters work fine. Because of it, I needed to disable linthtml for now 🥲

https://github.com/what1s1ove/whatislove.dev/blob/main/apps/whatislove-dev/package.json#L13

You can try it in my repo to get more details:

1. git clone [email protected]:what1s1ove/whatislove.dev.git && cd whatislove.dev
2. npm i
3. npm run ci:lint:html -w apps/whatislove-dev

UPD: I receive this error even if I install the linthtml-rules-htmlacademy package explicitly to my repo.

[KamiKillertO]

@what1s1ove The problem here is that linthtml-rules-htmlacademy is using cjs requires. What's annoying with esm is that everything has to be in esm otherwise things will breaks.
I need to make it clear in the changelog and improve the error messages 🤔

[what1s1ove]

@what1s1ove The problem here is that linthtml-rules-htmlacademy is using cjs requires. What's annoying with esm is that everything has to be in esm otherwise things will breaks. I need to make it clear in the changelog and improve the error messages 🤔

Thank you! I will contact the authors of linthtml-rules-htmlacademy

[nikolai-shabalin]

Hello. I'm the author of linthtml-rules-htmlacademy. I'm just waiting for linthtml move to ESM, and then I'll update linthtml-rules-htmlacademy to ESM from CJS.

[what1s1ove]

Hello. I'm the author of linthtml-rules-htmlacademy. I'm just waiting for linthtml move to ESM, and then I'll update linthtml-rules-htmlacademy to ESM from CJS.

It was fast! I just wanted to submit an issue in your repository 😁

[nikolai-shabalin]

As soon as linthtml updates its major version due to the switch to ESM, I will immediately update my package.

[KamiKillertO]

Great news.
More precisely, it's failing because the plugin uses cjs require() to import LintHTML packages that are in esm 😅 .
Pure CJS plugins are still working which is good news. 👍
I am working on adding esm and cjs exports to the parser and dom-utils packages, so it won't break existing pulling plugins that are still in cjs.

[KamiKillertO]

@what1s1ove @nikolai-shabalin I've just publish a new version 0.10.0-beta.8 that solve the issue.
With this new version the @linthtml/dom-utils package as CJS and ESM exports, so now it's possible to have CJS config with esm plugins or esm config with cjs plugins.
I've tested locally with your config and it works 👍

[nikolai-shabalin]

That's good news. Thank you

[what1s1ove]

Hey @KamiKillertO, all

I have tested it and can confirm that everything works as expected! You can see this in this PR what1s1ove/whatislove.dev#537 (there are some other changes in it as well, as I fixed some linting errors).

Thank you for your work! ❤️