Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Javascript html parser to generate j2html from snippets #225

Open
PancakeInvaders2 opened this issue Feb 23, 2024 · 11 comments
Open

Javascript html parser to generate j2html from snippets #225

PancakeInvaders2 opened this issue Feb 23, 2024 · 11 comments

Comments

@PancakeInvaders2
Copy link

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
Copy link
Owner

tipsy commented Feb 23, 2024

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
Copy link
Author

Cool ! I'll get started this weekend then

@PancakeInvaders2
Copy link
Author

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
Copy link
Author

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
Copy link
Collaborator

sembler commented Mar 1, 2024 •
edited
Loading

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
Copy link
Collaborator

sembler commented Mar 1, 2024

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
Copy link
Author

PancakeInvaders2 commented Mar 3, 2024 •
edited
Loading

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
Copy link
Collaborator

sembler commented Mar 11, 2024

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 pushed a commit to PancakeInvaders2/j2html that referenced this issue Mar 13, 2024
tipsy#225 JS html to j2html code generator via kotlin multiplatform
5b34a7d
PancakeInvaders2 pushed a commit to PancakeInvaders2/j2html that referenced this issue Mar 13, 2024
tipsy#225 JS html to j2html code generator via kotlin multiplatform
bce6c70
PancakeInvaders2 pushed a commit to PancakeInvaders2/j2html that referenced this issue Mar 14, 2024
tipsy#225 JS html to j2html code generator via kotlin multiplatform
0a8edf3
PancakeInvaders2 pushed a commit to PancakeInvaders2/j2html that referenced this issue Mar 14, 2024
tipsy#225 JS html to j2html code generator via kotlin multiplatform
460fe86
@PancakeInvaders2
Copy link
Author

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

PancakeInvaders2 pushed a commit to PancakeInvaders2/j2html that referenced this issue Mar 14, 2024
tipsy#225 clean up
82cf341
@rohitdev
Copy link

rohitdev commented Aug 2, 2024

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

@PancakeInvaders2
Copy link
Author

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

#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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@sembler @rohitdev @tipsy @PancakeInvaders2