Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e9b1f17

Browse files
committed
added support for array
1 parent 5987caa commit e9b1f17

File tree

13 files changed

+7623
-265
lines changed

13 files changed

+7623
-265
lines changed

‎demo/index.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom"
44

55
class SubApp extends ReactV.Component {
66
state = {
7-
times: 2
7+
times: 2,
88
}
99
mounted() {
1010
setTimeout(() => {
@@ -21,31 +21,26 @@ class SubApp extends ReactV.Component {
2121
}
2222
class App extends ReactV.Component {
2323
state = {
24-
age: 16,
25-
o : { name: "hi"}
24+
arr: ["proots", ["prev", "loots"]]
2625
}
2726
watch = {
2827
o(v, old ){
2928
console.log("object changed", v, old)
3029
}
3130
}
3231
mounted() {
33-
console.log("mounted")
3432
setTimeout(() => {
35-
console.log("changed", this)
36-
this.o.name = "proots"
37-
// this.set(this.o, "gender", "male");
33+
this.arr[1].push("akoots");
34+
console.log("this", this.arr)
3835
}, 1000);
3936
}
4037
render(){
41-
const { o, age, calc} = this;
38+
const { arr, age, calc} = this;
4239
return (
4340
<div>
44-
<p>{age}</p>
45-
{Object.keys(this.o).map(key => {
46-
return <p key={key}>{key} : {this.o[key]}</p>
41+
{arr.map(key => {
42+
return <p key={key}>{key}</p>
4743
})}
48-
<p>{calc}</p>
4944
</div>
5045
)
5146
}

‎dist/demo.b94efa84.js‎

Lines changed: 113 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -104,22 +104,18 @@ parcelRequire = (function (modules, cache, entry, globalName) {
104104

105105
// Override the current require with this new one
106106
return newRequire;
107-
})({"src/utils/index.js":[function(require,module,exports) {
107+
})({"src/utils/index.ts":[function(require,module,exports) {
108108
"use strict";
109109

110-
Object.defineProperty(exports, "__esModule", {
111-
value: true
112-
});
113-
exports.proxy = proxy;
114-
exports.remove = remove;
115-
exports.uniqueObjectKeys = uniqueObjectKeys;
116-
exports.warn = exports.hasProto = exports.isObject = exports.isPlainObject = void 0;
117-
118110
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
119111

112+
exports.__esModule = true;
113+
120114
function proxy(target, key) {
121-
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
122-
args[_key - 2] = arguments[_key];
115+
var args = [];
116+
117+
for (var _i = 2; _i < arguments.length; _i++) {
118+
args[_i - 2] = arguments[_i];
123119
}
124120

125121
var get, set;
@@ -137,68 +133,58 @@ function proxy(target, key) {
137133
};
138134
}
139135

140-
Object.defineProperty(target, key, {
136+
return Object.defineProperty(target, key, {
141137
enumerable: true,
142138
configurable: true,
143139
get: get,
144140
set: set
145141
});
146142
}
147143

144+
exports.proxy = proxy;
145+
148146
function remove(arr, item) {
149147
if (arr.length) {
150148
var index = arr.indexOf(item);
151-
152-
if (index > -1) {
153-
return arr.splice(index, 1);
154-
}
149+
if (index > -1) return arr.splice(index, 1);
155150
}
156151
}
157152

158-
function uniqueObjectKeys(ob, target) {
159-
var targetKeys = Object.keys(ob[target]);
160-
161-
for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
162-
args[_key2 - 2] = arguments[_key2];
163-
}
153+
exports.remove = remove;
164154

165-
var destination = args.slice(0, args.length - 1);
166-
var cb = args[args.length - 1];
155+
function uniqueObjectKeys(ob, target, victims, cb) {
156+
var targetKeys = Object.keys(ob[target]);
167157

168158
for (var i = 0; i < targetKeys.length; i++) {
169159
var existsIn = false;
170160
var key = targetKeys[i];
171161

172-
for (var j = 0; j < destination.length; j++) {
173-
if (ob[destination[j]][key]) {
174-
existsIn = destination[j];
162+
for (var j = 0; j < victims.length; j++) {
163+
if (ob[victims[j]][key]) {
164+
existsIn = victims[j];
175165
break;
176166
}
177167
}
178168

179-
if (!existsIn) cb(key);else warn("(".concat(target, " - '").concat(key, "') is already defined in ").concat(existsIn));
169+
if (!existsIn) cb(key);else exports.warn("(" + target + " - '" + key + "') is already defined in " + existsIn);
180170
}
181171
}
182172

183-
var isPlainObject = function isPlainObject(obj) {
173+
exports.uniqueObjectKeys = uniqueObjectKeys;
174+
175+
exports.isPlainObject = function (obj) {
184176
return toString.call(obj) === '[object Object]';
185177
};
186178

187-
exports.isPlainObject = isPlainObject;
188-
189-
var isObject = function isObject(obj) {
179+
exports.isObject = function (obj) {
190180
return obj !== null && _typeof(obj) === 'object';
191181
};
192182

193-
exports.isObject = isObject;
194-
var hasProto = '__proto__' in {};
195-
exports.hasProto = hasProto;
183+
exports.hasProto = '__proto__' in {};
196184

197-
var warn = function warn(msg) {
198-
return console.error("[v-react warn]: ".concat(msg));
185+
exports.warn = function (msg) {
186+
return console.error("[v-react warn]: " + msg);
199187
};
200-
201-
exports.warn = warn;
202188
},{}],"src/reactivity/dep.ts":[function(require,module,exports) {
203189
"use strict";
204190

@@ -231,6 +217,8 @@ function () {
231217
};
232218

233219
Dep.prototype.notify = function () {
220+
console.log("notifying...", this.subs);
221+
234222
for (var i = 0; i < this.subs.length; i++) {
235223
this.subs[i].update();
236224
}
@@ -255,7 +243,50 @@ function popTarget() {
255243
}
256244

257245
exports.popTarget = popTarget;
258-
},{"../utils":"src/utils/index.js"}],"src/reactivity/observer.ts":[function(require,module,exports) {
246+
},{"../utils":"src/utils/index.ts"}],"src/reactivity/array.ts":[function(require,module,exports) {
247+
"use strict";
248+
249+
exports.__esModule = true;
250+
251+
function def(obj, key, val, enumerable) {
252+
Object.defineProperty(obj, key, {
253+
value: val,
254+
enumerable: !!enumerable,
255+
writable: true,
256+
configurable: true
257+
});
258+
}
259+
260+
exports.def = def;
261+
/*
262+
* not type checking this file because flow doesn't play well with
263+
* dynamically accessing methods on Array prototype
264+
*/
265+
266+
var arrayProto = Array.prototype;
267+
exports.arrayMethods = Object.create(arrayProto);
268+
var methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
269+
/**
270+
* Intercept mutating methods and emit events
271+
*/
272+
273+
methodsToPatch.forEach(function (method) {
274+
// cache original method
275+
var original = arrayProto[method];
276+
var t = def(exports.arrayMethods, method, function mutator() {
277+
var args = [];
278+
279+
for (var _i = 0; _i < arguments.length; _i++) {
280+
args[_i] = arguments[_i];
281+
}
282+
283+
var result = original.apply(this, args);
284+
var ob = this.__ob__;
285+
ob.dep.notify();
286+
return result;
287+
}); // console.log(arrayMethods);
288+
});
289+
},{}],"src/reactivity/observer.ts":[function(require,module,exports) {
259290
"use strict";
260291

261292
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -288,6 +319,8 @@ var utils_1 = require("../utils");
288319

289320
var dep_1 = __importDefault(require("./dep"));
290321

322+
var array_1 = require("./array");
323+
291324
var Observer =
292325
/** @class */
293326
function () {
@@ -296,7 +329,14 @@ function () {
296329
this.value = null;
297330
this.dep = new dep_1["default"]();
298331
this.value = value;
299-
this.walk();
332+
333+
if (Array.isArray(value)) {
334+
value.__proto__ = array_1.arrayMethods;
335+
this.observeArray(value);
336+
} else if (_typeof(value) == "object") {
337+
this.walk();
338+
}
339+
300340
Object.defineProperty(value, "__ob__", {
301341
enumerable: false,
302342
value: this
@@ -311,11 +351,28 @@ function () {
311351
}
312352
};
313353

354+
Observer.prototype.observeArray = function (arr) {
355+
arr.forEach(function (item) {
356+
observe(item);
357+
});
358+
};
359+
314360
return Observer;
315361
}();
316362

317363
exports.Observer = Observer;
318364

365+
function dependArray(value) {
366+
for (var e = void 0, i = 0, l = value.length; i < l; i++) {
367+
e = value[i];
368+
e && e.__ob__ && e.__ob__.dep.depend();
369+
370+
if (Array.isArray(e)) {
371+
dependArray(e);
372+
}
373+
}
374+
}
375+
319376
function defineReactive(obj, key) {
320377
var value = obj[key],
321378
stripValue = _typeof(value) === "object" ? __assign({}, value) : value;
@@ -331,6 +388,7 @@ function defineReactive(obj, key) {
331388

332389
if (childOb) {
333390
childOb.dep.depend();
391+
dependArray(value);
334392
}
335393
}
336394

@@ -361,7 +419,7 @@ function set(obj, key, value) {
361419
}
362420

363421
exports.set = set;
364-
},{"../utils":"src/utils/index.js","./dep":"src/reactivity/dep.ts"}],"src/reactivity/watcher.ts":[function(require,module,exports) {
422+
},{"../utils":"src/utils/index.ts","./dep":"src/reactivity/dep.ts","./array":"src/reactivity/array.ts"}],"src/reactivity/watcher.ts":[function(require,module,exports) {
365423
"use strict";
366424

367425
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -472,13 +530,14 @@ function () {
472530
exports["default"] = Watcher;
473531

474532
var traverse = function traverse(obj) {
475-
var keys = Object.keys(obj);
533+
var keys = _typeof(obj) === "object" ? Object.keys(obj) : obj;
476534

477535
for (var i = 0; i < keys.length; i++) {
536+
console.log("traverse", obj[keys[i]]);
478537
return obj[keys[i]];
479538
}
480539
};
481-
},{"./dep":"src/reactivity/dep.ts","../utils":"src/utils/index.js"}],"src/reactivity/index.ts":[function(require,module,exports) {
540+
},{"./dep":"src/reactivity/dep.ts","../utils":"src/utils/index.ts"}],"src/reactivity/index.ts":[function(require,module,exports) {
482541
"use strict";
483542

484543
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -545,7 +604,7 @@ exports.initComputed = function (comp) {
545604
utils_1.proxy(comp, key, get, set);
546605
});
547606
};
548-
},{"./observer":"src/reactivity/observer.ts","./watcher":"src/reactivity/watcher.ts","../utils":"src/utils/index.js"}],"node_modules/object-assign/index.js":[function(require,module,exports) {
607+
},{"./observer":"src/reactivity/observer.ts","./watcher":"src/reactivity/watcher.ts","../utils":"src/utils/index.ts"}],"node_modules/object-assign/index.js":[function(require,module,exports) {
549608
/*
550609
object-assign
551610
(c) Sindre Sorhus
@@ -24698,10 +24757,7 @@ function (_ReactV$Component2) {
2469824757
_this3 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(App)).call.apply(_getPrototypeOf3, [this].concat(args)));
2469924758

2470024759
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
24701-
age: 16,
24702-
o: {
24703-
name: "hi"
24704-
}
24760+
arr: ["proots", ["prev", "loots"]]
2470524761
});
2470624762

2470724763
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "watch", {
@@ -24718,25 +24774,23 @@ function (_ReactV$Component2) {
2471824774
value: function mounted() {
2471924775
var _this4 = this;
2472024776

24721-
console.log("mounted");
2472224777
setTimeout(function () {
24723-
console.log("changed", _this4);
24724-
_this4.o.name = "proots"; // this.set(this.o, "gender", "male");
24778+
_this4.arr[1].push("akoots");
24779+
24780+
console.log("this", _this4.arr);
2472524781
}, 1000);
2472624782
}
2472724783
}, {
2472824784
key: "render",
2472924785
value: function render() {
24730-
var _this5 = this;
24731-
24732-
var o = this.o,
24786+
var arr = this.arr,
2473324787
age = this.age,
2473424788
calc = this.calc;
24735-
return _react.default.createElement("div", null, _react.default.createElement("p", null, age), Object.keys(this.o).map(function (key) {
24789+
return _react.default.createElement("div", null, arr.map(function (key) {
2473624790
return _react.default.createElement("p", {
2473724791
key: key
24738-
}, key, " : ", _this5.o[key]);
24739-
}), _react.default.createElement("p", null, calc));
24792+
}, key);
24793+
}));
2474024794
}
2474124795
}]);
2474224796

@@ -24771,7 +24825,7 @@ var parent = module.bundle.parent;
2477124825
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
2477224826
var hostname = "" || location.hostname;
2477324827
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
24774-
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54668" + '/');
24828+
var ws = new WebSocket(protocol + '://' + hostname + ':' + "50343" + '/');
2477524829

2477624830
ws.onmessage = function (event) {
2477724831
var data = JSON.parse(event.data);

‎dist/demo.b94efa84.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /