@manufosela/simple-carousel

Carrusel accesible en Web Component con Lit 3. El contenido vive en el light DOM: indexable por buscadores, accesible y con degradación elegante cuando JS no está disponible.

Instalación

npm install @manufosela/simple-carousel

Uso

<script type="module">
  import '@manufosela/simple-carousel';
</script>

<simple-carousel seconds-delay="5">
  <ul slot="items">
    <li><img src="/img/1.jpg" alt="Playa al atardecer" /></li>
    <li><img src="/img/2.jpg" alt="Montaña nevada" /></li>
    <li><img src="/img/3.jpg" alt="Bosque en otoño" /></li>
  </ul>
</simple-carousel>

Atributos:

| Atributo | Tipo | Descripción | |---|---|---| | seconds-delay | Number | Si es > 0, activa autoplay y muestra el botón de pausa. |

Slot:

| Slot | Qué acepta | |---|---| | items | Un <ul> con un <li> por imagen. Cada <li> contiene un <img> con src y alt. El alt se usa como descripción. |

Import avanzado

Si prefieres registrar el custom element con otro nombre, o extender la clase:

import { SimpleCarousel } from '@manufosela/simple-carousel/SimpleCarousel.js';

customElements.define('my-carousel', class extends SimpleCarousel {});

Paso 8 (workshop) — Empaquetar y publicar en npm

Llegados aquí, simple-carousel es un componente accesible, testeado e indexable. El último paso convertirlo en un paquete reutilizable que otros proyectos puedan instalar.

Cambios respecto a paso7

• package.json:
  • name con scope: @manufosela/simple-carousel (evita colisiones y permite publicación gratuita).
  • version: "1.0.0".
  • type: "module" (ya estaba).
  • main y module apuntan a simple-carousel.js (el fichero que registra el custom element).
  • exports con tres entradas:
    • "." → punto de entrada por defecto (registra <simple-carousel>).
    • "./SimpleCarousel.js" → solo la clase, sin registrar, por si alguien quiere extenderla o usar otro nombre.
    • "./styles.js" → los estilos reutilizables.
  • sideEffects: ["./simple-carousel.js"]. Le decimos al bundler que src/*.js es tree-shakeable pero el fichero de registro sí tiene efectos.
  • files: qué se empaqueta. Sólo lo estrictamente necesario (sin demo/, sin test/, sin node_modules/).
  • prepublishOnly: corre los tests antes de publicar.
  • publish:dry: script para simular npm publish sin subir nada.
• LICENSE: Apache 2.0.

Qué NO se publica

Con files restringido, el paquete no incluye:

• demo/ — es código del workshop, no del componente.
• test/ — lo mismo.
• web-test-runner.config.mjs, package-lock.json (npm nunca lo publica), .gitignore.

Esto mantiene el paquete pequeño.

Publicación paso a paso

1. Simular la publicación

npm run publish:dry

Verás la lista de ficheros que se subirían, el tarball size y el unpacked size.

2. Login en npm (sólo la primera vez)

npm login

3. Publicar

npm publish --access public

El flag --access public es obligatorio la primera vez para paquetes con scope (@...); sin él, npm asumiría privado y fallaría si no pagas.

4. Subir nuevas versiones

Usa npm version para bumpear y crear el commit + tag:

npm version patch   # 1.0.0 -> 1.0.1 (fix)
npm version minor   # 1.0.0 -> 1.1.0 (nueva feature backwards-compatible)
npm version major   # 1.0.0 -> 2.0.0 (breaking change)
npm publish
git push --follow-tags

Cómo lo consume un proyecto

Si es un proyecto con bundler (Vite, Rollup, webpack):

import '@manufosela/simple-carousel';

Si es HTML puro con import maps:

<script type="importmap">
  {
    "imports": {
      "@manufosela/simple-carousel": "https://unpkg.com/@manufosela/simple-carousel/simple-carousel.js",
      "lit": "https://unpkg.com/lit@3/index.js",
      "lit/": "https://unpkg.com/lit@3/",
      "@lit/reactive-element": "https://unpkg.com/@lit/reactive-element/reactive-element.js",
      "lit-element/lit-element.js": "https://unpkg.com/lit-element/lit-element.js",
      "lit-html": "https://unpkg.com/lit-html/lit-html.js",
      "lit-html/": "https://unpkg.com/lit-html/"
    }
  }
</script>
<script type="module">
  import '@manufosela/simple-carousel';
</script>

El workshop completo

| Rama | Contenido | |---|---| | paso0 | Carrusel vanilla HTML/CSS/JS. | | paso1 | Web Component con Lit 3. Todo en shadow DOM (⚠️ no indexable). | | paso2 | Configurable por atributos (⚠️ sigue sin ser indexable). | | paso3 | Primer <slot>: las descripciones vienen del light DOM. | | paso4 | Todo el contenido por slot. Recuperamos indexabilidad y resiliencia. | | paso5 | Accesibilidad: ARIA, teclado, focus visible, live region. | | paso6 | Autoplay con seconds-delay y botón play/pausa. | | paso7 | Tests funcionales con @web/test-runner y @open-wc/testing. | | paso8 | Empaquetado y publicación en npm (esta rama, igual que main). |

Ramas paso0-legacy … paso7-legacy: versión histórica original con lit-element@2 y es-dev-server (arqueología).

Workshop: https://www.youtube.com/watch?v=VAhQRA9NurA

Licensed under Apache 2.0.