refactor: modular plugins

.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 {};

packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts

@@ -1,4 +1,4 @@
-import { browserLogs, fetchFromPage, getText, isBuild, testDir } from '~utils';
+import { browserLogs, getText, isBuild, testDir } from '~utils';
 import { createServer, ViteDevServer } from 'vite';
 import { VERSION } from 'svelte/compiler';
 
@@ -22,114 +22,6 @@ describe('raw', () => {
 const result = await getText('#raw');
 await expect(result).toMatchFileSnapshot(snapshotFilename('raw'));
 });
-
-test('Dummy.svelte?raw&svelte&type=preprocessed', async () => {
-const result = await getText('#preprocessed');
-await expect(result).toMatchFileSnapshot(snapshotFilename('preprocessed'));
-});
-
-test('Dummy.svelte?raw&svelte&type=script', async () => {
-const result = await getText('#script');
-expect(result).toContain('export default function Dummy');
-});
-
-test('Dummy.svelte?raw&svelte&type=script&compilerOptions={"customElement":true}', async () => {
-const result = await getText('#wcScript');
-expect(result).toContain('$.create_custom_element(Dummy,');
-});
-
-test('Dummy.svelte?raw&svelte&type=style', async () => {
-const result = await getText('#style');
-await expect(result).toMatchFileSnapshot(snapshotFilename('style'));
-});
-
-test('Dummy.svelte?raw&svelte&type=all&sourcemap', async () => {
-const result = JSON.parse(await getText('#all'));
-expect(result.ast).toBeDefined();
-expect(result.js).toBeDefined();
-expect(result.js.code).toBeDefined();
-expect(result.js.map).toBeDefined();
-expect(result.css).toBeDefined();
-expect(result.css.code).toBeDefined();
-expect(result.css.map).toBeDefined();
-expect(result.preprocessed).toBeDefined();
-expect(result.preprocessed.code).toBeDefined();
-expect(result.preprocessed.map).toBeDefined();
-});
-
-describe.runIf(!isBuild)('mixed exports', () => {
-test('Dummy.svelte?raw&svelte&type=preprocessed', async () => {
-const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=preprocessed').then(
-(res) => res.text()
-);
-expect(module).toContain('export const code="<script lang=\\"ts\\">');
-expect(module).toContain('export const map={');
-expect(module).toContain('export const dependencies=[]');
-expect(module).toContain('export default code');
-});
-test('Dummy.svelte?raw&svelte&type=style', async () => {
-const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=style').then((res) =>
-res.text()
-);
-expect(module).toContain('export const code="button.');
-expect(module).toContain('export const hasGlobal=false');
-expect(module).toContain('export const map={');
-expect(module).toContain('export default code');
-});
-test('Dummy.svelte?raw&svelte&type=script', async () => {
-const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=script').then((res) =>
-res.text()
-);
-expect(module).toContain('export const code="import');
-expect(module).toContain('export const map={');
-expect(module).toContain('export default code');
-});
-test('Dummy.svelte?raw&svelte&type=all', async () => {
-const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=all').then((res) =>
-res.text()
-);
-expect(module).toContain('export const ast={"html":');
-expect(module).toContain('export const css={"code":"button');
-expect(module).toContain('export const dependencies=[]');
-expect(module).toContain('export const js={"code":"import ');
-expect(module).toContain('export const lang="ts"');
-expect(module).toContain('export const metadata={"runes":false}');
-expect(module).toContain('export const normalizedFilename="/src/Dummy.svelte"');
-expect(module).toContain('export const preprocessed={"code":"<script lang=\\"ts\\">');
-expect(module).toContain('export const source="<script lang=\\"ts\\">');
-expect(module).toContain('export const ssr=false');
-expect(module).toContain('export const warnings=[]');
-});
-});
-});
-
-describe.runIf(!isBuild)('direct', () => {
-test('Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css', async () => {
-const response = await fetchFromPage(
-'src/Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css',
-{
-headers: { Accept: 'text/css' }
-}
-);
-expect(response.ok).toBe(true);
-expect(response.headers.get('Content-Type')).toBe('text/css');
-const css = await response.text();
-expect(css).toContain('button.');
-expect(css).toContain('/*# sourceMappingURL=data');
-});
-test('Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js', async () => {
-const response = await fetchFromPage(
-'src/Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js',
-{
-headers: { Accept: 'text/javascript' }
-}
-);
-expect(response.ok).toBe(true);
-expect(response.headers.get('Content-Type')).toMatch(/^(?:text|application)\/javascript$/);
-const js = await response.text();
-expect(js).toContain('export default function Dummy');
-expect(js).toContain('//# sourceMappingURL=data');
-});
 });
 
 describe.runIf(!isBuild)('ssrLoadModule', () => {
@@ -158,29 +50,4 @@ describe.runIf(!isBuild)('ssrLoadModule', () => {
 const result = await ssrLoadDummy('?raw');
 await expect(result).toMatchFileSnapshot(snapshotFilename('ssr-raw'));
 });
-test('?raw&svelte&type=preprocessed', async () => {
-const result = await ssrLoadDummy('?raw&svelte&type=preprocessed');
-await expect(result).toMatchFileSnapshot(snapshotFilename('ssr-preprocessed'));
-});
-test('?raw&svelte&type=script', async () => {
-const result = await ssrLoadDummy('?raw&svelte&type=script');
-expect(result).toContain('export default function Dummy');
-});
-test('?raw&svelte&type=script&compilerOptions={"customElement":true}', async () => {
-const result = await ssrLoadDummy(
-'?raw&svelte&type=script&compilerOptions={"customElement":true}'
-);
-expect(result).toContain('$.create_custom_element(Dummy,');
-});
-test('?raw&svelte&type=style', async () => {
-const result = await ssrLoadDummy('?raw&svelte&type=style');
-expect(result).toContain('button.');
-});
-test('?inline&svelte&type=style&lang.css', async () => {
-// Preload Dummy.svelte first so its CSS is processed in the module graph, otherwise loading
-// its css inlined url directly will return the raw svelte file rather than the style
-await ssrLoadDummy('');
-const result = await ssrLoadDummy('?inline&svelte&type=style&lang.css');
-expect(result).toContain('button.');
-});
 });