Como desenvolver um componente svelte e publicá-lo como um pacote no NPM · Ernane

Publique seu componente svelte favorito como um pacote no npm e disponibilize-o para que seja utilizado a qualquer momento.

Quando gostamos de um determinado componente que desenvolvemos, acabamos utilizando e reutilizando ele inúmeras vezes, isso de diversas formas diferentes, seja; replicando seus arquivos e lógica em diversos locais diferentes no projeto, ou em diversos outros projetos, ou simplesmente reimplementando o mesmo componente várias e várias vezes. Isso irá funcionar, é claro. Entretanto, não é a melhor maneira de se atuar nessa situação.

Imagine que você terá que realizar uma manutenção, ou simples alteração, digamos, de cor nesse componente. Imagine que são 10, 100, 200.. Bom, terá que realizar essa mudança em cada componente presente em seu projeto, correto? E se ele já estiver aplicado em outros projetos? bom, a alteração deverá ser realizada também. A problemática acho que já deu para entender-mos. Mas, como resolve-la?

Quando se trata de um projeto que se utiliza da mesma tecnologia, no caso que veremos nesse post o Svelte por exemplo, você pode criar um componente e publicá-lo como um pacote no NPM e reutilizá-lo sempre que precisar. Isso é o que veremos aqui! já para os casos onde os projetos não compartilham da mesma tecnologia, esse já é um assunto para um outro momento. Mas, se você gosta de spoilers poderá ler sobre WebComponents.

O que iremos desenvolver?

Recentemente fiz um simples componente svelte - daí a ideia do post - para realizar avaliações. É simplesmente um aninhado de estrelas e nele o usuário poderá mostrar sua satisfação com tal conteúdo que o componente devolverá em sua prop de configuração a informação selecionada. Será ele que iremos desenvolver!

Para isso, é necessário que você possua uma conta no NPM, tenha o NodeJs e NPM instalados em sua máquina e paciência para se aventurar!

Inicializando o projeto

A primeira etapa, como qualquer projeto, é criarmos um diretório para ele. vamos lá!

$ mkdir svelte-star-rating
$ cd svelte-star-rating

Agora, podemos inicializar, de fato, o nosso projeto.

$ npm init -y

Esse comando irá criar um arquivo package.json e preencherá algumas informações automaticamente sobre o pacote que estamos desenvolvendo como nome, autor, descrição, etc.. a flag -y irá realizar um breve preenchimento automático. Caso queira fazer manualmente execute sem ela. Mas, não se preocupe, Sempre poderá alterar o package.json quando necessário.

Instalando dependências necessárias

O passo seguinte é realizarmos a instalação dependências de desenvolvimento necessárias do nosso pacote. Dessa forma, perceba que o package.json irá acrescentar a seção de dev dependencies. Além disso, irei aproveitar para realizar algumas alterações como, nome, autor, keywords, etc.. Fique à vontade para preencher como achar pertinente.

Por fim, o package.json deverá se parecer com o seguinte:

{
  "name": "@ernane/svelte-star-rating",
  "version": "1.0.0",
  "description": "Simple component to assign scores based on stars.",
  "homepage": "https://github.com/ErnaneJ/svelte-star-rating",
  "bugs": {
    "url": "https://github.com/ErnaneJ/svelte-star-rating/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ErnaneJ/svelte-star-rating.git"
  },
  "keywords": [
    "svelte",
    "star",
    "ratting",
    "component",
    "sapper"
  ],
  "author": "ernane <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "rollup": "^2.39.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^7.1.0",
    "svelte": "^3.32.3"
  }
}

Criação do componente

Como de costume, crio meus arquivos de lógica geralmente em um subdiretório nomeado src, irei seguir esse padrão aqui. Dessa forma, criaremos um arquivo index.js, ele será o ponto de partida do nosso componente.

Basicamente iremos importar o componente principal do nosso pacote e exportá-lo como default no index. Será algo dessa forma:

// src/index.js
import SvelteStarRating from './SvelteStarRating.svelte';
export default SvelteStarRating;

Como consequência teremos agora que criar o arquivo, que será o nosso componente svelte em si, SvelteStarRating.svelte. Para testarmos, vamos apenas colocar uma mensagem de teste no momento!

<!-- src/SvelteStarRating.svelte -->
<p>Hello World! It's my first package svelte component! ✨ SvelteStarRating ✨</p>

Nesse arquivo teremos toda a lógica e implementação do nosso pacote. Nele adicionaremos estilos, imports necessários, dentre outras coisas.. Vamos em frente, jajá voltaremos nele!

Formalizando estrutura

Agora que temos a estrutura principal do nosso componente, precisamos formalizá-la em nosso package.json. Para isso será necessário realizarmos mais algumas alterações nele.

// ...
"main": "dist/index.js",
"module": "dist/index.mjs",
"svelte": "src/index.js",
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
},    
// ...

Como essa parte é um pouco delicada, vamos ver o que ela está realmente fazendo:

Em main definimos qual será a saída após a execução do script de compilação,
Em module definimos o mesmo, porém como saída um arquivo de extensão mjs para que o Node diferencie-o dentre os módulos criados com CommonJS e o ES6.
Em svelte, estamos definindo o caminho do nosso arquivo principal, o index.js que criamos anteriormente.
E, por fim, scripts serão os comandos utilizados para execução e compilação em desenvolvimento.

Perceba que o subdiretório dist, que especificamos nos dois primeiros comandos, não existe pois será gerado automágicamente ✨.

Após essas pequenas mudanças o nosso package.json ficará da seguinte maneira:

{
  "name": "@ernane/svelte-star-rating",
 "version": "1.0.0",
  "description": "Simple component to assign scores based on stars.",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "svelte": "src/index.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  "homepage": "https://github.com/ErnaneJ/svelte-star-rating",
  "bugs": {
    "url": "https://github.com/ErnaneJ/svelte-star-rating/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ErnaneJ/svelte-star-rating.git"
  },
  "keywords": [
    "svelte",
    "star",
    "ratting",
    "component",
    "sapper"
  ],
  "author": "ernane <[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "rollup": "^2.39.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^7.1.0",
    "svelte": "^3.32.3"
  }
}

Criando o arquivo rollup.config.js

Bem provavelmente você já tem familiaridade com este arquivo por se tratar do Svelte. Mas basicamente realizamos a configuração básica de compilação do nosso singelo projeto.

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()],
};

Ufa! Pacote configurado com sucesso para utilização. 🥳

Testando componente localmente

Antes de publicarmos o nosso novo componente no NPM, é bom sempre testarmos ele para ver como está realmente e se seu resultado é satisfatório. Para isso, podemos utilizá-lo em nossa maquina mesmo antes de enviarmos para publicação. Para isso, vamos criar, em paralelo, um simples projeto em Svelte. Para esse caso, irei utilizar o próprio svelte-playground.

$ npx degit sveltejs/template svelte-playground

Em seguida acessamos o projeto clonado e instalamos duas dependências iniciais.

$ cd svelte-playground
$ npm install

Agora, para podermos utilizar o nosso componente como um pacote do npm e aplicarmos nesse projeto podemos executar o seguinte comando no diretório do nosso pacote svelte-star-rating.

$ npm link

Com ele obteremos uma resposta semelhante a essa:

# npm WARN [email protected] No repository field.

# audited 17 packages in 0.711s

# 3 packages are looking for funding
#   run npm fund for details

# found 0 vulnerabilities

Após isso, agora no projeto de teste svelte-playground podemos executar o mesmo comando, porém agora, passando a diretório do nosso novo pacote em nossa máquina.

$ npm link /path/svelte-star-rating

Dessa forma podemos utilizar o nosso componente como um pacote localmente, e o melhor de tudo, em tempo real!

Utilizando componente localmente

Acesse o projeto de teste que criamos, svelte-playground, e execute o projeto em desenvolvimento utilizando o comando presente em seu package.json.

$ npm run dev

Em seguida acesse o navegador na porta sugerida e veja a aplicação em execução. Após isso, podemos agora aplicarmos o nosso componente a esse projeto e assim visualizarmos suas alterações em tempo de execução.

para isso, vamos ate o arquivo src/app.svelte, para realizarmos algumas alterações.

<!-- src/app.svelte -->
<script>
  ...
  import StarRating from "@ernane/svelte-star-rating";
  ...
</script>

...
<StarRating/>
...

E então teremos o nosso componente sendo executado localmente. Fantástico, não!?

Agora é so desenvolvermos da maneira que quisermos o nosso novo componente e ir verificando se as alterações realizadas condiz com o que queremos. Aqui está o status atual do desenvolvimento do meu svelte-star-rating.

Publicando pacote no NPM

Ótimo, já temos o nosso componente funcionando gostaríamos. E agora? bom, agora publicamos ele! A publicação é tão simples quanto um push, olha só..

Primeiramente, você deverá estar logado em sua conta do NPM, caso não esteja ou não saiba é so seguir os passos descritos aqui.

Após estar logado, e com certeza de que deseja publicar a primeira versão do seu pacote, é so executar o seguinte comando:

$ npm publish --access public

Pronto! pode acessar o seu perfil na página do NPM que você verá um novo pacote adicionado! 🎉 Simples não?!

Testando novo pacote NPM

Isso aqui, sem dúvidas, você já fez centenas de vezes, ou talvez menos 😅.. Acesse as informações do seu pacote que lá dirá como realizar a instalação. Mas seguindo os padrões você poderá realizar com o simples npm install passando o nome, definido no package.json, do seu projeto!

ou seja,

$ npm i @ernane/svelte-star-rating

O uso será o mesmo de antes, importar e utilizar. Bom, isso você já sabe!

Caso tenha alguma dúvida, aqui está o repositório que utilizei para armazenar o pacote citado aqui no post e o link do mesmo já ublicado no npm!

Espero que tenham gostado dessa postagem e que ela tenha te ajudado, de alguma forma, a encontrar ou que você procurava! 💙