VSCode Extension for Event/Sub ID Generation & Navigation

[flexsurfer]

📋 Summary

Create a VSCode extension that streamlines working with Reflex (or similar pub/sub) event IDs. It should:

• Generate new event/subscription IDs and insert them into the shared event-ids.ts / sub-ids.ts files.
• Provide “Go to implementation” navigation:
  • From a dispatch('someId') call jump to the matching regEvent('someId', …) handler.
  • From a useSubscription('someId') call jump to the matching regSub('someId', …) handler.
  • From a regEvent('someId', …)/regSub declaration jump to all dispatch/useSubscription points.

🎯 Goals

1. Reduce friction when adding new events or subscriptions.
2. Enable one-click navigation between dispatch calls and handler registrations.
3. Keep modules decoupled (no need to import handlers into the UI just for navigation).

✍️ User Stories

• As a developer, when I type Reflex: Create new event… in the Command Palette, I can enter a new ID ("todos/add") and have:

  1. A new entry appended under export const EVENT_IDS = { … } in src/events.ts, and
  2. A stub regEvent('todos/add', (ctx) => { /* TODO */ }) injected into src/events.ts (or into a designated handlers.ts).

• As a developer, when I place the cursor on dispatch('todos/add') and press F12 (Go to Definition), I am taken to the matching regEvent('todos/add', …) stub.

• As a developer, when I place the cursor on regEvent('todos/add', …) and press “Find All References”, I see all dispatch('todos/add') and useSubscription(['todos/add']) usages.

🛠 Technical Requirements

1. Command Palette integration

   • reflex.createEventId
     • Prompt: “Enter new event ID”
     • Inserts into src/events.ts under the EVENT_IDS object (maintain sorted order or append).
     • Creates or updates a stub regEvent call in src/events.ts (or in a separate handlers.ts).

2. Definition Provider

   • For any string literal argument matching the pattern of a registered ID, hook into VSCode’s Go To Definition to route from dispatch(id) or useSubscription([id]) to the corresponding regEvent(id, handler) location.

3. Reference Provider

   • From the regEvent(id, …) location, support “Find All References” to list every dispatch(id, …) and useSubscription([id]) occurrence.

4. Configuration

   • Let users configure:
     • Path/glob for their events.ts and subscriptions.ts (defaults: src/events.ts, src/subscriptions.ts).
     • Naming conventions for constants vs plain strings.

5. Robustness

   • Should handle both string-literal unions and as const–based ID definitions.
   • Support TypeScript and JavaScript workspaces.

✅ Acceptance Criteria

• Create Event ID command appears in the Command Palette.
• Create Sub ID command appears in the Command Palette.
• New IDs are correctly inserted into the configured events file.
• A matching stub regEvent(...) is created or updated without breaking existing code.
• F12 on dispatch(id) jumps directly to its regEvent(id, …) handler.
• “Find All References” on regEvent(id, …) shows every dispatch/useSubscription usage.
• Extension settings allow customizing file paths and ID naming patterns.
• Works in both JS and TS projects (with or without as const).

[flexsurfer]

In the future it would be cool to support navigation from reflex-devtools