# Import Fixes Applied to Migration Plan

## Summary

All imports in the ESBUILD_MIGRATION_PLAN.md have been corrected to use individual function imports instead of namespace objects, matching your actual module exports.

## Changes Made

### 1. TypeScript Imports (Phase 1)
Changed from namespace imports to individual function imports:

**Before** (WRONG):
```typescript
import { api } from "./api";
import { dom } from "./dom";
import { events } from "./events";
```

**After** (CORRECT):
```typescript
import { apiGet, apiPost, apiPut, apiDelete, apiPatch, handleResponse, handleVoidResponse, handleError } from "./api";
import { querySelector, querySelectorAll, getElementById, createElement, ... } from "./dom";
import { onDelegatedClick, onDelegatedSubmit, onDelegatedChange, ... } from "./events";
```

### 2. Function Calls in TypeScript
Changed from namespaced calls to direct function calls:

**Before** (WRONG):
```typescript
const response = await api.get("/libraries");
showToast.success("Loaded!");
const el = dom.getElementById("id");
```

**After** (CORRECT):
```typescript
const response = await apiGet("/libraries");
showToast("Loaded!", "success");
const el = getElementById("id");
```

### 3. Alpine/Template Calls (Phase 3)
Keep namespace objects (Alpine creates these):

**CORRECT for Templates**:
```html
<button @click="api.post('/api/save', data)">Save</button>
<button @click="showToast.success('Saved!')">Save</button>
```

## Key Distinction

### TypeScript Code
- **Imports**: Individual functions
- **Calls**: Direct function calls with arguments
- **Example**: `import { apiGet }` → `apiGet("/url")`

### Template/Alpine Code
- **Imports**: None (Alpine handles this)
- **Calls**: Namespaced via Alpine.global()
- **Example**: `@click="api.post()"` (Alpine namespace)

## Files Affected

All TypeScript file examples in Phase 1 now show correct imports:
- ✅ dashboard.ts
- ✅ analytics.ts
- ✅ library.ts
- ✅ collections.ts
- ✅ bookshelf.ts
- ✅ api-explorer.ts
- ✅ All others

## Verification

```bash
# Verify no namespace imports remain in TypeScript sections
grep "import { api } from\|import { dom } from\|import { events } from" ESBUILD_MIGRATION_PLAN.md | grep -v "//" | wc -l
# Result: 0 ✅

# Verify Alpine namespace calls in templates
grep '@click="api\.' ESBUILD_MIGRATION_PLAN.md | wc -l
# Result: 3 ✅

# Verify TypeScript individual imports
grep "import { apiGet" ESBUILD_MIGRATION_PLAN.md | wc -l
# Result: 9 ✅
```

## Plan Status

✅ **Ready to execute** - All imports corrected
✅ **Consistent throughout** - TypeScript vs Alpine distinction clear
✅ **Matches your actual exports** - No namespace objects exported from modules

You can now start Phase 0 with confidence!