fix(addons): avoid transforming wrong composables

Fixes #407

Author: harlan-zw

examples/vite-ssr-vue/src/pages/transform.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { useHead, useSeoMeta } from "@unhead/vue";
+
+useHead({ title: 'foo' });
+useSeoMeta({ description: 'bar' });
+</script>
+<template>
+<div>transform</div>
+</template>

examples/vite-ssr-vue/vite.config.js

@@ -3,6 +3,7 @@ import vuePlugin from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import AutoImport from 'unplugin-auto-import/vite'
 import { unheadVueComposablesImports } from '@unhead/vue'
+import UnheadPlugin from '@unhead/addons/vite'
 
 const virtualFile = '@virtual-file'
 const virtualId = `\0${virtualFile}`
@@ -24,6 +25,7 @@ export default defineConfig(({ command, ssrBuild }) => ({
         unheadVueComposablesImports,
       ],
     }),
+    UnheadPlugin(),
     vuePlugin(),
     vueJsx(),
     {

packages/addons/src/unplugin/UseSeoMetaTransform.ts

@@ -77,8 +77,10 @@ export const UseSeoMetaTransform = createUnplugin<UseSeoMetaTransformOptions, fa
       const importNames: Record<string, string> = {}
       for (const i of statements.flatMap(i => parseStaticImport(i))) {
         if (i.namedImports) {
-          for (const key in i.namedImports)
-            importNames[i.namedImports[key]] = key
+          for (const key in i.namedImports) {
+            if (key === 'useSeoMeta' || key === 'useServerSeoMeta')
+              importNames[i.namedImports[key]] = key
+          }
         }
         // note: namespaced imports are not supported
       }

test/addons/useSeoMetaTransform.test.ts

@@ -179,10 +179,9 @@ describe('useSeoMetaTransform', () => {
     ])
     expect(code).toBeDefined()
     expect(code).toMatchInlineSnapshot(`
-      "import { useSeoMeta as usm, useHead } from 'unhead'
-      useHead({
-        title: 'test',
-      })
+      "import { useHead } from 'unhead'
+      import { useSeoMeta as usm, useHead } from 'unhead'
+      useHead({ title: 'test', })
       useHead({
         meta: [
           { name: 'description', content: 'World' },
@@ -233,7 +232,9 @@ describe('useSeoMetaTransform', () => {
     ])
     expect(code).toBeDefined()
     expect(code).toMatchInlineSnapshot(`
-      "import { useServerSeoMeta, useServerHead, useHead, SomethingRandom } from 'unhead'
+      "import { useHead } from 'unhead'
+      import { useServerHead } from 'unhead'
+      import { useServerSeoMeta, useServerHead, useHead, SomethingRandom } from 'unhead'
       useHead({
         title: 'Hello',
       });
@@ -522,4 +523,79 @@ export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render],
     expect(code).match(/useServerHead/)
     expect(code).match(/title:/)
   })
+
+  it('#407', async () => {
+    const code = await transform(`
+import { defineComponent as _defineComponent } from "vue";
+import { useHead, useSeoMeta } from "@unhead/vue";
+
+const _sfc_main = /* @__PURE__ */ _defineComponent({
+  __name: "app",
+  setup(__props, { expose }) {
+    expose();
+    useHead({ title: 'test' });
+    useSeoMeta({ description: 'foo' });
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});`, 'app.js')
+
+    expect(code).toBeDefined()
+    expect(code).toMatchInlineSnapshot(`
+      "import { useHead } from '@unhead/vue'
+
+      import { defineComponent as _defineComponent } from "vue";
+      import { useHead, useSeoMeta } from "@unhead/vue";
+
+      const _sfc_main = /* @__PURE__ */ _defineComponent({
+        __name: "app",
+        setup(__props, { expose }) {
+          expose();
+          useHead({ title: 'test' });
+          useHead({
+        meta: [
+          { name: 'description', content: 'foo' },
+        ]
+      });
+          Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+          return __returned__;
+        }
+      });"
+    `)
+  })
+
+  it('alt import as name', async () => {
+    const code = await transform(`
+import { defineComponent as _defineComponent } from "vue";
+import { useSeoMeta as SEOMETA } from "@unhead/vue";
+
+const _sfc_main = /* @__PURE__ */ _defineComponent({
+  __name: "app",
+  setup(__props, { expose }) {
+    expose();
+    SEOMETA({});
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});`, 'app.js')
+
+    expect(code).toBeDefined()
+    expect(code).toMatchInlineSnapshot(`
+      "import { useHead } from '@unhead/vue'
+
+      import { defineComponent as _defineComponent } from "vue";
+      import { useSeoMeta as SEOMETA } from "@unhead/vue";
+
+      const _sfc_main = /* @__PURE__ */ _defineComponent({
+        __name: "app",
+        setup(__props, { expose }) {
+          expose();
+          useHead({
+      });
+          Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+          return __returned__;
+        }
+      });"
+    `)
+  })
 })