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

track-changes-js

v24.2.22

Published

Library for tracking changes in variables of any data type.

Downloads

9

Readme

I'm a developer from Ukraine 🇺🇦
Russia started a war, invaded my country, destroyed the entire infrastructure of my city, kills civilians and drops bombs on residential areas. I live in the city of Kherson. and I am under occupation, these Russian pigs do not allow humanitarian corridors to pass.
They kill and starve the inhabitants. Here are shots of what they are doing to our cities

Russians are worse than the Nazis. Russians are not people, they are terrorists.

I call on everyone to obstruct and boycott Russia 🇷🇺. Russian software. People from Russia. For only the citizens of Russia are to blame for the deaths of tens of thousands of people. 75% of Russians support the war in Ukraine and the invasion of other European countries

Thanks to all countries for supporting Ukraine. Victory is ours! 🇺🇦

👁️‍ TrackChanges.js

Library for tracking changes in any data type
  • support browser and node-js
  • uses global space, you can control observers from any file
  • does not load, uses 1 global loop
  • easy to use and can be a replacement for MutationObserver in the browser

Installation for node-js

npm i track-changes-js --save-dev

Include the library in a file

// create a class object
const TrackChanges = require('track-changes-js');
const trackChanges = new TrackChanges();

Installation for browser

git clone https://github.com/itmor/trackChanges.js.git
cd build

include library file in HTML page

<script src="trackChanges.min.js"></script>

Include the library in a file

// create a class object
const trackChanges = new TrackChanges();

Usage example

// tracked variable
let num = 1;

// add an observer, pass the name and function that returns the variable
trackChanges.addObserver('numObserv', () => num);

// add a handler, pass the name and function that will be called when changing "num"
trackChanges.addHandler('numObserv', numHandler);

/** 
create a function that will be called when the variable changes, the function argument will be its changed value 
**/
function numHandler(modifiedResult) {
  console.log(`Num changed to: ${ modifiedResult }`);
}

Importantly

Each observer must have a unique name.
You can create an unlimited number of observer handlers

Description of public methods

| methods | description| | ------------ | ------------ | | addObserver(name: string, valueFunc: function)|The method creates an observer, takes a unique name and a function for returning the observed value | | removeObserver(name: string)|The method removes the observer, accepts the name of the previously created observation| | addHandler(name: string, callback: function)|The method adds a handler for the observer. Accepts the name of the previously created observer and callback function. When the callback value is changed, the callback function is launched and its argument will be equal to the changed value| | removeHandler(name: string, callback: function)|The method removes the handler for the observer. Accepts the observer name and callback function that was used when adding the handler| | getObserverStruct(name: string)|With this method you can get the observer structure, output data { name: string; value: function; oldValue: any; removed: boolean; callbacks: Array}| | getAllObserversStruct()|With this method you can get the structure in all available observers, output data Array<{ name: string; value: function; oldValue: any; removed: boolean; callbacks: Array}>|

Dev

Establish dependency

npm i

Run assembly processing

npm run start