SvelteKit Support (Vite compatibility?) #57
Comments
|
Current config: |
|
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? |
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?
|
|
|
|
@Tropix126 can you please share your configs? |
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") |
|
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; |
|
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 Click to see svelte.config.js fileimport 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 Click to see svelte.config.js fileimport 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; |
In newer versions of sveltekit, you need to have a separate vite.config.js for vite config options |
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.
The text was updated successfully, but these errors were encountered: