props.children raise error for unpair tags

martinsvoboda commented 2 years ago

Hi James, first of all thank you for very interesting library!

I figure our we found bug in when combine unpaired tags in component (<br>, <hr>, <img>...) and props.children. This combination raise "error on line 7 at column 15: Opening and ending tag mismatch: br line 5 and div". Is there any way how to fix this?

Screenshot 2022-01-12 at 9 06 25

index.js

import { define } from 'preactement';

class MyComponent extends Component {
    render(props, state) {
        return <div>
            {props.children}
        </div>
    }
}

define('x-mycomponent', () => MyComponent, { attributes: ['name'] });

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Parcel Webcomponent test 2</h1>

    <x-mycomponent name="value">
        <div>
            Lorem ipsum
            <br>
            Lorem ipsum
        </div>
    </x-mycomponent>

    <script type="module" src="./index.js"></script>
</body>
</html>

jahilldev commented 2 years ago

Hi @martinsvoboda,

Thanks for reaching out!

I've just verified the issue in the unit tests, and opened a PR that will fix this: https://github.com/jhukdev/preactement/pull/9

We're currently using the DOM's XML parser as it's super quick and quite strict, but it's obvious that this might not be ideal for everyone's use case. As such, I've switched to the text/html mime type, so your non-closing tags will now be correctly parsed / rendered.

I've added an important caveat to this in the README, you can read it here

I'm going to merge & publish shortly, once done, let me know how you get on, good or bad!

Thanks again for helping out!

jahilldev commented 2 years ago

@martinsvoboda Ok ready to go!

https://github.com/jhukdev/preactement/releases/tag/1.6.5

martinsvoboda commented 2 years ago

Works like a charm! Thanks for super-fast support!

jahilldev / component-elements

props.children raise error for unpair tags #8