Home

Awesome

jaded

pub package style: effective dart

Port of the excellent Pug, formerly Jade view engine in Dart.

Now feature complete with the original jade view engine, begin by taking the comprehensive tour on learnjade.com and refer to jade's detailed documentation
to learn about Jade's features and syntax.

Although the aim was to have a high-fidelity port, the major syntactical difference compared with the original Jade (in JavaScript) is that the compiler only emits and executes Dart code, so any embedded code in views must be valid Dart (i.e. instead of JavaScript).

Installing via Pub

Add this to your package's pubspec.yaml file:

dependencies:
  jaded: 0.3.0

Public API

Compile a Directory

Add a pre-build step and use renderDirectory to statically compile all views into a single jade.views.dart file containing a Map of all compiled Jade views, e.g:

import "dart:io";
import "package:jaded/jaded.dart" as jade;

var jadeTemplates = jade.renderDirectory('.');
new File('jade.views.dart').writeAsString(jadeTemplates);

Writes to jade.views.dart snippet:

Map<String,Function> JADE_TEMPLATES = {
  './index.jade': ([Map locals]){
     ...
  },
  './dir/page.jade': ([Map locals]){
    ...
  },
}

Usage:

import "jade.views.dart";

var render = JADE_TEMPLATES['./index.jade'];
var html = render({'title': 'Hello Jade!'});

Compile a jade view at runtime

import "package:jaded/jaded.dart" as jade;

var renderAsync = jade.compile('string of jade', { //Optional Compiler Defaults:
  Map locals,
  String filename,
  String basedir,
  String doctype,
  bool pretty:false,
  bool compileDebug:false,
  bool debug:false,
  bool colons:false,
  bool autoSemicolons:true  
});

renderAsync(locals)
  .then((html) => print(html));

Options

Web Frameworks

Current Status

All tests in jade.test.dart are now passing.

All integration test cases in /test/cases that doesn't make use of an external DSL library are passing. Specifically, the following filters are NOT supported:

filters.coffeescript.jade
filters.less.jade
filters.stylus.jade
include-filter-stylus.jade

When they become available support for external Web DSL's can be added to transformers.dart in the same way as done inside Jade's feature-rich transformers.js.

Markdown filter

We've added the markdown filter which lets you include markdown inline:

html
  body
    :markdown
      This is _some_ awesome **markdown**

Or as an external include:

html
  body
    include some.md

Pre-compilation of .jade templates

The recommended way to execute .jade templates is to pre-compile all views with renderDirectory() out to a static file at design time. This can be automated using the Dart Editor build system /build.dart file, which can be used to trigger the background compilation of .jade views when it detects a .jade file was saved or deleted.

This is the approach the Dart Express Web Framework takes with its express_build.dart helper that gets triggered when a '.jade' file is touched will scan all directories for an empty jade.yaml marker and recursively pre-compiles all .jade views in that directory into a single jade.views.dart file.

Compile and execute at runtime - Missing eval

Jade relies on eval'ing code-gen to work which is a limitation in Dart that lacks eval. To get around this when compiling on the fly, we're currently wrapping the code-gen Dart inside an Isolate and writing it out to a file then immediately reading it back in with spawnUri and invoking the new code asynchronously in the runCompiledDartInIsolate() method.

Although this works, it forces us to have an async API to convert jade to html at runtime. When Dart offers a sync API for evaluating Dart code we'll convert it back to a sync API.

Contributors