Comenzando

Plugster se distribuye como un único módulo ES servido por jsDelivr directamente desde el tag del release de GitHub — no hay paquete en npm ni paso de build en tu proyecto. La forma más rápida de empezar es importarlo directamente desde el CDN.

Requisitos #

Antes de agregar Plugster a tu proyecto, asegúrate de tener:

  • jQuery 3.x disponible en la página. Plugster envuelve jQuery internamente y espera que window.jQuery / $ esté accesible cuando tus controladores corran. Plugster se ha usado en producción con jQuery 3.6.0; se espera que versiones 3.x anteriores también funcionen.
  • Un navegador moderno que soporte módulos ES y sintaxis ES6+. Plugster se entrega como type="module" y depende de import, clases, async/await y arrow functions.
  • Conocimientos de HTML y JavaScript. Plugster es pequeño a propósito; no abstrae el DOM ni jQuery, organiza la forma en que les hablas.

Instalación #

Plugster se carga vía una URL de CDN fijada a un tag de release específico. El tag es el release — no hay paquete en npm para instalar, y no hay node_modules que gestionar de tu lado.

Agrega jQuery a tu página y luego importa Plugster como un módulo ES:

        
            <!-- jQuery (requerido por Plugster) -->
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

            <!-- Tu módulo de aplicación importa Plugster desde jsDelivr -->
            <script type="module">
                import {Plugster} from "https://cdn.jsdelivr.net/gh/paranoid-software/plugster@1.0.14/dist/plugster.min.js";
                // ... tu código aquí
            </script>

La forma general de la URL del CDN es:

        
            https://cdn.jsdelivr.net/gh/paranoid-software/plugster@<tag>/dist/plugster.min.js

Siempre fija <tag> a una versión liberada explícitamente (por ejemplo 1.0.14). La lista de releases disponibles vive en la página de tags de GitHub del proyecto. No se recomienda usar una referencia móvil como un nombre de rama — Plugster no ofrece garantías de compatibilidad fuera de los releases cortados.

Hola, Plugster #

El Plugster más pequeño posible tiene tres partes: una vista HTML con un atributo data-controller-name, una clase JavaScript que extiende Plugster, y un breve bloque de arranque que instancia la clase y la registra con el framework. El siguiente ejemplo renderiza un botón que actualiza una etiqueta al hacer clic.

La vista

La vista es solo HTML. El atributo data-controller-name en el elemento envolvente vincula la región a una clase Plugster del mismo nombre. Cualquier descendiente que lleve un atributo data-outlet-id se convierte en un outlet que el controlador puede direccionar. 

        
            <div data-controller-name="HelloPlugster">
                <p data-outlet-id="greetingLabel">Haz clic en el botón.</p>
                <button data-outlet-id="greetButton">Saludar</button>
            </div>

El controlador

El controlador es un módulo ES que exporta una clase que extiende Plugster. Los outlets declarados en la vista se exponen en la instancia como handles de jQuery bajo this._.<outletName>. El lugar recomendado para cablear el comportamiento del DOM es afterInit() — los outlets no están enlazados hasta que el framework termina init(), así que cablear en el constructor adjuntaría silenciosamente handlers a stubs vacíos. 

        
            import {Plugster} from "https://cdn.jsdelivr.net/gh/paranoid-software/plugster@1.0.14/dist/plugster.min.js";

            export class HelloPlugster extends Plugster {

                constructor(outlets) {
                    super(outlets);
                }

                afterInit() {
                    let self = this;
                    self._.greetButton.on('click', function () {
                        self._.greetingLabel.text('¡Hola, Plugster!');
                    });
                }

            }

El bloque de arranque

La última pieza instancia la clase y la registra con el framework. El patrón es una IIFE async anónima: hace await al init() de la instancia para que los outlets se enlacen, luego llama a Plugster.plug() para que el framework agregue la instancia a su registro y vacíe cualquier evento encolado. 

        
            <script type="module">
                import {Plugster} from "https://cdn.jsdelivr.net/gh/paranoid-software/plugster@1.0.14/dist/plugster.min.js";
                import {HelloPlugster} from "./hello-plugster.js";

                (async function () {
                    let helloPlugster = await new HelloPlugster({
                        greetingLabel: {},
                        greetButton: {}
                    }).init();

                    Plugster.plug(helloPlugster);
                }());
            </script>

Ese es el ciclo completo: vista, controlador, arranque. Cualquier cosa adicional — outlets basados en listas, eventos entre Plugsters, localización — se construye sobre estas tres piezas.

Siguientes pasos #

  • Lee Conceptos básicos para entender vistas, outlets y controladores con más profundidad.
  • Lee Ciclo de vida para las reglas alrededor de init, plug, unplug y el rol de afterInit().
  • Lee Eventos cuando necesites que dos o más Plugsters en la misma página se comuniquen entre sí.
  • Navega el repositorio plugster-samples para una demo en Flask que ejercita múltiples Plugsters comunicándose vía eventos.
Content