profile
viewpoint

sindresorhus/on-change 1464

Watch an object or array for changes

kpruden/git 1

Git Source Code Mirror

kpruden/on-change 1

Watch an object or array for changes

kpruden/svn2git 1

Ruby tool for importing existing svn projects into git.

camacho/connect-prism 0

Record, mock, and proxy HTTP traffic as middleware for the connect middleware framework.

kpruden/automerge 0

A JSON-like data structure that can be modified concurrently by different users, and merged again automatically.

kpruden/cloud-functions-emulator 0

A local emulator for Google Cloud Functions that allows you to deploy, run, and debug your Cloud Functions on your local machine before deploying them to the production Google Cloud Functions service.

kpruden/contrib 0

This is a place for various components in the Kubernetes ecosystem that aren't part of the Kubernetes core. Consider creating a new repo instead.

kpruden/graphql-go 0

GraphQL server with a focus on ease of use

issue closedsindresorhus/on-change

Stop watching object once it is removed

I've been trying to build a tiny library for app-server configs that can dynamically update sub-components when a part of the config changes. While testing this, I ran into an issue where the object being monitored by onChange would react to changes even though that part of the object was already replaced.

Here's a pen that reproduces this issue. Here's a small snippet to reproduce it that you can just paste into a .js file and run

const onChange = require('on-change')

const config = {
  server: {
    dev: {
      host: 'dev-host',
      port: 30
    }
  }
}

const proxy = onChange(config, (path, v, o) => {
  console.log(`path=${path} from=${JSON.stringify(o)} to=${JSON.stringify(v)}`)
})

const old = proxy.server.dev
proxy.server.dev = { host: 'new-dev-host', port: 60 }
// Now, change the old object
old.host = 'bad'

closed time in a month

gurupras

issue commentsindresorhus/on-change

Stop watching object once it is removed

I added an option 'ignoreDetached' to 2.2.0 that should fix this issue. Let me know if you have any problems.

gurupras

comment created time in a month

release sindresorhus/on-change

v2.2.0

released time in a month

created tagsindresorhus/on-change

tagv2.2.0

Watch an object or array for changes

created time in a month

push eventsindresorhus/on-change

DarrenPaulWright

commit sha 8b6aea7e5d259d891eff8dd6bc440b5ff2893c01

Add tests for typed arrays

view details

DarrenPaulWright

commit sha e16328fd2d1bcffece47f2ff10ffb0c78fe74b45

Handle nested apply traps.

view details

DarrenPaulWright

commit sha 2982198e777ab57709d4a1158eb68113c9a7ea6d

Add ignoreDetached option (#58)

view details

DarrenPaulWright

commit sha 361f20bc0e1027baf3ab8ec2e055c3a55139c301

2.2.0

view details

push time in a month

issue closedsindresorhus/on-change

rewrite

closed time in a month

Nashorn

issue openedsindresorhus/on-change

rewrite

created time in a month

issue closedsindresorhus/on-change

inconsistent arguments are passed to the listener

Hi again... 🙈

I have recognized that different arguments are passed to the listener when I modify an array with a method like splice or assign a value with a key array[key] = value.

in case of the method, the whole object is passed to the listener and in case of the assignment only the assigned value is passed to the listener.

The behavior should always be the same. In my opinion it is perfect to always get the whole object before and after. In this case it is always possible to compare those objects.

Maybe this could be optional? Benefit: downwards compatibility.

closed time in a month

Eluminati

issue commentsindresorhus/on-change

inconsistent arguments are passed to the listener

The behavior should always be the same. In my opinion it is perfect to always get the whole object before and after. In this case it is always possible to compare those objects.

I would argue that the behavior is the same. When calling a method you are acting on the object (potentially with multiple property changes), but when you are changing a property value directly you are acting on that value. If I followed your logic to it's conclusion, we would only ever provide the original object passed in to onChange (which is already provided as this in the callback), since you are always modifying a property on that original object, no matter how deeply nested the change is.

Originally onChange called the callback for every change that occurred within a method call, but you can imagine the pain when calling something like array.shift(), where the index of every element changes.

I would recommend in cases where you want to compare the parent object/array that you look at the path of the change and get the parent.

Eluminati

comment created time in a month

issue commentsindresorhus/on-change

Incompatible receiver error with Set/Map

Fixed in v2.1.4

hpx7

comment created time in a month

issue closedsindresorhus/on-change

Incompatible receiver error with Set/Map

Repro:

const foo = { x: new Set() };
const bar = onChange(foo, () => {});
console.log(bar.x.has("baz")); // => TypeError: Method Set.prototype.has called on incompatible receiver [object Object]

Same things happens with Map as well

closed time in a month

hpx7

release sindresorhus/on-change

v2.1.4

released time in a month

created tagsindresorhus/on-change

tagv2.1.4

Watch an object or array for changes

created time in a month

push eventsindresorhus/on-change

DarrenPaulWright

commit sha 3e51b80ac7412f80a198449195aeb6c2ba7dae21

Handle Maps, Sets, WeakMaps, and WeakSets.

view details

DarrenPaulWright

commit sha 0f9ebbe78159712c14e6ccd151f082b19a09b7f0

2.1.4

view details

push time in a month

issue commentsindresorhus/on-change

Incompatible receiver error with Set/Map

Yes, I have, and I have the fix mostly done. I hope to wrap up a few loose ends this weekend.

hpx7

comment created time in 2 months

issue commentsindresorhus/on-change

Incompatible receiver error with Set/Map

@DarrenPaulWright have you been able to repro this on your end?

hpx7

comment created time in 2 months

issue openedsindresorhus/on-change

Incompatible receiver error with Set/Map

Repro:

const foo = { x: new Set() };
const bar = onChange(foo, () => {});
console.log(bar.x.has("baz")); // => TypeError: Method Set.prototype.has called on incompatible receiver [object Object]

Same things happens with Map as well

created time in 2 months

release sindresorhus/on-change

v2.1.3

released time in 2 months

created tagsindresorhus/on-change

tagv2.1.3

Watch an object or array for changes

created time in 2 months

push eventsindresorhus/on-change

DarrenPaulWright

commit sha c00a8ec2c838865514ece89c6e2b5e1895ff8564

2.1.3

view details

push time in 2 months

push eventsindresorhus/on-change

Malte Batram

commit sha 31c70fdd8cac226680249a833a6053f1dc02f8ea

TypeScript definition: overload onChange when pathAsArray: true (#66) Co-authored-by: batram <ym@batr.am>

view details

push time in 2 months

PR merged sindresorhus/on-change

Fix TypeScript definition when pathAsArray is true

Fixes #65 Not sure if this is the most elegant way to handle the different paramter types that depend on a value in options. Also the first time using tsd for tests, so I hope the added test cases are useful.

+35 -2

1 comment

2 changed files

batram

pr closed time in 2 months

issue closedsindresorhus/on-change

TypeScript definition invalid for pathAsArray: true

The TypeScript definition in index.d.ts does not include an correct overload for the onChange callback when the options parameter includes pathAsArray: true.

The signature in that case should be:

	onChange: (
		this: ObjectType,
		path: string[],

This leads to TypeScript complaining.

TypeScript example:

const object = {}
const watchedObject = onChange(object, function (path: string[]) {
  console.log('change:', path);
}, {
  pathAsArray: true
})

Leads to the following message:

Argument of type '(this: {}, path: string[]) => void' is not assignable to parameter of type '(this: {}, path: string, value: unknown, previousValue: unknown, name: string) => void'.
  Types of parameters 'path' and 'path' are incompatible.
    Type 'string' is not assignable to type 'string[]'.ts(2345)

closed time in 2 months

batram

pull request commentsindresorhus/on-change

TypeScript definition: overload onChange when pathAsArray: true

Just realized that using string[] is a bit too simple and ignores all the other types of index JavaScript can use.

batram

comment created time in 2 months

PR opened sindresorhus/on-change

TypeScript definition: overload onChange when pathAsArray: true

Should solve #65 Not sure if this is the most elegant way to handle the different paramter types that depend on a value in options. Also the first time using tsd for tests, so I hope the added test cases are useful.

+35 -2

0 comment

2 changed files

pr created time in 2 months

issue openedsindresorhus/on-change

TypeScript definition invalid for pathAsArray: true

The TypeScript definition in index.d.ts does not include an correct overload for the onChange callback when the options parameter includes pathAsArray: true.

The signature in that case should be:

	onChange: (
		this: ObjectType,
		path: string[],

This leads to TypeScript complaining.

TypeScript example:

const object = {}
const watchedObject = onChange(object, function (path: string[]) {
  console.log('change:', path);
}, {
  pathAsArray: true
})

Leads to the following message:

Argument of type '(this: {}, path: string[]) => void' is not assignable to parameter of type '(this: {}, path: string, value: unknown, previousValue: unknown, name: string) => void'.
  Types of parameters 'path' and 'path' are incompatible.
    Type 'string' is not assignable to type 'string[]'.ts(2345)

created time in 2 months

issue closedsindresorhus/on-change

Able to use in a Vanilla JS environment

I Would like to upload this package to a cdn of a sort, but for that to be possible it is needed to purely js (without require and such. Is there a way to sort of "bundle it" so it would be accessible through Vanilla js and therefore upload-able to a cdn?

closed time in 3 months

DanielIndie95

issue commentsindresorhus/on-change

Able to use in a Vanilla JS environment

I think you might be able to use https://wzrd.in/, but that's really something you need to figure out yourself. Alternatively, run Browserify locally.

DanielIndie95

comment created time in 3 months

issue openedsindresorhus/on-change

Able to use in A Pure Web environment

I Would like to upload this package to a cdn of a sort, but for that to be possible it is needed to purely js (without require and such. Is there a way to sort of "bundle it" so it would be accessible through Vanilla js and therefore upload-able to a cdn?

created time in 3 months

more