// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`<script setup> ref sugar $computed declaration 1`] = `
+"import { computed as _computed } from 'vue'
+
+export default {
+ setup(__props, { expose }) {
+ expose()
+
+ const a = _computed(() => 1)
+
+return { a }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar $raw 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+ setup(__props, { expose }) {
+ expose()
+
+ let a = _ref(1)
+ const b = (a)
+ const c = ({ a })
+ callExternal((a))
+
+return { a, b, c }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar $ref declarations 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+ setup(__props, { expose }) {
+ expose()
+
+ let foo = _ref()
+ let a = _ref(1)
+ let b = _ref({
+ count: 0
+ })
+ let c = () => {}
+ let d
+
+return { foo, a, b, c, d }
+}
+
+}"
+`;
+
exports[`<script setup> ref sugar accessing ref binding 1`] = `
"import { ref as _ref } from 'vue'
setup(__props, { expose }) {
expose()
- const a = _ref(1)
+ let a = _ref(1)
console.log(a.value)
function get() {
return a.value + 1
setup(__props, { expose }) {
expose()
- const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
+ let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())
const a = _ref(__a);
const b = _ref(__b);
const c = _ref(__c);
}"
`;
-exports[`<script setup> ref sugar convert ref declarations 1`] = `
-"import { ref as _ref } from 'vue'
+exports[`<script setup> ref sugar mixing $ref & $computed declarations 1`] = `
+"import { ref as _ref, computed as _computed } from 'vue'
export default {
setup(__props, { expose }) {
expose()
- const foo = _ref()
- const a = _ref(1)
- const b = _ref({
- count: 0
- })
- let c = () => {}
- let d
+ let a = _ref(1), b = _computed(() => a.value + 1)
-return { foo, a, b, c, d }
+return { a, b }
}
}"
`;
-exports[`<script setup> ref sugar multi ref declarations 1`] = `
+exports[`<script setup> ref sugar multi $ref declarations 1`] = `
"import { ref as _ref } from 'vue'
export default {
setup(__props, { expose }) {
expose()
- const a = _ref(1), b = _ref(2), c = _ref({
+ let a = _ref(1), b = _ref(2), c = _ref({
count: 0
})
setup(__props, { expose }) {
expose()
- const a = _ref(1)
- const b = _ref({ count: 0 })
+ let a = _ref(1)
+ let b = _ref({ count: 0 })
function inc() {
a.value++
a.value = a.value + 1
setup(__props, { expose }) {
expose()
- const [{ a: { b: __b }}] = useFoo()
+ let [{ a: { b: __b }}] = (useFoo())
const b = _ref(__b);
- const { c: [__d, __e] } = useBar()
+ let { c: [__d, __e] } = (useBar())
const d = _ref(__d);
const e = _ref(__e);
console.log(b.value, d.value, e.value)
setup(__props, { expose }) {
expose()
- const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
+ let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())
const a = _ref(__a);
const c = _ref(__c);
const d = _ref(__d);
const f = _ref(__f);
const g = _ref(__g);
- const { foo: __foo } = useSomthing(() => 1);
+ let { foo: __foo } = (useSomthing(() => 1));
const foo = _ref(__foo);
console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
}"
`;
-exports[`<script setup> ref sugar should not convert non ref labels 1`] = `
-"export default {
- setup(__props, { expose }) {
- expose()
-
- foo: a = 1, b = 2, c = {
- count: 0
- }
-
-return { }
-}
-
-}"
-`;
-
exports[`<script setup> ref sugar should not rewrite scope variable 1`] = `
"import { ref as _ref } from 'vue'
setup(__props, { expose }) {
expose()
- const a = _ref(1)
- const b = _ref(1)
- const d = _ref(1)
+ let a = _ref(1)
+ let b = _ref(1)
+ let d = _ref(1)
const e = 1
function test() {
const a = 2
console.log(b.value)
let c = { c: 3 }
console.log(c)
- let $d
- console.log($d)
console.log(d.value)
console.log(e)
}
const props = __props
- const ids = _ref([])
+ let ids = _ref([])
return { props, ids }
}
setup(__props, { expose }) {
expose()
- const a = _ref(1)
+ let a = _ref(1)
const b = { a: a.value }
function test() {
const { a } = b
return compile(src, { refSugar: true })
}
- test('convert ref declarations', () => {
+ test('$ref declarations', () => {
const { content, bindings } = compileWithRefSugar(`<script setup>
- ref: foo
- ref: a = 1
- ref: b = {
+ let foo = $ref()
+ let a = $ref(1)
+ let b = $ref({
count: 0
- }
+ })
let c = () => {}
let d
</script>`)
expect(content).toMatch(`import { ref as _ref } from 'vue'`)
- expect(content).not.toMatch(`ref: foo`)
- expect(content).not.toMatch(`ref: a`)
- expect(content).not.toMatch(`ref: b`)
- expect(content).toMatch(`const foo = _ref()`)
- expect(content).toMatch(`const a = _ref(1)`)
+ expect(content).not.toMatch(`$ref()`)
+ expect(content).not.toMatch(`$ref(1)`)
+ expect(content).not.toMatch(`$ref({`)
+ expect(content).toMatch(`let foo = _ref()`)
+ expect(content).toMatch(`let a = _ref(1)`)
expect(content).toMatch(`
- const b = _ref({
+ let b = _ref({
count: 0
})
`)
})
})
- test('multi ref declarations', () => {
+ test('multi $ref declarations', () => {
const { content, bindings } = compileWithRefSugar(`<script setup>
- ref: a = 1, b = 2, c = {
+ let a = $ref(1), b = $ref(2), c = $ref({
count: 0
- }
+ })
</script>`)
expect(content).toMatch(`
- const a = _ref(1), b = _ref(2), c = _ref({
+ let a = _ref(1), b = _ref(2), c = _ref({
count: 0
})
`)
})
})
- test('should not convert non ref labels', () => {
- const { content } = compileWithRefSugar(`<script setup>
- foo: a = 1, b = 2, c = {
- count: 0
- }
+ test('$computed declaration', () => {
+ const { content, bindings } = compileWithRefSugar(`<script setup>
+ const a = $computed(() => 1)
+ </script>`)
+ expect(content).toMatch(`
+ const a = _computed(() => 1)
+ `)
+ expect(content).toMatch(`return { a }`)
+ assertCode(content)
+ expect(bindings).toStrictEqual({
+ a: BindingTypes.SETUP_REF
+ })
+ })
+
+ test('mixing $ref & $computed declarations', () => {
+ const { content, bindings } = compileWithRefSugar(`<script setup>
+ let a = $ref(1), b = $computed(() => a + 1)
</script>`)
- expect(content).toMatch(`foo: a = 1, b = 2`)
+ expect(content).toMatch(`
+ let a = _ref(1), b = _computed(() => a.value + 1)
+ `)
+ expect(content).toMatch(`return { a, b }`)
assertCode(content)
+ expect(bindings).toStrictEqual({
+ a: BindingTypes.SETUP_REF,
+ b: BindingTypes.SETUP_REF
+ })
})
test('accessing ref binding', () => {
const { content } = compileWithRefSugar(`<script setup>
- ref: a = 1
+ let a = $ref(1)
console.log(a)
function get() {
return a + 1
test('cases that should not append .value', () => {
const { content } = compileWithRefSugar(`<script setup>
- ref: a = 1
+ let a = $ref(1)
console.log(b.a)
function get(a) {
return a + 1
test('mutating ref binding', () => {
const { content } = compileWithRefSugar(`<script setup>
- ref: a = 1
- ref: b = { count: 0 }
+ let a = $ref(1)
+ let b = $ref({ count: 0 })
function inc() {
a++
a = a + 1
test('using ref binding in property shorthand', () => {
const { content } = compileWithRefSugar(`<script setup>
- ref: a = 1
+ let a = $ref(1)
const b = { a }
function test() {
const { a } = b
test('should not rewrite scope variable', () => {
const { content } = compileWithRefSugar(`
<script setup>
- ref: a = 1
- ref: b = 1
- ref: d = 1
+ let a = $ref(1)
+ let b = $ref(1)
+ let d = $ref(1)
const e = 1
function test() {
const a = 2
console.log(b)
let c = { c: 3 }
console.log(c)
- let $d
- console.log($d)
console.log(d)
console.log(e)
}
expect(content).toMatch('console.log(a)')
expect(content).toMatch('console.log(b.value)')
expect(content).toMatch('console.log(c)')
- expect(content).toMatch('console.log($d)')
expect(content).toMatch('console.log(d.value)')
expect(content).toMatch('console.log(e)')
assertCode(content)
test('object destructure', () => {
const { content, bindings } = compileWithRefSugar(`<script setup>
- ref: n = 1, ({ a, b: c, d = 1, e: f = 2, ...g } = useFoo())
- ref: ({ foo } = useSomthing(() => 1));
+ let n = $ref(1), { a, b: c, d = 1, e: f = 2, ...g } = $fromRefs(useFoo())
+ let { foo } = $fromRefs(useSomthing(() => 1));
console.log(n, a, c, d, f, g, foo)
</script>`)
expect(content).toMatch(
- `const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()`
+ `let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
)
- expect(content).toMatch(`const { foo: __foo } = useSomthing(() => 1)`)
+ expect(content).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
expect(content).toMatch(`\nconst a = _ref(__a);`)
expect(content).not.toMatch(`\nconst b = _ref(__b);`)
expect(content).toMatch(`\nconst c = _ref(__c);`)
test('array destructure', () => {
const { content, bindings } = compileWithRefSugar(`<script setup>
- ref: n = 1, [a, b = 1, ...c] = useFoo()
+ let n = $ref(1), [a, b = 1, ...c] = $fromRefs(useFoo())
console.log(n, a, b, c)
</script>`)
expect(content).toMatch(
- `const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()`
+ `let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`
)
expect(content).toMatch(`\nconst a = _ref(__a);`)
expect(content).toMatch(`\nconst b = _ref(__b);`)
test('nested destructure', () => {
const { content, bindings } = compileWithRefSugar(`<script setup>
- ref: [{ a: { b }}] = useFoo()
- ref: ({ c: [d, e] } = useBar())
+ let [{ a: { b }}] = $fromRefs(useFoo())
+ let { c: [d, e] } = $fromRefs(useBar())
console.log(b, d, e)
</script>`)
- expect(content).toMatch(`const [{ a: { b: __b }}] = useFoo()`)
- expect(content).toMatch(`const { c: [__d, __e] } = useBar()`)
+ expect(content).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
+ expect(content).toMatch(`let { c: [__d, __e] } = (useBar())`)
expect(content).not.toMatch(`\nconst a = _ref(__a);`)
expect(content).not.toMatch(`\nconst c = _ref(__c);`)
expect(content).toMatch(`\nconst b = _ref(__b);`)
assertCode(content)
})
+ test('$raw', () => {
+ const { content } = compileWithRefSugar(`<script setup>
+ let a = $ref(1)
+ const b = $raw(a)
+ const c = $raw({ a })
+ callExternal($raw(a))
+ </script>`)
+ expect(content).toMatch(`const b = (a)`)
+ expect(content).toMatch(`const c = ({ a })`)
+ expect(content).toMatch(`callExternal((a))`)
+ assertCode(content)
+ })
+
//#4062
test('should not rewrite type identifiers', () => {
const { content } = compile(
`
<script setup lang="ts">
const props = defineProps<{msg: string; ids?: string[]}>()
- ref: ids = []
+ let ids = $ref([])
</script>`,
{
refSugar: true
})
describe('errors', () => {
- test('ref: non-assignment expressions', () => {
+ test('non-let $ref declaration', () => {
+ expect(() =>
+ compile(
+ `<script setup>
+ const a = $ref(1)
+ </script>`,
+ { refSugar: true }
+ )
+ ).toThrow(`$ref() bindings can only be declared with let`)
+ })
+
+ test('$ref w/ destructure', () => {
+ expect(() =>
+ compile(
+ `<script setup>
+ let { a } = $ref(1)
+ </script>`,
+ { refSugar: true }
+ )
+ ).toThrow(`$ref() bindings cannot be used with destructuring`)
+ })
+
+ test('$computed w/ destructure', () => {
expect(() =>
compile(
`<script setup>
- ref: a = 1, foo()
+ const { a } = $computed(() => 1)
</script>`,
{ refSugar: true }
)
- ).toThrow(`ref: statements can only contain assignment expressions`)
+ ).toThrow(`$computed() bindings cannot be used with destructuring`)
})
test('defineProps/Emit() referencing ref declarations', () => {
expect(() =>
compile(
`<script setup>
- ref: bar = 1
+ let bar = $ref(1)
defineProps({
bar
})
expect(() =>
compile(
`<script setup>
- ref: bar = 1
+ let bar = $ref(1)
defineEmits({
bar
})
ObjectProperty,
ArrayExpression,
Statement,
- Expression,
- LabeledStatement,
CallExpression,
RestElement,
TSInterfaceBody,
- AwaitExpression
+ AwaitExpression,
+ VariableDeclarator,
+ VariableDeclaration
} from '@babel/types'
import { walk } from 'estree-walker'
import { RawSourceMap } from 'source-map'
import { warnExperimental, warnOnce } from './warn'
import { rewriteDefault } from './rewriteDefault'
+// Special compiler macros
const DEFINE_PROPS = 'defineProps'
const DEFINE_EMIT = 'defineEmit'
const DEFINE_EXPOSE = 'defineExpose'
const WITH_DEFAULTS = 'withDefaults'
+const $REF = `$ref`
+const $COMPUTED = `$computed`
+const $FROM_REFS = `$fromRefs`
+const $RAW = `$raw`
+
// deprecated
const DEFINE_EMITS = 'defineEmits'
msg: string,
node: Node,
end: number = node.end! + startOffset
- ) {
+ ): never {
throw new Error(
`[@vue/compiler-sfc] ${msg}\n\n${sfc.filename}\n${generateCodeFrame(
source,
)
}
- function processRefExpression(exp: Expression, statement: LabeledStatement) {
- if (exp.type === 'AssignmentExpression') {
- const { left, right } = exp
- if (left.type === 'Identifier') {
- registerRefBinding(left)
- s.prependRight(right.start! + startOffset, `${helper('ref')}(`)
- s.appendLeft(right.end! + startOffset, ')')
- } else if (left.type === 'ObjectPattern') {
- // remove wrapping parens
- for (let i = left.start!; i > 0; i--) {
- const char = source[i + startOffset]
- if (char === '(') {
- s.remove(i + startOffset, i + startOffset + 1)
- break
- }
- }
- for (let i = right.end!; i > 0; i++) {
- const char = source[i + startOffset]
- if (char === ')') {
- s.remove(i + startOffset, i + startOffset + 1)
- break
- }
- }
- processRefObjectPattern(left, statement)
- } else if (left.type === 'ArrayPattern') {
- processRefArrayPattern(left, statement)
- }
- } else if (exp.type === 'SequenceExpression') {
- // possible multiple declarations
- // ref: x = 1, y = 2
- exp.expressions.forEach(e => processRefExpression(e, statement))
- } else if (exp.type === 'Identifier') {
- registerRefBinding(exp)
- s.appendLeft(exp.end! + startOffset, ` = ${helper('ref')}()`)
+ function isRefSugarCall(callee: string) {
+ return callee === $REF || callee === $COMPUTED || callee === $FROM_REFS
+ }
+
+ function processRefSugar(
+ decl: VariableDeclarator,
+ statement: VariableDeclaration
+ ) {
+ if (!isCallOf(decl.init, isRefSugarCall)) {
+ return
+ }
+
+ if (!enableRefSugar) {
+ error(
+ `ref sugar is an experimental proposal and must be explicitly ` +
+ `enabled via @vue/compiler-sfc options.`,
+ // TODO link to RFC details
+ decl.init
+ )
} else {
- error(`ref: statements can only contain assignment expressions.`, exp)
+ warnExperimental(`ref sugar`, 0 /* TODO */)
+ }
+
+ const callee = (decl.init.callee as Identifier).name
+ const start = decl.init.start! + startOffset
+ if (callee === $REF) {
+ if (statement.kind !== 'let') {
+ error(`${$REF}() bindings can only be declared with let.`, decl)
+ }
+ if (decl.id.type !== 'Identifier') {
+ error(
+ `${$REF}() bindings cannot be used with destructuring. ` +
+ `If you are trying to destructure from an object of refs, ` +
+ `use \`let { x } = $fromRefs(obj)\`.`,
+ decl.id
+ )
+ }
+ registerRefBinding(decl.id)
+ s.overwrite(start, start + $REF.length, helper('ref'))
+ } else if (callee === $COMPUTED) {
+ if (decl.id.type !== 'Identifier') {
+ error(
+ `${$COMPUTED}() bindings cannot be used with destructuring.`,
+ decl.id
+ )
+ }
+ registerRefBinding(decl.id)
+ s.overwrite(start, start + $COMPUTED.length, helper('computed'))
+ } else if (callee === $FROM_REFS) {
+ if (!decl.id.type.endsWith('Pattern')) {
+ error(
+ `${$FROM_REFS}() declaration must be used with destructure patterns.`,
+ decl
+ )
+ }
+ if (decl.id.type === 'ObjectPattern') {
+ processRefObjectPattern(decl.id, statement)
+ } else if (decl.id.type === 'ArrayPattern') {
+ processRefArrayPattern(decl.id, statement)
+ }
+ s.remove(start, start + callee.length)
}
}
function processRefObjectPattern(
pattern: ObjectPattern,
- statement: LabeledStatement
+ statement: VariableDeclaration
) {
for (const p of pattern.properties) {
let nameId: Identifier | undefined
function processRefArrayPattern(
pattern: ArrayPattern,
- statement: LabeledStatement
+ statement: VariableDeclaration
) {
for (const e of pattern.elements) {
if (!e) continue
end++
}
- // process `ref: x` bindings (convert to refs)
+ // (Dropped) `ref: x` bindings
if (
node.type === 'LabeledStatement' &&
node.label.name === 'ref' &&
node.body.type === 'ExpressionStatement'
) {
- if (enableRefSugar) {
- !parseOnly && warnExperimental(`ref: sugar`, 228)
- s.overwrite(
- node.label.start! + startOffset,
- node.body.start! + startOffset,
- 'const '
- )
- processRefExpression(node.body.expression, node)
- } else {
- error(
- `ref: sugar now needs to be explicitly enabled via @vitejs/plugin-vue ` +
- `or vue-loader options:\n` +
- `- @vitejs/plugin-vue: via \`script.refSugar\`\n` +
- `- vue-loader: via \`refSugar\` (requires 16.3.0+)`,
- node
- )
- }
+ error(
+ `ref sugar using the label syntax was an experimental proposal and ` +
+ `has been dropped based on community feedback.`,
+ // TODO + ` Please check out the adjusted proposal at ...`,
+ node
+ )
}
if (node.type === 'ImportDeclaration') {
for (let i = 0; i < total; i++) {
const decl = node.declarations[i]
if (decl.init) {
+ // defineProps / defineEmits
const isDefineProps =
processDefineProps(decl.init) || processWithDefaults(decl.init)
if (isDefineProps) {
decl.id.end!
)
}
- if (isDefineProps || isDefineEmits)
+ if (isDefineProps || isDefineEmits) {
if (left === 1) {
s.remove(node.start! + startOffset, node.end! + startOffset)
} else {
s.remove(start, end)
left--
}
+ } else {
+ processRefSugar(decl, node)
+ }
}
}
}
// 3. Do a full walk to rewrite identifiers referencing let exports with ref
// value access
if (enableRefSugar && Object.keys(refBindings).length) {
+ const onIdent = (id: Identifier, parent: Node, parentStack: Node[]) => {
+ if (refBindings[id.name] && !refIdentifiers.has(id)) {
+ if (isStaticProperty(parent) && parent.shorthand) {
+ // let binding used in a property shorthand
+ // { foo } -> { foo: foo.value }
+ // skip for destructure patterns
+ if (
+ !(parent as any).inPattern ||
+ isInDestructureAssignment(parent, parentStack)
+ ) {
+ s.appendLeft(id.end! + startOffset, `: ${id.name}.value`)
+ }
+ } else {
+ s.appendLeft(id.end! + startOffset, '.value')
+ }
+ }
+ }
+
+ const onNode = (node: Node) => {
+ if (isCallOf(node, $RAW)) {
+ s.remove(
+ node.callee.start! + startOffset,
+ node.callee.end! + startOffset
+ )
+ return false // skip walk
+ }
+ }
+
for (const node of scriptSetupAst) {
if (node.type !== 'ImportDeclaration') {
- walkIdentifiers(node, (id, parent, parentStack) => {
- if (refBindings[id.name] && !refIdentifiers.has(id)) {
- if (isStaticProperty(parent) && parent.shorthand) {
- // let binding used in a property shorthand
- // { foo } -> { foo: foo.value }
- // skip for destructure patterns
- if (
- !(parent as any).inPattern ||
- isInDestructureAssignment(parent, parentStack)
- ) {
- s.appendLeft(id.end! + startOffset, `: ${id.name}.value`)
- }
- } else {
- s.appendLeft(id.end! + startOffset, '.value')
- }
- } else if (id.name[0] === '$' && refBindings[id.name.slice(1)]) {
- // $xxx raw ref access variables, remove the $ prefix
- s.remove(id.start! + startOffset, id.start! + startOffset + 1)
- }
- })
+ walkIdentifiers(node, onIdent, onNode)
}
}
}
for (const key in setupBindings) {
bindingMetadata[key] = setupBindings[key].type
}
+ // known ref bindings
+ for (const key in refBindings) {
+ bindingMetadata[key] = BindingTypes.SETUP_REF
+ }
// 8. inject `useCssVars` calls
if (cssVars.length) {
*/
export function walkIdentifiers(
root: Node,
- onIdentifier: (node: Identifier, parent: Node, parentStack: Node[]) => void
+ onIdentifier: (node: Identifier, parent: Node, parentStack: Node[]) => void,
+ onNode?: (node: Node, parent: Node, parentStack: Node[]) => void | boolean
) {
const parentStack: Node[] = []
const knownIds: Record<string, number> = Object.create(null)
if (node.type.startsWith('TS')) {
return this.skip()
}
+ if (onNode && onNode(node, parent!, parentStack) === false) {
+ return this.skip()
+ }
if (node.type === 'Identifier') {
if (
!knownIds[node.name] &&
projects / thirdparty / vuejs / core.git / commitdiff
