Self-references/partials

[Rich-Harris]

An interesting point raised in this article – how can you have tree-like structures without hardcoding the depth of the tree?

Certainly should be possible within Svelte's architecture – possibly using a partial or maybe some sigil that causes the component to render itself (<@Self nodes='{{child.nodes}}'/>, or something)

[pantchox]

Does it mean that something like this:

<div 
    on:click='set({accordionOpen: !accordionOpen})' class="accordion-container">
    <div class="accordion-header">
        {{headerComp}}
    </div>
    {{#if accordionOpen}}
    <div class="accordion-content">
        {{contentComp}}
    </div>
    {{/if}}
</div>

making it work like this:

<div>
    <Accordion headerComp=HeaderComp contentComp=ContentComp />
</div>

HeaderComp and ContentComp are any other regular imported components with their own data() functions initialized already.

[mrkishi]

Is a special construct really needed for this? It looks like we could use the component recursively as long as the compiler added a self-reference in its components property, somewhat akin to this:

const MyComponent = { components: {} };
MyComponent.components.MyComponent = realMyComponent;

export default MyComponent;

{{if recurse}}
    <MyComponent/>
{{/if}}

I think something along these lines should work, and it'd be closer to native Custom Elements behavior.

[mindplay-dk]

So, something like a tree-view would become possible by using two components, one for the tree node and one for the tree itself, similar to this example in Vue.

For something like a tree-view, being able to put both the node and root views/components in the same file makes a lot of sense though - in fact, keeping the node component itself as a private component of the tree-view itself would make a lot of sense.

What I would like is for the export default declaration to be used to export the tree-view component itself, while declaring the tree-node component separately, would that work? We would need some way to designate HTML and CSS sections as belonging to a specific named component, maybe with an attribute like svelte:component or a <template> tag to group the HTML and CSS tags together?

[Rich-Harris]

Thanks for the feedback everyone — finally got round to tackling this, have opened #332.

@mrkishi Unfortunately that wouldn't work as you can't export a reference, you have to export an object literal. That's so that Svelte can do static analysis on your component at compile time.

@mindplay-dk The root and the nodes would have to be two separate components, but that's ok since the node would only depend on itself

[Rich-Harris]

Released in 1.10.0. You can see it in action on Svelte Hacker News, by clicking on a comment thread (comments embed their children recursively)

[mindplay-dk]

Feels incredibly fast! Excited to test this out :-)