Insert html/svg markup from .json data source

[WebMechanic]

Hello,

this is my 2nd day toying with Mavo and I like it! tho I spent a lot of the time reading the docs and studying some demos.

I have an external .json file to mv-init the app with some html and SVG snippets I'd like to use, but I always see the literal markup (like with .textContent) not rendered (like with .innerHTML).
I could not find any info in the docs whether this is prevented by default or needs some "raw" attribute/setting to allow the display of external HTML. (i.e. like Vue's v-html directive)
Maybe I was also looking in the wrong place. 🤷‍♂️

{
"drinks": [
  {
      "id": "cider",
      "label": "<i>🍏</i> <wbr> cider",
      "price": 3.00
  },
 ... more items
]
}

Then in the html:

<button type="button" property="foods" mv-multiple>
    <var property="price" class="currency"></var>
    <span property="label"></span>
</button>

I see this inside the literal html from label inside the button

3 <i>🍏</i> <wbr> cider

instead of just the price , the "italic" element with the emoji inside, the wbr and the string

This is the "app" element:

<main mv-app="fubar" mv-init="pantry.json" mv-storage="local" mv-autosave="1">

I want to replace the emojis with SVG later, but given that HTML rendering doesn't work for me...

What am I doing wrong?

Any hint and help appreciated.

[DmitrySharabin]

Hello there and welcome! 👋🏻

AFAIK, you are not doing anything wrong: for now, there is no way to insert arbitrary HTML into mavo app. And you are right, in Mavo, everything is done through textContent (see #2 (comment)).

However, this question arises from time to time. I think we'd better ask Lea (@LeaVerou) whether we should provide a way for authors to insert arbitrary HTML (via plugin, might be) or is it a bad idea in general (because of possible XSS attacks)?

Is it appropriate for you, as a workaround, to provide <path> (the d attribute) and not the whole SVG so that you could have something like that in your app?

<svg>
  <path property="path" mv-attribute="d" />
</svg>

{
  "path": "M 0 100 C 10 50 10 30 50 20 L 50 10 L 100 30 L 50 50 L 50 40 C 25 40 25 50 20 90 z"
}

E.g., https://codepen.io/dmitrysharabin/pen/qBxLPxX

[WebMechanic]

Thank you. I like the "path" idea (in general).
I'd have to check the SVGs as some contain more than just a single path.

For the time being the markup is pretty solid, so I could actually do sth. like this (a night's sleep sometimes helps)

<button type="button" property="foods" mv-multiple>
    <var property="price" class="currency"></var>
    <span><i> [ split 1st char as emoji ] </i><wbr> [ split stuff after 1sst char for caption ]</span>
</button>

I don't recall the split string expressions, but I could then also simplify the .json data

"label": "🍏cider", 
"label": "🍺IPA", 
"label": "☕coffee", 

Doing it this way should also be forwards compatible 'cos it'd be the same single field (label) in case mv-html or mv-raw get real.

[LeaVerou]

When I've needed this before, I used an <iframe>, see. e.g. in the SVG Path Editor Demo.
I agree however that there should be syntax for this, it would be very useful.
Perhaps something like:

1. .property to indicate you are setting a JS property (e.g. <div .innerHTML="<p>[1 + 1]">)
2. mv-html as a higher-level alias to .innerHTML (that we could add special handling to for certain things, not sure what these would be, so maybe it should be better to defer this for after we've had .property for a while)

There are some questions about how all these interact (e.g. what happens if you set mv-html AND include an expression in an element's contents), but none of this is a blocker, since we already have these kinds of issues with the content property.

XSS is already possible if someone is not careful with what they throw into expressions, so I don't think this opens up much of an additional attack vector.

One potential issue with this is that IIRC we use mutation observers to monitor attribute changes, and a JS property would not fire those, so how do we observe when it changes? Though I think we also propagate changes through the data model. @DmitrySharabin do you want to investigate how feasible it would be to implement this?

If it turns out that general JS properties are tough, we could also fall back to only implementing mv-html.

[DmitrySharabin]

@DmitrySharabin do you want to investigate how feasible it would be to implement this?

Sure, Lea. With pleasure!

[GalinhaLX]

Hi there,

Seems we all need to integrate external html + properties inside mavo (see #849 and #840)

An answer wrotten by @LeaVerou explaining "by the time mavo resolves", give me the idea to try something:

1/ Before mavo executes on the page, I integrate an external page (with properties) using a simple js script

<script src="external.js"></script>

where external.js is:

document.write(`
    <h1>Add your HTML code here</h1>
    <div property="title">imported title</div>
`);

2/ than as I encapsulate this script with a mv-if condition, mavo will remove it

<div property="visible"><div>

<div mv-if="visible">
     <script src="external.js"></script>
</div>

-> Works fine, but the browser will load all (!) external content , then mavo will hide it behind

I also tried using templates + slots,a s explained on #840: where properties need to be declared in main.html (and than passed to exteernal template trought slots):
-> Works, but painfull to maintain

I certainly prefer something with proposed mv-html, if it could work with mv-if too:
mavo woud load external content with a condition...this would be great !

[WebMechanic]

I tried writing a plugin but even tho I got access to the element, any attempt to change its content (or any attributes) in either way had no effect.

I tried several Hooks and learned the hard way, that debugging in DevTools while also having a [time($now)] expression on the same page isn't the smartest move..

Those were my ideas to render the label field from the aforementioned .json source.

<span mv-raw="label"></span>
<span>[ raw(label) ]</span>

and these are the hooks I filled with a buttload of console logs on env, expressions or data ... messing with nodes and elements along the way

Mavo.Plugins.register("raw", {
  "init-end":        (root) => { /* too soon? */ },
  "node-render-end": (env)  => { /* too late? */ },
  /* those can be busy */
  "domexpression-init-start":   (env) => { /* interesting one */},
  "domexpression-init-end":     (env) => { },
  "node-init-start":            (env) => { },
  "node-init-end":              (env) => { },
  "expression-eval-beforeeval": (env) => { }
})
Mavo.attributes.push('mv-raw');
Mavo.Functions.raw = (array, ...properties) => {}

Lots of it was from the demos and samples and several of @DmitrySharabin's repos and codepens.
I skipped some hooks, 'cos I don't think groups or collections are my "target". Unsure about the Primitive.
Like I said: just started this weekend and the API is complex and some concepts are ... unusual?

Anyhow, I'd like to give this another try just to understand what the hell is going on. I'd love to use Mavo to quickly create interactive design POCs and prototypes I could show off to colleagues and clients :D

Is there some explainer how Mavo's processing the DOM? and at what point can I "safely" mess with a node/element that either contains the mv-raw attribute or the raw() function in it's content?

Thanks - back to RTFM :-)