Skip to content

Latest commit

 

History

History
92 lines (65 loc) · 2.37 KB

README.template.md

File metadata and controls

92 lines (65 loc) · 2.37 KB
Raw

html_template

A server-side HTML template engine in Dart.

intellij-screenshot

Features

  • Auto-completion and static analysis in the template.
  • Classical control-flow constructs: *if, *for, *switch
  • Conditionally add CSS classes ([class.my-class]="$condition") and HTML attributes ([disabled]="$condition")
  • Automatically escapes the variables
  • Syntax highlighting (in IntelliJ-based IDE)

Example

Write the template code

Declare a private void function tagged with a @template attribute:

import 'example/lib/main.dart#full_example';

Generate the code

  • dart run build_runner watch --delete-conflicting-outputs

This generates a public function with the same arguments as the original. The generated code looks like:

import 'example/lib/main_generated_example.dart#generated';

See the real generated code here

Use the template

Call the generated public methods to build the HTML page from your data.

import 'example/lib/main.dart#usage';

Conditions

import 'example/lib/condition.dart#simple';

Loop

To repeat an HTML element, use the attribute: *for="$item in $iterable".

import 'example/lib/loop.dart#loop';

Notice that we have to define the item variable outside of the string literal.
This is a bit unfortunate but string literals don't allow to define a variable inside them.

Alternatively, we can write the loop in Dart arround the string literals:

import 'example/lib/loop.dart#loop_alt';

Switch

import 'example/lib/switch.dart#switch';

CSS Classes

import 'example/lib/css_classes.dart#classes';

Dart code

You can use normal Dart code around the string literals to do complex things in your template. You can have has many strings literal as you want.

import 'example/lib/multiple_literals.dart#complex';

Nested template & master layout

Include another template by calling the generated function in a string interpolation:

import 'example/lib/nested.dart#nested';

Others

  • Use <text *if="..">xx</text> tag if you want to output some text without the html element wrapper.

  • Use this comment in your dart file to workaround linter warnings

    // ignore_for_file: unnecessary_statements