feat(rslib): add svelte examples

Author: elecmonkey

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+storybook-static
+doc_build/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

rslib/svelte-basic/.gitignore

@@ -0,0 +1,23 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+npm run build
+```
+
+Build the library in watch mode:
+
+```bash
+npm run dev
+```

rslib/svelte-basic/README.md

@@ -0,0 +1,35 @@
+{
+  "name": "@rslib-example/svelte-basic",
+  "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 --tsconfig ./tsconfig.json",
+    "dev": "rslib -w"
+  },
+  "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.5",
+    "svelte-check": "^4.4.8",
+    "svelte-preprocess": "^6.0.3",
+    "svelte2tsx": "^0.7.55",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

rslib/svelte-basic/package.json

@@ -0,0 +1,26 @@
+import { pluginSvelte } from '@rsbuild/plugin-svelte';
+import { defineConfig } from '@rslib/core';
+import { svelteDtsPlugin } from './scripts/rslib-plugin-svelte-dts';
+
+export default defineConfig({
+  resolve: {
+    conditionNames: ['svelte', 'browser', '...'],
+  },
+  lib: [
+    {
+      format: 'esm',
+      dts: false,
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [
+    pluginSvelte(),
+    svelteDtsPlugin({
+      declarationDir: './dist',
+      libRoot: './src',
+      tsconfig: 'tsconfig.json',
+    }),
+  ],
+});

rslib/svelte-basic/rslib.config.ts

@@ -0,0 +1,49 @@
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import type { RsbuildPlugin } from '@rslib/core';
+import { emitDts } from 'svelte2tsx';
+
+const require = createRequire(import.meta.url);
+
+export interface SvelteDtsPluginOptions {
+  declarationDir?: string;
+  libRoot?: string;
+  tsconfig?: string;
+  svelteShimsPath?: string;
+}
+
+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 () => {
+        const {
+          declarationDir = './dist',
+          libRoot = './src',
+          tsconfig = 'tsconfig.json',
+        } = options;
+
+        const rootPath = api.context.rootPath;
+        const svelteShimsPath = options.svelteShimsPath
+          ? resolveProjectPath(rootPath, options.svelteShimsPath)
+          : require.resolve('svelte2tsx/svelte-shims-v4.d.ts');
+
+        try {
+          await emitDts({
+            declarationDir: resolveProjectPath(rootPath, declarationDir),
+            svelteShimsPath,
+            libRoot: resolveProjectPath(rootPath, libRoot),
+            tsconfig: resolveProjectPath(rootPath, tsconfig),
+          });
+
+          console.log('Svelte DTS generation complete');
+        } catch (error) {
+          console.error('Svelte DTS generation failed:', error);
+          throw error;
+        }
+      });
+    },
+  };
+}

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+  interface Props {
+    label?: string
+    onclick?: (count: number) => void
+  }
+
+  let { label = 'Demo Button', onclick }: Props = $props()
+  let count = $state(0)
+
+  function increment() {
+    count++
+    onclick?.(count)
+  }
+</script>
+
+<button class="demo-button" onclick={increment}>
+  {label}: {count}
+</button>
+
+<style>
+  .demo-button {
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    border: 1px solid #ff3e00;
+    border-radius: 4px;
+    background-color: #ff3e00;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .demo-button:hover {
+    background-color: #ff5722;
+    border-color: #ff5722;
+  }
+
+  .demo-button:active {
+    transform: scale(0.98);
+  }
+</style>

rslib/svelte-basic/src/Button.svelte

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

rslib/svelte-basic/src/index.ts

@@ -0,0 +1,5 @@
+import { sveltePreprocess } from 'svelte-preprocess';
+
+export default {
+  preprocess: sveltePreprocess(),
+};

rslib/svelte-basic/svelte.config.ts

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