# Build System

AjaxPress uses Vite as its build tool for both admin and frontend bundles.

## NPM Scripts

| Script | Command | Description |
|--------|---------|-------------|
| `admin` | `vite build --config ./src/admin/vite.config.js --watch` | Build admin panel (watch mode) |
| `frontend` | `vite build --config ./src/frontend/vite.config.js --watch` | Build frontend engine (watch mode) |
| `deactivate` | `terser ./src/admin/deactivate.js -o ./public/js/deactivate.min.js` | Minify deactivation script |
| `report` | `phpcs . > report.txt` | Run PHP CodeSniffer |

## Vite Configuration

### Admin Build (`src/admin/vite.config.js`)

```
Entry:  src/admin/index.jsx
Output: public/js/admin.min.js (IIFE)
        public/css/admin.min.css
```

**Plugins:** vite-plugin-solid (Solid.js JSX transform)

**Path Aliases:**
| Alias | Path |
|-------|------|
| `@components` | `src/admin/components` |
| `@` | `src/admin/views` |
| `@util` | `src/admin/utility` |

**PostCSS:** Tailwind CSS + Autoprefixer

### Frontend Build (`src/frontend/vite.config.js`)

```
Entry:  src/frontend/index.js
Output: public/js/ajaxpress.min.js (IIFE)
        public/css/ajaxpress.min.css
```

**Path Aliases:**
| Alias | Path |
|-------|------|
| `@` | `src/frontend/utils` |
| `@features` | `src/frontend/features` |

**PostCSS:** Tailwind CSS + Autoprefixer

### Common Settings

Both builds share:
- **Format:** IIFE (Immediately Invoked Function Expression) -- no module loader needed
- **Source maps:** Enabled
- **Minification:** Enabled
- **CSS extraction:** Separate `.css` file

## Dependencies

### Runtime

| Package | Version | Usage |
|---------|---------|-------|
| `solid-js` | 1.9.3 | Admin panel framework |
| `@solidjs/router` | 0.15.2 | Admin client-side routing |

### Build

| Package | Usage |
|---------|-------|
| `vite` | Build tool |
| `vite-plugin-solid` | Solid.js JSX transform |
| `tailwindcss` | Utility-first CSS framework |
| `autoprefixer` | CSS vendor prefixes |
| `postcss` | CSS processing pipeline |
| `terser` | JavaScript minifier (deactivate script) |

## Tailwind CSS

Two separate Tailwind configs:

### Admin (`src/admin/tailwind.config.js`)

Scans `src/admin/**/*.{js,jsx}` for class usage. Generates utility classes for the admin panel.

### Frontend (`src/frontend/tailwind.config.js`)

Scans `src/frontend/**/*.{js,jsx}` for class usage. Generates utility classes for the frontend engine.

Both configs use the default Tailwind theme with no custom extensions.

## SCSS

Legacy SCSS files in `src/sass/` are imported by the Vite builds:

```
src/sass/
├── admin.scss           # Admin entry (imports components + Tailwind)
├── frontend.scss        # Frontend entry (imports components + Tailwind)
└── components/
    ├── _animations.scss # Fade, slide transitions
    ├── _progressbar.scss# Progress bar styles
    ├── _loader.scss     # Spinner/loader styles
    ├── _accessibility.scss # A11y improvements
    └── _effects.scss    # Special effects
```

## Source Maps

Source maps (`.map` files) are generated for both JS bundles. They are:
- Included in the repository for development
- Excluded from the deployment package (`pak.yml`)