### Install Project Dependencies

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Installs the project's dependencies using Composer. This is a standard step after cloning the project repository.

```bash
composer install
```

--------------------------------

### Setup CodeIgniter Vite with CLI Commands

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

Initialize CodeIgniter Vite in your project using the `php spark vite:setup` command. Options include forcing overwrites and specifying a custom resources directory.

```bash
php spark vite:setup
php spark vite:setup -f
php spark vite:setup --resourcesDir=frontend
```

--------------------------------

### Run CodeIgniter Vite Setup Command

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Executes a Spark command to automate the initial setup for CodeIgniter Vite integration.

```sh
php spark vite:setup
```

--------------------------------

### Install Vite and Vite Plugin

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Installs Vite and the vite-plugin-codeigniter as development dependencies using npm, pnpm, or yarn.

```bash
# using npm
npm install --save-dev vite vite-plugin-codeigniter

# using pnpm
pnpm add -D vite vite-plugin-codeigniter

# using yarn
yarn add -D vite vite-plugin-codeigniter
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Starts Vite's development server using npm, pnpm, or yarn.

```sh
# using npm
npm run dev

# using pnpm
pnpm run dev

# using yarn
yarn run dev
```

--------------------------------

### Install CodeIgniter Vite Package

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Installs the CodeIgniter Vite package using Composer.

```sh
composer require yassinedoghri/codeigniter-vite
```

--------------------------------

### ViteDecorator: Inject Assets into Views (PHP)

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

The ViteDecorator automatically injects Vite-built asset tags (CSS and JS) into HTML views. It uses route-to-asset mappings to determine which assets to include, supporting wildcards and exclusions for granular control. No manual setup is required as it's auto-registered.

```php
<?php
// The decorator is auto-registered via Registrar.php
// It processes views automatically - no manual setup needed

// Example: For a request to /dashboard with this config:
// $routesAssets = [
//     ['routes' => ['*'], 'assets' => ['styles/app.css', 'js/app.js']],
//     ['routes' => ['/dashboard*'], 'assets' => ['js/dashboard.js']],
// ];

// The decorator will inject these tags before </head>:
// <link rel="stylesheet" href="/assets/styles/app-abc123.css"/>
// <script type="module" src="/assets/js/app-def456.js"></script>
// <script type="module" src="/assets/js/dashboard-ghi789.js"></script>

// Using route exclusions:
// $routesAssets = [
//     [
//         'routes' => ['admin*'],
//         'exclude' => ['admin/login', 'admin/forgot-password'],
//         'assets' => ['js/admin.js'],
//     ],
// ];
// The admin.js asset loads on /admin/dashboard but NOT on /admin/login

```

--------------------------------

### Initialize Project Package Manager

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Initializes a package.json file for managing project dependencies using npm, pnpm, or yarn.

```sh
# using npm
npm init

# using pnpm
pnpm init

# using yarn
yarn init
```

--------------------------------

### Run All Tests

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Executes the entire test suite, including unit tests and potentially other types of tests. This provides a comprehensive check of the project's stability.

```bash
composer test
```

--------------------------------

### Run Static Analysis with PHPStan

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Executes static analysis on the codebase using PHPStan. This helps identify potential bugs and type errors before runtime.

```bash
composer phpstan
```

--------------------------------

### Project Structure for CodeIgniter Vite

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

This outlines the recommended directory structure for organizing frontend assets when using Vite with CodeIgniter. It includes locations for configuration, production build output, source assets (JS, CSS, static files), and essential project files like `package.json` and `vite.config.js`.

```text
project-root/
├── app/
│   └── Config/
│       └── Vite.php              # Your Vite configuration
├── public/
│   └── assets/                   # Production build output
│       ├── js/
│       ├── styles/
│       └── .vite/
│           └── manifest.json     # Build manifest
├── resources/                    # Source assets
│   ├── js/
│   │   ├── main.js
│   │   └── admin.js
│   ├── styles/
│   │   ├── index.css
│   │   └── admin.css
│   └── static/                   # Copied as-is (images, fonts)
│       └── images/
├── package.json
└── vite.config.js

```

--------------------------------

### Build Vite for Production

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Executes the production build command for Vite assets using npm, pnpm, or yarn.

```sh
# using npm
npm run build
```

--------------------------------

### Build Project Assets with npm/yarn/pnpm

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Commands to build project assets using different package managers. This process generates an 'assets' folder in the public directory containing bundled CSS and JS files, along with a 'manifest.json' file.

```shell
# using pnpm
pnpm run build
```

```shell
# using yarn
yarn run build
```

--------------------------------

### Run Unit Tests with Pest

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Executes unit tests using the Pest testing framework. This is crucial for ensuring the correctness of individual code components.

```bash
composer pest
```

--------------------------------

### Generate Pest Type Coverage Report

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Analyzes the codebase and generates a report of type coverage using Pest. This helps in understanding the extent of type hinting in the project.

```bash
composer pest:type-coverage
```

--------------------------------

### Extend CodeIgniter Vite Configuration

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Manually sets up the Vite configuration by extending the base CodeIgniterVite configuration class in app/Config/Vite.php.

```php
<?php
// app/Config/Vite.php

declare(strict_types=1);

namespace Config;

use CodeIgniterVite\Config\Vite as CodeIgniterViteConfig;

class Vite extends CodeIgniterViteConfig
{
   // ...
}
```

--------------------------------

### Update and Validate Composer Dependencies

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Updates project dependencies to their latest compatible versions and validates the composer.json file. This ensures the project is using up-to-date libraries.

```bash
composer core:update
```

--------------------------------

### Generate Asset Links with Vite Helper Function

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

The `render_asset_link()` helper function generates HTML tags for assets, supporting different asset types and environments. It can also render modulepreload links for dependencies.

```php
<?php

helper('vite');

// Render a JavaScript module
// Output: <script type="module" src="http://localhost:5173/js/app.js"></script>
echo render_asset_link('js/app.js', 'http://localhost:5173');

// Render a CSS file
// Output: <link rel="stylesheet" href="http://localhost:5173/styles/main.css"/>
echo render_asset_link('styles/main.css', 'http://localhost:5173');

// Render a TypeScript file (treated as JS module)
// Output: <script type="module" src="http://localhost:5173/js/app.ts"></script>
echo render_asset_link('js/app.ts', 'http://localhost:5173');

// Render modulepreload link for dependencies
// Output: <link rel="modulepreload" href="/assets/vendor-abc123.js" />
echo render_asset_link('assets/vendor-abc123.js', '', true);

// Production usage without base URL
// Output: <link rel="stylesheet" href="/assets/styles/main-hash.css"/>
echo render_asset_link('assets/styles/main-hash.css');
```

--------------------------------

### Run Refactors with Rector

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Applies automated refactorings to the codebase using Rector. This command helps in modernizing the code and applying best practices.

```bash
composer rector:fix
```

--------------------------------

### Configure Route-Asset Mappings in CodeIgniter

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Defines how to map specific assets (CSS, JS) to different routes within your CodeIgniter application. This is done by setting the `$routesAssets` property in the `app/Config/Vite.php` file.

```php
public array $routesAssets = [
  [
    'routes' => ['*'], // include these assets on all routes
    'assets' => ['styles/index.css', 'js/main.js'],
  ],
  [
    // include the map.js file in the /map route
    'routes' => ['/map'],
    'assets' => ['js/map.js'],
  ],
  [
    'routes' => ['admin*'], // only include these assets in Admin routes
    'assets' => ['js/admin.js'],
  ]
];
```

--------------------------------

### Environment Configuration: Vite Mode (.env)

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

Configure the Vite environment mode using CodeIgniter's `.env` file. Setting `vite.environment` to `"development"` enables the Vite dev server for serving assets, while `"production"` (the default) uses assets from the build manifest.

```ini
# .env file

# Development mode - assets served from Vite dev server
vite.environment = "development"

# Production mode - assets served from built manifest (default)
vite.environment = "production"

```

--------------------------------

### Expose Pest Code Coverage

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Generates a code coverage report using Pest. Requires XDEBUG to be enabled in coverage mode. This report helps identify which parts of the code are covered by tests.

```bash
composer pest:coverage
```

--------------------------------

### Fix Code Style with ECS

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/CONTRIBUTING.md

Applies code style fixes using simplify/easy-coding-standard. This command helps maintain a consistent code style across the project.

```bash
composer style:fix
```

--------------------------------

### Set Vite Environment to Development

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Configures the Vite environment to 'development' in the project's .env file.

```ini
# .env
vite.environment="development"
```

--------------------------------

### Add Vite Scripts to package.json

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Adds 'dev' and 'build' scripts to the package.json file for running Vite development server and production builds.

```json
{
  //...
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
  //...
}
```

--------------------------------

### Configure Vite with Vite Plugin CodeIgniter

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Configures Vite in the project's root vite.config.js file, including the vite-plugin-codeigniter.

```js
// vite.config.js
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

export default defineConfig(() => ({
  server: {
    port: 5173,
    strictPort: true, // prevents port from changing to something other than 5173
  },
  plugins: [codeigniter()],
}));
```

--------------------------------

### Resolve Asset Paths with Vite Service

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

The `Vite` service in CodeIgniter resolves asset paths dynamically. It returns development server URLs for development and manifest-linked hashed filenames for production.

```php
<?php

// Get the Vite service
$vite = service('vite');

// Resolve a single asset - returns appropriate HTML tag
// Development: <script type="module" src="http://localhost:5173/js/app.js"></script>
// Production: <script type="module" src="/assets/js/app-abc123.js"></script>
$scriptTag = $vite->asset('js/app.js');

// Resolve CSS asset
// Development: <link rel="stylesheet" href="http://localhost:5173/styles/main.css"/>
// Production: <link rel="stylesheet" href="/assets/styles/main-def456.css"/>
$styleTag = $vite->asset('styles/main.css');

// Manual usage in a view (typically not needed due to automatic injection)
echo $vite->asset('js/chart.js');
echo $vite->asset('styles/chart.css');
```

--------------------------------

### Customize CodeIgniter-Vite Configuration Properties

Source: https://github.com/yassinedoghri/codeigniter-vite/blob/main/README.md

Allows for customization of various Vite configuration properties within the `app/Config/Vite.php` file. These defaults are synchronized with `vite-plugin-codeigniter`.

```php
// app/Config/Vite.php

// ...
public string $serverOrigin = 'http://localhost:5173';

public string $resourcesDir = 'resources';

public string $assetsDir = 'assets';

public string $manifest = '.vite/manifest.json';

public string $manifestCacheName = 'vite-manifest';
// ...
```

--------------------------------

### Vite Config: vite.config.js with vite-plugin-codeigniter (JavaScript)

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

This JavaScript configuration file sets up Vite for a CodeIgniter project using `vite-plugin-codeigniter`. It defines server options like port and strict port enforcement, and integrates the CodeIgniter plugin, which can be customized with options like `resourcesDir` and `assetsDir`.

```javascript
// vite.config.js
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

export default defineConfig(() => ({
  server: {
    port: 5173,
    strictPort: true, // Prevents port auto-increment
  },
  plugins: [codeigniter()],
}));

// With custom resources directory
export default defineConfig(() => ({
  server: {
    port: 5173,
    strictPort: true,
  },
  plugins: [
    codeigniter({
      resourcesDir: "frontend",
    }),
  ],
}));

// Full configuration with all options
export default defineConfig(() => ({
  server: {
    port: 5173,
    strictPort: true,
    host: "0.0.0.0", // Allow external connections
  },
  build: {
    sourcemap: true,
  },
  plugins: [
    codeigniter({
      resourcesDir: "resources",
      assetsDir: "assets",
    }),
  ],
}));

```

--------------------------------

### Configure Vite Integration in CodeIgniter

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

The `Config\Vite` class in CodeIgniter allows customization of Vite integration settings. This includes environment mode, server origin, directory paths, manifest details, and route-to-asset mappings.

```php
<?php
// app/Config/Vite.php

declare(strict_types=1);

namespace Config;

use CodeIgniterVite\Config\Vite as CodeIgniterViteConfig;

class Vite extends CodeIgniterViteConfig
{
    // Set to 'development' to use Vite dev server, 'production' for bundled assets
    public string $environment = 'production';

    // Vite dev server URL
    public string $serverOrigin = 'http://localhost:5173';

    // Directory containing source assets (JS, CSS, static files)
    public string $resourcesDir = 'resources';

    // Output directory for bundled assets in public folder
    public string $assetsDir = 'assets';

    // Path to Vite manifest file relative to public/assets
    public string $manifest = '.vite/manifest.json';

    // Cache key for storing parsed manifest
    public string $manifestCacheName = 'vite-manifest';

    // Route-to-asset mappings
    public array $routesAssets = [
        [
            'routes' => ['*'], // Apply to all routes
            'assets' => ['styles/index.css', 'js/main.js'],
        ],
        [
            'routes' => ['/map'],
            'assets' => ['js/map.js'],
        ],
        [
            'routes' => ['admin*'], // Wildcard for admin routes
            'assets' => ['js/admin.js'],
            'exclude' => ['admin/login'], // Optional exclusions
        ],
    ];
}
```

--------------------------------

### ViteManifest: Parse Vite Build Manifest (PHP)

Source: https://context7.com/yassinedoghri/codeigniter-vite/llms.txt

The ViteManifest class parses Vite's build manifest file (manifest.json) to resolve asset paths. It handles CSS dependencies and JS imports, providing methods to render complete asset links, including preloading directives for optimal performance. It also includes error checking for manifest loading.

```php
<?php

use CodeIgniterVite\ViteManifest;

// Create manifest instance (typically handled internally by Vite service)
$manifest = new ViteManifest('.vite/manifest.json');

// Check for load errors
if ($manifest->loadError) {
    throw new RuntimeException('Manifest not found - run vite build first!');
}

// Access parsed chunks
// Each chunk contains: file, name, src, isEntry, isDynamicEntry, imports, dynamicImports, css
foreach ($manifest->chunks as $entryPath => $chunk) {
    echo "Entry: {$entryPath}\n";
    echo "File: {$chunk->file}\n";
    echo "CSS deps: " . implode(', ', $chunk->css) . "\n";
    echo "JS imports: " . implode(', ', $chunk->imports) . "\n";
}

// Render asset links with all dependencies
// This outputs CSS dependencies first, then JS imports (as modulepreload), then the main file
$html = $manifest->renderAssetLinks('js/app.js');
// Output example:
// <link rel="stylesheet" href="/assets/styles/app.css"/>
// <link rel="modulepreload" href="/assets/vendor.js" />
// <script type="module" src="/assets/js/app.js"></script>

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.