Vue SFC компонент на PHP с Fusion

<php>
  // Определение пропса в PHP
  $name = prop(Auth::user()->name);
</php>
 
<template>
  <!-- Использование в Vue! -->
  Hello {{ name }}!
</template>

<php>
use function \Fusion\{prop};
$name = prop('Мир');
$name = strtoupper($name);
</php>
 
<template>
  Привет, {{ name }}!
</template>

<script setup>
import { useFusion } from '$fusion/Pages/Index.js'
import useHotFusion from '@fusion/vue/hmr'
 
const __fusionData = useFusion(['name', 'fusion'], __props.fusion)
const { name, fusion } = __fusionData
</script>

<php>
use function \Fusion\{prop};
use \App\Models\Podcast;
 
$podcasts = prop(fn () => Podcast::all())->readonly();
</php>

<php>
use function \Fusion\{expose};
use \App\Models\Podcast;
 
expose(favorite: fn (Podcast $podcast) => response()->json($podcast->toggleFavorite()));
</php>
 
<template>
  <button @click="favorite({ podcast }).then(fav => podcast.favorited = fav)">
    Избранное
  </button>
</template>

<php>
use function \Fusion\{prop, expose};
use \App\Models\Task;
 
// Получаем список задач из базы данных
$tasks = prop(fn () => Task::all());
 
// Метод для создания новой задачи
expose(createTask: function (string $title) {
    $task = Task::create([
        'title' => $title,
        'completed' => false,
    ]);
    
    return $task;
});
 
// Метод для изменения статуса задачи
expose(toggleTask: function (Task $task) {
    $task->completed = !$task->completed;
    $task->save();
    
    return $task;
});
 
// Метод для удаления задачи
expose(deleteTask: function (Task $task) {
    $task->delete();
    return true;
});
</php>
 
<script setup>
import { ref } from 'vue';
 
const newTaskTitle = ref('');
 
function handleCreateTask() {
    if (!newTaskTitle.value.trim()) return;
    
    createTask({ title: newTaskTitle.value })
        .then(task => {
            tasks.push(task);
            newTaskTitle.value = '';
        });
}
</script>
 
<template>
    <div class="tasks-container">
        <h1>Список задач</h1>
        
        <div class="task-form">
            <input 
                v-model="newTaskTitle" 
                placeholder="Что нужно сделать?"
                @keyup.enter="handleCreateTask"
            />
            <button @click="handleCreateTask">Добавить</button>
        </div>
        
        <ul class="task-list">
            <li v-for="task in tasks" :key="task.id" class="task-item">
                <input 
                    type="checkbox" 
                    :checked="task.completed"
                    @change="toggleTask({ task }).then(updated => Object.assign(task, updated))"
                />
                <span :class="{ 'completed': task.completed }">
                    {{ task.title }}
                </span>
                <button @click="deleteTask({ task }).then(() => {
                    const index = tasks.findIndex(t => t.id === task.id);
                    if (index !== -1) tasks.splice(index, 1);
                })">
                    Удалить
                </button>
            </li>
        </ul>
    </div>
</template>
 
<style scoped>
.tasks-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.task-form {
    display: flex;
    margin-bottom: 20px;
}
.task-form input {
    flex-grow: 1;
    padding: 8px;
    margin-right: 10px;
}
.task-list {
    list-style: none;
    padding: 0;
}
.task-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.task-item input {
    margin-right: 10px;
}
.completed {
    text-decoration: line-through;
    color: #888;
}
.task-item button {
    margin-left: auto;
    background: #ff4757;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}
</style>

<php>
use function \Fusion\{prop, sync};
use \App\Models\Product;
 
// Инициализация состояния
$search = prop('');
$products = prop([]);
 
// Синхронизируем поиск с результатами
sync(function () use (&$search, &$products) {
    if (strlen($search) >= 2) {
        $products = Product::where('name', 'like', "%{$search}%")
                          ->orWhere('description', 'like', "%{$search}%")
                          ->limit(20)
                          ->get();
    } else {
        $products = [];
    }
});
</php>
 
<template>
    <div class="search-container">
        <input 
            v-model="search" 
            placeholder="Поиск продуктов..." 
            class="search-input"
        />
        
        <div v-if="search.length >= 2 && products.length === 0" class="no-results">
            По запросу "{{ search }}" ничего не найдено
        </div>
        
        <div v-if="products.length > 0" class="results">
            <div v-for="product in products" :key="product.id" class="product-item">
                <h3>{{ product.name }}</h3>
                <p>{{ product.description }}</p>
                <span class="price">{{ product.price }} ₽</span>
            </div>
        </div>
    </div>
</template>

<php>
expose(getUserById: function (int $id): ?\App\Models\User {
    return User::find($id);
});
</php>
 
<script setup lang="ts">
interface User {
  id: number;
  name: string;
  email: string;
}
 
const selectedUser = ref<User | null>(null);
</script>

<php>
use function \Fusion\{prop, expose};
use Illuminate\Support\Facades\Validator;
 
$form = prop([
    'name' => '',
    'email' => '',
    'password' => '',
]);
 
$errors = prop([]);
 
expose(register: function (array $formData) {
    $validator = Validator::make($formData, [
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8',
    ]);
    
    if ($validator->fails()) {
        return ['success' => false, 'errors' => $validator->errors()->toArray()];
    }
    
    // Создание пользователя...
    
    return ['success' => true];
});
</php>

<php>
use function \Fusion\{prop, expose};
 
$step = prop(1);
$formData = prop([
    'personal' => ['name' => '', 'email' => ''],
    'address' => ['city' => '', 'street' => ''],
    'payment' => ['method' => '', 'details' => ''],
]);
 
expose(submitStep: function (int $currentStep, array $stepData) {
    // Валидация текущего шага...
    
    if ($currentStep < 3) {
        return ['success' => true, 'nextStep' => $currentStep + 1];
    } else {
        // Финальная обработка данных...
        return ['success' => true, 'completed' => true];
    }
});
</php>

<php>
use function \Fusion\{prop, expose};
use Illuminate\Support\Facades\Auth;
 
// Проверяем авторизацию пользователя
$user = prop(fn () => Auth::user());
$isAdmin = prop(fn () => Auth::check() && Auth::user()->hasRole('admin'));
 
// Метод для входа пользователя
expose(login: function (string $email, string $password, bool $remember = false) {
    $credentials = ['email' => $email, 'password' => $password];
    
    if (Auth::attempt($credentials, $remember)) {
        request()->session()->regenerate();
        return ['success' => true, 'user' => Auth::user()];
    }
    
    return ['success' => false, 'message' => 'Неверные учетные данные'];
});
 
// Метод для выхода
expose(logout: function () {
    Auth::logout();
    request()->session()->invalidate();
    request()->session()->regenerateToken();
    
    return ['success' => true];
});
</php>
 
<template>
  <div v-if="!user">
    <!-- Форма входа -->
  </div>
  <div v-else>
    <p>Привет, {{ user.name }}!</p>
    <button @click="logout().then(() => window.location.reload())">Выйти</button>
    
    <div v-if="isAdmin" class="admin-panel">
      <!-- Админ-панель -->
    </div>
  </div>
</template>

<php>
use function \Fusion\{prop};
use Illuminate\Support\Facades\Gate;
use \App\Models\Post;
 
$post = prop(fn () => Post::find(request()->route('id')));
$canEdit = prop(fn () => Gate::allows('update', $post));
</php>
 
<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    
    <div v-if="canEdit" class="edit-controls">
      <button>Редактировать</button>
    </div>
  </div>
</template>

<php>
use function \Fusion\{prop, expose};
use Illuminate\Support\Facades\Http;
 
// Инициализация состояния
$query = prop('');
$results = prop([]);
$isLoading = prop(false);
 
// Метод для поиска через внешний API
expose(search: function (string $searchQuery) {
    $isLoading = true;
    
    try {
        $response = Http::get('https://api.example.com/search', [
            'q' => $searchQuery,
            'limit' => 10
        ]);
        
        if ($response->successful()) {
            $results = $response->json('results', []);
            return ['success' => true, 'results' => $results];
        }
        
        return ['success' => false, 'error' => 'API вернул ошибку'];
    } catch (\Exception $e) {
        return ['success' => false, 'error' => $e->getMessage()];
    } finally {
        $isLoading = false;
    }
});
</php>
 
<template>
  <div class="search-container">
    <input v-model="query" placeholder="Поиск..." />
    <button @click="search({ searchQuery: query })
      .then(response => {
        if (response.success) {
          results = response.results;
        } else {
          alert(response.error);
        }
        isLoading = false;
      })">Искать</button>
    
    <div v-if="isLoading" class="loading">Загрузка...</div>
    
    <div v-else-if="results.length > 0" class="results">
      <!-- Результаты поиска -->
    </div>
  </div>
</template>

<php>
// Ошибка будет показана в оверлее Vite
$undefined_variable;
</php>

<php>
use function \Fusion\{prop};
 
$data = prop(['value' => 'test']);
</php>
 
<script setup>
import { useFusion } from '$fusion/Pages/Debug.js'
import { log } from '@fusion/vue/actions'
 
const { data, fusion } = useFusion(['data', 'fusion'])
 
// Добавляем действие log
fusion.addAction(log, { priority: 10 })
 
// Теперь все изменения будут логироваться
</script>

<script setup>
import { useFusion } from '$fusion/Pages/Debug.js'
import { logStack } from '@fusion/vue/actions'
 
const { fusion } = useFusion(['fusion'])
fusion.addAction(logStack, { priority: 20 })
</script>

<php>
/**
 * @return \App\Models\User[]
 */
$users = prop(fn () => User::all()->makeVisible(['api_token']));
 
/**
 * @param int $id ID пользователя
 * @return \App\Models\User|null
 */
expose(getUser: function (int $id) {
    return User::find($id);
});
</php>
 
<script setup lang="ts">
interface User {
  id: number;
  name: string;
  email: string;
  api_token: string;
}
 
// TypeScript понимает, что users — это массив объектов User
const selectedUser = ref<User | null>(null);
 
// Функция для выбора пользователя
function selectUser(id: number) {
  getUser({ id }).then(user => {
    selectedUser.value = user as User;
  });
}
</script>

<php>
expose(deleteUser: function (User $user) {
   $user->delete();  // Возможно нарушение авторизации!
});
</php>

<php>
expose(deleteUser: function (User $user) {
   if (Gate::denies('delete', $user)) {
       abort(403);
   }
   
   $user->delete();
   return true;
});
</php>

<php>
// Опасно! Передаём всю модель User
$user = prop(fn () => Auth::user());
</php>

<php>
// Безопасно - передаём только необходимые атрибуты
$user = prop(fn () => Auth::user()->only(['id', 'name', 'email']));
 
// Или используем API-ресурс
$user = prop(fn () => new UserResource(Auth::user()));
</php>

<php>
expose(updateSettings: function (array $settings) {
   // Обязательно валидируйте входные данные!
   $validator = Validator::make($settings, [
       'email' => 'email|nullable',
       'notification_type' => 'in:email,sms,none',
       // прочие правила
   ]);
   
   if ($validator->fails()) {
       return ['success' => false, 'errors' => $validator->errors()];
   }
   
   // дальнейшая обработка
});
</php>