Document title rendered as `<slot name="title"></slot>`

giuseppeg / xm

₪ extensible HTML

https://giuseppeg.github.io/xm

326 stars 9 forks source link

Document title rendered as `<slot name="title"></slot>` #12

Closed bakkerjoeri closed 3 years ago

bakkerjoeri commented 3 years ago

I can't seem to get slots that are in head > title filled.

I run xm on a folder with 2 files, base.html and index.html, that looks like this:

<!-- base.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8"/>
        <title><slot name="title"></slot></title>
    </head>
    <body>
        <slot name="body"></slot>
    </body>
</html>

<!-- index.html -->
<import src="base.html">
    <fill name="title">
        The title goes here!
    </fill>
    <fill name="body">
        <h1>Hello world!</h1>
    </fill>
</import>

xm's output is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <title><slot name="title"></slot></title>
    </head>
    <body>

        <h1>Hello world!</h1>

    </body>
</html>

The title slot is not being filled.

giuseppeg commented 3 years ago

@bakkerjoeri that is very strange because I have a test that is very similar and it passes https://github.com/giuseppeg/xm/tree/master/test/cases/simple

Can create a tiny repository to reproduce?

bakkerjoeri commented 3 years ago

Very strange indeed. I saw the test and examples and it's got me thinking it must be something on my end, but I'm stumped.

A minimal reproduction of the issue can be found here https://github.com/bakkerjoeri/a11y-by-example/tree/test/title. It's a branch of the project that I encountered it in. I stripped as much unnecessary cruft to stay as close to your test case as possible. I get it for xm dev as well as xm build.

An online preview of the results of xm build in that branch can be found here https://5fa2bee38e4613000802fb47--nostalgic-lumiere-04f7d3.netlify.app/

giuseppeg commented 3 years ago

Ok I know what is going on. xm uses PostHTML to transform HTML, the posthtml-parser now uses a new version of htmlparser2 which parses the content of title tags as text only.

Expand and try te code in https://npm.runkit.com/htmlparser2

```js var htmlparser2 = require("htmlparser2") const parser = new htmlparser2.Parser({ onopentag(name, attribs) { // this will only print once: "title" console.log(name); }, }); parser.write( '<slot name="title"></slot>' ); parser.end(); ```

I think we could fix this in posthtml-xm-import by selecting the title and parsing its content to see if it contains a slot.

As a workaround you could try to pin posthtml-parser to 0.4.2 using yarn resolutions

giuseppeg commented 3 years ago

So I just fixed this https://github.com/giuseppeg/xm/commit/d5ce205ff159a2725b41b5bbf7208d1d39a31cca#diff-4a6745377925e6af58b2e962b92679d202a9c4b46d88ec55593bd22b48478628R234

@bakkerjoeri can you see if the new version (1.0.6) works?

bakkerjoeri commented 3 years ago

Thanks for looking into this! That totally fixes it for me.

Nice that even though xm has to trigger the title parsing, it can still leverage the same parser to do so.

Perhaps a spot of bad news: this also introduced a new issue for me when running xm dev. I made a ticket for it here: https://github.com/giuseppeg/xm/issues/13