fix(compiler-sfc/reactivity-transform): fix edge case where normal script has ref macros but script setup does not
This commit is contained in:
parent
a05b000948
commit
4768f26f59
@ -71,6 +71,23 @@ exports[`sfc ref transform usage in normal <script> 1`] = `
|
|||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`sfc ref transform usage with normal <script> (has macro usage) + <script setup> (no macro usage) 1`] = `
|
||||||
|
"import { ref as _ref } from 'vue'
|
||||||
|
|
||||||
|
let data = _ref()
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup(__props, { expose }) {
|
||||||
|
expose();
|
||||||
|
|
||||||
|
console.log(data.value)
|
||||||
|
|
||||||
|
return { data }
|
||||||
|
}
|
||||||
|
|
||||||
|
}"
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`sfc ref transform usage with normal <script> + <script setup> 1`] = `
|
exports[`sfc ref transform usage with normal <script> + <script setup> 1`] = `
|
||||||
"import { ref as _ref } from 'vue'
|
"import { ref as _ref } from 'vue'
|
||||||
|
|
||||||
|
@ -146,6 +146,19 @@ describe('sfc ref transform', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('usage with normal <script> (has macro usage) + <script setup> (no macro usage)', () => {
|
||||||
|
const { content } = compileWithReactivityTransform(`
|
||||||
|
<script>
|
||||||
|
let data = $ref()
|
||||||
|
</script>
|
||||||
|
<script setup>
|
||||||
|
console.log(data)
|
||||||
|
</script>
|
||||||
|
`)
|
||||||
|
expect(content).toMatch(`console.log(data.value)`)
|
||||||
|
assertCode(content)
|
||||||
|
})
|
||||||
|
|
||||||
describe('errors', () => {
|
describe('errors', () => {
|
||||||
test('defineProps/Emit() referencing ref declarations', () => {
|
test('defineProps/Emit() referencing ref declarations', () => {
|
||||||
expect(() =>
|
expect(() =>
|
||||||
|
@ -48,10 +48,7 @@ import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
|
|||||||
import { warnOnce } from './warn'
|
import { warnOnce } from './warn'
|
||||||
import { rewriteDefault } from './rewriteDefault'
|
import { rewriteDefault } from './rewriteDefault'
|
||||||
import { createCache } from './cache'
|
import { createCache } from './cache'
|
||||||
import {
|
import { shouldTransform, transformAST } from '@vue/reactivity-transform'
|
||||||
shouldTransform as shouldTransformRef,
|
|
||||||
transformAST as transformRefAST
|
|
||||||
} from '@vue/reactivity-transform'
|
|
||||||
|
|
||||||
// Special compiler macros
|
// Special compiler macros
|
||||||
const DEFINE_PROPS = 'defineProps'
|
const DEFINE_PROPS = 'defineProps'
|
||||||
@ -143,7 +140,7 @@ export function compileScript(
|
|||||||
let { script, scriptSetup, source, filename } = sfc
|
let { script, scriptSetup, source, filename } = sfc
|
||||||
// feature flags
|
// feature flags
|
||||||
// TODO remove support for deprecated options when out of experimental
|
// TODO remove support for deprecated options when out of experimental
|
||||||
const enableRefTransform =
|
const enableReactivityTransform =
|
||||||
!!options.reactivityTransform ||
|
!!options.reactivityTransform ||
|
||||||
!!options.refSugar ||
|
!!options.refSugar ||
|
||||||
!!options.refTransform
|
!!options.refTransform
|
||||||
@ -170,6 +167,8 @@ export function compileScript(
|
|||||||
scriptLang === 'tsx' ||
|
scriptLang === 'tsx' ||
|
||||||
scriptSetupLang === 'ts' ||
|
scriptSetupLang === 'ts' ||
|
||||||
scriptSetupLang === 'tsx'
|
scriptSetupLang === 'tsx'
|
||||||
|
|
||||||
|
// resolve parser plugins
|
||||||
const plugins: ParserPlugin[] = []
|
const plugins: ParserPlugin[] = []
|
||||||
if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
|
if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
|
||||||
plugins.push('jsx')
|
plugins.push('jsx')
|
||||||
@ -193,11 +192,11 @@ export function compileScript(
|
|||||||
sourceType: 'module'
|
sourceType: 'module'
|
||||||
}).program
|
}).program
|
||||||
const bindings = analyzeScriptBindings(scriptAst.body)
|
const bindings = analyzeScriptBindings(scriptAst.body)
|
||||||
if (enableRefTransform && shouldTransformRef(content)) {
|
if (enableReactivityTransform && shouldTransform(content)) {
|
||||||
const s = new MagicString(source)
|
const s = new MagicString(source)
|
||||||
const startOffset = script.loc.start.offset
|
const startOffset = script.loc.start.offset
|
||||||
const endOffset = script.loc.end.offset
|
const endOffset = script.loc.end.offset
|
||||||
const { importedHelpers } = transformRefAST(scriptAst, s, startOffset)
|
const { importedHelpers } = transformAST(scriptAst, s, startOffset)
|
||||||
if (importedHelpers.length) {
|
if (importedHelpers.length) {
|
||||||
s.prepend(
|
s.prepend(
|
||||||
`import { ${importedHelpers
|
`import { ${importedHelpers
|
||||||
@ -862,14 +861,14 @@ export function compileScript(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// apply ref transform
|
// apply reactivity transform
|
||||||
if (enableRefTransform && shouldTransformRef(script.content)) {
|
if (enableReactivityTransform && shouldTransform(script.content)) {
|
||||||
const { rootRefs: rootVars, importedHelpers } = transformRefAST(
|
const { rootRefs, importedHelpers } = transformAST(
|
||||||
scriptAst,
|
scriptAst,
|
||||||
s,
|
s,
|
||||||
scriptStartOffset!
|
scriptStartOffset!
|
||||||
)
|
)
|
||||||
refBindings = rootVars
|
refBindings = rootRefs
|
||||||
for (const h of importedHelpers) {
|
for (const h of importedHelpers) {
|
||||||
helperImports.add(h)
|
helperImports.add(h)
|
||||||
}
|
}
|
||||||
@ -1109,12 +1108,14 @@ export function compileScript(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Apply ref sugar transform
|
// 3. Apply reactivity transform
|
||||||
if (
|
if (
|
||||||
(enableRefTransform && shouldTransformRef(scriptSetup.content)) ||
|
(enableReactivityTransform &&
|
||||||
|
// normal <script> had ref bindings that maybe used in <script setup>
|
||||||
|
(refBindings || shouldTransform(scriptSetup.content))) ||
|
||||||
propsDestructureDecl
|
propsDestructureDecl
|
||||||
) {
|
) {
|
||||||
const { rootRefs, importedHelpers } = transformRefAST(
|
const { rootRefs, importedHelpers } = transformAST(
|
||||||
scriptSetupAst,
|
scriptSetupAst,
|
||||||
s,
|
s,
|
||||||
startOffset,
|
startOffset,
|
||||||
|
Loading…
Reference in New Issue
Block a user