feat: change preprocessor ordering, allow attributes modification

[dummdidumm]

BREAKING CHANGE: Order of preprocessors has changed

In Svelte 3, all markup preprocessors run first, then all script and then all style preprocessors:

import { preprocess } from 'svelte/compiler';

const { code } = await preprocess(source, [
	{
		markup: () => {
			console.log('this runs first');
		},
		script: () => {
			console.log('this runs third');
		},
		style: () => {
			console.log('this runs fifth');
		}
	},
	{
		markup: () => {
			console.log('this runs second');
		},
		script: () => {
			console.log('this runs fourth');
		},
		style: () => {
			console.log('this runs sixth');
		}
	}
], {
	filename: 'App.svelte'
});

This made it hard to order things the way you like. Therefore the ordering has changed in Svelte 4. Now, preprocessors are executed in order, and within one group the order is markup, script, style:

import { preprocess } from 'svelte/compiler';

const { code } = await preprocess(source, [
	{
		name: 'first preprocessor',
		markup: () => {
			console.log('this runs first');
		},
		script: () => {
			console.log('this runs second');
		},
		style: () => {
			console.log('this runs third');
		}
	},
	{
		name: 'second preprocessor',
		markup: () => {
			console.log('this runs fourth');
		},
		script: () => {
			console.log('this runs fifth');
		},
		style: () => {
			console.log('this runs sixth');
		}
	}
], {
	filename: 'App.svelte'
});

If you need to get back the old ordering, you can do something like

import { preprocess } from 'svelte/compiler';

const { code } = await preprocess(source, [
  {
    markup: preprocessor_one.markup
  },
  {
    markup: preprocessor_two.markup
  },
  {
    script: preprocessor_one.script
  },
  {
    script: preprocessor_two.script
  },
  {
    style: preprocessor_one.style
  },
  {
    style: preprocessor_two.style
  }
]);

It's now also required to add a name for every preprocessor.

Additionally, script and style preprocessors gain the capability to modify the attributes on their tag.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-dev-2	❌ Failed (Inspect)			May 23, 2023 2:54pm

[benmccann]

multiple preprocessors probably isn't too uncommon, but I imagine having multiple where ordering matters is rare and depending on the old ordering would be super rare. this new behavior makes way more sense to me