Skip to content

v2.0.0

Choose a tag to compare

View all tags
@NiceArti NiceArti released this 22 Apr 19:35
· 51 commits to main since this release
v2.0.0
b865378

🚀 Gradiente v2.0

Major release introducing a pattern-driven Gradient DSL, a full ABI parsing pipeline, and a modular architecture for building and validating gradients.

✨ Highlights

🧠 Gradient DSL (Pattern System)

Gradiente now includes a custom Domain-Specific Language (DSL) for describing valid gradient input structures.

^[([config,color-stop,([color-hint,color-stop]|color-stop)]|color-stop),~([color-hint,color-stop]|color-stop)].

With this DSL you can:

  • define allowed input sequences
  • validate gradient structures
  • support custom gradient types (e.g. mesh, diamond, etc.)
  • avoid hardcoded parsing rules

Gradients are no longer just parsed — they are validated against a formal structure.

⚙️ ABI Layer (Gradient as Data)

Gradients are transformed into a normalized ABI:

{
  functionName: 'linear-gradient',
  isRepeating: false,
  inputs: [
    { type: 'config', value: 'to left' },
    { type: 'color-stop', value: 'red 10%' },
    { type: 'color-hint', value: '50%' },
    { type: 'color-stop', value: 'blue 80%' },
  ]
}

This enables:

  • predictable processing
  • renderer-agnostic workflows
  • easier transformations and exports

🔍 Modular Parsing Pipeline

Gradiente now uses a layered architecture:

  1. Function extractor
    → finds gradient(...)

  2. Top-level input splitter
    → safely splits arguments (handles nested functions)

  3. Classifier
    → detects:

    • config
    • color-stop
    • color-hint

  4. Pattern validator (DSL)
    → validates structure using your DSL

  5. Matcher engine
    → executes the DSL against ABI inputs

🧩 Matcher Engine

A custom execution engine that:

  • walks through pattern tokens

  • matches against classified inputs

  • supports:

    • sequences []
    • groups ()
    • alternatives |
    • repetition ~

This is effectively a mini pattern engine, purpose-built for gradients.

⚡ Performance

  • ~100k inputs validated in ~18ms
  • near-linear complexity
  • safe repeat handling (no infinite loops)

🧱 Architecture

Gradiente is now structured as a set of independent modules:

  • extractOuterFunctionCall — function parsing
  • splitTopLevelInputs — safe argument splitting
  • classifyInputs — ABI classification
  • pattern-validator — DSL validation
  • match — DSL execution engine

Each layer is isolated and reusable.

🔓 Extensibility

You can now define custom gradient rules:

parseStringToAbi(value, '^[color-stop,~color-stop].');

Example use cases:

  • mesh gradients (no config)
  • strict validation modes
  • experimental gradient types

⚠️ Breaking Changes

  • Full rewrite of parsing logic
  • Old parsing behavior is no longer supported
  • Gradients are now validated strictly via DSL

📌 Example

parseStringToAbi(
  'linear-gradient(to left, red 10%, 50%, blue 80%)'
);

🔮 What's next

  • Gradient normalization layer

  • Rendering adapters:

    • Canvas2D
    • PixiJS
    • Konva
    • WebGL / WebGPU

  • Playground for DSL and gradients

🧠 Summary

Gradiente is no longer just a parser.

It is now a gradient engine with a validation DSL, designed for:

  • visual editors
  • rendering engines
  • developer tooling
Assets 2
Loading