@lydio/bubbles

Canonical URL: https://alexstevovich.com/r/lydio-bubbles-nodejs

Recursive node transformation for Lydio

Lydio Bubbles provide a powerful mechanism for automated transformations across an entire hierarchy of Lydio nodes. This package includes the most commonly used bubbles, with more being added as foundational patterns emerge.

Installation

npm  install @lydio/bubbles

What is a Lydio Bubble?

A Bubble recursively applies transformations across a hierarchy of Lydio nodes. Bubbles allow you to modify, classify, or audit elements in a structured way without manually iterating through them.

This package provides a collection of the most useful bubbles, including:

• BEM Bubble – Applies Block-Element-Modifier naming conventions.

• Prefix Class Bubble – Adds a prefix to all class names in a hierarchy.

• Semantic Class Bubble – Assigns a class based on the element’s semantic tag.

BEM Bubble

Applies Block-Element-Modifier (BEM) naming conventions to all elements in a hierarchy.

import { bemBubble } from '@lydio/bubbles';
lydioNode.bubble(bemBubble('my-component'));

example output:

<div class="component my-component__component">
    <p class="fancy-text my-component__fancy-text"></p>
</div>

Prefix Class Bubble

Prefixes all class names in a hierarchy with a prefix class identifier.

import { prefixClassBubble } from '@lydio/bubbles';

lydioNode.bubble(prefixClassBubble('主'));

example output:

<div class="component 主component">
    <p class="fancy-text 主fancy-text"></p>
</div>

Semantic Class Bubble

import { semanticClassBubble } from '@lydio/bubbles';
lydioNode.bubble(semanticClassBubble());

example output:

<div class="component">
    <p class="fancy-class p"></p>
</div>

License

Licensed under the Apache License 2.0.

Trademark

“Lydio” and related marks are trademarks of Alex Stevovich.

See TRADEMARK.md for details.