File Coverage

blib/lib/Mojolicious/Plugin/AssetPack/Pipe/Vuejs.pm
Criterion Covered Total %
statement 24 24 100.0
branch 5 10 50.0
condition n/a
subroutine 3 3 100.0
pod 1 1 100.0
total 33 38 86.8


line stmt bran cond sub pod time code
1             package Mojolicious::Plugin::AssetPack::Pipe::Vuejs;
2 1     1   6 use Mojo::Base 'Mojolicious::Plugin::AssetPack::Pipe';
  1         1  
  1         5  
3              
4             sub process {
5 1     1 1 3 my ($self, $assets) = @_;
6 1         5 my $store = $self->assetpack->store;
7              
8             return $assets->each(
9             sub {
10 1     1   10 my ($asset, $index) = @_;
11 1 50       4 return unless $asset->format eq 'vue';
12              
13 1         4 my $vue = sprintf 'Vue.component("%s", {', $asset->name;
14 1         2 my ($script, $template);
15              
16 1 50       11 if ($asset->content =~ m!]*>(.+)!s) {
17 1         38 $script = $1;
18 1 50       16 $vue = "$1$vue" if $script =~ s!^(.*)\s?module\.exports\s*=\s*\{!!s;
19 1         16 $script =~ s!\s*\}\s*;?\s*$!!s;
20 1         3 $vue .= $script;
21             }
22              
23 1 50       3 if ($asset->content =~ m!]*>(.+)!s) {
24 1         31 $template = $1;
25 1         5 $template =~ s!"!\\"!g; # escape all double quotes
26 1         6 $template =~ s!^\s*!!s;
27 1         6 $template =~ s!\r?\n!\\n!g;
28 1 50       4 $vue .= qq',\n' if $script;
29 1         2 $vue .= qq' template: "$template"';
30             }
31              
32 1         8 $vue = Mojo::Util::encode('UTF-8', "(function(){$vue})})();");
33 1         169 $asset->content($vue)->format('js');
34             }
35 1         10 );
36             }
37              
38             1;
39              
40             =encoding utf8
41              
42             =head1 NAME
43              
44             Mojolicious::Plugin::AssetPack::Pipe::Vuejs - Process .vue files
45              
46             =head1 DESCRIPTION
47              
48             This modules is EXPERIMENTAL and based on homebrewed regexes instead of running
49             the code through an external nodejs binary!
50              
51             This pipe could get pulled completely from the
52             L distribution if the problem is too hard to
53             solve.
54              
55             =head1 SYNOPSIS
56              
57             Currently only C
80              
81             The vuejs file above produces this output:
82              
83             (function(){
84             var initial = false;
85             Vue.component("example", {
86             data: function() {
87             return {id: id, loading: initial}
88             },
89             methods: {
90             toggle: function() {
91             this.loading = !this.loading;
92             }
93             },
94             template: "
95             Example
96             {{loading ? \"loading\" : \"click me!\"}}
97             "}))();
98              
99             =head1 METHODS
100              
101             =head2 process
102              
103             See L.
104              
105             =head1 SEE ALSO
106              
107             L.
108              
109             =cut