Initialise the component

We're using just one component here, with an external setup function to initialise the scope. Our scope contains a feed to hold each item in our (soon to be) list of resolved feed items, a sources array containing the hardcoded list of RSS feeds we want to pull from, and an init function to kick the process off.

Now we'll iterate over each of the feeds and read them. Update your setup function with a get function and updated init function so it looks like this. Don't forget to instantiate the RSSParser at the top.

For each feed we iterate on, we use the RSS parser to fetch and parse the document. Then we iterate over each entry and log it. We're silently failing if a feed can't be loaded because ain't nobody got time for that.

Check your console and you should see a list of entries as objects, with properties like title and url.

Time to add them to our feed.

Adding parsed entries to our feed

First, create an addToFeed function. This takes the parsed entry and returns an object with just the data we need. You can always add additional properties if you fancy.

As we iterate over each feed item (which we're calling entry) we output the title, link and formatted date.

If you're new to Alpine.js, x-for iterates over an array and renders the content inside the template for each item. x-text sets the innerText of the element you use it on and x-bind:href sets the href attribute of the anchor we're using to the given value.

In your browser, you should now see a list of feed items!

Sorting by published date

Right now the items are grouped by publication and not sorted according to the date they were published.

Let's create a pseudo computed property (a function... Alpine doesn't have computed properties) to sort the items. This is made easier, because we're working with a JavaScript Date object.