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.