search

yandeu / five-server-vscode

⚡ VSCode Extension for Five Server.
https://marketplace.visualstudio.com/items?itemName=yandeu.five-server
Other
120 stars 9 forks source link

"<dialog> is not a valid element name" error #17

Closed tyler36 closed 1 year ago

tyler36 commented 2 years ago

Describe the bug Given the following code, an error is displayed: <dialog> is not a valid element name

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Test File</title>
  </head>
  <body>
    <h1>It works!</h1>
    <dialog>
        Hello
    </dialog>
  </body>
</html>

The error displays in 2 places:

This element is valid and widely supported by modern browsers: https://caniuse.com/?search=dialog Can the "valid element" list be updated? Is there a way to disable the error?

fiveserver.config.js config: 

module.exports = {
  highlight: true, // enable highlight feature
  injectBody: true, // enable instant update
  remoteLogs: true, // enable remoteLogs
  remoteLogs: "yellow", // enable remoteLogs and use the color yellow
  injectCss: false, // disable injecting css
  navigate: true, // enable auto-navigation
};

VSCode: 1.67.2 yandeu.five-server: v0.1.5 OS: Ubuntu WSL on Win10

Have a question? Join the discussions instead.

yandeu commented 2 years ago

I guess we could turn off this rule: https://html-validate.org/rules/element-name.html

yandeu commented 2 years ago

Or we could try updating html-validate. https://github.com/yandeu/five-server/blob/8bf87e0cc644b6e58b30b49e830aa89b777207b9/package.json#L62

tyler36 commented 2 years ago

@yandeu

I think the rule is important. It is better to keep it in.

html-validate is at 7.1.1 now but it also required node 12.

If the bump doen't break anything, it might be the better option. That's upstream though, so I have no idea what/where "five-server" is used.

yandeu commented 2 years ago

It even requires node 14: https://html-validate.org/changelog/index.html

But I'm not sure if they have added support for <dialog>

yandeu commented 2 years ago

I found the solution:

const htmlvalidate = new HtmlValidate({
  // https://html-validate.org/rules/index.html
  rules: {
    'close-attr': 'error', // necessary
    'close-order': 'error', // necessary
    'element-name': [
      'error',
      {
        whitelist: ['dialog']
      }
    ], // necessary
    deprecated: 'error',
    'no-dup-attr': 'error',
    'no-dup-class': 'error',
    'no-dup-id': 'error'
  }
})
tyler36 commented 2 years ago

That looks good. It would also make it easier to update the list if other "not valid" elements appear in the future.