SolidJS

# Z Vite template
npm create solid@latest my-app

# Interaktywny wizard zapyta o:
# - JavaScript/TypeScript
# - Solid/SolidStart (pełny framework)
# - Template (bare/todoMVC/hackernews)

cd my-app
npm install
npm run dev

my-solid-app/
├── src/
│   ├── components/           # Komponenty
│   │   ├── Counter.tsx
│   │   └── Header.tsx
│   ├── routes/               # File-based routing
│   │   ├── index.tsx         # /
│   │   ├── about.tsx         # /about
│   │   └── blog/
│   │       ├── index.tsx     # /blog
│   │       └── [slug].tsx    # /blog/:slug
│   ├── lib/                  # Utilities
│   ├── entry-client.tsx      # Client entry
│   ├── entry-server.tsx      # Server entry
│   └── root.tsx              # Root layout
├── public/                   # Static assets
├── vite.config.ts            # Vite config
├── app.config.ts             # SolidStart config
└── package.json

// vite.config.ts
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid()],
})

// app.config.ts (SolidStart)
import { defineConfig } from '@solidjs/start/config'

export default defineConfig({
  vite: {
    // Vite options
  },
  server: {
    preset: 'vercel', // lub 'node', 'cloudflare-pages', 'netlify'
  },
})

import { createSignal } from 'solid-js'

function Counter() {
  // createSignal zwraca [getter, setter]
  const [count, setCount] = createSignal(0)

  // WAŻNE: count() - signal to funkcja!
  // W React: count, W SolidJS: count()

  return (
    <div>
      <p>Count: {count()}</p>

      <button onClick={() => setCount(count() + 1)}>
        Increment
      </button>

      <button onClick={() => setCount(c => c - 1)}>
        Decrement
      </button>

      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  )
}

import { createSignal } from 'solid-js'

function Example() {
  const [firstName, setFirstName] = createSignal('John')
  const [lastName, setLastName] = createSignal('Doe')

  // Derived state - prosta funkcja
  // Automatycznie reaktywna dzięki fine-grained tracking
  const fullName = () => `${firstName()} ${lastName()}`

  return (
    <div>
      <input
        value={firstName()}
        onInput={(e) => setFirstName(e.target.value)}
      />
      <input
        value={lastName()}
        onInput={(e) => setLastName(e.target.value)}
      />
      <p>Full name: {fullName()}</p>
    </div>
  )
}

import { createSignal, createMemo } from 'solid-js'

function ExpensiveComputation() {
  const [items, setItems] = createSignal([1, 2, 3, 4, 5])
  const [filter, setFilter] = createSignal('')

  // createMemo cache'uje wynik - nie przelicza się przy każdym renderze
  const expensiveSum = createMemo(() => {
    console.log('Computing sum...')
    return items().reduce((sum, item) => sum + item, 0)
  })

  const filteredItems = createMemo(() => {
    const query = filter().toLowerCase()
    return items().filter(item =>
      String(item).toLowerCase().includes(query)
    )
  })

  return (
    <div>
      <p>Sum: {expensiveSum()}</p>
      <p>Filtered: {filteredItems().join(', ')}</p>

      <input
        placeholder="Filter..."
        onInput={(e) => setFilter(e.target.value)}
      />

      <button onClick={() => setItems([...items(), items().length + 1])}>
        Add Item
      </button>
    </div>
  )
}

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

function EffectExample() {
  const [searchQuery, setSearchQuery] = createSignal('')
  const [results, setResults] = createSignal([])

  // createEffect automatycznie trackuje dependencies
  createEffect(() => {
    const query = searchQuery()

    if (query.length < 3) {
      setResults([])
      return
    }

    // Debounce
    const timeoutId = setTimeout(async () => {
      const response = await fetch(`/api/search?q=${query}`)
      const data = await response.json()
      setResults(data)
    }, 300)

    // Cleanup - wywoływane przy każdej zmianie lub unmount
    onCleanup(() => clearTimeout(timeoutId))
  })

  // Effect z console log dla debugowania
  createEffect(() => {
    console.log('Search query changed:', searchQuery())
  })

  return (
    <div>
      <input
        placeholder="Search..."
        onInput={(e) => setSearchQuery(e.target.value)}
      />
      <ul>
        <For each={results()}>
          {(result) => <li>{result}</li>}
        </For>
      </ul>
    </div>
  )
}

import { createSignal, onMount, onCleanup } from 'solid-js'

function WindowSizeTracker() {
  const [size, setSize] = createSignal({ width: 0, height: 0 })

  // onMount - wykonuje się raz po zamontowaniu
  onMount(() => {
    // Dostęp do DOM i browser APIs
    setSize({
      width: window.innerWidth,
      height: window.innerHeight,
    })

    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    window.addEventListener('resize', handleResize)

    // onCleanup - cleanup przy unmount
    onCleanup(() => {
      window.removeEventListener('resize', handleResize)
    })
  })

  return (
    <div>
      <p>Window: {size().width} x {size().height}</p>
    </div>
  )
}

import { Show, createSignal } from 'solid-js'

function ConditionalExample() {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false)
  const [user, setUser] = createSignal(null)

  return (
    <div>
      {/* Podstawowe Show */}
      <Show when={isLoggedIn()}>
        <Dashboard />
      </Show>

      {/* Show z fallback */}
      <Show when={isLoggedIn()} fallback={<LoginForm />}>
        <Dashboard />
      </Show>

      {/* Show z keyed - user przekazany do children */}
      <Show when={user()} keyed>
        {(userData) => (
          <div>
            <h1>Welcome, {userData.name}</h1>
            <p>Email: {userData.email}</p>
          </div>
        )}
      </Show>
    </div>
  )
}

import { For, createSignal } from 'solid-js'

interface Todo {
  id: number
  text: string
  completed: boolean
}

function TodoList() {
  const [todos, setTodos] = createSignal<Todo[]>([
    { id: 1, text: 'Learn Solid', completed: false },
    { id: 2, text: 'Build app', completed: false },
  ])

  const toggleTodo = (id: number) => {
    setTodos(todos =>
      todos.map(todo =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    )
  }

  const removeTodo = (id: number) => {
    setTodos(todos => todos.filter(todo => todo.id !== id))
  }

  return (
    <ul>
      {/* For - wydajne iterowanie z automatycznym key */}
      <For each={todos()}>
        {(todo, index) => (
          <li>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span class={todo.completed ? 'completed' : ''}>
              {index() + 1}. {todo.text}
            </span>
            <button onClick={() => removeTodo(todo.id)}>×</button>
          </li>
        )}
      </For>
    </ul>
  )
}

import { Index, createSignal } from 'solid-js'

function IndexExample() {
  const [items, setItems] = createSignal(['A', 'B', 'C', 'D'])

  // Index - index jest stały, wartość może się zmieniać
  // For - wartość jest stała, index może się zmieniać

  return (
    <ul>
      <Index each={items()}>
        {(item, index) => (
          <li>
            {/* index to number, item() to signal */}
            {index}: {item()}
            <input
              value={item()}
              onInput={(e) => {
                const newItems = [...items()]
                newItems[index] = e.target.value
                setItems(newItems)
              }}
            />
          </li>
        )}
      </Index>
    </ul>
  )
}

import { Switch, Match, createSignal } from 'solid-js'

function StatusDisplay() {
  const [status, setStatus] = createSignal<'idle' | 'loading' | 'success' | 'error'>('idle')
  const [data, setData] = createSignal(null)
  const [error, setError] = createSignal(null)

  return (
    <div>
      <Switch fallback={<p>Unknown status</p>}>
        <Match when={status() === 'idle'}>
          <p>Click to load data</p>
        </Match>

        <Match when={status() === 'loading'}>
          <div class="spinner">Loading...</div>
        </Match>

        <Match when={status() === 'error'}>
          <div class="error">
            Error: {error()?.message}
            <button onClick={() => setStatus('idle')}>Retry</button>
          </div>
        </Match>

        <Match when={status() === 'success'}>
          <div class="success">
            <pre>{JSON.stringify(data(), null, 2)}</pre>
          </div>
        </Match>
      </Switch>
    </div>
  )
}

import { Dynamic, createSignal } from 'solid-js'

// Komponenty
const RedBox = () => <div style={{ background: 'red', padding: '20px' }}>Red</div>
const BlueBox = () => <div style={{ background: 'blue', padding: '20px' }}>Blue</div>
const GreenBox = () => <div style={{ background: 'green', padding: '20px' }}>Green</div>

function DynamicComponentExample() {
  const [selected, setSelected] = createSignal<'red' | 'blue' | 'green'>('red')

  const components = {
    red: RedBox,
    blue: BlueBox,
    green: GreenBox,
  }

  return (
    <div>
      <select onChange={(e) => setSelected(e.target.value as any)}>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
      </select>

      {/* Dynamic renderuje wybrany komponent */}
      <Dynamic component={components[selected()]} />
    </div>
  )
}

import { Portal, createSignal } from 'solid-js'

function ModalExample() {
  const [isOpen, setIsOpen] = createSignal(false)

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      <Show when={isOpen()}>
        {/* Portal renderuje children do document.body */}
        <Portal>
          <div class="modal-overlay" onClick={() => setIsOpen(false)}>
            <div class="modal" onClick={(e) => e.stopPropagation()}>
              <h2>Modal Title</h2>
              <p>Modal content here</p>
              <button onClick={() => setIsOpen(false)}>Close</button>
            </div>
          </div>
        </Portal>
      </Show>
    </div>
  )
}

import { createStore, produce } from 'solid-js/store'

interface User {
  id: number
  name: string
  email: string
  settings: {
    theme: 'light' | 'dark'
    notifications: boolean
  }
}

interface AppState {
  user: User | null
  todos: { id: number; text: string; completed: boolean }[]
  isLoading: boolean
}

function AppWithStore() {
  // createStore dla złożonych obiektów
  const [state, setState] = createStore<AppState>({
    user: null,
    todos: [],
    isLoading: false,
  })

  // Aktualizacja nested property - path syntax
  const setTheme = (theme: 'light' | 'dark') => {
    setState('user', 'settings', 'theme', theme)
  }

  // Aktualizacja z produce (immer-like)
  const addTodo = (text: string) => {
    setState(produce((s) => {
      s.todos.push({
        id: Date.now(),
        text,
        completed: false,
      })
    }))
  }

  const toggleTodo = (id: number) => {
    setState('todos', (todo) => todo.id === id, 'completed', (c) => !c)
  }

  // Login
  const login = async (email: string, password: string) => {
    setState('isLoading', true)

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      })
      const user = await response.json()
      setState('user', user)
    } finally {
      setState('isLoading', false)
    }
  }

  return (
    <div>
      <Show when={state.user} fallback={<LoginForm onLogin={login} />}>
        <p>Welcome, {state.user!.name}</p>

        <button onClick={() => setTheme(
          state.user!.settings.theme === 'light' ? 'dark' : 'light'
        )}>
          Toggle theme: {state.user!.settings.theme}
        </button>

        <For each={state.todos}>
          {(todo) => (
            <div>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleTodo(todo.id)}
              />
              {todo.text}
            </div>
          )}
        </For>
      </Show>
    </div>
  )
}

import { createStore, reconcile } from 'solid-js/store'

function DataGrid() {
  const [data, setData] = createStore<{ items: Item[] }>({ items: [] })

  const fetchData = async () => {
    const response = await fetch('/api/items')
    const newItems = await response.json()

    // reconcile efektywnie porównuje i aktualizuje
    // zamiast zastępować całą tablicę
    setData('items', reconcile(newItems))
  }

  return (
    <div>
      <button onClick={fetchData}>Refresh</button>
      <For each={data.items}>
        {(item) => <ItemRow item={item} />}
      </For>
    </div>
  )
}

import { createContext, useContext, ParentComponent } from 'solid-js'
import { createStore } from 'solid-js/store'

// Definicja typu context
interface AuthContextValue {
  user: () => User | null
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  isLoading: () => boolean
}

// Tworzenie context
const AuthContext = createContext<AuthContextValue>()

// Provider
export const AuthProvider: ParentComponent = (props) => {
  const [state, setState] = createStore({
    user: null as User | null,
    isLoading: false,
  })

  const login = async (email: string, password: string) => {
    setState('isLoading', true)
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      })
      const user = await response.json()
      setState('user', user)
    } finally {
      setState('isLoading', false)
    }
  }

  const logout = () => {
    setState('user', null)
  }

  const value: AuthContextValue = {
    user: () => state.user,
    login,
    logout,
    isLoading: () => state.isLoading,
  }

  return (
    <AuthContext.Provider value={value}>
      {props.children}
    </AuthContext.Provider>
  )
}

// Hook do używania context
export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider')
  }
  return context
}

// Użycie
function Profile() {
  const { user, logout } = useAuth()

  return (
    <Show when={user()}>
      <div>
        <p>Welcome, {user()!.name}</p>
        <button onClick={logout}>Logout</button>
      </div>
    </Show>
  )
}

// App
function App() {
  return (
    <AuthProvider>
      <Header />
      <Profile />
    </AuthProvider>
  )
}

import { createResource, Suspense, ErrorBoundary, Show } from 'solid-js'

// createResource dla async data
function UserProfile(props: { userId: string }) {
  // Pierwszy argument: source signal
  // Drugi argument: fetcher function
  const [user, { mutate, refetch }] = createResource(
    () => props.userId,
    async (userId) => {
      const response = await fetch(`/api/users/${userId}`)
      if (!response.ok) throw new Error('User not found')
      return response.json()
    }
  )

  return (
    <div>
      <Show when={user.loading}>
        <p>Loading...</p>
      </Show>

      <Show when={user.error}>
        <p>Error: {user.error.message}</p>
        <button onClick={refetch}>Retry</button>
      </Show>

      <Show when={user()}>
        <div>
          <h2>{user()!.name}</h2>
          <p>{user()!.email}</p>

          {/* Optimistic update */}
          <button onClick={() => {
            mutate({ ...user()!, name: 'Updated Name' })
            // Następnie sync z serwerem
          }}>
            Update Name
          </button>
        </div>
      </Show>
    </div>
  )
}

// Z Suspense
function App() {
  const [userId, setUserId] = createSignal('1')

  return (
    <ErrorBoundary fallback={(err) => <p>Error: {err.message}</p>}>
      <Suspense fallback={<div>Loading user...</div>}>
        <UserProfile userId={userId()} />
      </Suspense>
    </ErrorBoundary>
  )
}

// src/routes/index.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to SolidStart</h1>
    </main>
  )
}

// src/routes/blog/[slug].tsx
import { useParams } from '@solidjs/router'
import { createAsync, cache } from '@solidjs/router'

// Cache dla data fetching
const getPost = cache(async (slug: string) => {
  const response = await fetch(`/api/posts/${slug}`)
  return response.json()
}, 'post')

export default function BlogPost() {
  const params = useParams()

  // createAsync - suspense-enabled data fetching
  const post = createAsync(() => getPost(params.slug))

  return (
    <article>
      <h1>{post()?.title}</h1>
      <div innerHTML={post()?.content} />
    </article>
  )
}

// src/routes/api/users.ts
import { json } from '@solidjs/router'

export async function GET() {
  const users = await db.users.findMany()
  return json(users)
}

export async function POST({ request }) {
  const body = await request.json()
  const user = await db.users.create({ data: body })
  return json(user, { status: 201 })
}

// Server actions w komponentach
import { action, useAction, useSubmission } from '@solidjs/router'

// Definicja server action
const addTodo = action(async (formData: FormData) => {
  'use server'
  const text = formData.get('text') as string
  await db.todos.create({ data: { text } })
}, 'addTodo')

function TodoForm() {
  const submission = useSubmission(addTodo)

  return (
    <form action={addTodo} method="post">
      <input name="text" placeholder="New todo..." disabled={submission.pending} />
      <button type="submit" disabled={submission.pending}>
        {submission.pending ? 'Adding...' : 'Add'}
      </button>
    </form>
  )
}

// src/routes/(app).tsx - Layout dla route group
import { ParentComponent } from 'solid-js'

const AppLayout: ParentComponent = (props) => {
  return (
    <div class="app-layout">
      <Header />
      <nav>
        <A href="/dashboard">Dashboard</A>
        <A href="/settings">Settings</A>
      </nav>
      <main>
        {props.children}
      </main>
      <Footer />
    </div>
  )
}

export default AppLayout

import { Component, mergeProps, splitProps } from 'solid-js'

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
  class?: string
  children: JSX.Element
  onClick?: () => void
}

const Button: Component<ButtonProps> = (props) => {
  // mergeProps dla defaultów
  const merged = mergeProps(
    { variant: 'primary', size: 'md', disabled: false },
    props
  )

  // splitProps rozdziela props
  const [local, others] = splitProps(merged, [
    'variant', 'size', 'disabled', 'class', 'children'
  ])

  const classes = () =>
    `btn btn-${local.variant} btn-${local.size} ${local.class || ''}`

  return (
    <button
      class={classes()}
      disabled={local.disabled}
      {...others}
    >
      {local.children}
    </button>
  )
}

import { Component, onMount } from 'solid-js'

interface InputProps {
  ref?: HTMLInputElement | ((el: HTMLInputElement) => void)
  placeholder?: string
}

const Input: Component<InputProps> = (props) => {
  let inputRef: HTMLInputElement

  onMount(() => {
    // Forward ref
    if (typeof props.ref === 'function') {
      props.ref(inputRef)
    }
  })

  return (
    <input
      ref={inputRef!}
      placeholder={props.placeholder}
      class="input"
    />
  )
}

// Użycie
function Form() {
  let inputRef: HTMLInputElement

  onMount(() => {
    inputRef.focus()
  })

  return (
    <form>
      <Input ref={inputRef!} placeholder="Focus on mount" />
    </form>
  )
}

import { ParentComponent, children, JSX } from 'solid-js'

interface CardProps {
  title?: string
  children: JSX.Element
}

const Card: ParentComponent<CardProps> = (props) => {
  // children() helper dla transformacji children
  const resolved = children(() => props.children)

  return (
    <div class="card">
      <Show when={props.title}>
        <div class="card-header">{props.title}</div>
      </Show>
      <div class="card-body">
        {resolved()}
      </div>
    </div>
  )
}

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

import { createSignal, createEffect } from 'solid-js'
import { createStore } from 'solid-js/store'

// Prosty form hook dla Solid
function createForm<T extends Record<string, any>>(initialValues: T) {
  const [values, setValues] = createStore(initialValues)
  const [errors, setErrors] = createStore<Partial<Record<keyof T, string>>>({})
  const [touched, setTouched] = createStore<Partial<Record<keyof T, boolean>>>({})

  const setValue = (field: keyof T, value: any) => {
    setValues(field as any, value)
  }

  const setError = (field: keyof T, error: string) => {
    setErrors(field as any, error)
  }

  const setFieldTouched = (field: keyof T) => {
    setTouched(field as any, true)
  }

  const reset = () => {
    setValues(initialValues)
    setErrors({})
    setTouched({})
  }

  return {
    values,
    errors,
    touched,
    setValue,
    setError,
    setFieldTouched,
    reset,
  }
}

// Użycie
function ContactForm() {
  const form = createForm({
    name: '',
    email: '',
    message: '',
  })

  const handleSubmit = async (e: Event) => {
    e.preventDefault()
    // Walidacja i submit
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={form.values.name}
        onInput={(e) => form.setValue('name', e.target.value)}
        onBlur={() => form.setFieldTouched('name')}
      />
      {form.touched.name && form.errors.name && (
        <span class="error">{form.errors.name}</span>
      )}
      {/* ... */}
    </form>
  )
}