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.

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

"with" block template helper #4169

Closed
ahopkins opened this issue Dec 26, 2019 · 1 comment
Closed

"with" block template helper #4169

ahopkins opened this issue Dec 26, 2019 · 1 comment

Comments

@ahopkins
Copy link

ahopkins commented Dec 26, 2019

Is your feature request related to a problem? Please describe.
Example, I have an object like this:

const items = [{
    id: 123,
    getter: function getPrimitive()
},
{
    id: 456,
    getter: function getPrimitive()
}]

I need to render these inside and {#each} block, and execute that item getter.

Describe the solution you'd like

{#each items as rawItem}
    {#with rawItem.getter() as item}
        This is my {item}
    {/with}
{/each}

Describe alternatives you've considered

OPTION 1
I could prerender this in my <script> block and then have a new list of prerenderedItems, but that sort of defeats the purpose. In my example, the getter is meant to do a look up to reduce duplication and overhead in deeply nested objects. Only sometimes might I want to prerender, and sometimes skip:

{#each items as rawItem}
    {#if rawItem.id < 200}
        {#with rawItem.getter() as item}
            This is my {item}
        {/with}
    {/if}
{/each}

OPTION 2
Another thing I tried (to see if it would work) was to do the variable assignment and evaluation inside a text expression:

<script>
let item
</script>

{#each items as rawItem}
    {#if rawItem.id < 200}
        {house = rawItem.getter()}
        This is my {item}
    {/if}
{/each}

This solution seemed to compile, but at runtime:

ReferenceError: $$invalidate is not defined

While this seems like it might be an alternative to my suggestion, it also seems hacky and potentially prone to errors.

OPTION 3
What I have implemented for now is something like the following

>> Parent.svelte
{#each items as rawItem}
    {#if rawItem.id < 200}
        <Primitive let:item item={rawItem}>
            This is my {item}
        </Primitive>
    {/if}
{/each}


>> Primitive.svelte
<script>
    export let item
    item = item()
</script>

<slot {item} />

It works and accomplishes what I need, but it seems like a lot of extra work that can be taken care of without having another component.

How important is this feature to you?

Since there is such an ability to add logic directly into the templates, this seems somewhat important. Maybe there is another method to do on the fly evaluation and variable assignment. But I did not see anything in the docs, and I am not aware of another method.

@Conduitry
Copy link
Member

Duplicate of #1521.

I'd be wary of using a name like with because it sounds like with statements, which are decidedly not something we want to implement, as they make things impossible to statically analyze.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants