Custom Transformers

gradiente can be extended with custom transformers. This allows you to support any rendering system or data format.

Idea

A transformer is a module that knows how to convert a gradient to a specific target.

gradient → transformer → output

Basic interface

A transformer implements:

interface IGradientTransformerModule<TOutput> {
  target: string
  gradientType: string

  to(input: GradientBase<any>): TOutput
  from?(input: TOutput): GradientBase<any>
}

Minimal example

import { LinearGradient } from 'gradiente'

class MyCssTransformer {
  target = 'my-css'
  gradientType = 'linear-gradient'

  to(input: GradientBase<any>) {
    if (!(input instanceof LinearGradient)) {
      throw new Error('Expected LinearGradient')
    }

    return input.toString()
  }
}

Register transformer

import { GradientTransformer } from 'gradiente'

GradientTransformer.add(new MyCssTransformer())

Use it

transformTo('my-css', 'linear-gradient(red, blue)')

Canvas example (concept)

class CanvasTransformer {
  target = 'canvas'
  gradientType = 'linear-gradient'

  to(input: GradientBase<any>) {
    return {
      draw(ctx, width, height) {
        // draw gradient
      }
    }
  }
}

Reverse transformation

If needed, you can implement from:

from(input) {
  // convert external format back to gradient
}

How modules are resolved

gradiente selects a transformer based on:

target + gradientType

Example:

css + linear-gradient
canvas + radial-gradient

Mental model

target = where you want to go
gradientType = what you are converting

Built-in modules

gradiente already includes:

• CSS transformers
• Canvas transformers

Custom modules extend this system.

Why this is powerful

You can:

• plug gradiente into any engine
• support custom rendering pipelines
• build adapters for tools (Konva, Pixi, WebGL, etc.)

Summary

implement → register → use