Jade Template Plugin Draft for F3

index.php

<?php

$app=require __DIR__.'/lib/base.php';

$app->set('AUTOLOAD','inc/;inc/temp/');
$app->set('CACHE',FALSE);
$app->set('DEBUG',3);
$app->set('EXTEND',TRUE);
$app->set('GUI','gui/');
$app->set('PROXY',TRUE);
$app->set('TEMP','temp/');

$app->route('GET /haml',
    function() use($app) {
        $app->set('headline','a very cool headline');
        $app->set('foo',array('one','two','three'));
        echo TemplateExt::serve('test.jade');
    }
);

$app->run();

templateext.php

<?php

/**
    Template Extension for the PHP Fat-Free Framework

    The contents of this file are subject to the terms of the GNU General
    Public License Version 3.0. You may not use this file except in
    compliance with the license. Any of the license terms and conditions
    can be waived if you get permission from the copyright holder.

        @package Template
        @version 0.1.0
 **/

require(__DIR__.'/ext/everzet-jade.php-e57fce6/autoload.php.dist');

use Everzet\Jade\Jade;
use Everzet\Jade\Parser;
use Everzet\Jade\Lexer\Lexer;
use Everzet\Jade\Dumper\PHPDumper;
use Everzet\Jade\Visitor\AutotagsVisitor;

use Everzet\Jade\Filter\JavaScriptFilter;
use Everzet\Jade\Filter\CDATAFilter;
use Everzet\Jade\Filter\PHPFilter;
use Everzet\Jade\Filter\CSSFilter;


class TemplateExt extends Template {

    //@{ Locale-specific error/exception messages
    const
        TEXT_Render='Template %s cannot be rendered';
    //@}

    static function serve($file, $mime='text/html',$globals=TRUE,$syms=array()) {


        // Parse jade template
        // bootstrap jade
        $dumper = new PHPDumper();
        $dumper->registerVisitor('tag', new AutotagsVisitor());
        $dumper->registerFilter('javascript', new JavaScriptFilter());
        $dumper->registerFilter('cdata', new CDATAFilter());
        $dumper->registerFilter('php', new PHPFilter());
        $dumper->registerFilter('style', new CSSFilter());

        // Initialize parser & Jade
        $parser = new Parser(new Lexer());
        $jade   = new Jade($parser, $dumper);

        // resolve F3 Markup
        $template = parent::serve($file,$mime,$globals,$syms);

        // Parse a template (both string & file containers)
        return $jade->render($template);
    }

}

test.jade

!!! 5
head
  title HAML like Template Test with jade.php
body
  #header
    h1 {{@headline}}    
    
 <repeat group="{{@foo}}" value="{{@val}}">
   p nice paragraph {{@val}}
    	
 </repeat>
    
    p end

shouldn't it be test.jade?

ah yes. might be better. i just thought jade also handles haml files as the syntax looks quite the same.
but therefor this is just a draft ;) feel free to build it up with caching / temp files, error handling and so on.
i also thought about if it could be better to change the order of rendering. if jade renders first, saves down a tempfile, which is then parsed by F3 template, it might aviod bugs.

Oh yeah, absolutely. I wasn't aware that jade handles .haml files. That's the architecture I"d had in mind as well. BTW, there are minor syntax differences, and it may make sense to make some minor adjustments to jade.php itself, to avoid conflicts with F3 templates. May not be necessary, I"ll have to look into it, but it would end up as "f3-flavored-jade" kind of like gh's gfm.

I don't like Jade, because the syntax has nothing to do with HTML anymore (that's why I like F3's template engine) but one question. Were you able to test the speed of it?

No, not just yet, @sn0opy. WHat's important though is that it's DRY which is what everything should be. I would like to see DRY markup description language support directly in the browser. SGML style syntax is an inefficient way to transport data over the network. There's no reason for XML style syntax to ever exist with things like JSON and JADE.

@ikkez thanks for the kickstart. I haven't had time to test but will do that soon. @GHANONTEST how is the testing going with this kickstart. is it working?

Also i think @ikkez suggestions about changing the order of rendering so that jade renders first, saves down a tempfile, which is then parsed by F3 template will be a good idea. How do we go about achieving this?

There might be a few other constraints but basically we just have to ensure that it honors {{double curly bracket enclosed code blocks and doesn't touch them}}, as well as tags in the F3: namespace. Actually, I would say just express F3 control statements in Jade, and make sure that jade parses

p.conditional
    F3:check( if="{{@gender=='M'}}" )
      F3:true
        .true Appears when condition is true
      F3:false
        .false Appears when condition is false

with the F3: prefix and all just like any other tag.

I would have template files called either my_view.f3ht or my_view.f3jt depending on whether it was an f3 view template written in jade or html. Let's say i have a view.f3jt file... I think the jade plugin should alter teh F3::render function to check the filename it was fed for the extension. if it's an f3ht, then just serve it like normal, if it's an f3jt, then first check for the existence of a .F3JPC_view.f3ht (fatfreeframeworkJadePluginCache), and if one exists then check that it's last-modified timestamp is later than the corresponding f3jt file's. If it doesn't exist or if the timestamp is older than the canonical template, then parse it and write out the parsed result into a cache file. After that just call F3::render like normal (the behavior that it does now).

Is this too convoluted?

well, F3 also supports a shorter Tag.

you can simply use < repeat > or < include >, no need to prefix it with F3. maybe it's easier than.
i updated the gist. in this order, mixing Tags and jade will work, but is pretty ugly. using {{}} in jade calls direct php rendering. and F3's template rendering returns some indentiations that breaks jade. so hacking the jade libs is needed i think.

@ikkez u need to update your GFM above. there's a syntax error that hid a portion of it. but yes, when i can i will look into hacking the jade lib.

Also, I wasn't aware of the short versions of thetags. That's interesting, though IDT f3: is a huge deal to type and its good for clarity + readability, I think. Esp. if one is using arbitrary and custom XML tags that may clash with f3's.