feat(sfc): support resolving template components from `<script setup>` exports

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 3bb9a83fd20f357f75be2018990f9abc34e3c9a6..1d93a0af86fadc03a9dc9f3a5e7a68ad854ccecb 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -244,7 +244,12 @@ export function resolveComponentType(
     return builtIn
   }
 
-  // 3. user component (resolve)
+  // 3. user component (from setup bindings)
+  if (context.bindingMetadata[tag] === 'setup') {
+    return `$setup[${JSON.stringify(tag)}]`
+  }
+
+  // 4. user component (resolve)
   context.helper(RESOLVE_COMPONENT)
   context.components.add(tag)
   return toValidAssetId(tag, `component`)

diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts
index 167b23d0b869fe194367e6caada66c9478186638..b94bee722c50267b0163c3c10ddbd64b588e2a95 100644 (file)
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -10,7 +10,12 @@ export const compilerOptions: CompilerOptions = reactive({
   hoistStatic: false,
   cacheHandlers: false,
   scopeId: null,
-  ssrCssVars: `{ color }`
+  ssrCssVars: `{ color }`,
+  bindingMetadata: {
+    TestComponent: 'setup',
+    foo: 'setup',
+    bar: 'props'
+  }
 })
 
 const App = {