Vue to a Perl
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.
</Hackstep>
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
For the bindings, it's almost the same tactic. We go through all the nodes.
Step 4: iterations
For the v-for iterators, same procedure as usual. We look at all
nodes with v-for attributes...
Step 5: Sub-components
Last bit, the sub-components.
Here we find nodes which tag name is the name of a component.
(for now it's assumed that the tag name of the component Example::Foo is
foo)
BEHOLD!
And we are done. With the code we did, plus that last method that interconnect the pipeline....
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.
So in Vue.js, a single-component file will look something like this.