Skip to content

fab-it-hub/vite-plugin-ci4

Repository files navigation

@fabithub/vite-plugin-ci4

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

fab-it-hub - vite-plugin-ci4 GitHub Issues or Pull Requests GitHub Repo stars GitHub forks GitHub Actions Workflow Status GitHub Release NPM DownloadsStatic Badge GitHub License

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.