▄▄▄▄▄▄▄▄           
     ▄█▀▀░░░░░░▀▀█▄       "con"
   ▄█▀▄██▄░░░░░░░░▀█▄      > French word for "stupid"
  █▀░▀░░▄▀░░░░▄▀▀▀▀░▀█     > Against a proposition, opinion, etc
 █▀░░░░███░░░░▄█▄░░░░▀█   
 █░░░░░░▀░░░░░▀█▀░░░░░█   
 █░░░░░░░░░░░░░░░░░░░░█   "templating"
 █░░██▄░░▀▀▀▀▄▄░░░░░░░█    > Tool to help you write and maintain text documents
 ▀█░█░█░░░▄▄▄▄▄░░░░░░█▀   
  ▀█▀░▀▀▀▀░▄▄▄▀░░░░▄█▀    
   █░░░░░░▀█░░░░░▄█▀      "contemplate"
   █▄░░░░░▀█▄▄▄█▀▀         > To consider with continued attention; reflect upon; ponder; study; meditate on.
    ▀▀▀▀▀▀▀               
                          

ConTemplating

Simple library to help you use template string as a templating language. It simply gives you feature you might find in other templating languages you can't already get with vanilla js.

Usage & examples

If you want a "real-ish" example, checkout README.ts. It's the code to generate this readme.

Quick getting started

Use template() method as a tagged template to automatically

• Convert nullish values to empty strings.
• Print arrays without separators

const goodDogNames = [
    'Pogo',
    'Captain Sergent',
    'Sir Poopalot',
    null,
    undefined,
];

template`<h2>List of good dog name</h2>
<ul>
${goodDogNames.map(name =>
    `<li>${name}</li>
`}
</ul>
`

<h2>List of good dog name</h2>
<ul>
    <li>Pogo</li>
    <li>Captain Sergent</li>
    <li>Sir Poopalot</li>
</ul>

Why

Templating libraries have never been bigger, not only they are often fully featured language, but they also have a framework built on top of them (aka static site generator).

However, they rely on other languages and frameworks for data & execution.

It might be JS fatigue speaking, but this seems wasteful. I believe we spend too much time learning, maintaining, and working around another layer of programming language & framework.

What if we didn't need a second language for templating?

What if we could easily do everything a templating language provides using nothing but the host language & API?

This project will attempt to answer this question.

PS: I kind of already answered the question by using a (less elegant) prototype of ConTemplating to make my lost blog.

Yes it works! But I want to make it official this time and not keep it to myself.

Dogfooding

The README.md you are looking at was also made using ConTemplating, although it's not a complex example, it proves the concept is valid at a small scale.

I also made a blog with it, proving its usefulness on medium size projects.

How

TLDR: Its all about functions and template strings

Javascript now has template strings which can be used to insert variables and expressions in string literal without using concatenation or formatting. Template strings can also be improved upon with tagged templates which are simply methods that can parse the strings and variables.

These two additions to the language enable us to do what templating languages are meant to do; organize strings and data into text documents.

Everything else a templating language can provide is already in the language but was hard to use cleanly and efficiently.

Feature	JS Equivalent
Composition (modules, block, extends, yields, etc)	Import & Function
Loop	Array.prototype methods like map, reduce, filter, etc
Variables	Template strings embedded expressions
sanitization & autoescape	TODO: Ok ill get to this one, although, its not needed untill you use outside data

Things we get for free

• Parsing / Interpreting template
• Rendering to string
• Cashing (some sort of)
• No setup or config needed
• Nothing more to learn, we simply use what is in the language in a new way.
• Run in the browser natively (at least naively through .innerhtml)
• No extra IDE support is needed

Contribute

Contributions are welcome, but may be unnecessary? I welcome comments & PR but remember that in terms of implementation, less is more.

Requirements

• Deno
• Git

Supported platforms

• Deno

Technically also works on Nodejs and any browser if you transpile the code from Typescript down to Javascript A transpiled version might follow once I start publishing versions

Tests

Simply run the test script at the root of the project Tests are located under the tests folder and follow Deno's testing api

Build this readme

Simply run the build script

Sources

Sources are located in the src folder

Special thanks to:

• My partner & my doggo
• Maman & Papa
• People of Slacker News
• My chronic insomnia