Crear WebComponents con StencilJS y reutilizarlos en diferentes proyectos

Índice de contenidos

  • Introducción
  • ¿Qué es StencilJS?
  • Crear un proyecto con StencilJS
  • Creación de un componente botón reusable con StencilJS
  • Añadir estilos CSS a un webcomponent
  • ¿Cómo ver un webcompoent creado con Stencil?
  • Generando la distribución
  • Distribuir nuestro webcomponent en un package de Github
  • Integración en un proyecto con React
  • Integración en un proyecto con Vue
  • Conclusiones

Introducción

¿Qué es StencilJS?

Crear un proyecto con StencilJS

npm init stencil
cd custom-components-stencil
npm install
npm start

Creación de un componente botón reusable con StencilJS

  1. Creamos a carpeta dentro de src que llamaremos at-button (at es de Alex Tomás 😜)
  2. Dentro de src/components/at-button creamos un archivo con formato .tsx que llamaremos at-button.tsx ya añadimos lo siguiente:
import { Component, Prop, h } from '@stencil/core';@Component({
tag: 'at-button',
styleUrl: 'at-button.css',
shadow: true,
})
export class ATButton {
@Prop() text: string;
render() {
return <button class='button'>{this.text}</button>;
}
}
  • Decorador @Component es donde especificamos el nombre del componente y su fichero de estilos.
  • La @Prop text va a ser la propiedad que le enviaremos al componente. Estas propiedades por defecto son inmutables desde dentro del componente. Para hacerlas mutables hay que anotarlas con @Prop({ mutable: true }), pero no va a ser el caso.
  • El método render, que devuelve la descripción necesaria para pintar el componente. Cómo verás usamos sintaxis JSX. Si no conoces JSX pásate por este enlace de la documentación de React que explica qué es JSX.

Añadir estilos CSS a un webcomponent

.button {
background-color: teal;
border-radius: 30px;
border: none;
box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, 0.28);
cursor: pointer;
padding: 10px 30px;
color: white;
}
.button:hover {
background-color: rgb(0, 146, 146);
}
  1. Hemos iniciado el proyecto con Stencil.
  2. Tenemos un webcomponent creado que se llama at-button.
  3. Le hemos dado estilos css.

¿Cómo ver un webcompoent creado con Stencil?

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
<script
type="module"
src="/build/custom-components-stencil.esm.js"
></script>
<script nomodule src="/build/custom-components-stencil.js"></script>
</head>
<body>
<at-button text="¡Hola mundo!"></at-button>
</body>
</html>

Generando la distribución

npm run build

Distribuir nuestro webcomponent en un package de Github

Generar token en Github para crear un package

//npm.pkg.github.com/:_authToken=TU_TOKEN
registry=https://npm.pkg.github.com/USUARIO
//npm.pkg.github.com/:_authToken=d7a031caf35....🤫
registry=https://npm.pkg.github.com/alextomas80
{
"name": "custom-components-stencil"
}
{
"name": "@alextomas80/stencil-webcomponents"
}
npm publish --access public

Integración en un proyecto con React

npx create-react-app test-with-react
npm run start
npm install @alextomas80/stencil-webcomponents@0.0.1
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Importamos nuestro package que hemos creado en los anteriores pasos
import {
applyPolyfills,
defineCustomElements,
} from '@alextomas80/stencil-webcomponents/loader';
ReactDOM.render(<App />, document.getElementById('root'));applyPolyfills().then(() => {
defineCustomElements();
});
<at-button text="Mi WebComponent en React" />

Integración en un proyecto con Vue

vue create test-with-vue
npm run serve
npm install @alextomas80/stencil-webcomponents@0.0.1
import { createApp } from 'vue';
import App from './App.vue';
// Importamos nuestro package que hemos creado en los anteriores pasos
import {
applyPolyfills,
defineCustomElements,
} from '@alextomas80/stencil-webcomponents/loader';
applyPolyfills().then(() => {
defineCustomElements();
});
createApp(App).mount('#app');
<at-button text="Mi WebComponent en Vue" />

Conclusiones

--

--

alextomas.com

Love podcasts or audiobooks? Learn on the go with our new app.

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