eoussama / temme.js

Emmet, but for JavaScript.

Hello 👋, I'm Oussama Essamadi, EOussama for short.

• Portfolio
• Github
• Linkedin
• Twitter
• Youtube

temme.js's Issues

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Templates.

Adding support for a new option called templates that will hold templating objects that are not created as HTML elements and only exists for the sake of other elements referencing them.

Syntax

templates: [
    {
        ref: 'temp-1',
        classes: ['red', 'bold'],
        dataset: {
            id: 100
        }
        // ...
        // Any other options aside from `name` and `children`.
    }
    // Other templates if needed...
]

Data structure

• The templates option must be an array, and each object in it must have a ref option, otherwise, it's invalid.
• Templates can reference other templates.
• Templates cannot have a name option.
• Templates cannot have a children option.

Referencing a template
Referencing templates works the same as referencing other elements.

{
    templates: [
        {
            ref: 'temp-1',
            classes: ['bold', 'italic']
        }
    ],
    children: [
        {
            from: {
                ref: 'temp-1',
                mode: 'append'
            },
            classes: ['red']
        }
    ]
}

<div>
    <div class="bold italic red" />
</div>

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

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>

HTML tree to hierarchy conversion.

Simply convert an HTML tree into a valid hierarchy.

Syntax

Temme.convert(htmlTree: HTMLElement);

Example

Take into account the following HTML tree:

<div id="parent-id" class="red">
    <h1 class="red bold">Heading</h1>
</div>

That would simply be converted into the following:

{
   temmeIds: [],
   ref: "parent",
   id: "parent-id",
   name: "div",
   classes: ["red"],
   childNodes: [
       {
         temmeIds: [],
         ref: "",
         id: "",
         name: "h1",
         classes: ["bold"],
         childNodes: [],
         templates: [],
         attributes: {},
         dataset: {},
         content:{
            type: "text",
            value: "Heading"
         },
         from:{
            ref: "parent",
            mode: "append",
            include:["name", "id", "classes", "attributes", "dataset", "content", "childNodes"],
            exclude:[],
            children: {
               allow: false,
               placement: "after"
            }
         }
      }
   ],
   templates: [],
   attributes: {},
   dataset: {},
   content:{
      type: "text",
      value: ""
   },
   from:{
      ref: "",
      mode: "append",
      include:["name", "id", "classes", "attributes", "dataset", "content", "childNodes"],
      exclude:[],
      children: {
         allow: false,
         placement: "after"
      }
   }
}

Notice how Temme has to figure out how to cleverly set inheritances on its own.

Hierarchy duplication.

Add a way to explicitly tell Temme to clone a specific hierarchy a number of times.
That could be used in case of generating a long list where it's preferred to remain as short as you can when putting together a hierarchy object.

This change will introduce a new option that will take care of duplication through a sub-option of its own, and eventually house other sub-options in the future that don't alter how a hierarchy is defined per se but do add some extra instruction on how to deal with it.

The suggested names would respectively be meta and repeat.

Syntax

{
    meta: {
        repeat: 5
    },
    name: 'span',
    classes: ['cls-1', 'cls-2']
}

That simply instructs Temme to clone the hierarchy 5 times (5 clones + 1 original = 6 duplicates) and eventually end up with the following;

<span class="cls-1 cls-2" />
<span class="cls-1 cls-2" />
<span class="cls-1 cls-2" />
<span class="cls-1 cls-2" />
<span class="cls-1 cls-2" />
<span class="cls-1 cls-2" />

Things to consider

• The meta option is not inherited.
• The value of the repeat should of course be:
  • A valid number.
  • The minimum allowed value is 0 (Meaning no duplication).
  • The maximum allowed value should not too big, something around 500 (debatable).
• The duplication should be processed once everything else has been done including inheritance.

Translation to Typescript.

As the library is growing, and as it becomes harder to maintain, modularity has become more of an option.
We could have gone with simple ES6 modules and called it a day, however, why stop there?
The library is currently being re-written in Typescript if you want to follow along, refer to the typescript branch.

Gulp is probbaly getting disposed of, and Webpack is used instead in bundling.
I believe this is the better direction to go from here, as it offers better testing for individual modules.

Inheritance range

Adding the ability to specify what to inherit and what to ignore. Sometimes you would want to inherit only the classes and ignore all other options, some other times you would want to inherit everything except for a certain option.
include and exclude are both options that go along the from option and give control over option inheritance.

Syntax

{
    children: [
        {
            ref: 'some-ref',
            name: 'input',
            classes: ['bold', 'red'],
            attributes: {
                type: 'button',
                name: 'form-input'
            }
        },
        {
            from: {
                ref: 'some-ref',
                mode: 'append',
                include: ['classes']
            }
        }
    ]
}

Data structure

• A from option can either have an include option or exclude option, but never both at the same time.
• A from option can have none of the options above, in that case, it should include all by default (exclude nothing).

Expose the evaluation method.

Make it possible for the users to be able to use Temme's internal process of evaluation Hierarchy objects.

Syntax

Temme.eval(hierarchy: Object);

It evaluates the passed hierarchy object and returns true if it was valid, else, it returns some information about either of the following:

• False: If the hierarchy is not valid.

• An object: An object that has both the name and the message of the first encountered error.

• An array: An array that includes descriptive objects about all of the errors found in the hierarchy object.

Example

Temme.eval({
    id: true
});