Ability to reference parent/sibling elements for the sake of reusability.

[eoussama]

In some cases, you'd want to reuse another element in a said skeleton, be it somewhere on the DOM or part of the same hierarchy object.

We should be able to reference other elements without having to copy all the code again, after all, Temme exists to solve problems like that.

Things to consider:

• Referencing a direct (grand)-parent element might result in a recursive behavior that would cause crashes.
• Being able to reference already existing elements outside of the hierarchy's scope.
• Being able to reference elements from the same hierarchy object, parent elements can't reference their children, have it work only vice versa.
• Being able to override the options of the referenced element.

Suggested syntax:

const hierarchy = {
    children: [
        {
            ref: 'reusable-paragraph',
            name: 'p',
            classes: ['bold', 'red']
        },
        {
            name: 'div',
            children: [
                {
                    from: {
                        ref: 'reusable-paragraph'
                    }
                },
                {
                    from: {
                        ref: 'reusable-paragraph',
                        mode: 'append'
                    },
                    id: 'some-id',
                    classes: ['red', 'shadow', 'title'],
                    text: 'content'
                }
            ]
        },
        {
            from: {
                ref: 'reusable-paragraph',
                mode: 'override'
            },
            id: 'some-id',
            classes: ['red', 'italic', 'title']
        }
    ]
}

• ref: Marks an element with a key which can be referenced by it by other elements.
• from: An object with a few options of its own.
  • ref: The refereferenced element.
  • mode: Can either be “override” or “append” (by default it's “append”).
    • override: Overrides the referenced element's options.
    • append: Appends the host element's options to the referenced's.

The output:

<div>
    <p class="bold red"></p>
    <div>
        <p class="bold red"></p>
        <p class="bold red shadow title">content</p>
    </div>
    <p class="red italic title"></p>
</div>

[eoussama]

Feature added, with minor last moment changes for the syntax. Now it goes:

{
    ref: 'some-ref'
},
{
    from: {
        ref: 'some-ref',
        mode: 'append', // or override,
        allowChildren: true
    }
}