Chasse is a lightweight CLI tool to write reusable HTML components (much like JSX) instead of repetitive code, without too many steps or a steep learning curve. It strips down on the boring and redundant and makes HTML fun again! Just run a simple command on an HTML file inheriting components from a base HTML file to convert it into a complete, usable HTML file.
The official image of Chasse can be used to try out the tool by spinning up a simple container. Start using the command immediately in the container adter starting it. There are some sample source files. You can also create some of your files. Get the image by:
docker pull diptonilroy/chasse:1.0.0Visit the official website for in-depth documentations, conventions and install guides.
All you have to do is:
-
Create a parent HTML file (or multiple parent files) for all the components you want to reuse. define components inside it like so (note the duo of tailing exclamation marks!), let this be called
template.chasse.html:... <Navbar!!> <nav> <ul> <li>About</li> <li>Contact</li> ... </ul> </nav> </Navbar!!> <UniversalFooter!!> <footer> All rights reserved (really, though? Are they?). </footer> </UniversalFooter!!> ...
-
Create a child HTML file to import and use the components you need to. First declare the parent files that will be used in the very first line (here it is
template.chasse.html, hence the first line), then straightaway import the components (note the use of two exclamation marks, followed by a space and a '/')! It is named aschild.chasse.html.<template!!> <!DOCTYPE HTML5> <html> ... <Navbar!! /> ... <UniversalFooter!! /> </html>
-
That's it, you're all set! Run the command, passing in the child file and the location to extract the generated HTML files into:
chasse child.chasse.html src
-
That's all you have to do to convert the components into complete code! The resultant files are in
.html, which browsers can understand with ease.
(Top)
Chasse borrows from the concepts of React components, Sass mixins and Django template inheritance to charge up simple and blazingly fast applications deployed on a web-server that don't require the overhead cast down by running npm (or any other processes). It is implemented using a simple Python application that uses argparse under the hood to power up the CLI.
The current release is the among the early ones in the line and has somewhat limited operational capability, but is capable of getting the main job done. Further planned improvements are written down below.
(Top)
- Static Websites? Maybe You Don't Need the
npmOverhead...: A great many good static websites can be shipped without the use of package managers or libraries (just plain HTML, CSS and JS). Content tends to get repetitive for HTML in such stacks, in which case this can be used to program sites without the use of heavier templating engines or utilities. - Zero Dependencies: The
chassebinary is all that is needed to begin. No underlying installations or packages required. - Similar to Sass: Chasse generates HTML files in a similar manner to Sass. Hence, developers familiar with Sass would be already set to go.
- HTML-Only: Unlike Sass, there are no foreign files that would require extensions or plugins in the IDE to work. Parent and child source files are in HTML. And so are the resultant files.
(Top)
- Too Young: Lacks many features that can be added to make it more robust.
- Binary Size: The single-file binary (in the
distfolder), occupies around 6.5 mB, which is somewhat large as a utility. - Less Customizable: There are fewer features and CLI options at present. However, the tool is expected to improve more in subsequent releases.
(Top)
- Tests: Tests (unit and integration) need to be written.
- Passing Data: Components would be allowed to have data passed on to them in form of variables.
- Nested Inheritance: Components would be allowed to have components within themselves.
- Transition to Go: Python is an interpreted language, due to which, despite the general programming ease, a release featuring Go would be introduced soon that would also be able to use concurrency in parsing multiple files at once, giving a binary that is extremely small and portable.
- Processing Multiple Files: Multiple files would be parsed at once to generate HTML.
- Improved Error Handling: Make error (and success) messages more informative.
(Top)
-
The current supported way to use the application (only in UNIX and Windows) is to download the respective binaries from the website (for the required OS), and follow the instructions to get it up and runnning. Alternatively, you can use the
distfolder in this repo, place them in an appropriate location and add them to the system PATH. Verify the binary by using:chasse -v
-
If you would like to try out the utility before working with it, use the official image
diptonilroy/chasse:1.0.0. You can also build the same by running theDockerfilelocated in the.devcontainerdirectory of this repository. -
It is highly recommended to use the website for downloading the packaged binary. Support for downloading from the repo shall be removed soon.
-
Currently, the respective binaries are sized at around 6.5 MB.
(Top)
-
-hor--help: Shows help with the complete guide to the use of the tool. -
-vor--version: Shows the current version of the tool. -
-por--parent-path: To specify the path to the parent files. Defaults to the source path.chasse child.chasse.html src -p src/parents
-
-lor--logs: To enable display of the logs during the generation of the HTML files. This is helpful when the files fail to get generated and there is an error with the Chasse source files.chasse -l child.chasse.html .
(Top)
- Parent HTML File: This is the file wherein the components (reusable or otherwise) to be used by the children are defined.
- Child (or Source) HTML File: This is the file wherein the HTML document is written with the use of components. Basically, this is where development is to be done. Later, this is the file that gets converted into the HTML code that is used and understood by the browser.
- Chasse File: Any file having the extension
.chasse.htmlis a Chasse file. This means both parent HTML and Child (or Source) HTML files are both collectively referred to as Chasse files. - Resultant HTML File: This is the file which gets generated and used by the browser.
- Components: These are blocks of reusable code that can be represented by a name. These names can just be plugged into the HTML documents in place of huge redundant paragraphs of the same thing, over and over again.
(Top)
For details about releases and version history, read the Changelog (for versioning, SemVer 2.0 has been used here). Current LTS is Chasse: Ballet (v1.0.0).
(Top)
- The Chasse files that would be converted into regular HTML files must have the extension
<file-name>.chasse.html. This is done to ensure that users do not confuse the generated files with the source files. This feature would not be altered in future releases in support of.htmlextensions as well to maintain clarity and segregation. - 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.
- Remember that a component is plugged in as <Component!! /> instead of <Component!!/>. 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.
(Top)