search

schultek / jaspr

Modern web framework for building websites in Dart. Supports SPAs and SSR.
https://jasprpad.schultek.de
MIT License
1k stars 59 forks source link

Raw HTML injection does not for client only app #181

Closed walsha2 closed 3 months ago

walsha2 commented 4 months ago

Description

I am not seeing a very clear and obvious way to directly inject HTML into the DOM. Basically I just want to take a string and have it be placed in the DOM at a specific location, without any sort of manipulation from jaspr.

My expectation is that this would be the way to do it:

text('<img src="https://ui-avatars.com/api/?name=jaspr">',rawHtml: true)

However, when trying to use this on simple or complicating raw HTML strings I keep seeing all sorts of side effects. The rawHtml flag is doing something odd to the resulting HTML and interfering with other elements.

Steps To Reproduce

See the repo below, on the raw-html branch for a complete working example and a README with other context:

https://github.com/walsha2/jaspr-issues/tree/raw-html

Feedback

Injecting raw HTML should have first class support. Sometimes there are chucks of raw HTML code that we just want to copy (e.g. an svg with many path components) and insert into the DOM without needing to fist manually convert in the jaspr native components, which can be tedious. I had to do this for an svg and it was not fun.

Using text('...',rawHtml: true) seems a bit like a second class feature? I know it sounds trivial, but something like raw('...') seems to make more sense. Maybe this even bypasses the entire Component processing to ensure that there are no unintended side effects to the raw code. Im sure that is what the intent of rawHtml flag is doing, but it seems like that might not be the case as evidenced by this bug.

The docs for text state "Utility method to create a text component when using jaspr html methods" and that does not sounds like what I want to do necessarily. It could just be a matter of semantics, but this isn't a "text component", it is a raw DOM element and I do not want it to use any "jaspr html methods".

walsha2 commented 4 months ago

Update - as with seemingly all of my recent issues, this problem is isolated to client only apps.

schultek commented 4 months ago

Thanks for this issue.

You are right that right now rawHtml is not well working on the client, especially when used along sibling components.

I like the proposal of using a separate raw() method and removing the rawHtml flag from the text component.