Skip to content

Commit

Permalink
fix(sfc): also generate getter for import bindings during dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyx990803
yyx990803 committed Nov 10, 2022
1 parent 5a3d45a commit 0594400
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 36 deletions.
44 changes: 22 additions & 22 deletions packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View file
Expand Up @@ -52,7 +52,7 @@ export default {
expose();


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

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

x()

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

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

x()

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

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

x()

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

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

x()

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

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

x()

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

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

x()

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

})"
Expand Down Expand Up @@ -646,7 +646,7 @@ const props = __props;



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

}"
Expand All @@ -663,7 +663,7 @@ export default {
const props = __props;


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

}"
Expand Down Expand Up @@ -750,7 +750,7 @@ export default /*#__PURE__*/_defineComponent({
const a = 1
function b() {}

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

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

const cond = true

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

})"
Expand All @@ -782,7 +782,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 } }
}

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


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

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


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

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


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

})"
Expand All @@ -842,7 +842,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 } }
}

})"
Expand All @@ -866,7 +866,7 @@ export default {



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

}"
Expand Down Expand Up @@ -920,7 +920,7 @@ export default {

x()

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

}"
Expand Down Expand Up @@ -954,7 +954,7 @@ export default {
expose();


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

}"
Expand Down Expand Up @@ -1280,7 +1280,7 @@ export default {
function c() {}
class d {}

return { get aa() { return aa }, bb, cc, dd, get a() { return 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 } }
}

}"
Expand Down Expand Up @@ -1668,7 +1668,7 @@ export default /*#__PURE__*/_defineComponent({
expose();


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

})"
Expand Down Expand Up @@ -1729,7 +1729,7 @@ const props = __props as {



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

})"
Expand Down
4 changes: 2 additions & 2 deletions packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
View file
Expand Up @@ -15,7 +15,7 @@ export default {
let c = () => {}
let d
return { foo, a, b, get c() { return c }, get d() { return d }, ref, shallowRef }
return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v }, ref, shallowRef }
}
}"
Expand All @@ -36,7 +36,7 @@ export default {
let c = () => {}
let d
return { foo, a, b, get c() { return c }, get d() { return d } }
return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v } }
}
}"
Expand Down
2 changes: 1 addition & 1 deletion packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
View file
Expand Up @@ -84,7 +84,7 @@ _useCssVars(_ctx => ({
let b = 200
let foo = 300
return { get a() { return a }, get b() { return b }, get foo() { return 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 } }
}
}"
Expand Down
31 changes: 22 additions & 9 deletions packages/compiler-sfc/__tests__/compileScript.spec.ts
View file
Expand Up @@ -21,7 +21,9 @@ describe('SFC compile <script setup>', () => {
</script>
`)
expect(content).toMatch(
'return { get aa() { return aa }, bb, cc, dd, get a() { return 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 } }`
)
expect(bindings).toStrictEqual({
x: BindingTypes.SETUP_MAYBE_REF,
Expand Down Expand Up @@ -431,7 +433,10 @@ 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)
})

Expand All @@ -444,7 +449,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)
})

Expand All @@ -459,7 +464,9 @@ 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)
})

Expand All @@ -475,7 +482,9 @@ 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)
})

Expand All @@ -490,7 +499,9 @@ 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)
})

Expand All @@ -505,7 +516,9 @@ 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)
})

Expand All @@ -524,7 +537,7 @@ defineExpose({ foo: 123 })
<div v-for="{ z = x as Qux } in list as Fred"/>
</template>
`)
expect(content).toMatch(`return { a, b, Baz }`)
expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
assertCode(content)
})

Expand Down Expand Up @@ -1301,7 +1314,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)
})
})
Expand Down
3 changes: 2 additions & 1 deletion packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts
View file
Expand Up @@ -33,7 +33,8 @@ describe('sfc ref transform', () => {
expect(content).toMatch(`let c = () => {}`)
expect(content).toMatch(`let d`)
expect(content).toMatch(
`return { foo, a, b, get c() { return c }, get d() { return d }, ref, shallowRef }`
`return { foo, a, b, get c() { return c }, set c(v) { c = v }, ` +
`get d() { return d }, set d(v) { d = v }, ref, shallowRef }`
)
assertCode(content)
expect(bindings).toStrictEqual({
Expand Down
14 changes: 13 additions & 1 deletion packages/compiler-sfc/src/compileScript.ts
View file
Expand Up @@ -1486,8 +1486,20 @@ export function compileScript(
}
returned = `{ `
for (const key in allBindings) {
if (bindingMetadata[key] === BindingTypes.SETUP_LET) {
if (
allBindings[key] === true &&
userImports[key].source !== 'vue' &&
!userImports[key].source.endsWith('.vue')
) {
// generate getter for import bindings
// skip vue imports since we know they will never change
returned += `get ${key}() { return ${key} }, `
} else if (bindingMetadata[key] === BindingTypes.SETUP_LET) {
// local let binding, also add setter
const setArg = key === 'v' ? `_v` : `v`
returned +=
`get ${key}() { return ${key} }, ` +
`set ${key}(${setArg}) { ${key} = ${setArg} }, `
} else {
returned += `${key}, `
}
Expand Down

0 comments on commit 0594400

Please sign in to comment.