RxJS and svelte by rveciana

Learned in this tweet that Svelte and RxJS work together directly, which I found interesting.

I don’t want to forget it, so this example will help me.

Wired-elements make the example more attractive.

The base is the basic Svelte template. I just changed the App.svelte file and installed the libraries.

index.html

<!doctype html>
<html>
<head>
	<meta charset='utf8'>
	<meta name='viewport' content='width=device-width'>

	<title>Svelte test</title>

	<link rel='stylesheet' href='global.css'>
	<link rel='stylesheet' href='bundle.css'>
</head>

<body>
	<script src='bundle.js'></script>
</body>
</html>

App.svelte

<script>
	import { ajax } from "rxjs/ajax";
	import { pluck, startWith } from "rxjs/operators";
	import { WiredIconButton, WiredCard } from "wired-elements";
	import { afterUpdate } from 'svelte';
	
	const users$ = ajax("https://api.github.com/users?per_page=5")
	               .pipe(pluck("response"), startWith([])
	);

	afterUpdate(() => {
		const card = document.querySelector("wired-card");
		card.requestUpdate();
	});

</script>
<wired-card elevation="3">
<h1>Users list</h1>
<div>
{#each $users$ as user}
	<p><wired-icon-button style="--wired-icon-size:8px">favorite</wired-icon-button> {user.login} </p>
{/each}
</div>
</wired-card>