feat: add rslib svelte example

Author: elecmonkey

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+{
+  "name": "rslib-svelte-ts",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib",
+    "check": "svelte-check",
+    "dev": "rslib --watch"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-svelte": "^1.1.1",
+    "@rslib/core": "^0.21.5",
+    "@tsconfig/svelte": "^5.0.8",
+    "@types/node": "^24.12.4",
+    "svelte": "^5.55.9",
+    "svelte-check": "^4.4.8",
+    "svelte2tsx": "^0.7.55",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

rslib/svelte/package.json

@@ -0,0 +1,15 @@
+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',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginSvelte(), svelteDtsPlugin()],
+});

rslib/svelte/rslib.config.ts

@@ -0,0 +1,46 @@
+import type { RsbuildPlugin } from '@rslib/core';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { emitDts, type EmitDtsConfig } from 'svelte2tsx';
+
+type SvelteDtsPluginOptions = Partial<EmitDtsConfig>;
+
+const resolveProjectPath = (rootPath: string, path: string): string => resolve(rootPath, path);
+
+export function svelteDtsPlugin(options: SvelteDtsPluginOptions = {}): RsbuildPlugin {
+  return {
+    name: 'rslib-plugin-svelte-dts',
+    setup(api) {
+      api.onAfterBuild(async ({ isWatch }) => {
+        if (!isWatch) {
+          api.logger.start('generating declaration files...');
+        }
+
+        const { declarationDir = './dist', libRoot = './src', tsconfig } = options;
+        const rootPath = api.context.rootPath;
+        const tsconfigPath = resolveProjectPath(
+          rootPath,
+          tsconfig ?? api.getNormalizedConfig().source.tsconfigPath ?? './tsconfig.json',
+        );
+        const svelteShimsPath = options.svelteShimsPath
+          ? resolveProjectPath(rootPath, options.svelteShimsPath)
+          : fileURLToPath(import.meta.resolve('svelte2tsx/svelte-shims-v4.d.ts'));
+
+        try {
+          await emitDts({
+            declarationDir: resolveProjectPath(rootPath, declarationDir),
+            svelteShimsPath,
+            libRoot: resolveProjectPath(rootPath, libRoot),
+            tsconfig: tsconfigPath,
+          });
+
+          api.logger.ready(`declaration files generated with svelte2tsx.`);
+        } catch (error) {
+          api.logger.error('Failed to generate declaration files with svelte2tsx.');
+          api.logger.error(error);
+          throw error;
+        }
+      });
+    },
+  };
+}

rslib/svelte/scripts/rslib-plugin-svelte-dts.ts

@@ -0,0 +1,69 @@
+<script lang="ts">
+  type Size = 'small' | 'medium' | 'large'
+
+  interface Props {
+    primary?: boolean
+    backgroundColor?: string
+    size?: Size
+    label?: string
+    onClick?: () => void
+  }
+
+  let {
+    primary = false,
+    backgroundColor,
+    size = 'medium',
+    label = 'Demo Button',
+    onClick,
+  }: Props = $props()
+
+  const mode = $derived(
+    primary ? 'demo-button--primary' : 'demo-button--secondary',
+  )
+</script>
+
+<button
+  type="button"
+  class={['demo-button', `demo-button--${size}`, mode].join(' ')}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
+
+<style>
+  .demo-button {
+    font-weight: 700;
+    border: 0;
+    border-radius: 3em;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+  }
+
+  .demo-button--primary {
+    color: white;
+    background-color: #1ea7fd;
+  }
+
+  .demo-button--secondary {
+    color: #333;
+    background-color: transparent;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  }
+
+  .demo-button--small {
+    font-size: 12px;
+    padding: 10px 16px;
+  }
+
+  .demo-button--medium {
+    font-size: 14px;
+    padding: 11px 20px;
+  }
+
+  .demo-button--large {
+    font-size: 16px;
+    padding: 12px 24px;
+  }
+</style>

rslib/svelte/src/Button.svelte

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

rslib/svelte/src/index.ts

@@ -0,0 +1,17 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "ES2022"],
+    "module": "preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true
+  },
+  "include": ["src", "scripts", "*.config.ts"]
+}