-
Notifications
You must be signed in to change notification settings - Fork 0
/
bundle.js
141 lines (106 loc) · 3.23 KB
/
bundle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
(function () {
'use strict';
function renderMainFragment ( root, component, target ) {
var h1 = document.createElement( 'h1' );
var text = document.createTextNode( "Hello " );
h1.appendChild( text );
var text1 = document.createTextNode( root.name );
h1.appendChild( text1 );
target.appendChild( h1 );
return {
update: function ( changed, root ) {
text1.data = root.name;
},
teardown: function ( detach ) {
if ( detach ) h1.parentNode.removeChild( h1 );
text.parentNode.removeChild( text );
}
};
}
function HelloWorld ( options ) {
var component = this;
var state = options.data || {};
var observers = {
immediate: Object.create( null ),
deferred: Object.create( null )
};
var callbacks = Object.create( null );
function dispatchObservers ( group, newState, oldState ) {
for ( const key in group ) {
if ( !( key in newState ) ) continue;
const newValue = newState[ key ];
const oldValue = oldState[ key ];
if ( newValue === oldValue && typeof newValue !== 'object' ) continue;
const callbacks = group[ key ];
if ( !callbacks ) continue;
for ( let i = 0; i < callbacks.length; i += 1 ) {
const callback = callbacks[i];
if ( callback.__calling ) continue;
callback.__calling = true;
callback.call( component, newValue, oldValue );
callback.__calling = false;
}
}
}
this.fire = function fire ( eventName, data ) {
var handlers = eventName in callbacks && callbacks[ eventName ].slice();
if ( !handlers ) return;
for ( var i = 0; i < handlers.length; i += 1 ) {
handlers[i].call( this, data );
}
};
this.get = function get ( key ) {
return state[ key ];
};
this.set = function set ( newState ) {
const oldState = state;
state = Object.assign( {}, oldState, newState );
dispatchObservers( observers.immediate, newState, oldState );
if ( mainFragment ) mainFragment.update( newState, state );
dispatchObservers( observers.deferred, newState, oldState );
};
this.observe = function ( key, callback, options = {} ) {
const group = options.defer ? observers.deferred : observers.immediate;
( group[ key ] || ( group[ key ] = [] ) ).push( callback );
if ( options.init !== false ) {
callback.__calling = true;
callback.call( component, state[ key ] );
callback.__calling = false;
}
return {
cancel () {
const index = group[ key ].indexOf( callback );
if ( ~index ) group[ key ].splice( index, 1 );
}
};
};
this.on = function on ( eventName, handler ) {
const handlers = callbacks[ eventName ] || ( callbacks[ eventName ] = [] );
handlers.push( handler );
return {
cancel: function () {
const index = handlers.indexOf( handler );
if ( ~index ) handlers.splice( index, 1 );
}
};
};
this.teardown = function teardown ( detach ) {
this.fire( 'teardown' );
mainFragment.teardown( detach !== false );
mainFragment = null;
state = {};
};
var mainFragment = renderMainFragment( state, this, options.target );
}
/**
* @type {HelloWorld}
*/
const app = new HelloWorld({
target: document.querySelector( '#main' ),
data: { name: 'world' }
});
// change the data associated with the template
app.set({ name: 'everybody' });
// detach the component and clean everything up
app.teardown();
}());