No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Estructura

16/26
Recursos

Aportes 9

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

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

Con Emmet puedes generar la estructura de forma sencilla con:

Header+Main>Timeline+Sidebar

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

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

div.main>{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: ["*", ".mjs", ".js", ".svelte"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@Components": path.resolve(__dirname, "./src/components")
    }
  },
...

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 鈥渘ewSvelteComponent鈥, 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>

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">
		<h1>Nunca pares de aprender</h1>
	</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

Oscar es de mis profesores favoritos en Platzi

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