SolidJS (TypeScript)

You should create a functional component named App as the main entry point of your SolidJS application. Your SolidJS code should be linted using ESLint with the recommended configuration for SolidJS and TypeScript.

Entry file

The component file is App.tsx. The main.tsx file (preloaded, read-only) mounts your App component into the page using solid-js/web:

import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root') as HTMLElement);

Version

Running on Node.js v20.0.0

Supported languages

TypeScript

Testing framework

Vitest

Special reminders and implementation details

• Tests are written with @solidjs/testing-library, which wraps SolidJS components for assertion-friendly rendering.
• render accepts a function returning JSX (() => <App />) — this matches how SolidJS mounts components and gives the test the same reactive root the real app would have.
• Use SolidJS primitives (createSignal, createEffect, createMemo) rather than React-style hooks — they look similar but behave differently (fine-grained reactivity, no re-renders). Type signals explicitly when the inferred type isn't precise enough: createSignal<User | null>(null).

Example with @solidjs/testing-library:

import { render, screen } from '@solidjs/testing-library';
import App from './App';

describe('App', () => {
  test("says 'Hello, World!'", () => {
    render(() => <App />);
    const node = screen.queryByText('Hello, World!');
    expect(node).toBeInTheDocument();
  });
});

Included libraries

• solid-js
• @solidjs/testing-library
• @testing-library/jest-dom
• @testing-library/user-event
• jsdom
• typescript
• vite
• vite-plugin-solid
• vitest

How to debug

Debugging SolidJS with TypeScript is similar to debugging JavaScript. Use console.log() to inspect signal values inside createEffect or directly inside JSX expressions, and lean on the type checker to catch issues before runtime.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Locate the component or signal you want to inspect.

2. Insert console.log() Statements: Log signal values inside createEffect so they re-run whenever the signal changes, or log directly inside JSX.

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 open your browser console.

5. Analyze the Output: Compare logs against the rendered UI to spot stale signals or missed updates.

Here's an example of how to use console.log() for debugging in SolidJS with TypeScript:

import { createSignal, createEffect } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal<number>(0);

  createEffect(() => {
    console.log('count is now', count()); // Log every time count changes
  });

  const handleClick = (): void => {
    console.log('Button clicked, current count:', count());
    setCount((prev) => prev + 1);
  };

  return <button onClick={handleClick}>{count()}</button>;
}