Development

Development

This guide covers the development workflow, conventions, and best practices for IONFLOW Frontend.

Development Server

Starting the Server

# Start development server
pnpm dev

# Start with specific port
pnpm dev --port 3000

# Start with host access (for mobile testing)
pnpm dev --host

Hot Module Replacement (HMR)

Vite provides instant HMR for:

• Vue single-file components
• CSS/Tailwind changes
• TypeScript files

Code Style

TypeScript Rules

// ❌ NEVER use any
const data: any = response.data;

// ✅ Always use proper types
const data: UserResponse = response.data;

// ❌ NEVER use interface
interface User {
  id: string;
}

// ✅ Always use type
type User = {
  id: string;
};

Vue Component Structure

<script setup lang="ts">
// 1. Imports
import { ref, computed } from 'vue';
import type { User } from '@/models/user';

// 2. Props with types
type Props = {
  title: string;
  items: User[];
};
const props = defineProps<Props>();

// 3. Emits with types
type Emits = {
  select: [item: User];
  update: [value: string];
};
const emit = defineEmits<Emits>();

// 4. Composables and refs
const isLoading = ref(false);

// 5. Computed
const filteredItems = computed(() => props.items.filter(/* ... */));

// 6. Methods
const handleSelect = (item: User) => {
  emit('select', item);
};
</script>

<template>
  <!-- Template with Tailwind CSS -->
</template>

Language

• All code must be in English: comments, variables, functions
• Only exception: Translation files in src/lang/

Testing

Unit Tests

# Run all unit tests
pnpm test:unit

# Run tests in watch mode
pnpm test:unit --watch

# Run tests with coverage
pnpm test:unit --coverage

# Run specific test file
pnpm test:unit src/components/common/TruncateText.spec.ts

E2E Tests

# Run E2E tests
pnpm test:e2e

# Run E2E tests with UI
pnpm test:e2e --ui

# Run specific test
pnpm test:e2e e2e/login.spec.ts

Test File Location

• Unit tests: Next to the component (Component.spec.ts)
• E2E tests: In e2e/ directory

Building

Development Build

# Type checking
pnpm type-check

# Lint
pnpm lint

# Format
pnpm format

Production Build

# Build for production
pnpm build

# Preview production build
pnpm preview

Debugging

Vue DevTools

Install Vue DevTools browser extension for:

• Component inspection
• State debugging
• Performance profiling

VSCode Debugging

Add to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug IONFLOW",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Git Workflow

Branch Naming

feature/ION-123-add-flow-builder
bugfix/ION-456-fix-login-redirect
hotfix/ION-789-critical-security-fix

Commit Messages

Follow Conventional Commits:

feat(flows): add drag-and-drop support
fix(auth): resolve token refresh issue
docs(readme): update installation steps
refactor(components): simplify form validation
test(flows): add unit tests for FlowCard

Pre-commit Checks

The project uses pre-commit hooks for:

• ESLint
• Prettier
• Type checking

Common Tasks

Creating a New Component

1. Create component file in appropriate directory
2. Add unit tests if in src/components/
3. Add to exports if needed

Adding a New Route

1. Add route in src/router/[context].ts
2. Create view component in src/views/[context]/
3. Add navigation guard if needed

Adding a New Service

1. Create service in src/services/[context]/
2. Define types in src/models/
3. Create abstract class in src/interfaces/ if reusable

Adding Translations

1. Add keys to src/lang/en/message.ts
2. Add translations to src/lang/es/message.ts
3. Use t('key') in components

Performance Tips

• Use lazy loading for routes
• Implement virtual scrolling for large lists
• Optimize images and assets
• Use TanStack Query for caching

Related

• Installation
• Environment Variables
• Testing Guide