Transcript from the "Microfrontend Cart Using Islands" Lesson
>> We want to actually use this thing. Let's get these showing up. So I'm going to go back into shop.astro, And we're gonna import that Cart. And now I did it as a named export out of habit, I don't do default exports. So that's a preference, not a rule.
[00:00:26] And I'm gonna grab that components and shop. Nope, cart is the one that we want. And then I'm gonna replace this with a Cart. Okay, so this looks like it's working. But it's not yet because we rendered this statically. So this is maybe the biggest gotta get used to it of Astro is that by default nothing is interactive.
[00:00:59] So even though we've built this interactive component, by default, it's going to render whatever its standard state is. And then when we click buttons and stuff, it won't do anything. So to make this actually work, we're going to set it to client:only. And then because we're using multiple frameworks, we have to tell it which one we're using.
[00:01:38] So we are going to say, add-to-cart.tsx. And this one is powered by React. So we're gonna override the the TSConfig by putting in our own jsxImportSource and configuring to React. And that'll allow us to, Autocomplete is gonna work the way we expect, it's not gonna say you can't use class or className or things like that.
[00:02:07] That's why this stuff is worth setting up. And one of the reasons that I do like TypeScript is that you can get those more useful errors. So next we want that addItemToCart out of the store. And then we can export a const called AddToCart and that one is going to return an item, or it's going to accept an item as a prop, and that item will be a ShopItem.
[00:02:36] So that is coming out of our types that we already declared. Okay, let me make this bigger so that it's not hidden. So inside, we get a nice simple component. I'm always thrilled when I get to write a component like this. So this is a button and it includes a className.
[00:02:58] We're back in React land. So we're gonna use that big-link class again. onClick, and inside of our onClick I'm going to addItemToCart and pass in the item, and then Add To Cart. And that's the whole thing, very, very simple React component, probably not worth bringing in the entire React library.
[00:03:23] But again, this is for demonstration purposes. So back in our shop-items, where we have that TODO for the cart, we want to replace this with our React component. So up at the top here we can import, AddToCart from components and add-to-cart. And then down here we are going to replace this chunk of code, this TODO item with our AddToCart component.
[00:04:06] We're gonna pass in the item from Astro. So the same item that we have here can be passed into the React component as a prop. So no magic or anything necessary for that. And then we need to set it to be client:only. And I'm not gonna use anything other than the client:only.
[00:05:58] Media, I think you get to set on the same thing as a CSS media query. I haven't actually used that one and I haven't had a reason to use that one, so I'm not gonna pretend I know how that one works. [LAUGH] But so we're gonna set this to be client:only.
[00:06:17] And again, because we're using multiple frameworks, we're gonna use React, set that =react and Save. Okay, so assuming I haven't typoed anything, this is going to work now. So I can come in here, we can shop for some sandwiches, and start adding things to our cart, and we get those items if we want to.
[00:06:44] And remember, I'm clicking on a button that's powered by React. And this cart is powered by Solid. And it's all linked together using Nano Stores. So as I'm updating these, they are working as expected as if they were all using the same framework. Because Astro is acting as an umbrella and Nano Stores gives us the ability to quickly relay data between these different islands of interactivity.
[00:08:05] I didn't have to load and execute component code to get these images and text that aren't dynamic back on the page. Only this Cart, and only these Add To Cart buttons have to be loaded and executed. So this is a great way to build some very dynamic experiences in such a way that you're not adding unnecessary code to your page.
[00:08:29] You're only bringing in what's necessary to get the job done that you need to get done. There's not any just in case code. There's not any you gotta use it because you got to go all in to get the features of this thing. It's just selectively as you need it, add one or more features at a time to get that going.
>> I just wanted to know if it's possible to use Nano Stores to maintain state across pages?
>> Yes, there are extra things you can do. You can put it into IndexedDB, or local storage, or something like that. And then kinda rehydrate it out. There are extra packages that make that work, okay.
[00:09:06] [BLANK AUDIO]