Preserving integrity/hierarchy of nested elements #2023

Closed
micahscopes opened this Issue Oct 12, 2016 · 11 comments

Projects

None yet

4 participants

@micahscopes
micahscopes commented Oct 12, 2016 edited

I'm curious about defining data and interactivity using the hierarchies of nested tags themselves.

In the following example, there are multiple, nested, custom elements. Here's what I'm trying to accomplish right now, a custom graph drawing element:

usage:

<graph>
  <edges>
    { dog: cat }
  </edges>
  <nodes>
    <dog/>
    <cat/>
  </nodes>
</graph>

tag definitions:

<dog><img src="fido.gif"/></dog>
<cat><img src="charles.gif"/></cat>
<edges>
    (... parse custom innerHtml into a directed graph representation, draw arrows and lines between dom elements held in parent's nodes child element)
</edges>
<nodes> (... keep track of nodes) </nodes>
<graph> (... holds edges and nodes) </

But right now I'm stumped. I've tried different combinations of using yield within child tags, but my elements get scrambled.

For example, with tag definitions:

<graph>
  <svg>... for drawing edges</svg>
  <yield/>
</graph>

<nodes><yield/></nodes>

And I'll try to use it like this:

<graph>
  <nodes>
    <img src="earth.png"/>
    <img src="moon.png"/>
  </nodes>
</graph>

but the dom ends up looking like this after riot.mount('graph'):

<graph>
  <nodes>  </nodes>
    <img src="earth.png"/>
    <img src="moon.png"/>
</graph>

... which means that I'm losing the hierarchical information that is so nicely represented by the tags. So when I go and try to use something like d3.select(this.root).select("nodes").selectAll("*"), I get an empty selection.

I'm really having trouble wrapping my head around any nice way of doing this in riot.js. It seems like a lot of the features are geared towards outputting nice markup, and not always toward using custom tag hierarchies to represent data... which is what tags are very good at!

Another motivation. I'd like to do something like this:

tag definitions:

<grocery-list>
  <yield/>
</grocery-list>

<eggs>...</eggs>
<flour>...</flour>
<potatoes>...</potatoes>
<olive-oil>...</olive-oil>
<pepper>...</pepper>
...
<recipe><yield/></recipe>
<pancakes>
  <recipe>
    <eggs/>
    <flour/>...
  </recipe>
</pancakes>

Then go and use these in a blog post about going to the grocery store on Tuesday afternoon:

  <grocery-list>
    <pancakes/>
    <recipe>
      <potatoes/>
      <olive-oil/>
    </recipe>
    <pepper/>
  </grocery-list>

When I mount these tags, I'd like their hierarchies to be somehow preserved, even if some of them start coming to life, gaining extra child elements such as images, divs, etc. or moving around the page...

I'd also like to be able to modify them in the dom and have their behavior and rendering reflect that.

@vitogit
Contributor
vitogit commented Oct 12, 2016 edited

Some suggestions, don´t autoclose the tags. In your first example you have <dog/> try using <dog></dog> , also nodes is not properly closed.
I did a quick plunker of your first example and it didn´t get scrambled http://plnkr.co/edit/GszVCv94j5fFXdbwaQme?p=preview .
Share a plunker with your issue so it will be easy to find the problem.

@micahscopes
micahscopes commented Oct 12, 2016 edited

Thanks! Good advice, I'll try it in my project.

The un-closed node tag was a typo, I've fixed it.

@micahscopes
micahscopes commented Oct 13, 2016 edited

Alright, I've done my best to make sense of things, but it's confusing... Seems like it has something to do with the presence of svg elements in a custom parent (outer) tag, combined with native elements yielded into a custom nested tag... but not only svg elements.

As someone with limited understanding of how riot works internally, this behavior is quite unpredictable to me.

http://plnkr.co/edit/IHjquA9y0c0mYRwPgUgi?p=preview

@rsbondi rsbondi added bug and removed question labels Oct 13, 2016
@rsbondi
Contributor
rsbondi commented Oct 13, 2016

You only need to mount outer. It seems to work if you wrap the svg in a div for a work around.

@micahscopes
micahscopes commented Oct 13, 2016 edited

@rsbondi When I only mount outer, the dog and cat tags don't work. When I mount outer and inner, the dog and cat tags do work.

Also, I noticed that the dog and cat tags don't work if I mount '*'.

So yeah, lots of new test cases here.

@micahscopes
micahscopes commented Oct 13, 2016 edited

Just to clarify what's going on in the third and fourth examples...

This:

    <outer>
      <inner>
        <div class="extra">extra div</div>
        <inner>
          <cat></cat>
        </inner>
      </inner>
    </outer>

Becomes this:

<outer color="orange" svg="true">
    <inner></inner>
    <div class="extra">extra div</div>
    <inner><dog><img src="http://i.imgur.com/5tnj48X.gif"></dog></inner>
    <img src="http://i.imgur.com/5tnj48X.gif">
</outer>

So it looks like it's not simply related to svg.

@micahscopes micahscopes changed the title from Preserving integrity/hierarchy of nested custom child tags to Preserving integrity/hierarchy of nested elements Oct 13, 2016
@rsbondi
Contributor
rsbondi commented Oct 13, 2016

dog and cat are fine with mount('outer') or mount('*')

@vitogit
Contributor
vitogit commented Oct 13, 2016

Why wrapping the svg with a div fixed the issue? is something related to svg? or a riot parser problem when svg is the main node of the tag?

@GianlucaGuarini is there any difference between mount('outer') and mount('.el') ?

@GianlucaGuarini
Member

@GianlucaGuarini is there any difference between mount('outer') and mount('.el') ?

@vitogit no, I have just tried to simplify the examples provided with a cleaner mount method

@GianlucaGuarini
Member
GianlucaGuarini commented Nov 5, 2016 edited

I think this issue is related to #2060

@GianlucaGuarini GianlucaGuarini added a commit that closed this issue Nov 6, 2016
@GianlucaGuarini GianlucaGuarini closes #2023 76f8d7f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment