Nymphéa

Nymphéa exposes HTML and CSS generator functions that returns a sigle .html/.css string for a collection of nested components.

The HTML is parsed and validated by creating a temporary document with jsDOM, and a tree of components to check for circular dependencies. The library also exposes a function to retrieve this tree.

Install

npm install nymphea

Usage

const nymphea = require('nymphea');

const components = [
    {tag: 'my-parent', id: 'node-1', template: `<div class="container">{{var}} {{object.subVar}}<my-child1></my-child1> <my-child2></my-child2></div>`, styles: ".container {color: 'red';}", data: {var: 'Hello', object: {subVar: 'World'}}},
    {tag: 'my-child1', id: 'node-2', template: '<span>Child 1</span>', styles: "span {color: 'blue';}"},
    {tag: 'my-child2', id: 'node-3', template: `<span>Child 2 <my-child3></my-child3></span>`, styles: "span {color: 'orange';}"},
    {tag: 'my-child3', id: 'node-4', template: '<span>Child 3</span>'},
];

const html = nymphea.generateHTML(components, 'my-parent');
//  Returns a string of all the HTML with registered components repalced with their HTML content

console.log(html);
/* <div class="nym-component-node-1">
    <div>
        Hello World 
        <div class="nym-component-node-2">
            <span>Child 1</span>
        </div> 
        <div class="nym-component-node-3">
            <span>Child 2 
                <div class="nym-component-node-4">
                    <span>Child 3</span>
                </div>
            </span>
        </div>
    </div>
</div> */


const css = nymphea.generateCSS(components);
//  Returns a string containing all the CSS with encapsulation by class

console.log(css);
/* .nym-component-node-1 .container {color: 'red';} 
.nym-component-node-2 span {color: 'blue';} 
.nym-component-node-3 span {color: 'orange';} */


const tree = nymphea.getComponentsTree(components, 'my-parent');
//  Returns the tree of components rooted on the selected tag

console.log(tree);
/* {
  componentId: 'node-1',
  children: [
    { componentId: 'node-2', children: [] },
    { componentId: 'node-3', children: [
        { componentId: 'node-4', children: [] }
    ] }
  ]
} */

Types

type Component = {
    id: string;
    tag: string;
    template: string | HTMLElement;
    styles?: string;
}

type ComponentNode = {
    componentId: string;
    children: ComponentNode[];
}

To Do

• Let the component template be a HTMLElement
• Add data & variables to templates
• Add *nymIf directives in template
• Add *nymFor loop directives in template
• Let the component template be a HTML File
• Let the component stykes be a CSS File
• Create a nym-ignore html id attribute for parts of the temlates not to be interpreted as part of the framework