Svelte

In this document, you will learn how to build a Svelte component library using Rslib.

Create Svelte project

You can use create-rslib to create a project with Rslib + Svelte. Just execute the following command:

npm

yarn

pnpm

bun

npm create rslib@latest

Then select Svelte when prompted to "Select template".

Use Rslib in an existing project

For developing Svelte components, you need to set the target to "web" in rslib.config.ts. This is crucial because Rslib sets target to "node" by default, which is different from Rsbuild's default target value.

To compile Svelte (.svelte components), you need to register the @rsbuild/plugin-svelte plugin. This plugin integrates svelte-loader internally and will automatically add the necessary configurations for Svelte build.

The recommended setup is to use bundle mode and let Rslib emit compiled ESM and extracted CSS:

rslib.config.ts

import { pluginSvelte } from '@rsbuild/plugin-svelte';
import { defineConfig } from '@rslib/core';
import { svelteDtsPlugin } from './scripts/rslib-plugin-svelte-dts';

export default defineConfig({
  lib: [
    {
      format: 'esm',
      dts: false,
    },
  ],
  output: {
    target: 'web',
  },
  resolve: {
    conditionNames: ['svelte', 'browser', '...'],
  },
  plugins: [
    pluginSvelte(),
    svelteDtsPlugin(),
  ],
});

For more configuration options, refer to Rsbuild plugins config and the @rsbuild/plugin-svelte documentation.

The generated package exports the compiled entry and an explicit CSS export:

package.json

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    },
    "./style.css": "./dist/index.css"
  },
  "types": "./dist/index.d.ts"
}

Declaration files

Declaration files in Svelte projects are generated by svelte2tsx. Therefore, you need to disable Rslib's built-in declaration pipeline with dts: false and run a local Rslib plugin after build:

svelteDtsPlugin();

If you need to customize the output directory, component source directory, or tsconfig path, you can configure options such as declarationDir, libRoot, and tsconfig.

If you need to further customize declaration generation, refer to the emitDts options in svelte2tsx.

This helper calls svelte2tsx.emitDts and emits bundleless-style declaration files, for example:

dist/index.d.ts
dist/Button.svelte.d.ts

Svelte declaration files are generated by svelte2tsx, so lib.dts / lib.redirect.dts / lib.banner.dts / lib.footer.dts are not effective in Svelte projects.

#Svelte

#Create Svelte project

#Use Rslib in an existing project

#Declaration files

Svelte

Create Svelte project

Use Rslib in an existing project

Declaration files