Support mdsvex

Author: bluwy

docs/src/pages/docs/packages/whyframe-svelte.mdx

@@ -25,3 +25,10 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt
 - **Type:** `string | RegExp | (string | RegExp)[]`
 
 A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patterns, which specifies the files to be ignored by the plugin.
+
+### preprocess
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Whether to run `whyframe`'s Svelte transformation as a [preprocessor](https://svelte.dev/docs#compile-time-svelte-preprocess). This is only required when using a markup preprocessor that changes the Svelte syntax, e.g. [mdsvex](https://mdsvex.pngwn.io).

packages/svelte/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Bump dependencies
 - Refactor files for unit tests
+- Add `preprocess` option for `mdsvex` support
 
 ## 0.1.3 (2022-10-03)
 

packages/svelte/index.d.ts

@@ -3,6 +3,7 @@ import type { FilterPattern, Plugin } from 'vite'
 export interface Options {
   include?: FilterPattern
   exclude?: FilterPattern
+  preprocess?: boolean
 }
 
 export declare function whyframeSvelte(options?: Options): Plugin

packages/svelte/src/index.js

@@ -7,13 +7,18 @@ import { transform } from './shared.js'
 export function whyframeSvelte(options) {
   /** @type {import('@whyframe/core').Api} */
   let api
+  /** @type {any} */
+  let ctx
 
   const filter = createFilter(options?.include || /\.svelte$/, options?.exclude)
 
   /** @type {import('vite').Plugin} */
   const plugin = {
     name: 'whyframe:svelte',
     enforce: 'pre',
+    buildStart() {
+      ctx = this
+    },
     configResolved(c) {
       api = c.plugins.find((p) => p.name === 'whyframe:api')?.api
       if (!api) {
@@ -40,5 +45,19 @@ export function whyframeSvelte(options) {
     }
   }
 
+  if (options?.preprocess) {
+    // convert to vite-plugin-svelte's api so typescript etc are already preprocessed
+    const _transform = plugin.transform
+    delete plugin.transform
+    plugin.api = {
+      sveltePreprocess: {
+        markup({ content, filename }) {
+          // @ts-expect-error
+          return _transform.apply(ctx, [content, filename])
+        }
+      }
+    }
+  }
+
   return plugin
 }

playground/sveltekit/src/routes/docs/+page.svx

@@ -1,5 +1,9 @@
 # Markdown
 
-Ahoy
+<iframe data-why title="mdsvex">Works in mdsvex too!</iframe>
+
+Simply:
 
+```html
 <iframe data-why title="mdsvex">Works in mdsvex too!</iframe>
+```

playground/sveltekit/vite.config.js

@@ -12,7 +12,8 @@ export default defineConfig({
       components: [{ name: 'Story', showSource: true }]
     }),
     whyframeSvelte({
-      include: /\.(svelte|svx)$/
+      include: /\.(svelte|svx)$/,
+      preprocess: true // required for Svelte preprocessors that affect markup, e.g. mdsvex
     })
   ]
 })