Consumo de API en Svelte

Título: Cómo crear un feed de noticias con Svelte (+Vite)

Descripción del paso a paso. Sé directo y conciso. Puedes acompañarlo con imágenes, enlaces o ejemplos. Ve en orden y ponte en los zapatos del otro; piensa cómo irá avanzando en la medida en que te lee.

Descripción:

En nuestro crecimiento como desarrolladores web nos encontraremos con la realidad que todos los días hay algún framework nuevo o alguna librería que aseguré ser la solución a todos los problemas.

En esta ocasión les presento un tutorial dónde consumiremos la API pública de Hacker News y tendremos un portal simple donde se nos muestre el título de las últimas historias. Cada historia con su URL para ir a la públicación dónde hacer la lectura.

0. Entorno

Tenemos tantas maneras de hacer las cosas cómo las hay de programadores.

Estas palabras valen leerse cada vez que regresemos a la consola para empezar un nuevo proyecto o un nuevo tutorial.

$ npm create vite@latest my_app --template svelte

En este paso le agrego reto a la comunidad pueden realizar el ejercicio con otros template, vue, angular, react. Puedes ver la lista aquí.

Aplicamos las recomendaciones de npm de:

1. Instalar dependencias npm install
2. git init & tip: Escriban en el README.md que desean hacer con este tutorial.
3. Levantamos el servidor npm run dev

1. ¿Qué tenemos? ¿Qué queremos?

Tenemos un espacio para producir lo que imaginemos.
Dentro del folder src/lib crearemos un nuevo archivo llamado Form.svelte, aquí es donde consumiremos la API para cada noticia que despleguemos en la lista de App.svelte.

/// Form.svelte
<script>
    export let id;

    const fetchNew = (async () => {
        try {
			const response = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`);
			if(!response.ok){
				throw new Error("API broken")
			}
			return await response.json();
		} catch (error) {
			
		}
    })()

</script>

{#await fetchNew}
    <p>Esperando noticias..</p>
{:then data} 
    <article>
        <h3><a target="_blank" rel="noreferrer" href={data?.url}>{data.title}</a></h3>
        <p>Publicado por {data.by}	</p>
    </article>
{/await}

<style>
	article {
		position: relative;
		padding: 0 0 0 2em;
		border-bottom: 1px solid #eee;
	}

	h3 {
		font-size: 1.1rem;
		margin: 0.5em 0;
		text-align: left;
	}

	a {
		color: aliceblue;

	}
</style>

Con Svelte podemos definir los estilos dentro del mismo componente, sean creativos y divertidos con su propio estilo.

Ahora en App.svelte Vamos a cargar la lista de últimas noticias y la iteramos con las directivas de Svelte.

//// App.svelte
<script>
  import Form from './lib/Form.svelte'
  
  const PAGE_SIZE = 20;

  const latest_stories = (async () => {
    try {
      const res = await fetch(`https://hacker-news.firebaseio.com/v0/newstories.json?print=pretty`)
      if(!res.ok){
        throw new Error ("Fail API")
      }
      return await res.json();

    } catch (error) {
      console.log(error)
    }
  })()
</script>

<main>

  <div class="list__container">
    <div class="list__header">
      <h1>Noticias para mí</h1>
    </div>
    {#await latest_stories}
      <p>Cargando...</p>
    {:then data} 
      <div class=" list__content">
        {#each data as id}
          <Form {id}></Form>
        {/each}

      </div>
    {/await}
  </div>
</main>

<style>
  :global(main){
    box-sizing: border-box;
    font-size: 62.5%; 
    /* 1 rem = 10px */

   text-align: center;
   margin: 0 auto;
  }
  h1{
    font-size: 3rem;
    text-align: left;
  }
</style>

Con este código podemos observar el consumo de API en dos archivos para propósitos diferentes, mientras cuidamos unas buenas prácticas de consumo de fetch con response.ok

Espero practiquen el consumo de API con curiosidad incansable.