Plugins Overview

Ecopages provides two main types of plugins to extend its functionality:

1. Processors: Handle file transformations and asset processing
2. Integrations: Add support for new templating engines or frameworks

Types of Plugins

Processors

Processors are plugins that handle file transformations. They can:

• Transform files during build time
• Generate additional assets
• Optimize content
• Provide build loaders for development

Examples include the PostCSS processor and Image processor.

Integrations

Integrations add support for different templating engines and frameworks. They:

• Define file extensions to handle
• Provide rendering logic
• Manage dependencies
• Handle asset inclusion

Examples include the KitaJS, React, and Lit integrations.

Source Transforms

Build plugins rewrite module source with their transform hook. Register one in loaders, or return it from a processor's or integration's plugins(app). See Source Transforms.

Plugin Configuration

Plugins are configured in your eco.config.ts file:

import { defineConfig } from '@ecopages/core/config';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import { ecopagesJsxPlugin } from '@ecopages/ecopages-jsx';
 
export default defineConfig({
	rootDir: import.meta.dirname,
	processors: [postcssProcessorPlugin()],
	integrations: [ecopagesJsxPlugin()],
});Copy

See Custom Processor and Custom Integration for details on creating your own plugins.