Serialization & Types improvements #523
Conversation
|
@evan @posva @michalsnik |
DataField: allowing to reproduce current available styling using CustomValue API
Initial PR vuejs#490 by AdamNiederer
|
|
|
I added some optimization from this branch: https://github.com/Akryum/vue-devtools/tree/component-inspect-optimizations (changes) x10 faster when selecting the It should help mitigate #515 |
|
@yyx990803 I also made a PR yyx990803/circular-json-es6#5 with the changes I made to CircularJSON. |
|
I don't think we can serialize WeakMap since they are not iterable. |
src/util.js
Outdated
| return { | ||
| _custom: { | ||
| type: 'function', | ||
| display: `<span>${func.name}</span>${args}` |
There was a problem hiding this comment.
I think adding the word function somewhere could make this more explicit. What about something like ƒ o(a, b, c), similar to the console?
|
Couldn't test open in editor yet, but everything else looks fine 🙂 |
|
|
|
|
||
| export function getCustomMapDetails (val) { | ||
| const list = [] | ||
| val.forEach( |
There was a problem hiding this comment.
You could use map instead:
const list = val.map((value, key) => ({ key, value}))
There was a problem hiding this comment.
Map doesn't have any map method.
| export function reviveMap (val) { | ||
| const result = new Map() | ||
| const list = val._custom.value | ||
| for (let i = 0; i < list.length; i++) { |
There was a problem hiding this comment.
Perhaps you can use forEach instead?
list.forEach(({ key, value}) =>
result.set(key, reviver(null, value)
)
There was a problem hiding this comment.
Simple loop without anonymous function call is faster imho. Also made a test case: https://jsperf.com/map-loop-vs-foreach (for what it's worth 🙃)
| export function reviveSet (val) { | ||
| const result = new Set() | ||
| const list = val._custom.value | ||
| for (let i = 0; i < list.length; i++) { |
src/devtools/env.js
Outdated
| '$isChrome': { get: () => isChrome }, | ||
| '$isWindows': { get: () => isWindows }, | ||
| '$isMac': { get: () => isMac }, | ||
| '$isLinus': { get: () => isLinux }, |
| reg: /abc/gi, | ||
| testComponent: null, | ||
| hello: function foo (a, b, c) {}, | ||
| hey: function empty () {}, |
There was a problem hiding this comment.
Can you also add anonymous function here and make sure it works good as well?
hi: function (a, b) {} should be displayed probably as f (a, b), also what about arrow functions? Or hi() {}?
tooltipoptionvalue