Hacking Thy Fearful Symmetry

Vue to a Perl

November 17th, 2017
vuejavacriptperltemplate

Vue to a Perl

So, this week I was working on adding relationalish features to DBIx-NoSQL-Store-Manager, ostenciably to add tagging functionality to my blog engine. Which is good, but now that I'll have tags, I'll also have to change the templates of the blog to incorporate those tags.

Right now I'm using Template::Caribou, a Moose-base template system written by your truly. And while I still like it, I'm also playing a lot with Vue theses days and really, really like the way it does its single component .vue files. So I began to think about server-side rendering.

But then I thought hmmm.... when I say server-side, I really mean that I don't care about the reactive magic of Vue, just its template style. So I wonder, yes, I wonder... how hard would it be to implement it in Perl?

Yes. That's right. I'm about show you how to implement a very rough, but working implementation of the Vue template style in Perl. Because that's exactly what the world needs. Another template module.

The Single Component File, à la Perl

From Single Component File to good ol' regular Perl

As seen in the code above, I'm already leveraging some Perl goodies. The template itself will be using Moose, and the templating voodoo will be encapsulated in the role Template::Vue. For now props are simply attributes of the template's object, and the sub-components are defined via a components attribute. I could have gone and began to DSL in new props and components keyword, but for an initial prototype, we can stay with (relatively) vanilla Moose.

But there is still the template itself that is not yet within our coding clutch. Well, that's hardly a problem.

From template to final output

With that, we have all the pieces we need. Next step: let's process that template.

If we look at it, the rendering of a Vue template has several steps. There is the interpolation of the mustache-like expressions in the template. There is the exclusing of tags that don't satisfy their v-if condition. There is the iteration for the tags with a v-for attribute. And there is the interpolation of sub-components.

Let's deal with them one by one.

Step 1: Mustache interpolation

So, yeah, Vue uses a syntax that is close to Mustache. Very close. So very muchly close that one could be tempted to use Template-Mustache....

Step 2: v-if

Step 3: Bindings

Step 4: iterations

Step 5: Sub-components

BEHOLD!

Now, it's not like I just recreated Vue. The reactive part of it really the piece de resistance, and the template and single file component format are merely delicious, peripheral trimmings. And a lot of parts are at best penciled in.

But... it's in (arguably) working condition.

And the Template::Vue role as it stands weights 110 lines.

Of which 25 are empty.

(you can check yourself: the code is on GitHub)

So, yeah, I guess what I'm trying to say is

Tadah.

Seen a typo or an error? Submit an edit on GitHub!