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

Jest

Special reminders and implementation details

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();
});

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

1. Identify the Problem Area: Locate the section of your Svelte code where you suspect the problem might be.

2. Insert console.log() Statements: Add console.log() statements before and after the suspected problematic code to print out variable values and flow control.

3. Check the Results Output of your tests

4. 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.

5. 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:

<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>