Svelte
You should create a main Svelte component named App.svelte
as the entry point of your Svelte application. Your Svelte code should be linted using ESLint with the recommended configuration for Svelte.
Version
Running on Node.js v20.0.0
Supported languages
Typescript or Javascript
Testing framework
Special reminders and implementation details
js
import { render, fireEvent } from '@testing-library/svelte';
import Button from './Button.svelte';
test('button click updates count', async () => {
const { getByText } = render(Button);
const button = getByText('Click me');
await fireEvent.click(button);
expect(getByText('Clicked 1 times')).toBeInTheDocument();
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Remember to always keep your components modular and make use of Svelte's reactivity, stores, and lifecycle functions for efficient data handling and DOM manipulations. Utilize Svelte's concise syntax to create interactive user interfaces with minimal boilerplate.
Included libraries
- svelte
- @babel/preset-env
- @sveltejs/vite-plugin-svelte
- @testing-library/jest-dom
- @testing-library/svelte
- @testing-library/user-event
- babel-jest
- babel-plugin-transform-vite-meta-env
- jest
- jest-environment-jsdom
- jest-transform-stub
- svelte-jester
- vite
How to debug
Debugging Svelte code is similar to debugging JavaScript, and you can use console.log()
statements in Svelte just as you would in JavaScript.
Steps to Debug Using Console Logs
Identify the Problem Area: Locate the section of your Svelte code where you suspect the problem might be.
Insert
console.log()
Statements: Addconsole.log()
statements before and after the suspected problematic code to print out variable values and flow control.Check the Results Output of your tests
Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.
Analyze the Output: Look at the values printed in the console to understand what's going wrong in your code. Adjust your code based on the findings and repeat as necessary.
Here’s an example of how to use console.log()
for debugging in Svelte:
svelte
<script lang="ts">
let a = 5;
let b = 10;
function calculateSum(a: number, b: number): number {
console.log("calculateSum called with arguments:", a, b); // Log function call
let sum: number = a + b;
console.log("Sum after addition:", sum); // Log sum calculation
return sum;
}
let result: number = calculateSum(a, b);
console.log("Result of calculateSum:", result); // Log the result
</script>
<p>Result: {result}</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16