feat!: add Svelte 5 runes compiler support

src/core/compilers/index.ts

@@ -11,6 +11,7 @@ import type { Compiler, CustomCompiler } from './types'
 import { Vue2Compiler } from './vue2'
 import { Vue3Compiler } from './vue3'
 import { WebComponentsCompiler } from './web-components'
+import { SvelteRunesCompiler } from './svelte-runes'
 
 export const compilers: Record<Exclude<ResolvedOptions['compiler'], CustomCompiler>, Compiler> = {
   'astro': AstroCompiler,
@@ -20,6 +21,7 @@ export const compilers: Record<Exclude<ResolvedOptions['compiler'], CustomCompil
   'raw': RawCompiler,
   'solid': SolidCompiler,
   'svelte': SvelteCompiler,
+  'svelte-runes': SvelteRunesCompiler,
   'vue2': Vue2Compiler,
   'vue3': Vue3Compiler,
   'web-components': WebComponentsCompiler,

src/core/compilers/svelte-runes.ts

@@ -0,0 +1,4 @@
+import type { Compiler } from './types'
+import { compileSvelte } from './svelte'
+
+export const SvelteRunesCompiler = ((svg: string) => compileSvelte(svg, true)) as Compiler

src/core/compilers/svelte.ts

@@ -1,13 +1,16 @@
 import type { Compiler } from './types'
 
-export const SvelteCompiler = ((svg: string) => {
+export const SvelteCompiler = ((svg: string) => compileSvelte(svg)) as Compiler
+
+export function compileSvelte(svg: string, runes = false) {
   const openTagEnd = svg.indexOf('>', svg.indexOf('<svg '))
   const closeTagStart = svg.lastIndexOf('</svg')
-  const openTag = `${svg.slice(0, openTagEnd)} {...$$props}>`
+  const openTag = `${svg.slice(0, openTagEnd)} {...${runes ? 'p' : '$$props'}}>`
   const content = `{@html \`${escapeSvelte(svg.slice(openTagEnd + 1, closeTagStart))}\`}`
   const closeTag = svg.slice(closeTagStart)
-  return `${openTag}${content}${closeTag}`
-}) as Compiler
+  const sfc = `${openTag}${content}${closeTag}`
+  return runes ? `<script>const{...p}=$props()</script>${sfc}` : sfc
+}
 
 // escape curlies, backtick, \t, \r, \n to avoid breaking output of {@html `here`} in .svelte
 export function escapeSvelte(str: string): string {

src/index.ts

@@ -36,6 +36,7 @@ const unplugin = createUnplugin<Options | undefined>((options = {}) => {
             case 'marko':
               return `${res}.marko`
             case 'svelte':
+            case 'svelte-runes':
               return `${res}.svelte`
             case 'solid':
               return `${res}.tsx`

src/types.ts

@@ -70,7 +70,7 @@ export interface Options {
    *
    * @default (detect automatically, fallback to 'vue3')
    */
-  compiler?: 'astro' | 'jsx' | 'marko' | 'none' | 'solid' | 'svelte' | 'raw' | 'vue2' | 'vue3' | 'web-components' | 'qwik' | CustomCompiler
+  compiler?: 'astro' | 'jsx' | 'marko' | 'none' | 'solid' | 'svelte' | 'svelte-runes' | 'raw' | 'vue2' | 'vue3' | 'web-components' | 'qwik' | CustomCompiler
 
   /**
    * JSX style, works only when compiler set to `jsx`