fix(compiler): fix expression codegen for literal const bindings in n…

…on-inline mode
vuejs · Apr 18, 2023 · 0f77a2b · 0f77a2b
1 parent 7f1b546
commit 0f77a2b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -549,7 +549,7 @@ describe('compiler: expression transform', () => {
 
     test('literal const handling， non-inline mode', () => {
       const { code } = compileWithBindingMetadata(`<div>{{ literal }}</div>`)
-      expect(code).toMatch(`toDisplayString(literal)`)
+      expect(code).toMatch(`toDisplayString($setup.literal)`)
       // #7973 should skip patch for literal const
       expect(code).not.toMatch(
         `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -197,13 +197,14 @@ export function processExpression(
         return genPropsAccessExp(bindingMetadata.__propsAliases![raw])
       }
     } else {
-      if (type && type.startsWith('setup')) {
+      if (
+        (type && type.startsWith('setup')) ||
+        type === BindingTypes.LITERAL_CONST
+      ) {
         // setup bindings in non-inline mode
         return `$setup.${raw}`
       } else if (type === BindingTypes.PROPS_ALIASED) {
         return `$props['${bindingMetadata.__propsAliases![raw]}']`
-      } else if (type === BindingTypes.LITERAL_CONST) {
-        return raw
       } else if (type) {
         return `$${type}.${raw}`
       }

diff --git a/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts b/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
@@ -202,4 +202,16 @@ describe('sfc hoist static', () => {
     })
     assertCode(content)
   })
+
+  test('template binding access in inline mode', () => {
+    const { content } = compile(
+      `
+    <script setup>
+    const foo = 'bar'
+    </script>
+    <template>{{ foo }}</template>
+    `
+    )
+    expect(content).toMatch('_toDisplayString(foo)')
+  })
 })