search

tipsy / j2html

Java to HTML generator. Enjoy typesafe HTML generation.
https://j2html.com/
Apache License 2.0
765 stars 137 forks source link

Javascript html parser to generate j2html from snippets #225

Open PancakeInvaders2 opened 8 months ago

PancakeInvaders2 commented 8 months ago

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

tipsy commented 8 months ago

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 :)

PancakeInvaders2 commented 8 months ago

Cool ! I'll get started this weekend then

PancakeInvaders2 commented 8 months ago

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 ?

PancakeInvaders2 commented 8 months ago

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

sembler commented 8 months ago

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.

sembler commented 8 months ago

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.

PancakeInvaders2 commented 8 months ago

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

sembler commented 8 months ago

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.

PancakeInvaders2 commented 8 months ago

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

rohitdev commented 3 months ago

Is this work still under development and being worked upon? Do we expect this to be available as part of main release?

PancakeInvaders2 commented 3 months ago

The actual work is done, the code in the PR is usable

https://github.com/tipsy/j2html/pull/226

In the discussion it ended up being a lot of code to maintain, so the idea is that I make a separate repository to maintain it myself, and push the transpiled javascript to npm, so that it can be used in the website as a js dependency. So it won't be part of a release of j2html and the PR could be closed. Time and energy has been a bit scarce on my end since the birth of my daughter, I'll get around to set up the new repo and npm as soon as I can