cleave-html syntax specification

vritant24 commented 6 years ago

So currently we were going with literally just splitting files and inserting them in during compiling stages. That doesn't allow for a lot of usability like in react components.

I remember you talking about using tag like syntax instead of the comment syntax. And that could be a better idea. This is still brainstorming.

So if done like this - index.html

<cleave import name="wrapper" src="./wrapper.html"/>

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <cleave name="wrapper">
            <h1>This is a page<h1>
        </cleave>
    </body>
</html>

wrapper.html

<div class="wrapper>
    <cleave child>
</div>

<cleave child> tells you where to put the child that it wraps around. <cleave name="wrapper"> tells you which component it is. <import ...> at the top is so that we can first build a list of all files that need to be read, and then asynchronously build the trees for all of them together. Instead of going through a file and finding the sources halfway through, and then adding it to a queue, it is separated into two distinct steps. Finding linked files, and then building trees.

This adds much more usability, also possible addition of variables through attributes. It also doesn't mess with normal html syntax. What do you think?

claytn commented 6 years ago

I like the idea of using cleave tags and using names to pair them with the correct component. If we add support for passing children then we'll just have to look for some sign of children within the import module. I don't think that would be too difficult to add once we have the initial idea complete. It should be as simple as setting all the containing html within the <cleave name=""></cleave> to some variable and then inlining that within the named module where the reference to children sits. I do like the idea. Though it may not be as useful in a static web page environment as it is in react, I still think we should add the support for it once we get the base version implemented.

vritant24 commented 6 years ago

It may not be as useful as it is in React, but like just being able to switch class names for parents through variables would be a neat feature. That can be a thing for later after we have implemented just compiling files.

We don't have to change anything we have now, except maybe add two more tree nodes to help with quicker inclusion of modules. A parent and and a child cleave node. Does that seem right?

claytn commented 6 years ago

Couldn't we just create a cleave node that is identical to the tag node? It would have children and attributes just like the tag, but would identify differently since it isn't a typical html tag. We could also just add a property to the tag node that determines whether or not it is a cleave and that would accomplish the same thing.

vritant24 commented 6 years ago

Yup that's what I intended to do, just inherit from a tag. But at the same time we want to limit a child to a cleave node to one. So just extending tag and overriding the definition of addChild would be better for development.

What do you think?

vritant24 / cleave-html

cleave-html syntax specification #14