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

Source transforms rewrite module source during browser and HMR builds. They are configured separately from processors and integrations. See Source Transforms.

Plugin Configuration

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

import { ConfigBuilder } from '@ecopages/core/config-builder';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import { ecopagesJsxPlugin } from '@ecopages/ecopages-jsx';
 
const config = await new ConfigBuilder()
	.setProcessors([postcssProcessorPlugin()])
	.setIntegrations([ecopagesJsxPlugin()])
	.build();Copy

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