Skip to content

Value is not a function error / Manipulating snippets in functions #14478

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

Open
yustarandomname opened this issue Nov 30, 2024 · 3 comments
Open

Comments

@yustarandomname
Copy link

Describe the bug

I am pretty sure this is not necessarily a bug but an intended behaviour. However, the error given is so vague, and I could not find any documentation explaining why this functionality is not supported. Given is the following snippet:

<script lang="ts">
  import type { Snippet } from 'svelte';

  function formatter(v: number): ReturnType<Snippet<[number, string]>> {
    return draw(v, 'pink');
  }
</script>

{@render draw(0, 'orange')}

{@render formatter(0)} <!-- ERROR: Value is not a function error-->

{#snippet draw(value: number, color: string)}
  <p>
    value:
    <span style="background:{color}">
      {value}
    </span>
  </p>
{/snippet}

I try to create a new snippet that only takes part of an original snippet. Type wise this should be supported as draw has the following typing:

const draw: (value: number, color: string) => ReturnType<import("svelte").Snippet>

My expectation was that formatter would behave similarly to the following

{#snippet formatter(value: number)}
  {@render draw(value, 'pink')}
{/snippet}

The browser complains with a strange error which I have never encountered before. I suspect it has something to do with component mounting, unmounting or scoping? What part of Svelte magic am I missing in order to understand this error? Would this behaviour be possible with createRawSnippet?

Reproduction

https://svelte.dev/playground/33470f759ec0434cbcb597f5119a36da?version=5.2.11

Logs

No response

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 146.22 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 9.14.4 - ~/Library/pnpm/pnpm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1.1
  npmPackages:
    svelte: ^5.0.0 => 5.1.16

Severity

annoyance

@brunnerh
Copy link
Member

Related to/duplicate of:

You get odd errors because the actual shape of the function is different from the one reported by the generated types. The types show the signature used in @render, the actual function also expects an $$anchor argument that the snippet is rendered to.

@yustarandomname
Copy link
Author

Thanks for guiding me in the right direction. The comment by @Ocean-OS was very helpful. I have updated the REPL here. However, I still have some trouble defining narrower types for the formatter function instead of using type any.

@brunnerh
Copy link
Member

brunnerh commented Dec 2, 2024

User-land workarounds like that are not a good idea.
This relies on internals which have not been confirmed to be stable.

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