Crear un componente en Svelte y publicarlo en NPM

Introducción

  • Crear el botón las X veces que nos haga falta para los diferentes proyectos. *Esto está “bien” pero… ¿y si se cambia, por ejemplo, el borde del botón (border-radius)? Lo tendrías que cambiar en todos los botones que te hayas creado en los diferentes proyectos. Ñeeee, bueno 💩 *
  • Si tu proyecto va a usar siempre la misma tecnología, por ejemplo Svelte, podrías crearte un componente, publicarlo en un package de NPM y re-utilizarlo allá donde te haga falta. Es lo que veremos en este artículo 🚀
  • Pero… ¿si ese mismo proyecto lo vas a usar con diferentes frameworks? por ejemplo, lo quieres usar en React, Svelte y otro en Vue. ¿Qué hacemos?. La respuesta es webcomponents. Te dejo aquí un artículo que escribí hace unos días para crear webcomponents con StencilJS.
  • Nos crearemos un componente botón con Svelte.
  • Lo probaremos localmente.
  • Lo publicaremos en un package de NPM.
  • Lo probaremos de nuevo instalando la dependencia.

¿Qué vamos a necesitar?

  1. Tener cuenta en NPM.
  2. Tener Node y NPM instalados en tu equipo.
  3. Ganas de experimentar 🙃

¿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"
},
// ...
  • En main vamos a establecer el output después de correr el script build
  • En module vamos a definir lo mismo pero como salida un archivo .mjs, para que Node distinga entre módulos creados con CommonJS y ES6.
  • En svelte, vamos a definir la ruta de nuestro archivo index.js creado anteriormente.
  • Y por último definimos los scripts como para crear el build o correr en desarrollo.
{
"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
  1. Un proyecto (svelte-custom-button) con nuestro componente, listo para ser probado.
  2. Un proyecto Svelte (svelte-playground) para probar el componente que enviaremos a NPM.
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

<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>

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>
<AtButton title="Enviar formulario" />

Publicar el paquete en NPM

npm publish --access public

¿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>

--

--

alextomas.com

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