vue-renderer-standards

# Vue Renderer Standards ## Overview Renderer в massCode строится на Vue 3 Composition API с `<script setup lang="ts">`. Здесь важны строгие import rules, composable-first state sharing и запрет на прямой доступ к backend-возможностям. ## Component Pattern - Используй Vue 3 Composition API и `<script setup lang="ts">`. - Vue core (`ref`, `computed`, `watch`, `onMounted` и подобные) не импортируй вручную: они auto-imported. - Проектные компоненты из `src/renderer/components/` тоже не импортируй вручную: они auto-imported. - Локальную логику компонента держи в script, а не в template. ## Manual Imports Only Where Required Всегда импортируй вручную: - composables из `@/composables`; - utils из `@/utils`; - `@vueuse/core`; - Electron bridge из `@/electron`; - Shadcn UI из `@/components/ui/shadcn/*`. ## Shared State - Глобальное shared state реализуется composables без Pinia/Vuex. - Reactive state, который должен шариться между компонентами, объявляй на module level, вне экспортируемой функции composable. - Persistent UI/settings state храни через `store` из `@/electron`: - `store.app` для UI state; - `store.preferences` для user preferences. ## VueUse First - Перед написанием нового composable сначала проверь, нет ли подходящего решения в `@vueuse/core`. - Кастомный composable добавляй только если готового utility реально нет. ## Renderer Boundaries - Renderer не импортирует storage internals или backend-модули доступа к данным напрямую. - Renderer не обращается напрямую к Node.js, filesystem или storage runtime. - Доступ к main process возможен только через `api` или `ipc`. ## Common Mistakes - Ручной импорт `ref` / `computed` / `watch`. - Ручной импорт локальных project components. - Локальный state внутри composable, который должен быть общим между несколькими компонентами. - Попытка “срезать путь” и импортировать backend-модуль прямо в renderer.