refactor: modular plugins (#1145)

* wip: first steps

* wip: second day, getting a hang for it

* fix: don't destructure api

* mostly working, but hacky raw/direct need work

* ensure hotUpdate returns non-svelte modules, cleanup

* fix: load raw&svelte files ourselves to prevent vite asset middleware from turning them into a default export, reorder plugins

* heureka

* fixes for rolldown: remove duplicate optimizer setup and use svelte5 syntax to mount test app

* fix: add back .svelte optimizer extension, remove unused file

* chore: remove unused files & code

* chore: add changesets

* chore: add test for preprocessor transform order

* chore: fix rolldown-vite

* fix again

* docs: add section about vite-plugin-transforms for preprocessing svelte

* chore: deprecate plugin.api.sveltePreprocess

* refactor: remove advanced raw queries

* improve inspector plugin

* chore: improve regex and documentation for code normalization in hotUpdate

Author: dominikg

.changeset/fair-pets-crash.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+Remove experimental "advanced raw queries" feature. Basic `File.svelte?raw` is still supported.

.changeset/shiny-hats-move.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': patch
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+use vite environment api internally

.changeset/thirty-roses-tell.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+split preprocess and compile into separate plugins

.changeset/two-facts-sink.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+deprecate `plugin.api.sveltePreprocess`

docs/advanced-usage.md

@@ -7,6 +7,50 @@
 >
 > **Proceed with caution!**
 
+## transform svelte files with vite plugins
+
+vite-plugin-svelte uses 2 Vite plugins `vite-plugin-svelte:preprocess` and `vite-plugin-svelte:compile` to preprocess and compile input.
+The preprocess plugin uses `enforce: pre` but the compile plugin does not, giving you fine-grained control to add your own transforms
+
+```js
+function mySvelteTransform() {
+  const plugin = {
+    name: 'vite-plugin-my-svelte-transformer',
+    configResolved(c) {
+      // optional, use the exact same id filter as vite-plugin-svelte itself
+      const svelteIdFilter = c.plugins.find((p) => p.name === 'vite-plugin-svelte:config').api
+        .idFilter;
+      plugin.transform.filter.id = svelteIdFilter;
+    },
+    transform: {
+      // if you don't use vite-plugin-svelte's filter make sure to include your own here
+      filter: { id: /your id filter here/ },
+      async handler(code, id) {
+        const s = new MagicString(code);
+        // do your transforms with s
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: 'boundary', includeContent: false })
+        };
+      }
+    }
+  };
+  // To add your transform in the correct place use `enforce` and `transform.order`
+
+  // before preprocess
+  plugin.enforce = 'pre';
+  plugin.transform.order = 'pre';
+
+  // after preprocess but before compile
+  plugin.transform.order = 'pre'; // leave plugin.enforce undefined
+
+  // after compile
+  plugin.transform.order = 'post'; // leave plugin.enforce undefined
+
+  return plugin;
+}
+```
+
 ## custom queries
 
 Vite supports using query parameters to request different outcomes for the same file.
@@ -19,103 +63,3 @@ The following schemes are supported by vite-plugin-svelte:
 //get .svelte file content as a string
 import content from 'File.svelte?raw';
 ```
-
-### experimental
-
-In addition to the plain .svelte source content, you can use special svelte queries.
-
-> These svelte subqueries are experimental, availability, syntax and output format may change
-
-#### raw&svelte
-
-```js
-//get output of svelte.preprocess code as string
-import preprocessed from 'File.svelte?raw&svelte&type=preprocessed';
-```
-
-```js
-//get output of svelte.compile js.code as string
-import script from 'File.svelte?raw&svelte&type=script';
-```
-
-```js
-//get output of svelte.compile css.code as string
-import style from 'File.svelte?raw&svelte&type=style';
-```
-
-##### detail exports
-
-raw&svelte exports code string as default export, but also offers named exports if you need details
-
-```js
-//get output of svelte.preprocess
-import { code, map, dependencies } from 'File.svelte?raw&svelte&type=preprocessed';
-```
-
-```js
-//get output of svelte.compile js
-import { code, map, dependencies } from 'File.svelte?raw&svelte&type=script';
-```
-
-```js
-//get output of svelte.compile css
-import { code, map, dependencies } from 'File.svelte?raw&svelte&type=style';
-```
-
-```js
-//get everything in one go
-import * as all from 'File.svelte?raw&svelte&type=all';
-import {
-  source,
-  preprocessed,
-  dependencies,
-  js,
-  css,
-  ast,
-  normalizedFilename,
-  ssr,
-  lang,
-  warnings,
-  stats
-} from 'File.svelte?raw&svelte&type=all';
-```
-
-#### direct&svelte
-
-```html
-<!-- load and execute component script -->
-<script type="application/javascript" src="File.svelte?direct&svelte&type=script&lang.js" />
-<!-- embed component style as css -->
-<link rel="stylesheet" type="text/css" href="File.svelte?direct&svelte&type=style&lang.css" />
-```
-
-#### sourcemap
-
-add `&sourcemap` to `?(raw|direct)&svelte&type=(script|style|all)` queries to include sourcemaps (inline for direct)
-
-#### compilerOptions
-
-?raw and ?direct use default compilerOptions, even if you have different values in your svelte.config.js:
-
-```js
-const compilerOptions = {
-  dev: false,
-  generate: 'client',
-  css: 'external'
-};
-```
-
-to get output with different compilerOptions, append them as json like this:
-
-```js
-//get ssr output of svelte.compile js as {code, map, dependencies}
-import script from 'File.svelte?raw&svelte&type=script&compilerOptions={"generate":"server"}';
-```
-
-only a subset of compilerOptions is supported
-
-- generate
-- dev
-- css
-- customElement
-- immutable

docs/faq.md

@@ -82,19 +82,7 @@ However, `cssHash` is respected in production builds as HMR is a dev-only featur
 
 ### How do I add a Svelte preprocessor from a Vite plugin?
 
-If you are building a Vite plugin that transforms CSS or JS, you can add a `api.sveltePreprocess: PreprocessorGroup` to your Vite plugin definition and it will be added to the list of Svelte preprocessors used at runtime.
-
-```js
-const vitePluginCoolCss = {
-  name: 'vite-plugin-coolcss',
-  api: {
-    sveltePreprocess: {
-      /* your PreprocessorGroup here */
-    }
-  }
-  /*... your cool css plugin implementation here .. */
-};
-```
+You don't have to anymore. See [advanced usage](advanced-usage.md) for examples how to put transform hooks before or after Svelte preprocess or compile
 
 ### What is going on with Vite and `Pre-bundling dependencies:`?
 

packages/e2e-tests/autoprefixer-browerslist/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/configfile-custom/svelte.config.ts

@@ -0,0 +1,2 @@
+console.log('default svelte config loaded');
+export default {};