npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@clavisco/linker

v0.0.15

Published

**Token**: `Linker` Este componente es el encargado de comunicación entre los distintos componentes

Downloads

58

Readme

Acerca de @clavisco/linker

Token: Linker Este componente es el encargado de comunicación entre los distintos componentes

¿Qué resuelve?

Estandariza el formato y arquitectura de los side menu, al mismo tiempo que, reduce considerablemente el tiempo de implementación.

Dependencias

Funciones disponibles LinkerService

  • Publish(_event: ClvsEvent), envía el Objeto ClvsEvent a hacia todos los oyentes del proceso, cada oyente debe encargarse de filtrar los datos que solo ocupa. A su vez opcionalmente puede hacer llamanda de una funcion externa al componetente mediante la variable Target.
  • Flow(), todos los procesos interesados deben suscribirse a esta función para poder escuchar toda la información que se transmite para cada proceso a través de la función Publish. Al subscribirse es posible obtener la información procesada con el objeto ClvsEvent en la variable Data

Funciones diponibles en Linker.Space

Este workspace es usado para especificar el estandar de comunicación entre los componentes

  • Register(T)(_componentId: string, _action: T, _callback: Function, _interface: ICLCallbackInterface), mapea todos los eventos que suceden entre el componente padre y su hijo. Este se define mediante un enum que representa el contexto del componente mediante un genérico.
    • _componentId: suele ser un identificardor único por componente
    • _action:: es evento que se va a ejecutar, por ejemplo "GET". Estaría obteniendo registros para el componente
    • _callback: es la función que se va a ejecutar cuando algún componente emita un evento
    • _interface: es el objeto que guarda todos los mapeos de eventos y funciones.
  • Run(_componentId: string, _clEvent: ICLEvent, _interface: ICLCallbacks), ejectuta una funcion mapeada previamente a un evento previamente
    • _componentId: suele ser un identificardor único por componente
    • _clEvent: contiene información enviada por el componente origen para ser procesada en el componente destino
    • _interface: es el objeto que almacena todos los eventos enlazados a funciones

¿Cómo lo uso?

LinkerService

  1. Ejecutar el comando npm i @clavisco/linker en el directorio root del proyecto
  2. Injectamos el servicio el módulo LinkerService, sin olvidar incluir la etiqueta @Inject('LinkerService'), con el objetivo de que comparta el mismo contexto en todo momento entre todos los componentes.
  3. Luego podemos llamar a los metodos del servicio como se muestra en el siguiente ejemplo:
callbacks: ICLCallbacksInterface<CL_CHANNEL> = {
    Callbacks: {},
    Tracks: [],
};

ngOnInit(): void {
  this.linkerService.Flow()?.pipe(
    StepDown<CL_CHANNEL>(this.callbacks),
  ).subscribe({
    next: callback => Run(callback.Target, callback, this.callbacks.Callbacks),
    error: error => console.log(`mi error`, error)
  });
}

RequestSelectedItems(): void {
  try {
    const EVENT = {
      CallBack: CL_CHANNEL.DATA_LINE_2,
      Target: this.tableId,
    } as ICLEvent;

    this.linkerService.Publish(EVENT);
  } catch (error) {
  }
}

Nota: En este ejemplo se publica un conjunto de datos por medio del DATA_LINE_2 en este caso los datos son enviados a un componente de tabla, pero podrian ser enviados a cualquier componente que acepte datos por el DATA_LINE_2 cada componente o vista se encarga de validar el estado de los datos y el formato correspondiente, el parametro Target define el id del componente que recibe el evento.

Linker.Space

  1. Ejecutar el comando npm i @clavisco/linker en el directorio root del proyecto
  2. Debido a que estas funciones no comparten contexto con el proyecto root, no es necesario importarlo en el módulo.
  3. Injectamos el servicio el módulo LinkerService, sin olvidar incluir la etiqueta @Inject('LinkerService'), con el objetivo de que comparta el mismo contexto en todo momento entre todos los componentes.
  4. Importar la función que desee utilizar en el componente o servicio donde será utilizada
  5. Ejemplo de cómo importar y utilizar
import { Register } from '@clavisco/linker';

ngOnInit(): void {
    Register<CL_CHANNEL>(this.tableId, CL_CHANNEL.INPUT, this.  GetElementsRecords, this.callbacks);

    this.linkerService.Flow()?.pipe(
      StepDown<CL_CHANNEL>(this.callbacks),
    ).subscribe({
      next: callback => Run(callback.Target, callback, this.callbacks.Callbacks),
      error: error => console.log(`mi error`, error)
    });
}

Nota: La funcion Register es dependiente del servicio linkerService para poder registrar los elementos en el mismo pipe de comunicaciones para todos los componentes, en este ejemplo se registra para el canal INPUT la funcion GetElementsRecords para un componente tabla, el componente de destino mantiene registro de estas funciones y cuando emite un evento se encarga de ejecutarlas para los elementos que apliquen dentro del filtro del pipe

Clavis Consultores ©