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

@rxmap/rxmap

v0.6.0

Published

map command and reactive

Downloads

6

Readme

RxMap

Build Status Codacy Badge Coverage Status dependencies Status devDependencies Status Code style: airbnb AUR

  

RxMap es una "Wrapper" para las librerías de mapas que añade programación funcional y reactiva usando observables(RxJs) , permite fácilmente anidar llamadas asyncronas , permite disponer de diferentes libreras de mapas con la misma interfaz y incluye la opcion de trabajar offline.

RxMap no sustituye al visor sino que añade a los visores actuales una capa adicional para poder mejorar el mantenimiento de tus proyectos. Y añade funcionalidades adicionales para mejorar la performance y la escalabilidad de tu código.

RxMap se basa en tres conceptos acciones , observadores y funciones para organizar tu código en pequeños bloques. Y también te permite escribir middlewares para desacoplar mejor tu código.

De facto incluye observables sobre las acciones y un store obsevable, para poder observar los cambios sobre datos que guardes.

RxMap añade una capa de abstracción sobre las librerías de mapas, esta diseñada para desacoplarte y evitarte tener que actualizar tu código con cada cambio de librerías o utilizar una mapa diferente según el entorno. Podrás centrarte en desarrollar tus funcionalidades.

RxMap te permite cargar el código en diferido cuando la utilizas para mejorar los tiempos de carga, es recomendable desplegarlo en http2.

Ventajas

  • Cargar en diferido de las acciones y los observadores (Lazy Loader).
  • Trabajar con observadores. (RxJs).
  • Trabajar de manara asyncrona.
  • Programación funcional.
  • Store Observable.
  • Trabaja con multiples mapas, sin cambiar tu código.
  • Reutilización de código entre diferentes proyectos.
  • Offline

Instalación

NPM

Npm install @rxmap\rxmap —save

CDN

<head>
<script type=‘application/javascript’ src=‘https://unpkg.com/@rxmap/[email protected]’ defer/>
</head>

Como utilizarla

Lo ideal es tener las acciones y los observadores en librerías externas, lo primero seria registrar estas librerías para poder utilizarlas

import rxLib from '@rxmap/basiclib';
registerLib(...rxLib);

Una vez registradas las librerías o las acciones a utilizar. Lo primero es cargar el mapa que se quiera utilizar Y después ya se pueden invocar las acciones o observadores a utilizar.

import { RxMap } from ‘@rxmap/rxmap’;
await RxMap.load(‘leaflet’);
RxMap.create(‘mapId’,2.45,41.56,10);
RxMap.marker(2.45,41.56).popup(‘hello’);

O para versión de CDN.

R.RxMap.load(‘leaflet’);
R.RxMap.create(‘mapId’,2.45,41.56,10);
R.RxMap.marker(2.45,41.56).popup(‘hello’);

La primera acción que se tiene que invocar debe devolver el mapa inicial inicializado, normalmente esta acción se llama ‘create’ y debe ser sincrona, es decir no devolver una promesa. Es recomendable no anidar las llamadas a create, sino volver a hacer llamadas sobre RxMap, como se observa en los ejemplos anteriores.

Documentación

Puedes encontrar más Documentación aquí:

Examples

Librerias

Librerías para añadir acciones y observadores:

Para añadir una nueva librería enviar un mail a [email protected] o realiza un pullRequest de la documentación con la libreria añadida. Para hacer un PullRequest:

  • Haz un fork del repositorio.
  • Haz commit y push de los cambios en tu reposition.
  • Crear un PullRequest .

Mapas Soportados

Offline

El offline funciona a través de un serviceWorker que se encarga de cachear todas las peticiones para que posteriormente puedas acceder a ellas sin cobertura.

Para poder trabajar offline hay que incluir el fichero sw.js en la misma ruta donde esta RxMap. El fichero sw.js debe incluir esta linea

importScripts('https://unpkg.com/@rxmap/[email protected]/dist/esm/offline-sw.js')

para poder activar al serviceWorker que se encargara de cachear las peticiones.