kindred minnow
Hello there, silly question here:
How do I make a button on my page that is able to dynamically add new Astro components?
I have created a player component, and a song component. I want the add button to add a player with that song.
//components/Player.astro
---
const { songSrc } = Astro.props;
const songUri = "http://mysupersecretip:3000/" + songSrc;
---
I could now simply add an event listener and manually recreate the component, but is there a better way?
paper orbit
Heyo! So I'm not sure if there's a more "astro" way of doing this... You won't be able to dynamically create an astro component from the browser unfortunately so you'll be relying on front-end JS or a framework... Unless you'd be up for just this component to be a framework like svelte or something then this would be pretty trivial?
You could SSR that component as a partial and use something like HTMX to render it in a list... But it's probably a bit overkill, especially if the rest of your site is SSG
kindred minnow
I figured that this is the case, which is fine, I will go with manually generating the component instead, I have worked a little with Next, but I wanted to keep the entire thing as simple as possible
Or rather, how much overhead would it be to have a UI framework component like Svelte (haven't worked with it, but only heard good things about it)
paper orbit
I mean it kind of depends what you're doing with it. It looks like they have a button to add a song, and then the user will get a text box or something to put in a url?
Basically unless you're doing some crazy massive form or dashboard or something you'll be absolutely fine. Basically any of the framework options would be fine, Svelte is just my favourite and generates a pretty small bundle so it minimises the performance overhead.
I agree though, if you could dynamically generate Astro components would be neat, but I think if you want a good UX then using a framework is absolutely the right shout! Plus it's what they are there for
If you wanted something tiny you could even use AlpineJS if it's literally just a click handler
https://docs.astro.build/en/guides/integrations-guide/alpinejs/
kindred minnow
I mean it kind of depends what you're doing with it. It looks like they have a b...
Ah no, basically, the list of songs is fetched from an endpoint, and with a button you add a new audio player for that song. No user input even
paper orbit
Ah so yeah, even easier! I'm assuming then that you're getting this list on the frontend?
kindred minnow
basically looks like this
yes indeed. everything is locally sourced however, as these are just mp3 files
I don't know if it overcomplicates the topic, but from trial and error i have created a minimum express endpoint which just serves my mp3 files.
kindred minnow
Sorry to bother @paper orbit, if I actually use a framework, what way would it be around? The add button is part of the song component, I would make the song component the framework to create the player, or the other way around?
paper orbit
Yeah good question, so I'm not 100% sure what your data is.
But say if you've got an array of MP3 filepaths, you'll make that call in your framework, then loop over the song array, create the buttons. Then yeah in your framework you'll handle the click event and create a song component. That's the way I'd do it
kindred minnow
const btnParent = button.parentElement?.parentElement;
const songTitle = btnParent?.querySelector(`#song-title`)?.textContent;
button.addEventListener("click", () => {
const player = createAudioPlayer(songTitle);
playerContainer?.appendChild(player);
});
This is basically the point where im currently standing on. At this point i would wanna have the component from framework x and just enter the props as usual and add it to the corrosponding div.
paper orbit
Hmmm.... I'm not sure you can really do that easily. You'd better off rendering your list in the framework
Or not use a framework and just generate your player with js?
But yeah that's sort of your options. It probably won't be easy to kinda interop vanillajs and framework components s