Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Resumen

¿Cómo estructuramos la aplicación Pugstagram?

En esta clase, aprenderemos a organizar nuestra aplicación Pugstagram mediante una estructura clara y eficiente. Este es un aspecto crucial cuando buscamos desarrollar aplicaciones robustas y escalables. A través de una separación limpia de componentes, podemos gestionar el código de manera más eficiente y facilitar futuras actualizaciones.

¿Qué componentes identificamos en Pugstagram?

Al observar nuestra aplicación, podemos identificar varios componentes clave:

Header: Incluye el logo y un menú de navegación donde encontramos elementos como los "likes" y el perfil.
Main: El contenedor principal que alberga dos componentes hijos:
- Timeline: Donde se muestran las fotos publicadas.
- Sidebar: Un panel lateral que ofrece configuraciones adicionales de la cuenta.

Además, dentro del Main, tenemos subcomponentes como el perfil, un cajón de historias, carrusel de fotos y una sección de comentarios.

¿Cómo creamos la estructura en el editor de código?

Para empezar a construir nuestra aplicación, crearemos una carpeta llamada components, donde almacenaremos cada uno de estos componentes definidos. Este es un paso esencial para mantener una arquitectura ordenada y coherente.

components/
  Header.svelte
  Main.svelte
  Sidebar.svelte
  Timeline.svelte

¿Cómo configuramos la aplicación Svelte?

Con los componentes identificados, es momento de integrarlos en nuestra aplicación Svelte. Utilizaremos la estructura de App.svelte para importar y preparar nuestros componentes, incluso antes de crearlos. Aquí te muestro cómo hacerlo:

<script>
// Importamos los componentes desde la carpeta components
import Header from '../components/Header.svelte';
import Main from '../components/Main.svelte';
import Sidebar from '../components/Sidebar.svelte';
import Timeline from '../components/Timeline.svelte';
</script>

// Renderizamos los componentes importados
<Header />
<Main>
  <Timeline />
  <Sidebar />
</Main>

¿Cómo creamos y configuramos los componentes?

Con la estructura básica lista, procedemos a crear cada componente en la carpeta components. Asegúrate de seguir las convenciones de nombrado, utilizando mayúsculas para la inicial del componente.

Header.svelte:
```
<div class="header">Header</div>
```

Main.svelte:

<div class="main-container">
    <slot></slot>
</div>

Sidebar.svelte:
```
<div class="sidebar">Sidebar</div>
```
Timeline.svelte:
```
<div class="timeline">Timeline</div>
```

El uso de slot en Main.svelte permite que este componente reciba contenido anidado, como Timeline y Sidebar, facilitando una mayor flexibilidad en la construcción de la aplicación.

¿Cómo solucionamos errores al compilar?

Un error común al inicializar nuestra aplicación puede ser el no encontrar correctamente ciertos archivos debido a rutas mal configuradas. Verificar la consola del navegador nos brinda pistas sobre posibles errores, tales como faltas de acceso a directorios correctos. Para abordar esto, aseguramos que cada importación apunta al lugar correcto, y utilizamos ../ para navegar adecuadamente entre carpetas.

// Asegúrate de estar en el directorio correcto al importar
import Header from '../components/Header.svelte';

Con esta configuración, hemos logrado establecer una base sólida para nuestra aplicación, permitiéndonos incluso resolver errores de manera eficiente. ¡Sigue adelante con confianza! Exploraremos más funcionalidades en las próximas etapas.

Cesar Galindo

student•

Para crear varios archivos desde la consola puede utilzar el siguiente comando

touch {Header,Main,Timeline,Sidebar}.svelte

María José Ledesma

student•

¡Gracias por el aporte! ¡Nunca pares de aprender! (Y practicar) ✨🦄

Jhon Carlos Colorado Angulo

student•

Gracias.

Arantxa Giovanna Rosas Del Valle

student•

También les recomiendo la extensión Relative Path para vscode que permite buscar de forma sencilla los archivos para completar la ruta y no escribirla toda, aquí el enlace:

https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

Joel Bello

student•

Que agradable sujeta

Arantxa Giovanna Rosas Del Valle

student•

Con Emmet puedes generar la estructura de forma sencilla con:

Header+Main&gt;Timeline+Sidebar

Wilson Fernando Antury Torres

student•

<slot /> : Le indica al componente que aceptará componentes hijos.

Emmanuel Rodríguez

student•

Para los gustosos de Emmet, les comparto el enlace de la documentación :

div.main&gt;{Header}

Yo recomiendo utilizar un alias en webpack, a partir de la indexación de su archivo webpack, para manejar una indexación que utilizamos mucho:

...
  resolve: {
    extensions: [&quot;*&quot;, &quot;.mjs&quot;, &quot;.js&quot;, &quot;.svelte&quot;],
    alias: {
      &quot;@&quot;: path.resolve(__dirname, &quot;./src&quot;),
      &quot;@Components&quot;: path.resolve(__dirname, &quot;./src/components&quot;)
    }
  },
...

ROGER VEGA

student•

Se puede automatizar la creación de componentes con un script como el siguiente:

#!/bin/bash

for componentName in "$@" 
do
    echo "creating file $componentName.svelte"
    touch "$componentName.svelte"
    printf "<script>\n\n</script>\n\n<style>\n\n</style>\n\n<div class=\"$componentName\">\n\n</div>" > "$componentName.svelte"
done

Lo guardan, le agregan permisos de ejecución y lo agregan a la variable PATH

La próxima vez que necesiten crear uno o varios componentes abren el terminal, ponen el nombre del archivo con el que guardaron este script, seguido de uno o varios nombres para los componentes que quieran crear.

Ejemplo: Yo llame al archivo que contiene el script "newSvelteComponent", para crear dos componentes abro el terminal dentro de la carpeta components y ejecuto:

$ newSvelteComponent Componente1 Componente2

como resultado se crean dos archivos llamados Componente1.svelte y Componente2.svelte, cada uno con la siguiente estructura:

<script>

</script>

<style>

</style>

<div class="nombreDelComponente">

</div>

Javier Romero

student•

pero no es fácil entender esos errores en consola y peor aun cuando están en ingles eso a uno lo estresa demasiado, ustedes que aconsejan compañeros aparte de leer el error, porque yo puedo leerlo pero y si no entiendo lo que dice, como me guío.

John Cardenas

student•

Puedes copiar el error y buscarlo en google. Te saldrán muchos resultados :)

PD: Trata de aprender inglés. En esta industria es casi obligatorio. Ánimo Javi.

Johan Stivens Suarez Galindo

student•

Además de usar slots, también los puedes usar nombrados:

<SomeComponent>
	<slot name="box"/>
</SomeComponent>

Y cuando lo quieres usar

<SomeComponent>
	<div slot="box">
		<h2>Nunca pares de aprender</h2>
	</div>
</SomeComponent/>

Esto es muy útil sobretodo cuando tu componente se usa en distintos lugares pero tiene variaciones que a lo mejor no puedes solucionar simplemente con props. Aquí tienes más información: Named slots

Fernando Alejandro Yerena Ramos

student•

¿Svelte no puede renderizar objetos anidados o por qué sucede este error?

Estuve avanzando en la App de Pugstagram antes de ver la solución del profesor. Este es código con el que empecé a probar.

<script>
  import { onMount } from "svelte";

  const API_URL = "https://us-central1-pugstagram-co.cloudfunctions.net/data";

  let data = {};
  <!--let user = {};-->

  onMount(async () => {
    const response = await fetch(API_URL);
    data = await response.json();
    <!-- user = data.user; -->
    console.log(data.user.name);
  });
</script>

<style>
  :global(body) {
    margin: 0;
  }

  .App {
    margin: auto;
    padding: 50px;
    width: max-content;
  }

  :global(h1) {
    font-family: sans-serif;
  }
</style>

<div class="App">
 <!-- <h1 class="App__Title">¡Hello, {user.name}!</h1>-->
  <h1 class="App__Title">¡Hello, {data.user.name}!</h1>
</div>

Pero al correr el servidor tengo el siguiente error en el navegador. Webpack compila el proyecto sin problemas.

El console.logsi imprime el valor sin problema. Y si prueban con las líneas comentadas el problema no sucede. Pareciera ser solo con objetos anidados.

Luis Lira

student•

¡Hola!

El problema radica en el funcionamiento de JavaScript más allá de algo de Svelte. Lo que está pasando es lo siguiente, cuando intentas acceder a data.user cuando recién se monta el componente, data sólo es un objeto vacío y su propiedad user no existe.

Entonces, si pones data.user.name en el primer renderizado JS está intentando acceder a al valor de una propiedad que aún no existe.

Por esto dice que no puede acceder a la propiedad name de undefined. En el console log funciona porque para ese momento para propiedad user ya existe y esta trae dentro de si la propiedad name.

Espero que me haya dado a entender :D

Fernando Alejandro Yerena Ramos

student•

Gracias @Luis_LiraC. Me queda más claro y tiene sentido.

De hecho probé imprimiendo data.user y efectivamente, primero imprime undefined y cuando recibe la respuesta del servidor imprime el [object, object].

Y con lo que mencionas pude corregirlo inicializando data con algunas propiedades.

<script>
  import { onMount } from "svelte";

  const API_URL = "https://us-central1-pugstagram-co.cloudfunctions.net/data";

  let data = {user: ''};

  onMount(async () => {
    ...
  });
</script>

<style>
	...
</style>

<div class="App">
  <h1 class="App__Title">¡Hello, {data.user.name}!</h1>
</div>

De nuevo, muchas gracias. 😊🍍🍍 Necesitaré dar un repaso a las bases.

Asbel Jose Herrera Morales

student•

Lo que no entiendo es como svelte reconoce el main del html del main del div, ademas el main-container desaparece en tree de html

Julian David Alzate Cuervo

student•

Oscar es de mis profesores favoritos en Platzi

Francisco Imanol Suarez

student•

Si tienen el siguiente error

Unexpected end of JSON input while parsing near '...^2.1.0","electron-rel'

Ejecuten el comando npm cache clean --force y luego npm install esto funciono para mi