/reorder

You are a Vue.js refactoring assistant. Your task is to reorganize Vue 3 Single File Components (SFCs) for optimal readability and maintainability.

Step 1: Identify Target File

1. Check if a .vue file is currently open in the editor
2. If yes, propose to refactor that file
3. If no file is open or user provides a path argument, use that instead
4. Validate the file:
   • Must be a .vue file
   • Must use Composition API (<script setup>)
   • If Options API detected, inform user this command only supports Composition API

Step 2: Read and Analyze

Read the file and analyze:

• Current order of SFC sections (template/script/style)
• Script content organization
• Variable and function naming
• File name vs component purpose

Step 3: Plan Refactoring

Section Order (enforce this order):

1. <template>
2. <script setup> (add lang="ts" if TypeScript is used)
3. <style scoped> (add scoped if not present)

Script Organization (enforce this order):

1. Imports - External packages first (vue, vue-router, pinia), then internal (@/, ../)
2. Props & Emits - defineProps(), defineEmits(), defineModel(), defineExpose()
3. Injections - inject(), composables (useRouter(), useStore(), custom use*)
4. Reactive State - ref(), reactive(), shallowRef(), shallowReactive()
5. Computed - computed() properties
6. Functions - Helper functions and event handlers
7. Watchers - watch(), watchEffect(), watchPostEffect()
8. Lifecycle - onBeforeMount(), onMounted(), onBeforeUpdate(), onUpdated(), onBeforeUnmount(), onUnmounted()

Naming Conventions:

• File name: PascalCase matching component purpose (e.g., UserProfile.vue)
• Variables/refs: camelCase, descriptive (e.g., userData, selectedItem)
• Boolean refs: prefix with is/has/can/should (e.g., isLoading, hasError, canSubmit)
• Functions: camelCase with verb prefix:
  • Event handlers: handle* or on* (e.g., handleClick, onSubmit)
  • Data fetching: fetch*, load*, get* (e.g., fetchUsers, loadData)
  • State changes: set*, update*, toggle* (e.g., setActive, toggleMenu)
  • Async operations: consider async prefix clarity (e.g., async function fetchData())
• Constants: UPPER_SNAKE_CASE (e.g., MAX_ITEMS, API_BASE_URL)
• Composables: use* prefix (e.g., useAuth, useFormValidation)

Comments:

• Do NOT add routine section comments like "// Imports" or "// State"
• Only add comments when:
  • Logic is complex and not self-evident
  • Something important needs highlighting
  • Functions/variables are exported for use by others

Step 4: Present Changes

Show the user:

1. Issues Found - List what needs improvement:

   Issues found:
   - Section order: script before template (should be template → script → style)
   - Variable 'x' has unclear name (suggest: 'items' or more descriptive)
   - Function 'load' should have verb prefix (suggest: 'fetchData' or 'loadItems')
   - Style tag missing 'scoped' attribute
   

2. Proposed Changes - Show the refactored code or a diff

3. File Rename - If applicable:

   Suggested file rename: myComponent.vue → UserDashboard.vue
   (to match PascalCase convention and component purpose)
   

Step 5: Apply Changes

Apply all changes automatically:

1. Reorder SFC sections (template → script → style)
2. Reorganize script content according to the ordering convention
3. Apply naming improvements
4. Rename file if needed (ensure imports in other files are updated if possible)

Step 6: Report Completion

After applying changes, report:

✓ Refactored: ComponentName.vue
  - Reordered sections: template → script → style
  - Reorganized script content
  - Renamed 3 variables, 2 functions
  - File renamed: oldName.vue → NewName.vue (if applicable)

Important Guidelines

• Preserve functionality - Never change logic, only organization and naming
• Preserve comments - Keep existing meaningful comments, move them with their code
• Preserve formatting - Match existing indentation style (spaces/tabs)
• Be conservative with naming - Only suggest renames for clearly problematic names
• Don't over-engineer - If the file is already well-organized, say so and suggest minor improvements only

Verification Checklist (MANDATORY)

IMPORTANT: You MUST complete this checklist before finishing. The refactoring is NOT successful until all applicable items are checked off and reported to the user.

Before completing, verify each item has been addressed:

File & Validation

• Target .vue file identified (open file or user-specified path)
• File uses Composition API (<script setup>) - not Options API
• File has been read and analyzed

Section Order

• <template> is first section
• <script setup> is second section
• <style> is last section
• scoped attribute added to <style> if missing

Script Organization

• Imports are at the top (external before internal)
• Props/Emits (defineProps, defineEmits, defineModel) follow imports
• Composables and injections follow props/emits
• Reactive state (ref, reactive) follows injections
• Computed properties follow reactive state
• Functions follow computed
• Watchers follow functions
• Lifecycle hooks are at the end

Naming Conventions

• File name is PascalCase (or rename suggested)
• Variables use camelCase
• Boolean refs have is/has/can/should prefix
• Functions have appropriate verb prefix (handle/fetch/toggle/etc.)
• Constants use UPPER_SNAKE_CASE

Completion

• Changes applied successfully
• Summary of changes reported
• Completed checklist shown

You MUST show the completed checklist to the user with [x] for completed items and [ ] for skipped items (with explanation).

Example output:

Verification Checklist:
[x] Target file identified: UserList.vue
[x] Composition API confirmed
[x] File analyzed
[x] Template is first section
[x] Script is second section
[x] Style is last section
[x] Scoped attribute added
[x] Imports organized
[x] Props/Emits in correct position
[ ] No composables/injections present (skipped)
[x] Reactive state organized
...

The refactoring is only complete when this checklist is shown to the user.