lambda-packages icon indicating copy to clipboard operation
lambda-packages copied to clipboard

Functions and objects can be passed to HTML attributes in `.astro` (and are unhelpfully stringified)

Open Jutanium opened this issue 3 years ago • 5 comments

What version of astro are you using?

1.0.6

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

In a .astro file, you can pass functions and objects as HTML attributes:

---
function myFunction() {
  return "called";
}

const myObj = { test: "hi" }
---
<button onClick={within} data-test={myObj}>Button</button>

But these don't get serialized properly; they get stringified. Thus, there is no use case where this would be desired.

Output:

<button onclick="function myFunction() {
    return &quot;called&quot;;
  }" data-test="[object Object]">Button</button>

See this Stackblitz for a more detailed demo.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-khqxp5-7bbtv6?file=src/components/TestFuncProp.astro

Participation

  • [ ] I am willing to submit a pull request for this issue.

Jutanium avatar Aug 22 '22 18:08 Jutanium