fix: normalize Vue Vite import paths on Windows (#207)

Author: farnabaz

packages/comark-vue/src/vite.ts

@@ -7,6 +7,10 @@ import { existsSync } from 'node:fs'
 
 const runtimeDir = fileURLToPath(new URL('./utils', import.meta.url))
 
+function toImportPath(filePath: string): string {
+  return filePath.replace(/\\/g, '/')
+}
+
 function viteComarkSlot(node: ElementNode, context: TransformContext) {
   const isVueSlotWithUnwrap =
     node.tag === 'slot' &&
@@ -39,7 +43,7 @@ function viteComarkSlot(node: ElementNode, context: TransformContext) {
       if (!context.imports.some((i) => String(i.exp) === importExp)) {
         context.imports.push({
           exp: importExp,
-          path: `${runtimeDir}/${context.ssr ? 'ssrSlot' : 'slot'}`,
+          path: `${toImportPath(runtimeDir)}/${context.ssr ? 'ssrSlot' : 'slot'}`,
         })
       }
     }
@@ -84,7 +88,7 @@ function generateComponentsModule(files: string[]): string {
 
   const lines: string[] = []
   for (let i = 0; i < files.length; i++) {
-    lines.push(`import __comp_${i} from ${JSON.stringify(files[i]!.replace(/\\/g, '/'))}`)
+    lines.push(`import __comp_${i} from ${JSON.stringify(toImportPath(files[i]!))}`)
   }
   lines.push('')
   lines.push('export default {')

packages/comark-vue/test/vite.test.ts

@@ -0,0 +1,61 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+afterEach(() => {
+  vi.resetModules()
+  vi.doUnmock('node:url')
+})
+
+describe('@comark/vue vite plugin', () => {
+  it('normalizes injected runtime import paths to forward slashes on Windows', async () => {
+    vi.doMock('node:url', async () => {
+      const actual = await vi.importActual<typeof import('node:url')>('node:url')
+      return {
+        ...actual,
+        fileURLToPath: () => String.raw`D:\Code\gqt\packages\comark-vue\src\utils`,
+      }
+    })
+
+    const { default: comark } = await import('../src/vite.ts')
+    const plugin = comark()
+    const vueOptions: Record<string, any> = {}
+
+    plugin.configResolved?.({
+      root: '/repo',
+      plugins: [
+        {
+          name: 'vite:vue',
+          api: {
+            options: vueOptions,
+          },
+        },
+      ],
+    } as any)
+
+    const transform = vueOptions.template.compilerOptions.nodeTransforms[0]
+
+    function transformSlotOutlet(node: Record<string, any>) {
+      node.codegenNode = { callee: 'renderSlot' }
+    }
+
+    const node = {
+      tag: 'slot',
+      props: [{ name: 'unwrap' }],
+    }
+
+    const context = {
+      ssr: false,
+      nodeTransforms: [transformSlotOutlet],
+      imports: [],
+    }
+
+    const run = transform(node, context)
+    run?.()
+
+    expect(node.codegenNode.callee).toBe('_renderComarkSlot')
+    expect(context.imports).toHaveLength(1)
+    expect(context.imports[0]).toMatchObject({
+      exp: '{ renderSlot as _renderComarkSlot }',
+      path: 'D:/Code/gqt/packages/comark-vue/src/utils/slot',
+    })
+  })
+})