Crear un componente en Svelte y publicarlo en NPM

Image for post
Image for post

Introducción

¿Qué vamos a necesitar?

¿Qué componente haremos?

Iniciamos el proyecto

mkdir svelte-custom-button
cd svelte-custom-button
npm init -y
$ npm init -y
Wrote to /RUTA_DE_TU_PROYECTO/svelte-custom-button/package.json:
{
"name": "svelte-custom-button",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "alextomas80 <XXXXXXXXXXX@gmail.com>",
"license": "MIT"
}
npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte
{
"name": "@alextomas80/svelte-custom-button",
"version": "1.0.0",
"description": "Ejemplo básico de creación de componente Svelte y paquete en NPM",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"svelte",
"ejemplo"
],
"author": "alextomas80 <XXXXXXXXXXX@gmail.com>",
"license": "MIT",
"devDependencies": {
"rollup": "^2.39.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^7.1.0",
"svelte": "^3.32.3"
}
}

Creación del componente

// src/index.js
import AtButton from './AtButton.svelte';
export default AtButton;
<!-- src/AtButton.svelte -->
<div>Botón de ejemplo</div>

package.json

// ...
"main": "dist/index.js",
"module": "dist/index.mjs",
"svelte": "src/index.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},
// ...
{
"name": "@alextomas80/svelte-custom-button",
"version": "1.0.0",
"description": "Ejemplo básico de creación de componente Svelte y paquete en NPM",
"main": "dist/index.js",
"module": "dist/index.mjs",
"svelte": "src/index.js",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},
"keywords": [
"svelte",
"ejemplo"
],
"author": "alextomas80 <XXXXXXXXXXX@gmail.com>",
"license": "MIT",
"devDependencies": {
"rollup": "^2.39.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-svelte": "^7.1.0",
"svelte": "^3.32.3"
}
}

Creamos el fichero rollup.config.js

import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
const pkg = require("./package.json");export default {
input: "src/AtButton.svelte",
output: [
{ file: pkg.module, format: "es" },
{ file: pkg.main, format: "umd", name: "Name" },
],
plugins: [svelte(), resolve()],
};

¿Cómo puedo probar mi componente localmente?

npx degit sveltejs/template svelte-playground
cd svelte-playground
npm install
npm link
npm WARN svelte-custom-button@1.0.0 No repository field.audited 17 packages in 0.711s3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
/usr/local/lib/node_modules/svelte-custom-button -> /RUTA_DE_TU_PROYECTO/svelte-custom-button
npm link /RUTA_DE_TU_PROYECTO/svelte-custom-button

Usar componente localmente

Image for post
Image for post
<script>
export let name;
// Importamos nuestro componente Botón
import AtButton from "@alextomas80/svelte-custom-button";
</script>
<main>
<h1>Hello {name}!</h1>
<p>
Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
how to build Svelte apps.
</p>
<!-- Usamos el componente -->
<AtButton />
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
Image for post
Image for post

Editar componente localmente a tiempo real

<script>
// Le enviaremos al botón la propiedad `title`, en caso de no recibirla le ponemos valor por defecto
export let title = "Botón";
</script>
<div class="boton">{title}</div><style>
/* Aplicamos unos pocos estilos al botón */
.boton {
background-color: coral;
border-radius: 3px;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
transition: 0.3s ease;
}
.boton:hover {
background-color: darkorange;
}
</style>
Image for post
Image for post
<AtButton title="Enviar formulario" />
Image for post
Image for post

Publicar el paquete en NPM

npm publish --access public
Image for post
Image for post
Image for post
Image for post

¿Cómo puedo probar mi componente desde NPM?

npm i @alextomas80/svelte-custom-button
<script>
import AtButton from "@alextomas80/svelte-custom-button";
</script>
<main>
<AtButton title="Acceder al panel" />
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
</style>
Image for post
Image for post
Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store