feat(compiler): add marko compiler (#102)

src/core/compilers/index.ts

@@ -1,5 +1,6 @@
 import { ResolvedOptions } from '../../types'
 import { JSXCompiler } from './jsx'
+import { MarkoCompiler } from './marko'
 import { NoneCompiler } from './none'
 import { RawCompiler } from './raw'
 import { SolidCompiler } from './solid'
@@ -15,6 +16,7 @@ export const compilers: Record<ResolvedOptions['compiler'], Compiler> = {
   'solid': SolidCompiler,
   'svelte': SvelteCompiler,
   'jsx': JSXCompiler,
+  'marko': MarkoCompiler,
   'none': NoneCompiler,
   'raw': RawCompiler,
   'web-components': WebComponentsCompiler,

src/core/compilers/marko.ts

@@ -0,0 +1,20 @@
+import { Compiler } from './types'
+
+export const MarkoCompiler = <Compiler>((svg: string) => {
+  const openTagEnd = svg.indexOf('>', svg.indexOf('<svg '))
+  const closeTagStart = svg.lastIndexOf('</svg')
+  const openTag = `${svg.slice(0, openTagEnd)} ...input>`
+  const content = `$!{\`${escapeTemplateLiteral(svg.slice(openTagEnd, closeTagStart))}\`}`
+  const closeTag = svg.slice(closeTagStart)
+  return `${openTag}${content}${closeTag}`
+})
+
+export function escapeTemplateLiteral(str: string): string {
+  return str.replace(/\\.|[$`]/g, (m) => {
+    switch (m) {
+      case '$': return '&#36'
+      case '`': return '&#96;'
+      default: return m
+    }
+  })
+}

src/index.ts

@@ -14,14 +14,18 @@ const unplugin = createUnplugin<Options>((options = {}) => {
         const res = normalizeIconPath(id)
           .replace(/\.\w+$/i, '')
           .replace(/^\//, '')
-        const ext = options.compiler === 'jsx'
-          ? '.jsx'
-          : options.compiler === 'svelte'
-            ? '.svelte'
-            : options.compiler === 'solid'
-              ? '.tsx'
-              : ''
-        return res + ext
+        switch (options.compiler || '') {
+          case 'jsx':
+            return `${res}.jsx`
+          case 'svelte':
+            return `${res}.svelte`
+          case 'solid':
+            return `${res}.tsx`
+          case 'marko':
+            return `${res}.marko`
+          default:
+            return res
+        }
       }
       return null
     },

src/types.ts

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