fix(sfc): allow variables that start with _ or $ in <script setup>
This commit is contained in:
Evan You
parent
63e9e2e9aa
commit
0b8b576428
@ -33,27 +33,6 @@ return { x }
|
|||||||
export const n = 1"
|
export const n = 1"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`SFC compile <script setup> <template inherit-attrs="false"> 1`] = `
|
|
||||||
"
|
|
||||||
const __default__ = {}
|
|
||||||
__default__.inheritAttrs = false
|
|
||||||
export default __default__"
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`SFC compile <script setup> <template inherit-attrs="false"> 2`] = `
|
|
||||||
"export default {
|
|
||||||
expose: [],
|
|
||||||
inheritAttrs: false,
|
|
||||||
setup(__props) {
|
|
||||||
|
|
||||||
const a = 1
|
|
||||||
|
|
||||||
return { a }
|
|
||||||
}
|
|
||||||
|
|
||||||
}"
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`SFC compile <script setup> defineEmit() (deprecated) 1`] = `
|
exports[`SFC compile <script setup> defineEmit() (deprecated) 1`] = `
|
||||||
"export default {
|
"export default {
|
||||||
expose: [],
|
expose: [],
|
||||||
|
|||||||
@ -946,7 +946,9 @@ export function compileScript(
|
|||||||
allBindings[key] = true
|
allBindings[key] = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
returned = `{ ${Object.keys(allBindings).join(', ')} }`
|
returned = `{ ${Object.keys(allBindings).join(', ')}${
|
||||||
|
__TEST__ ? `` : `, __isScriptSetup: true`
|
||||||
|
} }`
|
||||||
}
|
}
|
||||||
s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
|
s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
|
||||||
|
|
||||||
|
|||||||
@ -272,6 +272,19 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// prioritize <script setup> bindings during dev.
|
||||||
|
// this allows even properties that start with _ or $ to be used - so that
|
||||||
|
// it aligns with the production behavior where the render fn is inlined and
|
||||||
|
// indeed has access to all declared variables.
|
||||||
|
if (
|
||||||
|
__DEV__ &&
|
||||||
|
setupState !== EMPTY_OBJ &&
|
||||||
|
setupState.__isScriptSetup &&
|
||||||
|
hasOwn(setupState, key)
|
||||||
|
) {
|
||||||
|
return setupState[key]
|
||||||
|
}
|
||||||
|
|
||||||
// data / props / ctx
|
// data / props / ctx
|
||||||
// This getter gets called for every property access on the render context
|
// This getter gets called for every property access on the render context
|
||||||
// during render and is a major hotspot. The most expensive part of this
|
// during render and is a major hotspot. The most expensive part of this
|
||||||
@ -526,7 +539,7 @@ export function exposeSetupStateOnRenderContext(
|
|||||||
) {
|
) {
|
||||||
const { ctx, setupState } = instance
|
const { ctx, setupState } = instance
|
||||||
Object.keys(toRaw(setupState)).forEach(key => {
|
Object.keys(toRaw(setupState)).forEach(key => {
|
||||||
if (key[0] === '$' || key[0] === '_') {
|
if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
|
||||||
warn(
|
warn(
|
||||||
`setup() return property ${JSON.stringify(
|
`setup() return property ${JSON.stringify(
|
||||||
key
|
key
|
||||||
|
|||||||
@ -1,50 +1,3 @@
|
|||||||
<template>
|
|
||||||
<nav>
|
|
||||||
<h1>
|
|
||||||
<img alt="logo" src="/logo.svg">
|
|
||||||
<span>Vue SFC Playground</span>
|
|
||||||
</h1>
|
|
||||||
<div class="links">
|
|
||||||
<div class="version" @click.stop>
|
|
||||||
<span class="active-version" @click="toggle">
|
|
||||||
Version: {{ activeVersion }}
|
|
||||||
</span>
|
|
||||||
<ul class="versions" :class="{ expanded }">
|
|
||||||
<li v-if="!publishedVersions"><a>loading versions...</a></li>
|
|
||||||
<li v-for="version of publishedVersions">
|
|
||||||
<a @click="setVueVersion(version)">v{{ version }}</a>
|
|
||||||
</li>
|
|
||||||
<li><a @click="resetVueVersion">This Commit ({{ currentCommit }})</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">Commits History</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<button class="share" @click="copyLink">
|
|
||||||
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
|
|
||||||
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<circle cx="18" cy="5" r="3"/>
|
|
||||||
<circle cx="6" cy="12" r="3"/>
|
|
||||||
<circle cx="18" cy="19" r="3"/>
|
|
||||||
<path d="M8.59 13.51l6.83 3.98"/>
|
|
||||||
<path d="M15.41 6.51l-6.82 3.98"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button class="download" @click="downloadProject">
|
|
||||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
|
|
||||||
<g fill="#626262">
|
|
||||||
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
|
|
||||||
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
|
|
||||||
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
|
|
||||||
<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"/>
|
|
||||||
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { downloadProject } from './download/download'
|
import { downloadProject } from './download/download'
|
||||||
@ -100,6 +53,54 @@ async function fetchVersions(): Promise<string[]> {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav>
|
||||||
|
<h1>
|
||||||
|
<img alt="logo" src="/logo.svg">
|
||||||
|
<span>Vue SFC Playground</span>
|
||||||
|
</h1>
|
||||||
|
<div class="links">
|
||||||
|
<div class="version" @click.stop>
|
||||||
|
<span class="active-version" @click="toggle">
|
||||||
|
Version: {{ activeVersion }}
|
||||||
|
</span>
|
||||||
|
<ul class="versions" :class="{ expanded }">
|
||||||
|
<li v-if="!publishedVersions"><a>loading versions...</a></li>
|
||||||
|
<li v-for="version of publishedVersions">
|
||||||
|
<a @click="setVueVersion(version)">v{{ version }}</a>
|
||||||
|
</li>
|
||||||
|
<li><a @click="resetVueVersion">This Commit ({{ currentCommit }})</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="https://app.netlify.com/sites/vue-sfc-playground/deploys" target="_blank">Commits History</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button class="share" @click="copyLink">
|
||||||
|
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
|
||||||
|
<g fill="none" stroke="#626262" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="18" cy="5" r="3"/>
|
||||||
|
<circle cx="6" cy="12" r="3"/>
|
||||||
|
<circle cx="18" cy="19" r="3"/>
|
||||||
|
<path d="M8.59 13.51l6.83 3.98"/>
|
||||||
|
<path d="M15.41 6.51l-6.82 3.98"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="download" @click="downloadProject">
|
||||||
|
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
|
||||||
|
<g fill="#626262">
|
||||||
|
<rect x="4" y="18" width="16" height="2" rx="1" ry="1"/>
|
||||||
|
<rect x="3" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 5 18)"/>
|
||||||
|
<rect x="17" y="17" width="4" height="2" rx="1" ry="1" transform="rotate(-90 19 18)"/>
|
||||||
|
<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"/>
|
||||||
|
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
nav {
|
nav {
|
||||||
height: var(--nav-height);
|
height: var(--nav-height);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user