🚀 Features

• 🛠️ Virtual Module Support: Use a virtual module to dynamically load JSON configurations.
• 👌 Flexible Output: Generates configuration files with customizable paths and filenames.
• ⚡ Multiple Build Formats: Supports CommonJS (CJS), ES Modules (ESM), and UMD formats for compatibility with various environments.
• 🐞 Error Handling: Handles missing or invalid JSON files gracefully.
• 🪛 Customizable: Configure input paths, output directories, and filenames with ease.

⚡ Installation

Install the plugin via pnpm:

pnpm add @ptahjs/vite-plugin-json --dev

Or using npm:

npm install @ptahjs/vite-plugin-json --dev

Or using yarn:

yarn add @ptahjs/vite-plugin-json --dev

⚙️ Usage

Add the plugin to your Vite configuration in vite.config.js:

import { defineConfig } from 'vite';
import JsonConfig from '@ptahjs/vite-plugin-json';

export default defineConfig({
    plugins: [
        JsonConfig({
            path: './src/config.json', // Path to your JSON file
            outputName: 'config.json', // Name of the output file
            outputDirectory: './dist' // Directory to save the output file
        })
    ]
});

Example JSON File

An example config.json file:

{
    "apiEndpoint": "https://api.example.com",
    "debug": true
}

🧲 How It Works

Development Mode (serve)

• The plugin creates a virtual module (virtual:JsonConfig) to dynamically provide the JSON configuration.
• The virtual module can be imported in your application:

import JsonConfig from 'virtual:JsonConfig';

JsonConfig((config) => {
    console.log('Loaded config:', config);
});

Build Mode (build)

• The JSON configuration is written to the specified output directory as a file (e.g., project/config.json).
• Your application can fetch this configuration at runtime:

fetch('/config.json')
    .then((response) => response.json())
    .then((config) => {
        console.log('Loaded config:', config);
    });

⛏️ Build Output Formats

The plugin supports multiple build formats for compatibility with different environments:

| Format | File Example | Use Case | | ------ | -------------- | ------------------------------------------ | | ESM | index.es.js | Modern bundlers like Vite, Rollup, Webpack | | CJS | index.cjs.js | Node.js applications | | UMD | index.umd.js | Browsers and universal environments |

📝 Options

| Option | Type | Default | Description | | ----------------- | -------- | ------------------- | ------------------------------------------------ | | path | string | undefined | Path to the JSON configuration file. | | outputName | string | "JsonConfig.json" | Name of the output configuration file. | | outputDirectory | string | "./dist" | Directory to save the output configuration file. |

💻 Example Scenarios

1. Dynamic Configuration in Development
   Use the plugin in serve mode to load configuration dynamically without rebuilding the project.

2. Static Configuration in Production
   Build the project with a statically generated configuration file for better performance.

🔧 Development

Clone the repository and install dependencies:

git clone https://github.com/PtahJs/vite-plugin-json.git
cd vite-plugin-json
pnpm install

Build the plugin:

pnpm build

🔗 Contributing

Contributions are welcome! If you encounter issues or have feature requests, feel free to open an issue or submit a pull request.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

📧 Contact

For questions or support, feel free to reach out at [email protected].