Watch data changes in the browser and node.js
npm install data-context
bash
npm install data-context
`
$3
or use CDN (for an HTML page hosted on the server):
`html
`
or use CDN (for a standalone HTML page):
`html
`
or use 'tiny-https-server':
`html
`
---
π§ͺ Testing
You can test data-context on your system using this command:
node ./node_modules/data-context/index.test
or in the data-context project directory:
npm test
or open in your browser:
./node_modules/data-context/index.test.html
---
π Usage
$3
`javascript
'use strict';
//Import the required modules.
const { createDataContext, parse } = require('data-context');
//import { createDataContext, parse } from "data-context";
//Create a JSON string.
var strJSON = {
;
//Interval id.
var intervalId = null;
//Create data context.
const context = parse(
//Parse the JSON string.
strJSON,
//Reviver function. Create data context.
createDataContext
);
//Listen to the count property.
context.on('count', (event) => {
console.log('event:', event);
if (event.newValue > 10) {
console.log('I am dead.');
clearInterval(intervalId);
//I am dead. Remove listener.
return false;
}
//I am live. Continue listening.
return true;
});
context.on('-change', (event) => {
//Stringify the changes.
var str = context.stringifyChanges(
//Reviver function. Default is null.
null,
//Indentation. Default is 0.
4,
//Include only modified data. Default is true.
true,
//Set data to unmodified after stringification. Default is true.
true
);
console.log('changes:', str);
//I am live. Continue listening.
return true;
});
//Start the interval.
intervalId = setInterval(() => {
//Increment the count property.
context.count++;
}, 1000);
`
$3
`html
data-context
Example 'data-context'
Press F12. Console results.
`
π API Reference
- createDataContext(data, propertyName, parent)
- DataContext
- EventListener(event)
- EventObject
- PropertyName
- Reviver
$3
Create a data context from the data.
Type: function
Parameters:
- data {any} - The data object.
- propertyName {string} - The property name where the data is located. Default is null.
- parent {DataContext} - The parent data context. Default is null.
Returns:
- {DataContext} - The data context.
Static Properties:
- ignoreMetadata {boolean} - Global flag to ignore metadata and comments. Default is false.
- createDataContext {(data: any, propertyName?: string, parent?: DataContext) => DataContext} - Create a data context from the data.
- parse {(str: string, reviver?: Reviver) => DataContext} - Parse JSON string to the data context.
- stringify {(data: any, replacer?: Replacer, space?: number) => string} - Stringify the data to JSON string.
---
$3
The data context Proxy object.
Type: Proxy
Properties:
- _isDataContext {boolean} - The flag that indicates that the object is a data context. Default is true.
- _isModified {boolean} - The flag that indicates that the object is modified. Default is false.
- _modified {Array<PropertyName>} - The array of modified properties.
- _propertyName {string} - The property name where the data is located. Default is null.
- _parent {DataContext} - The parent data context. Default is null.
- _events {MapEventListener>} - The map of event listeners.
- isChanged {boolean} - The flag that indicates that the object is changed.
Methods:
- resetChanges {() => void} - Set the current and child objects to status - unmodified. Must be used to start tracking changes again.
- once {(propertyName: PropertyName, listener: EventListener) => void} - Add an event listener that will be called only once.
- on {(propertyName: PropertyName, listener: EventListener) => void} - Add an event listener.
- emit {(eventName: string, event: EventObject) => void} - Emit an event.
- emitToParent {(eventName: string, event: EventObject) => void} - Emit an event to the parent.
- toString {() => string} - Returns the string representation of the data context.
- overwritingData {(text: string, reviver?: Reviver ) => void} - Overwrite the data.
- stringifyChanges {(reviver?: Reviver, space?: number|string, onlyModified?: boolean, setUnmodified?: boolean) => string} - Stringify the changes.
---
$3
The event listener function.
Type: function
Parameters:
- event {EventObject} - The event object.
Returns:
- {boolean} - The flag that indicates that the listener is alive.
---
$3
The event object.
Type: object
Properties:
- eventName {string} - The event name. 'new' | 'set' | 'delete' | 'reposition' | '-change'
- 'new' It happens when a new property is added to the data context.
- 'set' It happens when an existing property is updated.
- 'delete' It happens when a property is removed from the data context.
- 'reposition' It happens when the position of an item in an array changes.
- 'change' It happens when any change occurs in the data context.
- target {DataContext} - The target data context.
- propertyPath {Array} - The property path in array format.
- parent {DataContext} - The parent data context.
- oldValue {any} - The old value.
- newValue {any} - The new value.
---
$3
The property name.
Type: string
---
$3
The reviver function.
Type: reviver
or createDataContext or null`