feat(create-rstack): add Svelte library templates (#261)

Author: chenjiahan

packages/create-rstack/README.md

@@ -41,6 +41,8 @@ npx create-rstack -d my-project -t app-vanilla-ts
 - `lib-react-ts` - TypeScript React library
 - `lib-vue-js` - JavaScript Vue library
 - `lib-vue-ts` - TypeScript Vue library
+- `lib-svelte-js` - JavaScript Svelte library
+- `lib-svelte-ts` - TypeScript Svelte library
 - `lib-solid-js` - JavaScript Solid library
 - `lib-solid-ts` - TypeScript Solid library
 - `doc-basic` - Basic documentation site

packages/create-rstack/src/index.ts

@@ -84,6 +84,7 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
               { value: 'node', label: 'Node.js' },
               { value: 'react', label: 'React' },
               { value: 'vue', label: 'Vue' },
+              { value: 'svelte', label: 'Svelte' },
               { value: 'solid', label: 'Solid' },
             ],
     }),
@@ -126,6 +127,8 @@ await create({
     'lib-react-ts',
     'lib-vue-js',
     'lib-vue-ts',
+    'lib-svelte-js',
+    'lib-svelte-ts',
     'lib-solid-js',
     'lib-solid-ts',
     'doc-basic',

packages/create-rstack/template-lib-svelte-js/AGENTS.md

@@ -0,0 +1,14 @@
+# AGENTS.md
+
+## Commands
+
+- `{{ packageManager }} run build` - Build the library for production
+- `{{ packageManager }} run dev` - Rebuild the library when source files change
+- `{{ packageManager }} run test` - Run tests
+- `{{ packageManager }} run test:watch` - Run tests in watch mode
+
+## Docs
+
+- Rslib: https://rslib.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt
+- Rstest: https://rstest.rs/llms.txt

packages/create-rstack/template-lib-svelte-js/README.md

@@ -0,0 +1,40 @@
+# Rstack library
+
+## Setup
+
+Install the dependencies:
+
+```bash
+{{ packageManager }} install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+{{ packageManager }} run build
+```
+
+Build the library in watch mode:
+
+```bash
+{{ packageManager }} run dev
+```
+
+Run tests:
+
+```bash
+{{ packageManager }} run test
+```
+
+Run tests in watch mode:
+
+```bash
+{{ packageManager }} run test:watch
+```
+
+## Learn more
+
+- [Rstack documentation](https://rstack.rs)
+- [Rslib documentation](https://rslib.rs)

packages/create-rstack/template-lib-svelte-js/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "rstack-lib-svelte-js",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rs lib",
+    "dev": "rs lib --watch",
+    "format": "rs fmt",
+    "lint": "rs lint",
+    "test": "rs test",
+    "test:watch": "rs test --watch"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-svelte": "^2.0.1",
+    "happy-dom": "^20.11.1",
+    "prettier-plugin-svelte": "^4.1.1",
+    "rstack": "^0.3.5",
+    "svelte": "^5.56.8"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/create-rstack/template-lib-svelte-js/rstack.config.js

@@ -0,0 +1,34 @@
+// @ts-check
+// Rstack configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.lib(async () => {
+  const { pluginSvelte } = await import('@rsbuild/plugin-svelte');
+
+  return {
+    bundle: false,
+    source: {
+      entry: {
+        index: ['./src/**'],
+      },
+    },
+    output: {
+      target: 'web',
+    },
+    plugins: [pluginSvelte()],
+  };
+});
+
+define.test({
+  testEnvironment: 'happy-dom',
+});
+
+define.lint(async () => {
+  const { js } = await import('rstack/lint');
+
+  return [js.configs.recommended];
+});
+
+define.fmt({
+  plugins: ['prettier-plugin-svelte'],
+});

packages/create-rstack/template-lib-svelte-js/src/Button.svelte

@@ -0,0 +1,24 @@
+<script>
+  import './button.css';
+
+  let {
+    primary = false,
+    backgroundColor,
+    size = 'medium',
+    label = 'Demo Button',
+    onClick,
+  } = $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>

packages/create-rstack/template-lib-svelte-js/src/button.css

@@ -0,0 +1,34 @@
+.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) 0 0 0 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;
+}

packages/create-rstack/template-lib-svelte-js/src/index.js

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

packages/create-rstack/template-lib-svelte-js/tests/index.test.js

@@ -0,0 +1,19 @@
+import { expect, test } from 'rstack/test';
+import { mount, unmount } from 'svelte';
+import Button from '../src/Button.svelte';
+
+test('The button should render the default label', () => {
+  const target = document.createElement('div');
+  document.body.append(target);
+  const component = mount(Button, { target });
+  const button = target.querySelector('button');
+
+  if (!button) {
+    throw new Error('Expected button to be rendered');
+  }
+
+  expect(button.textContent).toBe('Demo Button');
+
+  unmount(component);
+  target.remove();
+});