Skip to content

Commit 0b8b576

Browse files
yyx990803yyx990803
committed
fix(sfc): allow variables that start with _ or $ in <script setup> 
1 parent 63e9e2e commit 0b8b576

File tree

4 files changed

+65
-70
lines changed

4 files changed

+65
-70
lines changed

‎packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

-21
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,6 @@ return { x }
3333
export const n = 1"
3434
`;
3535
36-
exports[`SFC compile <script setup> <template inherit-attrs="false"> 1`] = `
37-
"
38-
const __default__ = {}
39-
__default__.inheritAttrs = false
40-
export default __default__"
41-
`;
42-
43-
exports[`SFC compile <script setup> <template inherit-attrs="false"> 2`] = `
44-
"export default {
45-
expose: [],
46-
inheritAttrs: false,
47-
setup(__props) {
48-
49-
const a = 1
50-
51-
return { a }
52-
}
53-
54-
}"
55-
`;
56-
5736
exports[`SFC compile <script setup> defineEmit() (deprecated) 1`] = `
5837
"export default {
5938
expose: [],

‎packages/compiler-sfc/src/compileScript.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -946,7 +946,9 @@ export function compileScript(
946946
allBindings[key] = true
947947
}
948948
}
949-
returned = `{ ${Object.keys(allBindings).join(', ')} }`
949+
returned = `{ ${Object.keys(allBindings).join(', ')}${
950+
__TEST__ ? `` : `, __isScriptSetup: true`
951+
} }`
950952
}
951953
s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
952954

‎packages/runtime-core/src/componentPublicInstance.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,19 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
272272
return true
273273
}
274274

275+
// prioritize <script setup> bindings during dev.
276+
// this allows even properties that start with _ or $ to be used - so that
277+
// it aligns with the production behavior where the render fn is inlined and
278+
// indeed has access to all declared variables.
279+
if (
280+
__DEV__ &&
281+
setupState !== EMPTY_OBJ &&
282+
setupState.__isScriptSetup &&
283+
hasOwn(setupState, key)
284+
) {
285+
return setupState[key]
286+
}
287+
275288
// data / props / ctx
276289
// This getter gets called for every property access on the render context
277290
// during render and is a major hotspot. The most expensive part of this
@@ -526,7 +539,7 @@ export function exposeSetupStateOnRenderContext(
526539
) {
527540
const { ctx, setupState } = instance
528541
Object.keys(toRaw(setupState)).forEach(key => {
529-
if (key[0] === '$' || key[0] === '_') {
542+
if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
530543
warn(
531544
`setup() return property ${JSON.stringify(
532545
key

‎packages/sfc-playground/src/Header.vue

+48-47
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,3 @@
1-
<template>
2-
<nav>
3-
<h1>
4-
<img alt="logo" src="/logo.svg">
5-
<span>Vue SFC Playground</span>
6-
</h1>
7-
<div class="links">
8-
<div class="version" @click.stop>
9-
<span class="active-version" @click="toggle">
10-
Version: {{ activeVersion }}
11-
</span>
12-
<ul class="versions" :class="{ expanded }">
13-
<li v-if="!publishedVersions"><a>loading versions...</a></li>
14-
<li v-for="version of publishedVersions">
15-
<a @click="setVueVersion(version)">v{{ version }}</a>
16-
</li>
17-
<li><a @click="resetVueVersion">This Commit ({{ currentCommit }})</a></li>
18-
<li>
19-
<a href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">Commits History</a>
20-
</li>
21-
</ul>
22-
</div>
23-
<button class="share" @click="copyLink">
24-
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
25-
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
26-
<circle cx="18" cy="5" r="3"/>
27-
<circle cx="6" cy="12" r="3"/>
28-
<circle cx="18" cy="19" r="3"/>
29-
<path d="M8.59 13.51l6.83 3.98"/>
30-
<path d="M15.41 6.51l-6.82 3.98"/>
31-
</g>
32-
</svg>
33-
</button>
34-
<button class="download" @click="downloadProject">
35-
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
36-
<g fill="#626262">
37-
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
38-
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
39-
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
40-
<path d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"/>
41-
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
42-
</g>
43-
</svg>
44-
</button>
45-
</div>
46-
</nav>
47-
</template>
481

492
<script setup lang="ts">
503
import { downloadProject } from './download/download'
@@ -100,6 +53,54 @@ async function fetchVersions(): Promise<string[]> {
10053
}
10154
</script>
10255

56+
<template>
57+
<nav>
58+
<h1>
59+
<img alt="logo" src="/logo.svg">
60+
<span>Vue SFC Playground</span>
61+
</h1>
62+
<div class="links">
63+
<div class="version" @click.stop>
64+
<span class="active-version" @click="toggle">
65+
Version: {{ activeVersion }}
66+
</span>
67+
<ul class="versions" :class="{ expanded }">
68+
<li v-if="!publishedVersions"><a>loading versions...</a></li>
69+
<li v-for="version of publishedVersions">
70+
<a @click="setVueVersion(version)">v{{ version }}</a>
71+
</li>
72+
<li><a @click="resetVueVersion">This Commit ({{ currentCommit }})</a></li>
73+
<li>
74+
<a href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">Commits History</a>
75+
</li>
76+
</ul>
77+
</div>
78+
<button class="share" @click="copyLink">
79+
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
80+
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
81+
<circle cx="18" cy="5" r="3"/>
82+
<circle cx="6" cy="12" r="3"/>
83+
<circle cx="18" cy="19" r="3"/>
84+
<path d="M8.59 13.51l6.83 3.98"/>
85+
<path d="M15.41 6.51l-6.82 3.98"/>
86+
</g>
87+
</svg>
88+
</button>
89+
<button class="download" @click="downloadProject">
90+
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
91+
<g fill="#626262">
92+
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
93+
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
94+
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
95+
<path d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"/>
96+
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
97+
</g>
98+
</svg>
99+
</button>
100+
</div>
101+
</nav>
102+
</template>
103+
103104
<style>
104105
nav {
105106
height: var(--nav-height);

0 commit comments

Comments
 (0)