Skip to content

fix(compiler-sfc) fix setup result binding of primitive (non inlined mode) closes #5655 #5777

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.

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

Closed
wants to merge 3 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ export default /*#__PURE__*/Object.assign(__default__, {

x()

return { n, x }
return { n, get x(){return x} }
}

})"
@@ -30,7 +30,7 @@ export default /*#__PURE__*/Object.assign(__default__, {

x()

return { n, x }
return { n, get x(){return x} }
}

})"
@@ -51,7 +51,7 @@ export default /*#__PURE__*/_defineComponent({

x()

return { x }
return { get x(){return x} }
}

})"
@@ -71,7 +71,7 @@ export default /*#__PURE__*/Object.assign(__default__, {

x()

return { n, def, x }
return { n, def, get x(){return x} }
}

})"
@@ -91,7 +91,7 @@ export default /*#__PURE__*/Object.assign(__default__, {

x()

return { n, x }
return { n, get x(){return x} }
}

})"
@@ -111,7 +111,7 @@ export default /*#__PURE__*/Object.assign(__default__, {

x()

return { n, x }
return { n, get x(){return x} }
}

})"
@@ -276,7 +276,7 @@ let a = _ref(1 + ((
__restore(),
__temp
)))
return { a }
return { get a(){return a}, set a(v){a=v} }
}

}"
@@ -416,7 +416,7 @@ const props = __props



return { props, propsModel }
return { props, get propsModel(){return propsModel} }
}

}"
@@ -433,7 +433,7 @@ export default {
const props = __props


return { props, x }
return { props, get x(){return x} }
}

}"
@@ -502,7 +502,7 @@ export default /*#__PURE__*/_defineComponent({

const cond = true

return { cond, bar, baz }
return { cond, get bar(){return bar}, get baz(){return baz} }
}

})"
@@ -518,7 +518,7 @@ export default /*#__PURE__*/_defineComponent({

const fooBar: FooBar = 1

return { fooBar, FooBaz, FooQux, foo }
return { fooBar, get FooBaz(){return FooBaz}, get FooQux(){return FooQux}, get foo(){return foo} }
}

})"
@@ -533,7 +533,7 @@ export default /*#__PURE__*/_defineComponent({
expose();


return { vMyDir }
return { get vMyDir(){return vMyDir} }
}

})"
@@ -548,7 +548,7 @@ export default /*#__PURE__*/_defineComponent({
expose();


return { VAR, VAR3 }
return { get VAR(){return VAR}, get VAR3(){return VAR3} }
}

})"
@@ -563,7 +563,7 @@ export default /*#__PURE__*/_defineComponent({
expose();


return { FooBaz, Last }
return { get FooBaz(){return FooBaz}, get Last(){return Last} }
}

})"
@@ -578,7 +578,7 @@ export default /*#__PURE__*/_defineComponent({
expose();


return { x, z, x$y }
return { get x(){return x}, get z(){return z}, get x$y(){return x$y} }
}

})"
@@ -602,7 +602,7 @@ export default {



return { bar }
return { get bar(){return bar} }
}

}"
@@ -641,7 +641,7 @@ export default {

let foo = _ref(1)

return { foo, ref }
return { get foo(){return foo}, set foo(v){foo=v}, get ref(){return ref} }
}

}"
@@ -656,7 +656,7 @@ export default {

x()

return { x }
return { get x(){return x} }
}

}"
@@ -675,7 +675,7 @@ export default {

const r = ref(0)

return { r, ref }
return { r, get ref(){return ref} }
}

}"
@@ -690,7 +690,7 @@ export default {
expose();


return { a, b }
return { get a(){return a}, get b(){return b} }
}

}"
@@ -705,7 +705,7 @@ export default {
expose();


return { ref }
return { get ref(){return ref} }
}

}"
@@ -1017,7 +1017,7 @@ export default {
function c() {}
class d {}

return { aa, bb, cc, dd, a, b, c, d, xx, x }
return { get aa(){return aa}, set aa(v){aa=v}, bb, cc, dd, get a(){return a}, set a(v){a=v}, b, c, d, get xx(){return xx}, get x(){return x} }
}

}"
@@ -1361,7 +1361,7 @@ export default /*#__PURE__*/_defineComponent({
expose();


return { Baz }
return { get Baz(){return Baz} }
}

})"
@@ -1422,7 +1422,7 @@ const props = __props as {



return { props, defaults }
return { props, get defaults(){return defaults} }
}

})"
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export default {
let c = () => {}
let d
return { foo, a, b, c, d, ref, shallowRef }
return { get foo(){return foo}, set foo(v){foo=v}, get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get c(){return c}, set c(v){c=v}, get d(){return d}, set d(v){d=v}, get ref(){return ref}, get shallowRef(){return shallowRef} }
}
}"
@@ -36,7 +36,7 @@ export default {
let c = () => {}
let d
return { foo, a, b, c, d }
return { get foo(){return foo}, set foo(v){foo=v}, get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get c(){return c}, set c(v){c=v}, get d(){return d}, set d(v){d=v} }
}
}"
@@ -52,7 +52,7 @@ export default /*#__PURE__*/_defineComponent({
let msg = _ref<string | number>('foo');
let bar = _ref <string | number>('bar');
return { msg, bar }
return { get msg(){return msg}, set msg(v){msg=v}, get bar(){return bar}, set bar(v){bar=v} }
}
})"
@@ -82,7 +82,7 @@ export default {
console.log(data.value)
return { data }
return { get data(){return data}, set data(v){data=v} }
}
}"
@@ -106,7 +106,7 @@ export default {
c++
}
return { a, c, b, change }
return { get a(){return a}, set a(v){a=v}, get c(){return c}, set c(v){c=v}, get b(){return b}, set b(v){b=v}, change }
}
}"
Original file line number Diff line number Diff line change
@@ -84,7 +84,7 @@ _useCssVars(_ctx => ({
let b = 200
let foo = 300
return { a, b, foo }
return { get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get foo(){return foo}, set foo(v){foo=v} }
}
}"
@@ -164,7 +164,7 @@ _useCssVars(_ctx => ({
const size = ref('10px')
return { color, size, ref }
return { color, size, get ref(){return ref} }
}
}"
17 changes: 9 additions & 8 deletions packages/compiler-sfc/__tests__/compileScript.spec.ts
Original file line number Diff line number Diff line change
@@ -20,7 +20,8 @@ describe('SFC compile <script setup>', () => {
class dd {}
</script>
`)
expect(content).toMatch('return { aa, bb, cc, dd, a, b, c, d, xx, x }')
expect(content).toMatch('return { get aa(){return aa}, set aa(v){aa=v}, bb, cc, dd, get a(){return a}, set a(v){a=v}, b, c, d, get xx(){return xx}, get x(){return x} }')

expect(bindings).toStrictEqual({
x: BindingTypes.SETUP_MAYBE_REF,
a: BindingTypes.SETUP_LET,
@@ -355,7 +356,7 @@ defineExpose({ foo: 123 })
// FooBaz: used as PascalCase component
// FooQux: used as kebab-case component
// foo: lowercase component
expect(content).toMatch(`return { fooBar, FooBaz, FooQux, foo }`)
expect(content).toMatch(`return { fooBar, get FooBaz(){return FooBaz}, get FooQux(){return FooQux}, get foo(){return foo} }`)
assertCode(content)
})

@@ -368,7 +369,7 @@ defineExpose({ foo: 123 })
<div v-my-dir></div>
</template>
`)
expect(content).toMatch(`return { vMyDir }`)
expect(content).toMatch(`return { get vMyDir(){return vMyDir} }`)
assertCode(content)
})

@@ -383,7 +384,7 @@ defineExpose({ foo: 123 })
<div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
</template>
`)
expect(content).toMatch(`return { cond, bar, baz }`)
expect(content).toMatch(`return { cond, get bar(){return bar}, get baz(){return baz} }`)
assertCode(content)
})

@@ -399,7 +400,7 @@ defineExpose({ foo: 123 })
// x: used in interpolation
// y: should not be matched by {{ yy }} or 'y' in binding exps
// x$y: #4274 should escape special chars when creating Regex
expect(content).toMatch(`return { x, z, x$y }`)
expect(content).toMatch(`return { get x(){return x}, get z(){return z}, get x$y(){return x$y} }`)
assertCode(content)
})

@@ -414,7 +415,7 @@ defineExpose({ foo: 123 })
</template>
`)
// VAR2 should not be matched
expect(content).toMatch(`return { VAR, VAR3 }`)
expect(content).toMatch(`return { get VAR(){return VAR}, get VAR3(){return VAR3} }`)
assertCode(content)
})

@@ -429,7 +430,7 @@ defineExpose({ foo: 123 })
<Last/>
</template>
`)
expect(content).toMatch(`return { FooBaz, Last }`)
expect(content).toMatch(`return { get FooBaz(){return FooBaz}, get Last(){return Last} }`)
assertCode(content)
})
})
@@ -1111,7 +1112,7 @@ const emit = defineEmits(['a', 'b'])
import { type Bar, Baz } from './main.ts'
</script>`
)
expect(content).toMatch(`return { Baz }`)
expect(content).toMatch(`return { get Baz(){return Baz} }`)
assertCode(content)
})
})
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ describe('sfc ref transform', () => {
// normal declarations left untouched
expect(content).toMatch(`let c = () => {}`)
expect(content).toMatch(`let d`)
expect(content).toMatch(`return { foo, a, b, c, d, ref, shallowRef }`)
expect(content).toMatch(`return { get foo(){return foo}, set foo(v){foo=v}, get a(){return a}, set a(v){a=v}, get b(){return b}, set b(v){b=v}, get c(){return c}, set c(v){c=v}, get d(){return d}, set d(v){d=v}, get ref(){return ref}, get shallowRef(){return shallowRef} }`)
assertCode(content)
expect(bindings).toStrictEqual({
foo: BindingTypes.SETUP_REF,
28 changes: 27 additions & 1 deletion packages/compiler-sfc/src/compileScript.ts
Original file line number Diff line number Diff line change
@@ -1345,7 +1345,33 @@ export function compileScript(
allBindings[key] = true
}
}
returned = `{ ${Object.keys(allBindings).join(', ')} }`

/*
build getter/setter for setup result. ensures functionality is comparable
with inlined template function.
*/
let bindingGetters = []
for (let name in allBindings){
let binding = allBindings[name]
/*
true - binding of an import specifier
*/
if(['setup-let', true].includes(binding)){
let setterArgName = name!=='v'?'v':'_v' // resolve possible conflict between var binding and argument name.
let getterSetter = `get ${name}(){return ${name}}`

// exlude setter for import
if(binding !== true){
getterSetter += `, set ${name}(${setterArgName}){${name}=${setterArgName}}`
}

bindingGetters.push(getterSetter)
} else {
bindingGetters.push(name)
}
}

returned = `{ ${(bindingGetters).join(', ')} }`
}

if (!options.inlineTemplate && !__TEST__) {