/create-cache-store

Create a smart cache store for an Odoo model with offline-first capabilities.

What this command does:

• Creates a framework-specific cache store (Svelte store, React Context, or Vue Pinia)
• Implements dual storage (localStorage + IndexedDB)
• Adds smart caching with stale detection (5-minute validity)
• Implements background sync (3-minute intervals)
• Includes incremental fetching (only new records)
• Adds partner name resolution and caching
• Implements optimistic updates

Required Information:

Before starting, gather:

1. Current working directory - Must be inside an Odoo PWA project
2. Framework - Detect from project files (SvelteKit/React/Vue)
3. Model name (without x_ prefix, e.g., "expense", "task")
4. Model display name (human-readable, e.g., "Expense", "Task")
5. Fields to fetch - Array of Odoo fields (e.g., ["x_studio_name", "x_studio_amount"])

Store Features:

The generated cache store will include:

• records - Reactive array of cached records
• isLoading - Loading state indicator
• error - Error state
• lastSync - Timestamp of last successful sync
• load() - Load from cache and trigger background sync
• create(data) - Create new record with optimistic update
• update(id, data) - Update record with optimistic update
• delete(id) - Delete record with optimistic update
• refresh() - Force refresh from Odoo
• clearCache() - Clear all cached data

Storage Strategy:

1. localStorage: Stores metadata (lastSyncTime, lastRecordId, version)
2. IndexedDB: Stores master data (all records)
3. Stale detection: Cache considered stale after 5 minutes
4. Background sync: Automatic sync every 3 minutes
5. Incremental fetch: Only fetches records with id > lastRecordId

Steps:

1. Verify the current directory is an Odoo PWA project
2. Detect the framework from project structure
3. Ask the user for model details and fields
4. Create cache store file in appropriate location:
   • SvelteKit: src/lib/stores/{model}Cache.js
   • React: src/contexts/{Model}Context.jsx
   • Vue: src/stores/{model}Store.js
5. Import and register the store in the appropriate location
6. Provide usage examples and documentation

Example prompts to use this command:

• /create-cache-store - Interactive mode
• User: "Create a cache store for the task model"
• User: "Add caching for product catalog"

After creation:

Remind the user to:

1. Import the store in components that need it
2. Call the load() method when the component mounts
3. Use reactive data bindings to display records
4. Test create, update, and delete operations
5. Verify offline functionality works correctly

Usage Examples:

SvelteKit

import { taskCache } from '$lib/stores/taskCache';

// In +page.svelte
$effect(() => {
  taskCache.load();
});

React

import { useTask } from './contexts/TaskContext';

const { records, create, update } = useTask();

Vue

import { useTaskStore } from '@/stores/taskStore';

const taskStore = useTaskStore();
taskStore.load();