Skip to content

Commit e5f985b

Browse files
manuel-lohmusmanuel-lohmus
committed
v2.0
1 parent e5883bb commit e5f985b

File tree

9 files changed

+637
-245
lines changed

9 files changed

+637
-245
lines changed

‎README.html

Lines changed: 180 additions & 56 deletions
Large diffs are not rendered by default.

‎README.md

Lines changed: 171 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
- [**Installation**](#installation)
1111
- [**Testing**](#testing)
1212
- [**Usage**](#usage)
13+
- [node.js example](#node.js-example)
14+
- [browser example](#browser-example)
1315
- [**References**](#references)
1416
- [createDataContext(data, propertyName, parent)](#createdatacontextdata-propertyname-parent)
1517
- [DataContext](#datacontext)
@@ -28,7 +30,7 @@
2830

2931
# data-context
3032

31-
Version: 2.0.0-beta.1<br>
33+
Version: 2.0.0-beta.2<br>
3234
Watch data changes in the browser and node.js<br>
3335
This manual is also available in [HTML5](https://manuel-lohmus.github.io/data-context/README.html).
3436

@@ -106,12 +108,13 @@ Here are some potential use cases:
106108

107109
## Installation
108110

109-
node.js:
111+
### node.js:
110112
`npm install data-context`
111113

112-
browser:
114+
### browser:
113115
`<script src="https://cdn.jsdelivr.net/npm/data-context@2" ></script>`
114116

117+
### Using tiny-https-server router:
115118
or use ['tiny-https-server'](https://www.npmjs.com/package/tiny-https-server) router:
116119
`<script async src="node_modules/data-context@2"></script>`
117120

@@ -127,17 +130,17 @@ or in the `data-context` project directory:
127130

128131
or open in your browser:
129132

130-
`./node_modules/data-context/index.html`
133+
`./node_modules/data-context/index.test.html`
131134

132135
## Usage
133136

134-
example.js:
137+
### node.js example:
135138
```javascript
136139
'use strict';
137140

138141
//Import the required modules.
139-
const { CreateDataContext, Parse } = require('data-context');
140-
//import { CreateDataContext, Parse } from "data-context";
142+
const { createDataContext, parse } = require('data-context');
143+
//import { createDataContext, parse } from "data-context";
141144

142145
//Create a JSON string.
143146
var strJSON = `{
@@ -148,11 +151,11 @@ var strJSON = `{
148151
var intervalId = null;
149152

150153
//Create data context.
151-
const context = Parse(
154+
const context = parse(
152155
//Parse the JSON string.
153156
strJSON,
154157
//Reviver function. Create data context.
155-
CreateDataContext
158+
createDataContext
156159
);
157160

158161
//Listen to the count property.
@@ -200,6 +203,128 @@ intervalId = setInterval(() => {
200203
}, 1000);
201204
```
202205

206+
### browser example:
207+
```html
208+
<!DOCTYPE html>
209+
<html>
210+
<head>
211+
<meta charset="utf-8" />
212+
<title>data-context</title>
213+
<!-- Module import - step 1.Import for a server-hosted HTML page -->
214+
<script type="text/javascript" src="./index.js"></script>
215+
<!-- Module import - step 1. Import for a standalone HTML page -->
216+
<!--<script src="https://cdn.jsdelivr.net/npm/data-context"></script>-->
217+
<script>
218+
219+
'use strict';
220+
221+
// Module import - step 2.
222+
importModules(['data-context'], function (DC) {
223+
224+
var { createDataContext, parse } = DC;
225+
226+
//Create a JSON string.
227+
var strJSON = `{
228+
"count": 0
229+
}`;
230+
231+
//Interval id.
232+
var intervalId = null;
233+
234+
//Create data context.
235+
const context = parse(
236+
//Parse the JSON string.
237+
strJSON,
238+
//Reviver function. Create data context.
239+
createDataContext
240+
);
241+
242+
//Listen to the count property.
243+
context.on('count', (event) => {
244+
245+
console.log('event:', event);
246+
247+
if (event.newValue > 10) {
248+
249+
console.log('I am dead.');
250+
clearInterval(intervalId);
251+
252+
//I am dead. Remove listener.
253+
return false;
254+
}
255+
256+
//I am live. Continue listening.
257+
return true;
258+
});
259+
260+
context.on('-change', (event) => {
261+
262+
//Stringify the changes.
263+
var str = context.stringifyChanges(
264+
//Reviver function. Default is null.
265+
null,
266+
//Indentation. Default is 0.
267+
4,
268+
//Include only modified data. Default is true.
269+
true,
270+
//Set data to unmodified after stringification. Default is true.
271+
true
272+
);
273+
console.log('changes:', str);
274+
275+
//I am live. Continue listening.
276+
return true;
277+
});
278+
279+
//Start the interval.
280+
intervalId = setInterval(() => {
281+
282+
//Increment the count property.
283+
context.count++;
284+
}, 1000);
285+
});
286+
287+
/**
288+
* Module import function - step 2.
289+
* @param {string[]} importIdentifierArray Modules to import.
290+
* @param {(...importModules:any[]) => void} callback Callback function.
291+
*/
292+
function importModules(importIdentifierArray, callback) {
293+
294+
var thisScope = "undefined" != typeof globalThis
295+
? globalThis
296+
: "undefined" != typeof window
297+
? window
298+
: "undefined" != typeof global
299+
? global : "undefined" != typeof self
300+
? self
301+
: {};
302+
303+
waitModules();
304+
305+
306+
function waitModules() {
307+
308+
if (importIdentifierArray.length) {
309+
310+
for (let i = 0; i < importIdentifierArray.length; i++) {
311+
312+
if (!thisScope[importIdentifierArray[i]]) { return setTimeout(waitModules, 10); }
313+
}
314+
}
315+
316+
callback.call(thisScope, ...importIdentifierArray.map(function (id) { return thisScope[id]; }));
317+
}
318+
}
319+
</script>
320+
</head>
321+
<body>
322+
<h3>Example 'data-context'</h3>
323+
<p>Press F12. Console results.</p>
324+
</body>
325+
</html>
326+
```
327+
203328
## References
204329

205330
### *createDataContext(data, propertyName, parent)*
@@ -209,19 +334,19 @@ Create a data context from the data.
209334
**Type:** `function`
210335

211336
**Parameters:**
212-
- parameters: `data` {any} - The data object.
213-
- parameters: `propertyName` {string} - The property name where the data is located. Default is null.
214-
- parameters: `parent` {[DataContext](#datacontext)} - The parent data context. Default is null.
337+
- `data` {any} - The data object.
338+
- `propertyName` {string} - The property name where the data is located. Default is null.
339+
- `parent` {[DataContext](#datacontext)} - The parent data context. Default is null.
215340

216341
**Returns:**
217-
- returns: {[DataContext](#datacontext)} - The data context.
342+
- {[DataContext](#datacontext)} - The data context.
218343

219344
**Static Properties:**
220-
- static property: `IgnoreMetadata` {boolean} - Global flag to ignore metadata and comments. Default is false.
221-
- static method: `CreateDataContext` {(data: any, propertyName?: string, parent?: [DataContext](#datacontext)) => [DataContext](#datacontext)} - Create a data context from the data.
222-
- static method: `Parse` {(str: string, reviver?: [Reviver](#reviver)) => [DataContext](#datacontext)} - Parse JSON string to the data context.
223-
- static metohd: `ParsePromise` {(str: string, reviver?: [Reviver](#reviver)) => Promise<[DataContext](#datacontext)>} - Parse JSON string to the data context asynchonously. Returns a promise.
224-
- static method: `Stringify` {(data: any, replacer?: Replacer, space?: number) => string} - Stringify the data to JSON string.
345+
- `ignoreMetadata` {boolean} - Global flag to ignore metadata and comments. Default is false.
346+
- `createDataContext` {(data: any, propertyName?: string, parent?: [DataContext](#datacontext)) => [DataContext](#datacontext)} - Create a data context from the data.
347+
- `parse` {(str: string, reviver?: [Reviver](#reviver)) => [DataContext](#datacontext)} - Parse JSON string to the data context.
348+
- `parsePromise` {(str: string, reviver?: [Reviver](#reviver)) => Promise<[DataContext](#datacontext)>} - Parse JSON string to the data context asynchronously. Returns a promise.
349+
- `stringify` {(data: any, replacer?: Replacer, space?: number) => string} - Stringify the data to JSON string.
225350

226351
### *DataContext*
227352

@@ -230,20 +355,21 @@ The data context Proxy object.
230355
**Type:** [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
231356

232357
**Properties:**
233-
- property: `_isDataContext` {boolean} - The flag that indicates that the object is a data context. Default is true.
234-
- property: `_isModified` {boolean} - The flag that indicates that the object is modified. Default is false.
235-
- property: `_modified` {Array<[PropertyName](#propertyname)>} - The array of modified properties.
236-
- property: `_propertyName` {string} - The property name where the data is located. Default is null.
237-
- property: `_parent` {[DataContext](#datacontext)} - The parent data context. Default is null.
238-
- property: `_events` {Map<string, [EventListener](#eventlistenerevent)>} - The map of event listeners.
358+
- `_isDataContext` {boolean} - The flag that indicates that the object is a data context. Default is true.
359+
- `_isModified` {boolean} - The flag that indicates that the object is modified. Default is false.
360+
- `_modified` {Array<[PropertyName](#propertyname)>} - The array of modified properties.
361+
- `_propertyName` {string} - The property name where the data is located. Default is null.
362+
- `_parent` {[DataContext](#datacontext)} - The parent data context. Default is null.
363+
- `_events` {Map<string, [EventListener](#eventlistenerevent)>} - The map of event listeners.
239364

240-
- method: `once` {(propertyName: [PropertyName](#propertyname), listener: [EventListener](#eventlistenerevent)) => void} - Add an event listener that will be called only once.
241-
- method: `on` {(propertyName: [PropertyName](#propertyname), listener: [EventListener](#eventlistenerevent)) => void} - Add an event listener.
242-
- method: `emit` {(eventName: string, event: [EventObject](#eventobject)) => void} - Emit an event.
243-
- method: `emitToParent` {(eventName: string, event: [EventObject](#eventobject)) => void} - Emit an event to the parent.
244-
- method: `toString` {() => string} - Returns the string representation of the data context.
245-
- method: `overwritingData` {(text: string, reviver?: [Reviver](#reviver) ) => void} - Overwrite the data.
246-
- method: `stringifyChanges` {(reviver?: [Reviver](#reviver), space?: number|string, onlyModified?: boolean, setUnmodified?: boolean) => string} - Stringify the changes.
365+
**Methods:**
366+
- `once` {(propertyName: [PropertyName](#propertyname), listener: [EventListener](#eventlistenerevent)) => void} - Add an event listener that will be called only once.
367+
- `on` {(propertyName: [PropertyName](#propertyname), listener: [EventListener](#eventlistenerevent)) => void} - Add an event listener.
368+
- `emit` {(eventName: string, event: [EventObject](#eventobject)) => void} - Emit an event.
369+
- `emitToParent` {(eventName: string, event: [EventObject](#eventobject)) => void} - Emit an event to the parent.
370+
- `toString` {() => string} - Returns the string representation of the data context.
371+
- `overwritingData` {(text: string, reviver?: [Reviver](#reviver) ) => void} - Overwrite the data.
372+
- `stringifyChanges` {(reviver?: [Reviver](#reviver), space?: number|string, onlyModified?: boolean, setUnmodified?: boolean) => string} - Stringify the changes.
247373

248374
### *EventListener(event)*
249375

@@ -252,10 +378,10 @@ The event listener function.
252378
**Type:** `function`
253379

254380
**Parameters:**
255-
- parameters: `event` {EventObject} - The event object.
381+
- `event` {EventObject} - The event object.
256382

257-
Returns:
258-
- returns: {boolean} - The flag that indicates that the listener is alive.
383+
**Returns:**
384+
- {boolean} - The flag that indicates that the listener is alive.
259385

260386
### *EventObject*
261387

@@ -264,12 +390,17 @@ The event object.
264390
**Type:** `object`
265391

266392
**Properties:**
267-
- property: `eventName` {string} - The event name. 'new' | 'set' | 'delete' | 'change' | 'reposition'
268-
- property: `target` {DataContext} - The target data context.
269-
- property: `propertyPath` {Array<PropertyName>} - The property path in array format.
270-
- property: `parent` {DataContext} - The parent data context.
271-
- property: `oldValue` {any} - The old value.
272-
- property: `newValue` {any} - The new value.
393+
- `eventName` {string} - The event name. 'new' | 'set' | 'delete' | 'reposition' | 'change'
394+
- 'new' It happens when a new property is added to the data context.
395+
- 'set' It happens when an existing property is updated.
396+
- 'delete' It happens when a property is removed from the data context.
397+
- 'reposition' It happens when the position of an item in an array changes.
398+
- 'change' It happens when any change occurs in the data context.
399+
- `target` {DataContext} - The target data context.
400+
- `propertyPath` {Array<PropertyName>} - The property path in array format.
401+
- `parent` {DataContext} - The parent data context.
402+
- `oldValue` {any} - The old value.
403+
- `newValue` {any} - The new value.
273404

274405
### *PropertyName*
275406

0 commit comments

Comments
 (0)