Plugin loading another plugin once configuration is resolved

[axel7083]

Abstract

I read #16278 and I know that a "plugin function" can return PluginOption which would allow basic loading other plugins.

vite/packages/vite/src/node/plugin.ts

Lines 383 to 388 in 9a874bc

	export type PluginOption = Thenable<
	| Plugin
	| { name: string } // for rollup plugin compatibility
	| FalsyPlugin
	| PluginOption[]
	>

Basic example was linked in #16278 was the following:

import type { Plugin, PluginOption } from "vite"

export function myPlugin(): PluginOption {
  const myActualPlugin: Plugin = {
    name: "my-actual-plugin"
  }
  return [
    react(),
    myActualPlugin,
  ];
}

Sveltekit "Plugin Function"

The problem I'm facing is how SvelteKit is handling this problem. Svelte and SvelteKit are two separate plugins, but Sveltekit need Svelte plugin with some special options; but as they load the Svelte plugin in the "plugin function" the vite configuration is not yet resolved.

The main issue with the SvelteKit plugin is that it does not respect the root property of vite, and use process.cwd(). This lead to tons of issues when using vitest with projects configured¹.

You can found the "Plugin function" of SvelteKit in sveltejs/kit#packages/kit/src/exports/vite/index.js#L134.

Let's dive into how it works internally

Here is a diagram to illustrate how the SvelteKit plugin function loads the svelte.config.(js|ts) file to pass the option both to Svelte and SvelteKit plugin.

flowchart TD
    A[Vite build]
    B["sveltekit()"]
    C["load_config()"]

    A -->|Invoke Plugin Function| B
    B --> C 

    C -->|ACTUAL| H["Resolve path:<br/><b>process.cwd()</b><br/>+ svelte.config.(js|ts)"]
    C -->|EXPECTED| I["Resolve path:<br/><b>vite.config.root</b><br/>+ svelte.config.(js|ts)"]

    H --> J["Return:<br/>Svelte + Kit plugins<br/>configured from<br/>svelte.config.(js|ts)"]

    %% Link Styling (0-based index)
    %% 0: A->B
    %% 1: B->C
    %% 2: C->H
    %% 3: C->I
    %% 4: H->J

    linkStyle 2 stroke:#cc0000,stroke-width:2px
    linkStyle 3 stroke:#009900,stroke-width:2px

Loading

My question would be, how can we address the problem of plugins loading other plugins without the configuration being resolved yet, when they need to load configurations files such as SvelteKit is doing.

I'm opening it here because on the SvelteKit repository they are pointing out the tooling responsibility (See sveltejs/kit#12499 (comment))

Linked issues

• Sveltekit plugin breaks vitest workspaces sveltejs/kit#11356
• Added option to sveltekit vite project to adjust root sveltejs/kit#13027
• feat: enable custom cwd for vite plugin sveltejs/kit#12420
• feat: enable cwd override for vite plugin sveltejs/kit#12410

Footnotes

1. https://vitest.dev/guide/projects ↩