fix(compiler-sfc): ensure props bindings register before compiling template (#13922)

close #13920

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index 784ff1bf186fddce25a46195dce46ed61b8c91d7..3cc6c173557e7dc84dfc5a91a9f52a1415acb4fc 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
@@ -12,6 +12,27 @@ export function render(_ctx, _cache) {
 }"
 `;
 
+exports[`prefixing props edge case in inline mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock } from "vue"
+
+
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    Foo: { type: Object, required: true }
+  },
+  setup(__props: any) {
+
+    
+  
+return (_ctx: any,_cache: any) => {
+  return (_openBlock(), _createBlock(_unref(__props["Foo"]).Bar))
+}
+}
+
+})"
+`;
+
 exports[`should not hoist srcset URLs in SSR mode 1`] = `
 "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
 import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"

diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index 81cf75a912d57710e29985c79fc6b2a866dbbde3..f9d0807d51d3fdea44b8eb4e97b8d1295577973d 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -512,3 +512,22 @@ test('non-identifier expression in legacy filter syntax', () => {
     babelParse(compilationResult.code, { sourceType: 'module' })
   }).not.toThrow()
 })
+
+test('prefixing props edge case in inline mode', () => {
+  const src = `
+  <script setup lang="ts">
+    defineProps<{ Foo: { Bar: unknown } }>()
+  </script>
+  <template>
+    <Foo.Bar/>
+  </template>
+  `
+  const { descriptor } = parse(src)
+  const { content } = compileScript(descriptor, {
+    id: 'xxx',
+    inlineTemplate: true,
+  })
+
+  expect(content).toMatchSnapshot()
+  expect(content).toMatch(`__props["Foo"]).Bar`)
+})

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index cbd4abdf71a2213e4f30f6c3f1bd9444987b48fe..de7deded7e567f073f3d1c8fb45d512893711f71 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -833,6 +833,8 @@ export function compileScript(
   let templateMap
   // 9. generate return statement
   let returned
+  // ensure props bindings register before compile template in inline mode
+  const propsDecl = genRuntimeProps(ctx)
   if (
     !options.inlineTemplate ||
     (!sfc.template && ctx.hasDefaultExportRender)
@@ -965,7 +967,6 @@ export function compileScript(
     runtimeOptions += `\n  __ssrInlineRender: true,`
   }
 
-  const propsDecl = genRuntimeProps(ctx)
   if (propsDecl) runtimeOptions += `\n  props: ${propsDecl},`
 
   const emitsDecl = genRuntimeEmits(ctx)