fab-it-hub / vite-plugin-ci4

Vite Plugin for CodeIgniter 4 integration.

@fabithub/vite-plugin-ci4

Vite Plugin for CodeIgniter 4 integration. Inspired by Laravel's Vite Plugin.

Introduction

This Vite plugin allows seamless integration of Vite JS with CodeIgniter 4, providing enhanced development and build processes for your web applications.

Features

• CodeIgniter 4 support for Vite.
• Streamlined development workflow.
• Efficient production builds.

Installation

NPM

npm install --save-dev @fabithub/vite-plugin-ci4

Yarn

yarn add --dev @fabithub/vite-plugin-ci4

PNPM

pnpm add -D @fabithub/vite-plugin-ci4

Bun

bun add -d @fabithub/vite-plugin-ci4

Usage

In your Vite configuration file (usually vite.config.js), add the plugin:

// vite.config.js
import Ci4Plugin from "@fabithub/vite-plugin-ci4";

export default {
  plugins: [Ci4Plugin("resources/index.js")]
};

Configuration

Vite Config

You can customize the plugin by passing options during initialization:

// vite.config.js
import Ci4Plugin from "@fabithub/vite-plugin-ci4";

export default {
  plugins: [
    Ci4Plugin({
      input: ["resources/index.js", "resources/app.css"],
      refresh: true
      /* other configuration here */
    })
  ]
};

Git Ignore

The hot file is created and deleted when the vite dev server is run, making it safe to ignore it. You can change the hot file path by update the config hotFile by default it's public/hot and add the path in the .gitignore.

# @fabithub/vite-plugin-ci4
public/hot

Options

Configuration	Type	Default	Description
input	string / string[]		The path or paths of the entry points to compile.
publicDirectory	string	"public"	Project's public directory.
buildDirectory	string	"build"	The public subdirectory where compiled assets should be written.
hotFile	string	`${publicDirectory}/hot`	The path to the "hot" file.
ssr	string / string[]		The path of the SSR entry point.
ssrOutputDirectory	string	"writable/ssr"	The directory where the SSR bundle should be written.
refresh	boolean / string / string[] / RefreshConfig / RefreshConfig[]	false	Configuration for performing full page refresh on blade (or other) file changes. see more
transformOnServe	(code: string, url: string)=>string		Transform the code while serving.

Example

// vite.config.ts
import type { UserConfig } from "vite";
import react from "@vitejs/plugin-react";
import ci4 from "@fabithub/vite-plugin-ci4";
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }): UserConfig => {
  const env = loadEnv(mode, process.cwd());

  return {
    plugins: [react(), ci4(`${env.VITE_RESOURCES_DIR}/${env.VITE_ENTRY_FILE}`)]
  };
});

TODO

• Basic Tests.
• Better Documentation.
• Tests for all files & functions.
• Many More.

Credits

This plugin is inspired by Laravel's vite-plugin by Laravel.

License

Released under MIT by @fab-it-hub.

This project was created using bun init in bun v1.0.25. Bun is a fast all-in-one JavaScript runtime.