fix(sfc): allow variables that start with _ or $ in `<script setup>`

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

@@ -33,27 +33,6 @@ return { x }
       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`] = `
 "export default {
   expose: [],

packages/compiler-sfc/src/compileScript.ts

@@ -946,7 +946,9 @@ export function compileScript(
         allBindings[key] = true
       }
     }
-    returned = `{ ${Object.keys(allBindings).join(', ')} }`
+    returned = `{ ${Object.keys(allBindings).join(', ')}${
+      __TEST__ ? `` : `, __isScriptSetup: true`
+    } }`
   }
   s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
 

packages/runtime-core/src/componentPublicInstance.ts

@@ -272,6 +272,19 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       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
     // 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
@@ -526,7 +539,7 @@ export function exposeSetupStateOnRenderContext(
 ) {
   const { ctx, setupState } = instance
   Object.keys(toRaw(setupState)).forEach(key => {
-    if (key[0] === '$' || key[0] === '_') {
+    if (!setupState.__isScriptSetup && (key[0] === '$' || key[0] === '_')) {
       warn(
         `setup() return property ${JSON.stringify(
           key

packages/sfc-playground/src/Header.vue

@@ -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">
 import { downloadProject } from './download/download'
@@ -100,6 +53,54 @@ async function fetchVersions(): Promise<string[]> {
 }
 </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>
 nav {
   height: var(--nav-height);