Chasse

Basic Uses

This section would demonstrate an example with respect to the use of Chasse, as well as all rules to keep in mind.

First we see the reference, then we move on to the rules and then discuss the command flags and outputs.

Inheriting from Multiple Parents

Assume we have, in the same directory, three files: ballet.chasse.html (the child file), general.chasse.html
(parent file with reusable components like navbar, metadata, footer, et cetera) & text.chasse.html (parent file
containing components that are too bulky and text-heavy). The directory also contains an assets folder that
contains the Bootstrap CSS and JS source.

general.chasse.html:

HTML

<Head!!>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="...">
        <meta name="description" content="...">

        <title>Example Website</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!--FONTAWESOME STARTS HERE-->
        <link href="assets/fontawesome/css/all.css" rel="stylesheet">
    </head>
</Head!!>


<Footer!!>
    <footer>
        <div class="col-md-6">
            <ul class="list-inline text-right">
                <li class="list-inline-item">
                    <a href="#home">Home</a>
                </li>
                <li class="list-inline-item">
                    <a href="#about">About</a>
                </li>
                <li class="list-inline-item">
                    <a href="#services">Services</a>
                </li>
                <li class="list-inline-item">
                    <a href="#blogs">Blogs</a>
                </li>
                <li class="list-inline-item">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </footer>
</Footer!!>


<Scripts!!>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/popper.min.js" integrity="..." crossorigin="...">
    </script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/custom.js"></script>
</Scripts!!>

text.chasse.html:

HTML

<PlotlessBallets!!>
    <p>
        Plotless ballets have no storyline. Instead they use the movement
        of the body and theatrical elements to interpret music, create an
        image or express or provoke emotion. Choreographer George Balanchine
        was a prolific creator of plotless ballets.
    </p>
</PlotlessBallets!!>

ballet.chasse.html:

HTML

<text!!>
<general!!>

<!DOCTYPE html>
<html lang="en">
    <Head!! />

    <body>
        ...
        <div>
            <PlotlessBallets!! />
            ...
        </div>
        ...

        <Footer!! />

        <Scripts!! />
    </body>
</html>

Rules to Remember

It is mandatory for the Chasse files to have .chasse.html extension, otherwise it won't work.
Components must be named in PascalCase.
Parent file names should be all lowercase, followed by the extension.
The parent declarations should mandatorily have the lowercase parent file name.
It is mandatory to have two exclamation points right after the component name (no whitespace expected) in
a component definition.
A component definition ends with /Component!! and not / Component!! (with the brackets).
The parents files must be defined starting from the very first line, without any line breaks in between. This is a
feature limitation in the current version which would soon be addressed.
A component is plugged in as Component!! / instead of Component!!/ (with the brackets). Future
releases would address this issue.
It is assumed that an uniform indentation of 4 spaces is used while writing HTML code, which is the standard
observed for most of the IDEs out there.

Results & Optionals

There are two positionals - the child Chasse file and the path where the resultant HTML files get generated.
It is assumed that the parents are in the same directory as the child Chasse file. However, this is conventionally
not a good practice. We can specify paths where the parents live (check below for the -p option).
Assuming that we are to generate the file in the same directory, we use the command as:
HTML
```
chasse ballet.chasse.html .
```
If we are at generate the file in some other folder, we use the command as:
HTML
```
chasse ballet.chasse.html relative/path/to/directory
```
When we run the command, if all is well, we get a success message. However, at times we run into issues
by using the command wrongly by mistake and we get an error message. In all such cases, it helps to see
a more detailed output. To see more verbose and low-level logs of the operation, use the -l or --logs
optional.
HTML
```
chasse ballet.chasse.html . -l
```
Assuming that we had the parents in a different directory (say in /src/parents), we use the optional
-p or --parent-path:
HTML
```
chasse ballet.chasse.html . -p src/parents
```

We can now see the output file named as ballet.html, which looks ready - the data in the components
are in place...

HTML

<text!!>
<general!!>

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="...">
        <meta name="description" content="...">

        <title>Example Website</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!--FONTAWESOME STARTS HERE-->
        <link href="assets/fontawesome/css/all.css" rel="stylesheet">
    </head>

    <body>
        ...
        <div>
            <p>
                Plotless ballets have no storyline. Instead they use the
                movement of the body and theatrical elements to interpret
                music, create an image or express or provoke emotion. 
                Choreographer George Balanchine was a prolific creator 
                of plotless ballets.
            </p>
            ...
        </div>
        ...

        <footer>
            <div class="col-md-6">
                <ul class="list-inline text-right">
                    <li class="list-inline-item">
                        <a href="#home">Home</a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#about">About</a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#services">Services</a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#blogs">Blogs</a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </footer>

        <script src="assets/js/jquery-3.3.1.min.js"></script>
        <script src="assets/js/popper.min.js" integrity="..."
        crossorigin="..."></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/custom.js"></script>
    </body>
</html>

We see a small bug - the resultant files also carry the parent declarations. This bug shall not be a part of the
application from release 1.1.0. This leads us to the next section - a list of unresolved isses and bugs.