Giters

tipsy / j2html

Java to HTML generator. Enjoy typesafe HTML generation.

Home Page:https://j2html.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Javascript html parser to generate j2html from snippets

PancakeInvaders2 opened this issue · comments

commented

If I embark on trying to create a js parser to parse html snippets into j2html code, would there be interest in adding that to the website ?

I'm thinking of doing that in kotlin using KSoup, and then compile that kotlin to javascript.

I hope this project is still active

commented

If I embark on trying to create a js parser to parse html snippets into j2html code, would there be interest in adding that to the website ?

I could help with that :)

commented

Cool ! I'll get started this weekend then

commented

I'm almost done with the parser, I'm doing some tests. In one test, I'm starting with some input html, translating it to j2html with the tool I wrote, executing and rendering the html in java, and looking in the browser if it looks the same as the input. But I'm having an issue where I have a spaces missing. I think it might be a bug/unintended behavior in j2html

render() and .renderFormatted() don't produce exactly the same page when viewed in a browser. There are single space differences
body(div(label("First Name"), text(": Joe"))).render()
shows as "First Name: Joe" in chrome and firefox
but
body(div(label("First Name"), text(": Joe"))).renderFormatted()
shows as "First Name : Joe" in chrome and firefox

is this intended ?

commented

Also a few attributes have small issues:

The attribute 'autocomplete', as in input().withCondAutocomplete(true), seems to be considered a boolean by j2html, it takes a boolean param. But the mozilla docs say it's not just a boolean: valid values are "off", "on", "name", "email", "new-password", etc.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

There is also an issue on the the attribute onvolumechange. Instead of a withOnvolumechange, j2html has audio().withOnvolumechanged("value"), with a d at the end, that doesn't exist in HTML5
https://www.w3schools.com/tags/att_onvolumechange.asp

These 2 issues weren't blocking for me, I let these two attributes be mapped to the default case attr("key", "value") in the code generator so that it works regardless of what the input contains

commented

render() and .renderFormatted() don't produce exactly the same page when viewed in a browser. There are single space differences body(div(label("First Name"), text(": Joe"))).render() shows as "First Name: Joe" in chrome and firefox but body(div(label("First Name"), text(": Joe"))).renderFormatted() shows as "First Name : Joe" in chrome and firefox

The difference is likely the whitespace formatted rendering introduces:

<body><div><label>First Name</label>: Joe</div></body>

vs.

<body>
    <div>
        <label>
            First Name
        </label>
        : Joe
    </div>
</body>

That whitespace will be interpreted by the browser as the extra space that you see.

commented

The attribute 'autocomplete', as in input().withCondAutocomplete(true), seems to be considered a boolean by j2html, it takes a boolean param. But the mozilla docs say it's not just a boolean: valid values are "off", "on", "name", "email", "new-password", etc. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

There is also an issue on the the attribute onvolumechange. Instead of a withOnvolumechange, j2html has audio().withOnvolumechanged("value"), with a d at the end, that doesn't exist in HTML5 https://www.w3schools.com/tags/att_onvolumechange.asp

Thank you for pointing these out. I'll break these into separate issues to track for the next release.

commented

yes that seems to be what it is

that poses some questions in terms of code generation though

let's say I'm receiving the input

<main>
    <div>
        <p>
            Hello world
        </p>
    </div>
</main>

The text that I'm getting from KSoup is correctly "\n Hello world\n ", so if I don't do any sanitization I'll generate

main(div(p("\n            Hello world\n        ")))

which is fairly ugly, but would not make people html look different than what they inputed to the generator

Based on
https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space

Browsers condense multiple whitespace characters (including newlines)
to a single space when rendering. The only exception is within <pre> elements
or those that have the CSS property white-space set to
pre or pre-wrap set. (Or in XHTML, the xml:space="preserve" attribute.)

I could write some logic and replace the multiple whitespace characters by a single space in some cases, which would produce

main(div(p(" Hello world ")))

which looks better, but is maybe more complex than we'd like

In my previous sanitization attempts, I would have generated

main(div(p("Hello world")))

and the results would look different depending on wether render() or renderFormatted() is used

Edit: fix github formatting

commented

This is a tricky question that I don't have a perfect answer for. I'd suggest that you detect newline characters, which probably indicates that formatted rendering is desired, and strip out the unnecessary whitespace from the inputs. That whitespace will be added back in when using renderFormatted(). If you don't detect any newlines you might assume unformatted rendering and leave the excess whitespace.

commented

Thanks, I implemented that. I'm preparing the pull request