2. Настройка проекта с Vite

Установка Solid.js с Vite: первый проект 🛠️

Привет! 👋 Яша здесь. Теперь, когда мы понимаем архитектуру Solid.js, время написать первый настоящий код. В этом уроке мы создадим проект с нуля, разберём структуру файлов и настроим всё необходимое для комфортной разработки.

Solid.js отлично интегрируется с Vite — самым быстрым современным инструментом сборки. Официальный шаблон создаётся одной командой.

---

📋 Требования

Перед началом убедись, что у тебя установлены:

• Node.js 18+ — проверь командой node --version
• npm 7+ или pnpm / bun (рекомендуется pnpm для скорости)
• VS Code с расширением Solid snippets

node --version   # v18.0.0 или выше
npm --version    # 7.0.0 или выше

---

🚀 Создание проекта

Официальный шаблон через create-solid

npm create solid@latest my-solid-app

# С выбором TypeScript (рекомендуется)
# Отвечай:
# ✔ Which template would you like to use? › bare
# ✔ Server Side Rendering? › No (для начала)
# ✔ Use TypeScript? › Yes

cd my-solid-app
npm install
npm run dev

Или с помощью pnpm (быстрее):

pnpm create solid@latest my-solid-app
cd my-solid-app
pnpm install
pnpm dev

Или через Vite напрямую с выбором шаблона:

npm create vite@latest my-solid-app -- --template solid-ts
cd my-solid-app
npm install
npm run dev

После npm run dev открой браузер: http://localhost:5173 — ты увидишь приветственную страницу Solid.js.

---

📁 Структура проекта

После создания проект выглядит так:

my-solid-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── App.tsx           ← главный компонент
│   ├── App.module.css    ← CSS-модуль для App
│   ├── index.tsx         ← точка входа приложения
│   └── index.css         ← глобальные стили
├── index.html            ← HTML-шаблон Vite
├── vite.config.ts        ← конфигурация Vite
├── tsconfig.json         ← конфигурация TypeScript
└── package.json          ← зависимости и скрипты

Это минималистичная структура. Для больших проектов стоит добавить:

src/
├── components/           ← переиспользуемые компоненты
│   ├── Button/
│   │   ├── Button.tsx
│   │   └── Button.module.css
│   └── Layout/
├── pages/                ← компоненты-страницы
├── stores/               ← глобальное состояние
├── hooks/                ← кастомные примитивы
├── utils/                ← утилитарные функции
├── types/                ← TypeScript-типы
└── assets/               ← статические файлы

---

⚙️ Ключевые файлы: vite.config.ts

vite.config.ts

import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solid()],
  // Опционально: настройка путей
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  // Опционально: конфигурация dev-сервера
  server: {
    port: 3000,
    open: true,
  },
});

Плагин vite-plugin-solid делает несколько важных вещей:

1. Компилирует JSX в Solid-специфичный код (не React.createElement!)
2. Преобразует импорты Solid-компонентов
3. Поддерживает HMR (горячая замена модулей)

Дополнительные опции плагина

import solid from 'vite-plugin-solid';

export default defineConfig({
  plugins: [
    solid({
      // Включить devtools для отладки реактивности
      dev: true,
      // Кастомный JSX-трансформер (редко нужно)
      babel: {
        plugins: [],
      },
      // Генерировать source maps
      // (включено автоматически в режиме dev)
    }),
  ],
});

---

🔷 Конфигурация TypeScript: tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "moduleResolution": "bundler",
    "jsx": "preserve",          // Solid обрабатывает JSX сам через Vite
    "jsxImportSource": "solid-js",  // ВАЖНО! Не "react"
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Ключевое отличие от React-конфигурации: "jsxImportSource": "solid-js". Это говорит TypeScript (и IDE), что JSX должен типизироваться согласно типам Solid, а не React.

---

📄 Точка входа: src/index.tsx

src/index.tsx

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

// Находим корневой элемент из index.html
const root = document.getElementById('root');

if (!root) {
  throw new Error('Корневой элемент #root не найден!');
}

// render() вызывается ОДИН раз — это инициализация всего приложения
render(() => <App />, root);

Обрати внимание: render() принимает функцию, возвращающую компонент (() => <App />), а не сам компонент. Это важно для реактивного контекста.

---

🏠 Главный компонент: src/App.tsx

src/App.tsx

import { createSignal } from 'solid-js';
import styles from './App.module.css';

function App() {
  const [count, setCount] = createSignal(0);

  return (
    <main class={styles.app}>
      <h1>Мой первый Solid.js проект! ⚡</h1>
      <p>Счётчик: {count()}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Нажми меня
      </button>
    </main>
  );
}

export default App;

Важно: в Solid используется class вместо className (как в обычном HTML)! React использовал className чтобы не конфликтовать с зарезервированным словом JavaScript, но Solid обрабатывает это на уровне компилятора.

---

📦 package.json: скрипты и зависимости

{
  "name": "my-solid-app",
  "version": "0.1.0",
  "scripts": {
    "dev":     "vite",
    "build":   "vite build",
    "preview": "vite preview",
    "check":   "tsc --noEmit"
  },
  "dependencies": {
    "solid-js": "^1.8.0"
  },
  "devDependencies": {
    "typescript":       "^5.3.0",
    "vite":             "^5.0.0",
    "vite-plugin-solid": "^2.8.0"
  }
}

Команды разработки

npm run dev      # запуск dev-сервера на localhost:5173
npm run build    # production-сборка в папку dist/
npm run preview  # предпросмотр production-сборки
npm run check    # проверка типов TypeScript без сборки

---

🔥 HMR (Hot Module Replacement)

vite-plugin-solid поддерживает горячую замену модулей. Это значит:

• При изменении .tsx-файла браузер обновляет компонент без полного перезагрузки страницы
• Состояние сохраняется — если у тебя счётчик = 5, после редактирования кода он останется 5
• Это работает для компонентов, стилей и большинства модулей

// Добавь эту аннотацию для лучшего HMR в сложных случаях
import.meta.hot?.accept();

function MyComponent() {
  // ...
}

---

🐛 Частые проблемы при установке

Ошибка: «JSX element type does not have any construct or call signatures»

// ❌ Неправильный tsconfig.json
"jsxImportSource": "react"

// ✅ Правильно
"jsxImportSource": "solid-js"

Ошибка: «Cannot find module ‘solid-js’»

# Убедись, что зависимости установлены
npm install
# или
npm install solid-js vite-plugin-solid

Ошибка: VSCode не распознаёт Solid JSX

Установи расширение Solid snippets и перезапусти VSCode. Также убедись, что открываешь папку проекта (не отдельный файл).

class vs className

// ❌ React-привычка не работает в Solid
<div className="container">

// ✅ В Solid используй class
<div class="container">

---

🎮 Playground: интерактивный файловый проводник

Изучи структуру Solid.js + Vite проекта и содержимое ключевых файлов: