DEV Community

How I accidentally wrote an awesome HTML Preprocessor

Meghan (she/her) on October 08, 2017

As a programmer, Compilers have always seemed to me like a million line black box only out-daunted by making an operating system. But hard challeng...
Collapse
 
morgboer profile image
Riaan Pietersen

This is cool. A great extension would be one where you could mix-in standard Bootstrap markup through use of a keyword, eg.

body(
h1("Corgi Example")
p("This is an example HTML document written in "ahref="github.com/corgi-lang/corgi"".")
p("Follow Nektro on Twitter @nektro ")
boot_accordian[{js/my_accordian.json}]
)

now THAT would save a ton of time methinks. Wonder if the pre-processor could load up that json while compiling and substitute it in (for readability and all.)

Collapse
 
nektro profile image
Meghan (she/her) • Edited

Totally. Sometime very soon I was going to add syntax for an import statement that I could work into a (gulp, etc) plugin that could reference other corgi documents.

As it stands right now tags and attributes are allowed a ([a-z0-9-]+) range for the name so custom elements and attributes are already possible. :)

What did you have in mind for the contents of my_accordian.json?

Collapse
 
morgboer profile image
Riaan Pietersen

So if you look at the standard bootstrap3 accordian setup: getbootstrap.com/docs/3.3/javascri... that could be turned into a JSON object, I'm sure. Perhaps something like this:

{
content:{
"First tab":"

This is potentially the content of my first tab

",
"Second tab":"

This is potentially the content of my second tab

",
"Third tab":"

This is potentially the content of my third tab

"
},
settings: {
"setting1":true,
"setting2":"a value"
}
}

Your parser could interpret a shortcode with a json parameter to quickly build the entire structure of the accordian very quickly and cleverly. Perhaps you could allow for passing in variables/settings like in the json above. It could potentially work for any of the preset Bootstrap components, I think?

Thread Thread
 
nektro profile image
Meghan (she/her)
Thread Thread
 
morgboer profile image
Riaan Pietersen

That's it! Could it be envoked inline, like the other replacements, through some sort of a tag? This seems quite specific with a lot of javascript triggering it?

Thread Thread
 
nektro profile image
Meghan (she/her)

Importing the code from bs4-accordion.html just once, <bs4-accordion> becomes a tag available anywhere in the document. The slightly monotonous init JS is because of the specificity of Bootstrap syntax but with the Custom Element it sets all that up for you.

Thread Thread
 
morgboer profile image
Riaan Pietersen • Edited

Sounds ideal then :)

Have you looked at riot.js? Perhaps some knowledge to glean from there too.

Are you happy with it?

Collapse
 
infomiho profile image
Mihovil Ilakovac

I like the way this gives a high level overview of the problem. It was helpful for me as I'm a CS student and have a compilers course atm.

Collapse
 
elonmusk profile image
Mt

I think for that you have the .pug files they does the same. Do we need HTML pre-compilers

Collapse
 
nektro profile image
Meghan (she/her) • Edited

We don't need preprocessors, especially because my files can't be natively interpreted by a browser, so using this does add a step to your development process depending on how all-in you use a pre-processor. Mileage may vary.

While I was using Pug for another project of mine, this project has been on my backburner for a while and decided to write this post because I got it to the point where I had finally made something potentially useful. On the other hand, as I mentioned, I was using Pug for another project of mine but the other day just converted all those pages to use Corgi instead for the advantages I mentioned above as well as the added bonus I have the satisfaction that the code I publish for my next project is that little bit more mine.

Collapse
 
webknjaz profile image
Sviatoslav Sydorenko πŸ‡ΊπŸ‡¦