fix(compiler-sfc/reactivity-transform): fix edge case where normal script has ref macros but script setup does not

This commit is contained in:
Evan You 2022-01-21 08:47:48 +08:00
parent a05b000948
commit 4768f26f59
3 changed files with 45 additions and 14 deletions

View File

@ -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'

View File

@ -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(() =>

View File

@ -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,