Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/create-rstack/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ npx create-rstack -d my-project -t app-vanilla-ts
- `app-react-ts` - TypeScript React application
- `app-vue-js` - JavaScript Vue application
- `app-vue-ts` - TypeScript Vue application
- `app-svelte-js` - JavaScript Svelte application
- `app-svelte-ts` - TypeScript Svelte application
- `app-solid-js` - JavaScript Solid application
- `app-solid-ts` - TypeScript Solid application
- `lib-node-js` - JavaScript Node.js library
Expand Down
3 changes: 3 additions & 0 deletions packages/create-rstack/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
{ value: 'svelte', label: 'Svelte' },
{ value: 'solid', label: 'Solid' },
]
: [
Expand Down Expand Up @@ -109,6 +110,8 @@ await create({
'app-react-ts',
'app-vue-js',
'app-vue-ts',
'app-svelte-js',
'app-svelte-ts',
'app-solid-js',
'app-solid-ts',
'lib-node-js',
Expand Down
15 changes: 15 additions & 0 deletions packages/create-rstack/template-app-svelte-js/AGENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# AGENTS.md

## Commands

- `{{ packageManager }} run dev` - Start the development server
- `{{ packageManager }} run build` - Build the app for production
- `{{ packageManager }} run preview` - Preview the production build locally
- `{{ packageManager }} run test` - Run tests
- `{{ packageManager }} run test:watch` - Run tests in watch mode

## Docs

- Rsbuild: https://rsbuild.rs/llms.txt
- Rspack: https://rspack.rs/llms.txt
- Rstest: https://rstest.rs/llms.txt
25 changes: 25 additions & 0 deletions packages/create-rstack/template-app-svelte-js/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "rstack-app-svelte-js",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "rs build",
"dev": "rs dev",
"format": "rs fmt",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Configure Svelte files for the formatter

When a developer runs pnpm format in either generated Svelte project, src/App.svelte is silently skipped. Rstack 0.3.5 does not register a Svelte formatter by default, and these templates neither depend on prettier-plugin-svelte nor configure it through define.fmt; because other supported files are processed, rs fmt can still exit successfully while leaving the application's main component untouched. Add and configure the Svelte Prettier plugin in both templates.

Useful? React with 👍 / 👎.

"lint": "rs lint",
"preview": "rs preview",
"test": "rs test",
"test:watch": "rs test --watch"
},
"dependencies": {
"svelte": "^5.56.8"
},
"devDependencies": {
"@rsbuild/plugin-svelte": "^2.0.1",
"@testing-library/jest-dom": "^7.0.0",
"@testing-library/svelte": "^5.4.2",
"happy-dom": "^20.11.1",
"rstack": "^0.3.5"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
allowBuilds:
svelte-preprocess: false
21 changes: 21 additions & 0 deletions packages/create-rstack/template-app-svelte-js/rstack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// @ts-check
// Rstack configuration guide: https://rstack.rs/config
import { define } from 'rstack';

define.app(async () => {
const { pluginSvelte } = await import('@rsbuild/plugin-svelte');

return {
plugins: [pluginSvelte()],
};
});

define.test({
setupFiles: ['./tests/rstest.setup.js'],
});

define.lint(async () => {
const { js } = await import('rstack/lint');

return [js.configs.recommended];
});
28 changes: 28 additions & 0 deletions packages/create-rstack/template-app-svelte-js/src/App.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<main>
<div class="content">
<h1>Rstack with Svelte</h1>
<p>Start building amazing things with Rstack.</p>
</div>
</main>

<style>
.content {
display: flex;
min-height: 100vh;
line-height: 1.1;
text-align: center;
flex-direction: column;
justify-content: center;
}

.content h1 {
font-size: 3.6rem;
font-weight: 700;
}

.content p {
font-size: 1.2rem;
font-weight: 400;
opacity: 0.5;
}
</style>
6 changes: 6 additions & 0 deletions packages/create-rstack/template-app-svelte-js/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
body {
margin: 0;
color: #fff;
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
background-image: linear-gradient(to bottom, #020917, #101725);
}
8 changes: 8 additions & 0 deletions packages/create-rstack/template-app-svelte-js/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { mount } from 'svelte';
import App from './App.svelte';
import './index.css';

const root = document.getElementById('root');
if (root) {
mount(App, { target: root });
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'rstack/test';
import App from '../src/App.svelte';

test('renders the main page', () => {
render(App);
expect(screen.getByText('Rstack with Svelte')).toBeInTheDocument();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { expect } from 'rstack/test';
import * as jestDomMatchers from '@testing-library/jest-dom/matchers';

expect.extend(jestDomMatchers);
15 changes: 15 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/AGENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# AGENTS.md

## Commands

- `{{ packageManager }} run dev` - Start the development server
- `{{ packageManager }} run build` - Build the app for production
- `{{ packageManager }} run preview` - Preview the production build locally
- `{{ packageManager }} run test` - Run tests
- `{{ packageManager }} run test:watch` - Run tests in watch mode

## Docs

- Rsbuild: https://rsbuild.rs/llms.txt
- Rspack: https://rspack.rs/llms.txt
- Rstest: https://rstest.rs/llms.txt
28 changes: 28 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "rstack-app-svelte-ts",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "svelte-check && rs build",
"dev": "rs dev",
"format": "rs fmt",
"lint": "rs lint",
"preview": "rs preview",
"test": "rs test",
"test:watch": "rs test --watch"
},
"dependencies": {
"svelte": "^5.56.8"
},
"devDependencies": {
"@rsbuild/plugin-svelte": "^2.0.1",
"@testing-library/jest-dom": "^7.0.0",
"@testing-library/svelte": "^5.4.2",
"@types/node": "^24.13.3",
"happy-dom": "^20.11.1",
"rstack": "^0.3.5",
"svelte-check": "^4.7.4",
"typescript": "^6.0.3"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
allowBuilds:
svelte-preprocess: false
20 changes: 20 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/rstack.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Rstack configuration guide: https://rstack.rs/config
import { define } from 'rstack';

define.app(async () => {
const { pluginSvelte } = await import('@rsbuild/plugin-svelte');

return {
plugins: [pluginSvelte()],
};
});

define.test({
setupFiles: ['./tests/rstest.setup.ts'],
});

define.lint(async () => {
const { js, ts } = await import('rstack/lint');

return [js.configs.recommended, ts.configs.recommended];
});
37 changes: 37 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/src/App.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<script lang="ts">
type Props = {
tool: string;
framework: string;
};

let { tool, framework }: Props = $props();
</script>

<main>
<div class="content">
<h1>{tool} with {framework}</h1>
<p>Start building amazing things with Rstack.</p>
</div>
</main>

<style>
.content {
display: flex;
min-height: 100vh;
line-height: 1.1;
text-align: center;
flex-direction: column;
justify-content: center;
}

.content h1 {
font-size: 3.6rem;
font-weight: 700;
}

.content p {
font-size: 1.2rem;
font-weight: 400;
opacity: 0.5;
}
</style>
6 changes: 6 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
body {
margin: 0;
color: #fff;
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
background-image: linear-gradient(to bottom, #020917, #101725);
}
14 changes: 14 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { mount } from 'svelte';
import App from './App.svelte';
import './index.css';

const root = document.getElementById('root');
if (root) {
mount(App, {
target: root,
props: {
tool: 'Rstack',
framework: 'Svelte',
},
});
}
11 changes: 11 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/tests/index.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'rstack/test';
import App from '../src/App.svelte';

test('renders the main page', () => {
render(App, {
tool: 'Rstack',
framework: 'Svelte',
});
expect(screen.getByText('Rstack with Svelte')).toBeInTheDocument();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { expect } from 'rstack/test';
import * as jestDomMatchers from '@testing-library/jest-dom/matchers';

expect.extend(jestDomMatchers);
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"types": ["rstack/types", "node", "@testing-library/jest-dom"]
},
"include": ["./"]
}
22 changes: 22 additions & 0 deletions packages/create-rstack/template-app-svelte-ts/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"compilerOptions": {
"lib": ["DOM", "ES2020"],
"target": "ES2020",
"noEmit": true,
"skipLibCheck": true,
"types": ["rstack/types", "node", "svelte"],
"useDefineForClassFields": true,

/* modules */
"moduleDetection": "force",
"moduleResolution": "bundler",
"verbatimModuleSyntax": true,
"resolveJsonModule": true,
"allowImportingTsExtensions": true,

/* type checking */
"noUnusedLocals": true,
"noUnusedParameters": true
},
"include": ["src/**/*.ts", "src/**/*.svelte"]
}
14 changes: 14 additions & 0 deletions packages/create-rstack/tests/create.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,20 @@ test.each([
testFile: 'index.test.ts',
hasTypeScript: true,
},
{
template: 'app-svelte-js',
configExtension: 'js',
sourceExtension: 'js',
testFile: 'index.test.js',
hasTypeScript: false,
},
{
template: 'app-svelte-ts',
configExtension: 'ts',
sourceExtension: 'ts',
testFile: 'index.test.ts',
hasTypeScript: true,
},
{
template: 'app-solid-js',
configExtension: 'js',
Expand Down