<!DOCTYPE html> broke render #130

Akiyamka · 2019-10-10T08:47:46Z

HTM is a very cool library, thanks a lot to everyone who took part in the development, I really love it!
I found one whole curious bug the reason of which I do not yet understand.
the following code will produce incorrect output:

const htm = require('htm');
const vhtml = require('vhtml');
const html = htm.bind(vhtml);

console.log( html`
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>
` );

Nothing special, just emmet generated boilerplate ( ! + tab ).
(this tool is actively used in front-end development and is built into some IDE by default)
Output of this code:

[ 'meta',
  { charset: 'UTF-8' },
  '<meta name="viewport" content="width=device-width, initial-scale=1.0">' ]

Interactive repl

Any ideas how to fix this?

goranmoomin · 2019-10-10T09:40:49Z

@Akiyamka I’m not sure, but I think htm is specially targeted to JSX (with some HTML extensions), so it’s not surprising that htm doesn’t support DOCTYPE tags.

You shouldn’t be doing that anyway, I can’t think of any use case of using htm for a total HTML document. Most likely you should already have the DOCTYPE and head tags when the JS code has loaded.

Akiyamka · 2019-10-10T14:09:52Z

@pcr910303

I can’t think of any use case of using htm for a total HTML document.

I often develop cli tools that come with a minimal form page (optional).
I could use lodash template, but htm + vhtml much more convenient.
It looks something like this:

http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    response.write(html`
  <!DOCTYPE html>
  <html lang="en" >
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <form action="/upload" method="post" enctype="multipart/form-data">
    <div class="form">
      ${
        Object.entries(config).map(([key, val]) => {
          return html`<div>
            <label for=${key}>${humanReadable(key)}</label>
            <input id=${key} type=${getType(val)} name=${key} value=${val} required />
          </div>`
        })
      }
      <input type="submit" value="Run!" />
    </div>
  </form>
  </body>
  </html>
` );  
    response.end();  
}).listen(8000);

dy · 2019-10-10T23:26:06Z

@Akiyamka duplicate/related #91

#91 (comment):

As of 2.0, htm is an XML dialect in order to match JSX, not an HTML dialect. Optional tags are not supported, instead use XML self-closing tags.

Personally I 100% agree that htm could be more useful than just JSX.

In order to make your case work, just close doctype: <!DOCTYPE html/>

kristoferjoseph · 2019-10-15T18:30:35Z

In order to make your case work, just close doctype:

That solution does not work.
htm will not render an actual html page.
In my experience it only works with elements inside the body.

I found that the only way to get a full html page is to make a template that has one root element in the body and use render to target it's id.
something like:
https://gist.github.com/kristoferjoseph/99d1d494240f7bac2aec915b2104ddf8

developit · 2019-10-16T16:14:31Z

HTM is intentionally not a full HTML parser. It can handle arbitrary Element and Comment nodes, but does not support other tag types like Doctype or Processing Instruction.

For this specific case, I'd recommend prepending the doctype as a string:

http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    response.write('<!DOCTYPE html>' + html`
  <html lang="en" >
  <head>
    <title>etc</title>
  </head>
  <body>
    etc
  </body>
  </html>
` );  
    response.end();  
}).listen(8000);

developit added the wontfix This will not be worked on label Oct 16, 2019

Akiyamka closed this as completed Nov 28, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<!DOCTYPE html> broke render #130

<!DOCTYPE html> broke render #130

Akiyamka commented Oct 10, 2019 •

edited

Loading

goranmoomin commented Oct 10, 2019 •

edited

Loading

Akiyamka commented Oct 10, 2019 •

edited

Loading

dy commented Oct 10, 2019 •

edited

Loading

kristoferjoseph commented Oct 15, 2019

developit commented Oct 16, 2019 •

edited

Loading

<!DOCTYPE html> broke render #130

<!DOCTYPE html> broke render #130

Comments

Akiyamka commented Oct 10, 2019 • edited Loading

goranmoomin commented Oct 10, 2019 • edited Loading

Akiyamka commented Oct 10, 2019 • edited Loading

dy commented Oct 10, 2019 • edited Loading

kristoferjoseph commented Oct 15, 2019

developit commented Oct 16, 2019 • edited Loading

Akiyamka commented Oct 10, 2019 •

edited

Loading

goranmoomin commented Oct 10, 2019 •

edited

Loading

Akiyamka commented Oct 10, 2019 •

edited

Loading

dy commented Oct 10, 2019 •

edited

Loading

developit commented Oct 16, 2019 •

edited

Loading