Squashed new RBAC

2025-07-02 22:30:21 +03:00
parent 7585dae0ab
commit 82111ed0f6
100 changed files with 14785 additions and 5888 deletions
--- a/docs/react-to-solidjs.md
+++ b/docs/react-to-solidjs.md
@@ -0,0 +1,378 @@
+# Миграция с React 18 на SolidStart: Comprehensive Guide
+
+## 1. Введение
+
+### 1.1 Что такое SolidStart?
+
+SolidStart - это метафреймворк для SolidJS, который предоставляет полнофункциональное решение для создания веб-приложений. Ключевые особенности:
+
+- Полностью изоморфное приложение (работает на клиенте и сервере)
+- Встроенная поддержка SSR, SSG и CSR
+- Интеграция с Vite и Nitro
+- Гибкая маршрутизация
+- Встроенные серверные функции и действия
+
+### 1.2 Основные различия между React и SolidStart
+
+| Характеристика | React 18 | SolidStart |
+|---------------|----------|------------|
+| Рендеринг | Virtual DOM | Компиляция и прямое обновление DOM |
+| Серверный рендеринг | Сложная настройка | Встроенная поддержка |
+| Размер бандла | ~40 кБ | ~7.7 кБ |
+| Реактивность | Хуки с зависимостями | Сигналы без явных зависимостей |
+| Маршрутизация | react-router | @solidjs/router |
+
+## 2. Подготовка проекта
+
+### 2.1 Установка зависимостей
+
+```bash
+# Удаление React зависимостей
+npm uninstall react react-dom react-router-dom
+
+# Установка SolidStart и связанных библиотек
+npm install @solidjs/start solid-js @solidjs/router
+```
+
+### 2.2 Обновление конфигурации
+
+#### Vite Configuration (`vite.config.ts`)
+```typescript
+import { defineConfig } from 'vite';
+import solid from 'solid-start/vite';
+
+export default defineConfig({
+  plugins: [solid()],
+  // Дополнительные настройки
+});
+```
+
+#### TypeScript Configuration (`tsconfig.json`)
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["solid-start/env"]
+  }
+}
+```
+
+#### SolidStart Configuration (`app.config.ts`)
+```typescript
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({
+  server: {
+    // Настройки сервера, например:
+    preset: "netlify" // или другой провайдер
+  },
+  // Дополнительные настройки
+});
+```
+
+## 3. Миграция компонентов и логики
+
+### 3.1 Состояние и реактивность
+
+#### React:
+```typescript
+const [count, setCount] = useState(0);
+```
+
+#### SolidJS:
+```typescript
+const [count, setCount] = createSignal(0);
+// Использование: count(), setCount(newValue)
+```
+
+### 3.2 Серверные функции и загрузка данных
+
+В SolidStart есть несколько способов работы с данными:
+
+#### Серверная функция
+```typescript
+// server/api.ts
+export function getUser(id: string) {
+  return db.users.findUnique({ where: { id } });
+}
+
+// Component
+export default function UserProfile() {
+  const user = createAsync(() => getUser(params.id));
+
+  return <div>{user()?.name}</div>;
+}
+```
+
+#### Действия (Actions)
+```typescript
+export function updateProfile(formData: FormData) {
+  'use server';
+  const name = formData.get('name');
+  // Логика обновления профиля
+}
+```
+
+### 3.3 Маршрутизация
+
+```typescript
+// src/routes/index.tsx
+import { A } from "@solidjs/router";
+
+export default function HomePage() {
+  return (
+    <div>
+      <A href="/about">О нас</A>
+      <A href="/profile">Профиль</A>
+    </div>
+  );
+}
+
+// src/routes/profile.tsx
+export default function ProfilePage() {
+  return <div>Профиль пользователя</div>;
+}
+```
+
+## 4. Оптимизация и производительность
+
+### 4.1 Мемоизация
+
+```typescript
+// Кэширование сложных вычислений
+const sortedUsers = createMemo(() =>
+  users().sort((a, b) => a.name.localeCompare(b.name))
+);
+
+// Ленивая загрузка
+const UserList = lazy(() => import('./UserList'));
+```
+
+### 4.2 Серверный рендеринг и предзагрузка
+
+```typescript
+// Предзагрузка данных
+export function routeData() {
+  return {
+    user: createAsync(() => fetchUser())
+  };
+}
+
+export default function UserPage() {
+  const user = useRouteData<typeof routeData>();
+  return <div>{user().name}</div>;
+}
+```
+
+## 5. Особенности миграции
+
+### 5.1 Ключевые изменения
+- Замена `useState` на `createSignal`
+- Использование `createAsync` вместо `useEffect` для загрузки данных
+- Серверные функции с `'use server'`
+- Маршрутизация через `@solidjs/router`
+
+### 5.2 Потенциальные проблемы
+- Переписать все React-специфичные хуки
+- Адаптировать библиотеки компонентов
+- Обновить тесты и CI/CD
+
+## 6. Деплой
+
+SolidStart поддерживает множество платформ:
+- Netlify
+- Vercel
+- Cloudflare
+- AWS
+- Deno
+- и другие
+
+```typescript
+// app.config.ts
+export default defineConfig({
+  server: {
+    preset: "netlify" // Выберите вашу платформу
+  }
+});
+```
+
+## 7. Инструменты и экосистема
+
+### Рекомендованные библиотеки
+- Роутинг: `@solidjs/router`
+- Состояние: Встроенные примитивы SolidJS
+- Запросы: `@tanstack/solid-query`
+- Девтулзы: `solid-devtools`
+
+## 8. Миграция конкретных компонентов
+
+### 8.1 Страница регистрации (RegisterPage)
+
+#### React-версия
+```typescript
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+import { RegisterForm } from '../components/auth/RegisterForm'
+import { useAuthStore } from '../store/authStore'
+
+export const RegisterPage: React.FC = () => {
+  const { isAuthenticated } = useAuthStore()
+
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />
+  }
+
+  return (
+    <div className="min-h-screen ...">
+      <RegisterForm />
+    </div>
+  )
+}
+```
+
+#### SolidJS-версия
+```typescript
+import { Navigate } from '@solidjs/router'
+import { Show } from 'solid-js'
+import { RegisterForm } from '../components/auth/RegisterForm'
+import { useAuthStore } from '../store/authStore'
+
+export default function RegisterPage() {
+  const { isAuthenticated } = useAuthStore()
+
+  return (
+    <Show when={!isAuthenticated()} fallback={<Navigate href="/" />}>
+      <div class="min-h-screen ...">
+        <RegisterForm />
+      </div>
+    </Show>
+  )
+}
+```
+
+#### Ключевые изменения
+- Удаление импорта React
+- Использование `@solidjs/router` вместо `react-router-dom`
+- Замена `className` на `class`
+- Использование `Show` для условного рендеринга
+- Вызов `isAuthenticated()` как функции
+- Использование `href` вместо `to`
+- Экспорт по умолчанию вместо именованного экспорта
+
+### Рекомендации
+- Всегда используйте `Show` для условного рендеринга
+- Помните, что сигналы в SolidJS - это функции
+- Следите за совместимостью импортов и маршрутизации
+
+## 9. UI Component Migration
+
+### 9.1 Key Differences in Component Structure
+
+When migrating UI components from React to SolidJS, several key changes are necessary:
+
+1. **Props Handling**
+   - Replace `React.FC<Props>` with function component syntax
+   - Use object destructuring for props instead of individual parameters
+   - Replace `className` with `class`
+   - Use `props.children` instead of `children` prop
+
+2. **Type Annotations**
+   - Use TypeScript interfaces for props
+   - Explicitly type `children` as `any` or a more specific type
+   - Remove React-specific type imports
+
+3. **Event Handling**
+   - Use SolidJS event types (e.g., `InputEvent`)
+   - Modify event handler signatures to match SolidJS conventions
+
+### 9.2 Component Migration Example
+
+#### React Component
+```typescript
+import React from 'react'
+import { clsx } from 'clsx'
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary'
+  fullWidth?: boolean
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  fullWidth = false,
+  className,
+  children,
+  ...props
+}) => {
+  const classes = clsx(
+    'button',
+    variant === 'primary' && 'bg-blue-500',
+    fullWidth && 'w-full',
+    className
+  )
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  )
+}
+```
+
+#### SolidJS Component
+```typescript
+import { clsx } from 'clsx'
+
+interface ButtonProps {
+  variant?: 'primary' | 'secondary'
+  fullWidth?: boolean
+  class?: string
+  children: any
+  disabled?: boolean
+  type?: 'button' | 'submit'
+  onClick?: () => void
+}
+
+export const Button = (props: ButtonProps) => {
+  const classes = clsx(
+    'button',
+    props.variant === 'primary' && 'bg-blue-500',
+    props.fullWidth && 'w-full',
+    props.class
+  )
+
+  return (
+    <button
+      class={classes}
+      disabled={props.disabled}
+      type={props.type || 'button'}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  )
+}
+```
+
+### 9.3 Key Migration Strategies
+
+- Replace `React.FC` with standard function components
+- Use `props` object instead of individual parameters
+- Replace `className` with `class`
+- Modify event handling to match SolidJS patterns
+- Remove React-specific lifecycle methods
+- Use SolidJS primitives like `createEffect` for side effects
+
+## Заключение
+
+Миграция на SolidStart требует внимательного подхода, но предоставляет значительные преимущества в производительности, простоте разработки и серверных возможностях.
+
+### Рекомендации
+- Мигрируйте постепенно
+- Пишите тесты на каждом этапе
+- Используйте инструменты совместимости
+
+---
+
+Этот гайд поможет вам систематически и безопасно мигрировать ваш проект на SolidStart, сохраняя существующую функциональность и улучшая производительность.