feat!: add Svelte 5 runes compiler support (#347)

unplugin · May 1, 2024 · 4420eb2 · 4420eb2
1 parent a9d0f4a
commit 4420eb2
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/src/core/compilers/svelte.ts b/src/core/compilers/svelte.ts
@@ -1,12 +1,28 @@
 import type { Compiler } from './types'
 
-export const SvelteCompiler = ((svg: string) => {
+let svelteRunes: boolean | null
+
+export const SvelteCompiler = (async (svg: string) => {
+  if (svelteRunes == null) {
+    try {
+      // @ts-expect-error we don't have svelte as dependency
+      const { VERSION } = await import('svelte/compiler')
+      svelteRunes = Number(VERSION.split('.')[0]) >= 5
+    }
+    catch {
+      svelteRunes = false
+    }
+  }
   const openTagEnd = svg.indexOf('>', svg.indexOf('<svg '))
   const closeTagStart = svg.lastIndexOf('</svg')
-  const openTag = `${svg.slice(0, openTagEnd)} {...$$props}>`
-  const content = `{@html \`${escapeSvelte(svg.slice(openTagEnd + 1, closeTagStart))}\`}`
-  const closeTag = svg.slice(closeTagStart)
-  return `${openTag}${content}${closeTag}`
+  let sfc = `${svg.slice(0, openTagEnd)} {...${svelteRunes ? 'p' : '$$props'}}>`
+  if (svelteRunes)
+    sfc += svg.slice(openTagEnd + 1, closeTagStart)
+  else
+    sfc += `{@html \`${escapeSvelte(svg.slice(openTagEnd + 1, closeTagStart))}\`}`
+
+  sfc += svg.slice(closeTagStart)
+  return svelteRunes ? `<script>const{...p}=$props()</script>${sfc}` : sfc
 }) as Compiler
 
 // escape curlies, backtick, \t, \r, \n to avoid breaking output of {@html `here`} in .svelte