Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(setup): call stack exceeded when returning circular dependency #380

Merged
merged 3 commits into from Jun 16, 2020
Merged

fix(setup): call stack exceeded when returning circular dependency #380

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2449484
fix(setup): issue returned from having circular dependency on a ref
pikax Jun 12, 2020
643ece4
chore: refactor tests and handling of ref on unwrapping
pikax Jun 12, 2020
7aaea8e
chore: code review
pikax Jun 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/reactivity/unwrap.ts
View file
Open in desktop
Expand Up @@ -2,21 +2,25 @@ import { isRef } from './ref'
import { proxy, isFunction, isPlainObject, isArray } from '../utils'
import { isReactive } from './reactive'

export function unwrapRefProxy(value: any, processed = new Set<any>()) {
export function unwrapRefProxy(value: any, map = new WeakMap()) {
let processed = map.get(value)
if (processed) {
pikax marked this conversation as resolved.
Show resolved Hide resolved
return processed
}

if (
isFunction(value) ||
isRef(value) ||
isArray(value) ||
isReactive(value) ||
!isPlainObject(value) ||
!Object.isExtensible(value) ||
processed.has(value)
isRef(value)
) {
return value
}
processed.add(value)

const obj: any = {}
map.set(value, obj)

// copy symbols over
Object.getOwnPropertySymbols(value).forEach(
Expand All @@ -32,7 +36,7 @@ export function unwrapRefProxy(value: any, processed = new Set<any>()) {

proxy(obj, k, { get, set })
} else {
obj[k] = unwrapRefProxy(r, processed)
obj[k] = unwrapRefProxy(r, map)
}
}

Expand Down
257 changes: 140 additions & 117 deletions test/setup.spec.js
View file
Open in desktop
Expand Up @@ -467,138 +467,161 @@ describe('setup', () => {
.then(done)
})

it('should unwrap on the template', () => {
const vm = new Vue({
setup() {
const r = ref('r')
const nested = {
a: ref('a'),
aa: {
b: ref('aa'),
bb: {
cc: ref('aa'),
c: 'aa',
},
},
describe('setup unwrap', () => {
test('ref', () => {
const vm = new Vue({
setup() {
const r = ref('r')

const refList = ref([ref('1'), ref('2'), ref('3')])
const list = [ref('a'), ref('b')]

return {
r,
refList,
list,
}
},
template: `<div>
<p id="r">{{r}}</p>
<p id="list">{{list}}</p>
<p id="refList">{{refList}}</p>
</div>`,
}).$mount()

aaa: reactive({
b: ref('aaa'),
bb: {
c: ref('aaa'),
cc: 'aaa',
expect(vm.$el.querySelector('#r').textContent).toBe('r')

// shouldn't unwrap arrays
expect(
JSON.parse(vm.$el.querySelector('#list').textContent)
).toMatchObject([{ value: 'a' }, { value: 'b' }])
expect(
JSON.parse(vm.$el.querySelector('#refList').textContent)
).toMatchObject([{ value: '1' }, { value: '2' }, { value: '3' }])
})

test('nested', () => {
const vm = new Vue({
setup() {
const nested = {
a: ref('a'),
aa: {
b: ref('aa'),
bb: {
cc: ref('aa'),
c: 'aa',
},
},
}),

aaaa: {
b: [1],
bb: ref([1]),
bbb: reactive({
c: [1],
cc: ref([1]),

aaa: reactive({
b: ref('aaa'),
bb: {
c: ref('aaa'),
cc: 'aaa',
},
}),
bbbb: [ref(1)],
},
}

const b = {
c: 'c',
}
aaaa: {
b: [1],
bb: ref([1]),
bbb: reactive({
c: [1],
cc: ref([1]),
}),
bbbb: [ref(1)],
},
}

const recursive = {
a: {
a: 'a',
b,
},
}
return {
nested,
}
},
template: `<div>
<p id="nested">{{nested.a}}</p>

<p id="nested_aa_b">{{ nested.aa.b }}</p>
<p id="nested_aa_bb_c">{{ nested.aa.bb.c }}</p>
<p id="nested_aa_bb_cc">{{ nested.aa.bb.cc }}</p>

<p id="nested_aaa_b">{{ nested.aaa.b }}</p>
<p id="nested_aaa_bb_c">{{ nested.aaa.bb.c }}</p>
<p id="nested_aaa_bb_cc">{{ nested.aaa.bb.cc }}</p>

<p id="nested_aaaa_b">{{ nested.aaaa.b }}</p>
<p id="nested_aaaa_bb_c">{{ nested.aaaa.bb }}</p>
<p id="nested_aaaa_bbb_cc">{{ nested.aaaa.bbb.c }}</p>
<p id="nested_aaaa_bbb_cc">{{ nested.aaaa.bbb.cc }}</p>
<p id="nested_aaaa_bbbb">{{ nested.aaaa.bbbb }}</p>
</div>`,
}).$mount()

b.recursive = recursive
expect(vm.$el.querySelector('#nested').textContent).toBe('a')

const refList = ref([ref('1'), ref('2'), ref('3')])
const list = [ref('a'), ref('b')]
expect(vm.$el.querySelector('#nested_aa_b').textContent).toBe('aa')
expect(vm.$el.querySelector('#nested_aa_bb_c').textContent).toBe('aa')
expect(vm.$el.querySelector('#nested_aa_bb_cc').textContent).toBe('aa')

return {
r,
nested,
refList,
list,
expect(vm.$el.querySelector('#nested_aaa_b').textContent).toBe('aaa')
expect(vm.$el.querySelector('#nested_aaa_bb_c').textContent).toBe('aaa')
expect(vm.$el.querySelector('#nested_aaa_bb_cc').textContent).toBe('aaa')
})

recursive,
}
},
template: `<div>
<p id="r">{{r}}</p>
<p id="nested">{{nested.a}}</p>
<p id="list">{{list}}</p>
<p id="refList">{{refList}}</p>

<p id="nested_aa_b">{{ nested.aa.b }}</p>
<p id="nested_aa_bb_c">{{ nested.aa.bb.c }}</p>
<p id="nested_aa_bb_cc">{{ nested.aa.bb.cc }}</p>

<p id="nested_aaa_b">{{ nested.aaa.b }}</p>
<p id="nested_aaa_bb_c">{{ nested.aaa.bb.c }}</p>
<p id="nested_aaa_bb_cc">{{ nested.aaa.bb.cc }}</p>

<p id="nested_aaaa_b">{{ nested.aaaa.b }}</p>
<p id="nested_aaaa_bb_c">{{ nested.aaaa.bb }}</p>
<p id="nested_aaaa_bbb_cc">{{ nested.aaaa.bbb.c }}</p>
<p id="nested_aaaa_bbb_cc">{{ nested.aaaa.bbb.cc }}</p>
<p id="nested_aaaa_bbbb">{{ nested.aaaa.bbbb }}</p>

<p id="recursive_a">{{recursive.a.a}}</p>
<p id="recursive_b_c">{{recursive.a.b.c}}</p>
<p id="recursive_b_recursive_a">{{recursive.a.b.recursive.a.a}}</p>
<p id="recursive_b_recursive_c">{{recursive.a.b.recursive.a.b.c}}</p>
<p id="recursive_b_recursive_recursive_c">{{recursive.a.b.recursive.a.b.recursive.a.b.c}}</p>
</div>`,
}).$mount()
it('recursive', () => {
const vm = new Vue({
setup() {
const b = {
c: 'c',
}

expect(vm.$el.querySelector('#r').textContent).toBe('r')
expect(vm.$el.querySelector('#nested').textContent).toBe('a')
const recursive = {
a: {
a: 'a',
b,
},
}

// shouldn't unwrap arrays
expect(
JSON.parse(vm.$el.querySelector('#list').textContent)
).toMatchObject([{ value: 'a' }, { value: 'b' }])
expect(
JSON.parse(vm.$el.querySelector('#refList').textContent)
).toMatchObject([{ value: '1' }, { value: '2' }, { value: '3' }])
b.recursive = recursive
b.r = ref('r')

expect(vm.$el.querySelector('#nested_aa_b').textContent).toBe('aa')
expect(vm.$el.querySelector('#nested_aa_bb_c').textContent).toBe('aa')
expect(vm.$el.querySelector('#nested_aa_bb_cc').textContent).toBe('aa')
return {
recursive,
}
},
template: `<div>
<p id="recursive_a">{{recursive.a.a}}</p>
<p id="recursive_b_c">{{recursive.a.b.c}}</p>
<p id="recursive_b_r">{{recursive.a.b.r}}</p>

<p id="recursive_b_recursive_a">{{recursive.a.b.recursive.a.a}}</p>
<p id="recursive_b_recursive_c">{{recursive.a.b.recursive.a.b.c}}</p>
<p id="recursive_b_recursive_r">{{recursive.a.b.recursive.a.b.r}}</p>

<p id="recursive_b_recursive_recursive_c">{{recursive.a.b.recursive.a.b.recursive.a.b.c}}</p>
<p id="recursive_b_recursive_recursive_r">{{recursive.a.b.recursive.a.b.recursive.a.b.r}}</p>
</div>`,
}).$mount()
expect(vm.$el.querySelector('#recursive_a').textContent).toBe('a')
expect(vm.$el.querySelector('#recursive_b_c').textContent).toBe('c')
expect(vm.$el.querySelector('#recursive_b_r').textContent).toBe('r')

expect(vm.$el.querySelector('#nested_aaa_b').textContent).toBe('aaa')
expect(vm.$el.querySelector('#nested_aaa_bb_c').textContent).toBe('aaa')
expect(vm.$el.querySelector('#nested_aaa_bb_cc').textContent).toBe('aaa')
expect(vm.$el.querySelector('#recursive_b_recursive_a').textContent).toBe(
'a'
)
expect(vm.$el.querySelector('#recursive_b_recursive_c').textContent).toBe(
'c'
)
expect(vm.$el.querySelector('#recursive_b_recursive_r').textContent).toBe(
'r'
)

expect(vm.$el.querySelector('#recursive_a').textContent).toBe('a')
expect(vm.$el.querySelector('#recursive_b_c').textContent).toBe('c')
expect(vm.$el.querySelector('#recursive_b_recursive_a').textContent).toBe(
'a'
)
expect(vm.$el.querySelector('#recursive_b_recursive_c').textContent).toBe(
'c'
)
expect(
vm.$el.querySelector('#recursive_b_recursive_recursive_c').textContent
).toBe('c')
expect(
vm.$el.querySelector('#recursive_b_recursive_recursive_c').textContent
).toBe('c')

expect(
JSON.parse(vm.$el.querySelector('#nested_aaaa_b').textContent)
).toMatchObject([1])
expect(
JSON.parse(vm.$el.querySelector('#nested_aaaa_bb_c').textContent)
).toMatchObject([1])
expect(
JSON.parse(vm.$el.querySelector('#nested_aaaa_bbb_cc').textContent)
).toMatchObject([1])
expect(
JSON.parse(vm.$el.querySelector('#nested_aaaa_bbb_cc').textContent)
).toMatchObject([1])
expect(
JSON.parse(vm.$el.querySelector('#nested_aaaa_bbbb').textContent)
).toMatchObject([{ value: 1 }])
expect(
vm.$el.querySelector('#recursive_b_recursive_recursive_r').textContent
).toBe('r')
})
})

it('should not unwrap built-in objects on the template', () => {
Expand Down