ReactiveDom/react.js at master · modwebpl/ReactiveDom · GitHub

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
export class react {
  constructor(config) {
    let _this = this;

    this.signals = {};
    this.data = config.data;
    this.watch = config.watch || {};
    this.nodeList = {};

    this.Dep = {
      target: null,
      subs: {},
      depend(deps, dep) {
        if (!deps.includes(this.target)) deps.push(this.target);
        if (!_this.Dep.subs[this.target].includes(dep)) {
          _this.Dep.subs[this.target].push(dep)
        }
      },
      getValidDeps(deps, key) {
        return deps.filter(dep => this.subs[dep].includes(key))
      },
      notifyDeps(deps) {
        deps.forEach(val => _this.notify(val));
      }
    };

    this.observeData(config.data);
    if (Object.keys(this.watch).length > 0) this.subscribeWatchers(this.watch, config.data);

    return {
      data: _this.data,
      get: _this.nodeList,
      sig: _this.signals,
      add(name, val, type = 'prop') {
        return _this.add(name, val, type);
      },
      parse() {
        return _this.parseDOM(document.body, _this.data);
      }
    }
  }

  notify(signal) {
    if (!this.signals[signal] || this.signals[signal].length < 1) return;
    this.signals[signal].forEach((signalHandler) => signalHandler())
  };

  subscribeWatchers(watchers, context) {
    let _this = this, key;
    for (key in watchers) {
      if (watchers.hasOwnProperty(key)) _this.observe(key, watchers[key].bind(context))
    }
  }

  add(name, val, type = 'prop') {
    type === 'watch' ? this.watch[name] = val : this.data[name] = val;
    typeof this.data[name] === 'function' ? this.makeComputed(this.data, name, val) : this.makeReactive(this.data, name);
    if (Object.keys(this.watch).length > 0) this.subscribeWatchers(this.watch, this.data);
    return this.parseDOM(document.body, this.data);
  }

  observe(property, signalHandler) {
    if (!this.signals[property]) this.signals[property] = [];
    this.signals[property].push(signalHandler);
  }

  makeComputed(obj, key, computeFunc) {
    let _this = this, cache = null, deps = [];

    this.observe(key, () => {
      cache = null;
      deps = _this.Dep.getValidDeps(deps, key);
      _this.Dep.notifyDeps(deps, key)
    });

    Object.defineProperty(obj, key, {
      get() {
        if (_this.Dep.target) _this.Dep.depend(deps, key);
        _this.Dep.target = key;

        if (!cache) {
          _this.Dep.subs[key] = [];
          cache = computeFunc.call(obj)
        }
        _this.Dep.target = null;
        return cache;
      },
      set() {
      }
    })
  }

  makeReactive(obj, key) {
    let _this = this, deps = [], val = obj[key];

    Object.defineProperty(obj, key, {
      get() {
        if (_this.Dep.target) _this.Dep.depend(deps, key);
        return val
      },
      set(newVal) {
        val = newVal;
        deps = _this.Dep.getValidDeps(deps, key);
        _this.Dep.notifyDeps(deps, key);
        _this.notify(key)
      }
    })
  }

  observeData(obj) {
    let key;
    for (key in obj) {
      if (obj.hasOwnProperty(key)) typeof obj[key] === 'function' ? this.makeComputed(obj, key, obj[key]) : this.makeReactive(obj, key)
    }
    this.parseDOM(document.body, obj)
  }

  sync(attr, node, observable, property) {
    node[attr] = observable[property];

    this.observe(property, () => {
      node[attr] = observable[property]
    });
  }

  parseDOM(node, observable) {
    let attr;

    each(document.body.querySelectorAll('[data-prop]'), (key, val) => {
      this.nodeList[val.attributes['data-prop'].value] = val;
      typeof (observable[val.attributes['data-prop'].value]) === 'undefined' ? attr = 'value' : attr = val.dataset.attr || 'textContent';
      this.sync(attr, val, observable, val.attributes['data-prop'].value);
    });
  }
}