Realworld update

.prettierrc

@@ -2,5 +2,7 @@
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
-	"printWidth": 100
+	"printWidth": 100,
+	"svelteSortOrder": "scripts-markup-styles",
+	"svelteBracketNewLine": true
 }

examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte

@@ -3,8 +3,8 @@
 	let p = 0;
 	let visible = false;
 	onMount(() => {
+		visible = true;
 		function next() {
-			visible = true;
 			p += 0.1;
 			const remaining = 1 - p;
 			if (remaining > 0.15) setTimeout(next, 500 / remaining);
@@ -13,16 +13,6 @@
 	});
 </script>
 
-{#if visible}
-	<div class="progress-container">
-		<div class="progress" style="width: {p * 100}%"></div>
-	</div>
-{/if}
-
-{#if p >= 0.4}
-	<div class="fade"></div>
-{/if}
-
 <style>
 	.progress-container {
 		position: absolute;
@@ -46,18 +36,32 @@
 		position: fixed;
 		width: 100%;
 		height: 100%;
-		background-color: rgba(255,255,255,0.3);
+		background-color: rgba(255, 255, 255, 0.3);
 		pointer-events: none;
 		z-index: 998;
 		animation: fade 0.4s;
 	}
 
 	:global(html).dark .fade {
-		background-color: rgba(0,0,0,0.3);
+		background-color: rgba(0, 0, 0, 0.3);
 	}
 
 	@keyframes fade {
-		from { opacity: 0 }
-		to { opacity: 1 }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
-</style>
+</style>
+
+{#if visible}
+	<div class="progress-container">
+		<div class="progress" style="width: {p * 100}%" />
+	</div>
+{/if}
+
+{#if p >= 0.4}
+	<div class="fade" />
+{/if}

examples/realworld.svelte.dev/package.json

@@ -15,6 +15,7 @@
 		"svelte": "^3.29.0"
 	},
 	"dependencies": {
+		"cookie": "^0.4.1",
 		"node-fetch": "^2.6.1"
 	}
 }

examples/realworld.svelte.dev/src/common/api.js

@@ -12,13 +12,14 @@ async function send({ method, path, data, token }) {
 		opts.headers['Authorization'] = `Token ${token}`;
 	}
 
-	const fetch = typeof window !== 'undefined'
-		? window.fetch
-		: await import('node-fetch').then(mod => mod.default)
+	const fetch =
+		typeof window !== 'undefined'
+			? window.fetch
+			: await import('node-fetch').then((mod) => mod.default);
 
 	return fetch(`${base}/${path}`, opts)
-		.then(r => r.text())
-		.then(json => {
+		.then((r) => r.text())
+		.then((json) => {
 			try {
 				return JSON.parse(json);
 			} catch (err) {
@@ -41,4 +42,4 @@ export function post(path, data, token) {
 
 export function put(path, data, token) {
 	return send({ method: 'PUT', path, data, token });
-}
+}

examples/realworld.svelte.dev/src/common/constants.js

@@ -0,0 +1 @@
+export const page_size = 10;

examples/realworld.svelte.dev/src/common/utils.js

@@ -2,9 +2,9 @@ export function post(endpoint, data) {
 	return fetch(endpoint, {
 		method: 'POST',
 		credentials: 'include',
-		body: JSON.stringify(data),
+		body: JSON.stringify(data || {}),
 		headers: {
 			'Content-Type': 'application/json'
 		}
-	}).then(r => r.json());
-}
+	}).then((r) => r.json());
+}

examples/realworld.svelte.dev/src/components/ArticleList/index.svelte

@@ -1,53 +1,16 @@
 <script>
-	import { session, page } from '$app/stores';
-	import * as api from '$common/api.js';
+	import { session } from '$app/stores';
 	import ArticlePreview from './ArticlePreview.svelte';
-	import ListPagination from './ListPagination.svelte';
 
-	export let tab, username = false;
-	export let favorites = false;
-	export let tag;
-	export let p;
-
-	let query;
-	let articles;
-	let articlesCount;
-
-	$: {
-		const endpoint = tab === 'feed' ? 'articles/feed' : 'articles';
-		const page_size = tab === 'feed' ? 5 : 10;
-
-		let params = `limit=${page_size}&offset=${(p - 1) * page_size}`;
-		if (tab === 'tag') params += `&tag=${tag}`;
-		if (tab === 'profile') params += `&${favorites ? 'favorited' : 'author'}=${encodeURIComponent(username)}`;
-
-		query = `${endpoint}?${params}`;
-	}
-
-	$: query && getData();
-
-	async function getData() {
-		articles = null;
-
-		// TODO do we need some error handling here?
-		({ articles, articlesCount } = await api.get(query, $session.user && $session.user.token));
-	}
+	export let articles;
 </script>
 
-{#if articles}
-	{#if articles.length === 0}
-		<div class="article-preview">
-			No articles are here... yet.
-		</div>
-	{:else}
-		<div>
-			{#each articles as article (article.slug)}
-				<ArticlePreview {article} user={$session.user}/>
-			{/each}
-
-			<ListPagination {articlesCount} page={parseInt($page.params.user, 10)}  />
-		</div>
-	{/if}
+{#if articles.length === 0}
+	<div class="article-preview">No articles are here... yet.</div>
 {:else}
-	<div class="article-preview">Loading...</div>
-{/if}
+	<div>
+		{#each articles as article (article.slug)}
+			<ArticlePreview {article} user={$session.user} />
+		{/each}
+	</div>
+{/if}

examples/realworld.svelte.dev/src/components/Nav.svelte

@@ -4,44 +4,52 @@
 
 <nav class="navbar navbar-light">
 	<div class="container">
-		<a rel='prefetch' class="navbar-brand" href=".">conduit</a>
+		<a rel="prefetch" class="navbar-brand" href="/">conduit</a>
 		<ul class="nav navbar-nav pull-xs-right">
 			<li class="nav-item">
-				<a rel='prefetch' class="nav-link" class:active="{$page.path === '/'}" href="/">Home</a>
+				<a rel="prefetch" class="nav-link" class:active={$page.path === '/'} href="/">Home</a>
 			</li>
 
 			{#if $session.user}
 				<li class="nav-item">
-					<a rel='prefetch' href="/editor" class="nav-link" class:active="{$page.path === '/editor'}">
-						<i class="ion-compose"></i>&nbsp;New Post
+					<a rel="prefetch" href="/editor" class="nav-link" class:active={$page.path === '/editor'}>
+						<i class="ion-compose" />&nbsp;New Post
 					</a>
 				</li>
 
 				<li class="nav-item">
-					<a rel='prefetch' href="/settings" class="nav-link" class:active="{$page.path === '/settings'}">
-						<i class="ion-gear-a"></i>&nbsp;Settings
+					<a
+						rel="prefetch"
+						href="/settings"
+						class="nav-link"
+						class:active={$page.path === '/settings'}>
+						<i class="ion-gear-a" />&nbsp;Settings
 					</a>
 				</li>
 
 				<li class="nav-item">
-					<a rel='prefetch' href='/profile/@{$session.user.username}' class="nav-link">
+					<a rel="prefetch" href="/profile/@{$session.user.username}" class="nav-link">
 						<!-- <img src={$user.image} class="user-pic" alt={$user.username}> -->
 						{$session.user.username}
 					</a>
 				</li>
 			{:else}
 				<li class="nav-item">
-					<a rel='prefetch' href="/login" class="nav-link" class:active="{$page.path === '/login'}">
+					<a rel="prefetch" href="/login" class="nav-link" class:active={$page.path === '/login'}>
 						Sign in
 					</a>
 				</li>
 
 				<li class="nav-item">
-					<a rel='prefetch' href="/register" class="nav-link" class:active="{$page.path === '/register'}">
+					<a
+						rel="prefetch"
+						href="/register"
+						class="nav-link"
+						class:active={$page.path === '/register'}>
 						Sign up
 					</a>
 				</li>
 			{/if}
 		</ul>
 	</div>
-</nav>
+</nav>