SvelteKit Support (Vite compatibility?)

[tropicaaal]

I'm currently creating a component library using SvelteKit's package feature, and am interested in using sveld to automatically generate markdown tables for my component API docs. When attempting to initialize sveld as a vite plugin, the build fails stating that sveld is not a function.

While Vite does offer loose compatibility with rollup plugins, it seems that either I misconfigured something, or sveld uses a function specific to rollup only.

[tropicaaal]

Current config:

[metonym]

I haven't used sveld with SvelteKit, but someone has created a plugin called vite-plugin-sveld.

Separate question – is there any reason not to use the packaging feature + svelte2tsx supported by SvelteKit?

[tropicaaal]

Separate question – is there any reason not to use the packaging feature + svelte2tsx supported by SvelteKit?

I actually am using packaging with svelte2tsx currently; the main thing i'm looking for in this case is the documentation features, since manually typing out tables and keeping them up-to-date with my component source can be very tedious with a large amount of files. If usage with packaging is out of scope with this project, do you know of any possible alternatives?

vite-plugin-sveld actually looks promising for my purposes, since I can just import the component directly through mdsvex.

[tropicaaal]

vite-plugin-sveld seems to work well. Not sure if I should close this issue, as it's kind of both an issue and a feature request.

[mapsgeek]

@Tropix126 can you please share your configs?

[tropicaaal]

@Tropix126 can you please share your configs?

svelte.config.js

import sveld from "vite-plugin-sveld";

/** @type {import("@sveltejs/kit").Config} */
const config = {
	kit: {
		vite: {
			plugins: [sveld()],
		}
	}
};

export default config;

To get data about a component:

import data from "$lib/Component.svelte?sveld&raw";
console.log("data")

[ethan-jones-vizio]

Seems to work fine if you use it as a rollup plugin, vite should support most rollup plugins.

import { sveld } from 'sveld';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		vite: {
			build: {
				rollupOptions: {
					plugins: [ sveld() ]
				}
			}
		}
	}
};

export default config;

Which does the same as:

import { sveld } from 'sveld';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		vite: {
			plugins: [
				{
					...sveld(),
					enforce: 'post',
					apply: 'build'
				}
			]
		}
	}
};

export default config;

[Pierstoval]

Hello folks, I've been trying to look after this tool out of curiosity, and especially because I've seen how Carbon Svelte components documentation and types are compiled, and so far I'm using a classic SvelteKit package, and when I follow the latest suggested config with vite-plugin-sveld, I have this error:

/var/www/SvelteAdmin main !3 ❯ yarn build
yarn run v1.22.19
$ vite build
failed to load config from /var/www/SvelteAdmin/vite.config.ts
error during build:
file:///var/www/SvelteAdmin/node_modules/vite-plugin-sveld/index.js:1
import { ComponentParser } from 'sveld'
         ^^^^^^^^^^^^^^^
SyntaxError: Named export 'ComponentParser' not found. The requested module 'sveld' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'sveld';
const { ComponentParser } = pkg;
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
/var/www/SvelteAdmin main !3 ❯ gd package.json

Click to see svelte.config.js file

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import sveld from "vite-plugin-sveld";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [vitePreprocess()],

	kit: {
		adapter: adapter({
			fallback: 'index.html'
		}),
		vite: {
			plugins: [sveld()],
		}
	},

	customElement: true,
	compilerOptions: {
		customElement: true
	}
};

export default config;

---

If I just use the sveld package, however, I have another really strange error:

/var/www/SvelteAdmin main !3 ❯ yarn build                                                                                                                                     16:02:58
yarn run v1.22.19
$ vite build
error during build:
Error: Unexpected option config.kit.vite
    at file:///var/www/SvelteAdmin/node_modules/@sveltejs/kit/src/core/config/options.js:315:12
    at file:///var/www/SvelteAdmin/node_modules/@sveltejs/kit/src/core/config/options.js:322:18
    at validate_config (file:///var/www/SvelteAdmin/node_modules/@sveltejs/kit/src/core/config/index.js:108:9)
    at process_config (file:///var/www/SvelteAdmin/node_modules/@sveltejs/kit/src/core/config/index.js:80:20)
    at load_config (file:///var/www/SvelteAdmin/node_modules/@sveltejs/kit/src/core/config/index.js:72:9)
    at async sveltekit (file:///var/www/SvelteAdmin/node_modules/@sveltejs/kit/src/exports/vite/index.js:119:24)
    at async Promise.all (index 0)
    at async asyncFlatten (file:///var/www/SvelteAdmin/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:12686:16)
    at async resolveConfig (file:///var/www/SvelteAdmin/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:65783:29)
    at async build (file:///var/www/SvelteAdmin/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:47915:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Click to see svelte.config.js file

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { sveld } from "sveld";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: [vitePreprocess()],

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter({
			fallback: 'index.html'
		}),
		vite: {
			build: {
				rollupOptions: {
					plugins: [ sveld() ]
				}
			}
		}
	},

	customElement: true,
	compilerOptions: {
		customElement: true
	}
};

export default config;

[ethan-jones-vizio]

Hello folks, I've been trying to look after this tool out of curiosity, and especially because I've seen how Carbon Svelte components documentation and types are compiled, and so far I'm using a classic SvelteKit package, and when I follow the latest suggested config with vite-plugin-sveld, I have this error:
....

In newer versions of sveltekit, you need to have a separate vite.config.js for vite config options