belatuk_html_builder

Description:

belatuk html builder

Betaluk Html Builder #



Replacement of package:html_builder with breaking changes to support NNBD.
This package builds HTML AST's and renders them to HTML. It can be used as an internal DSL, i.e. for a templating engine.
Installation #
In your pubspec.yaml:
dependencies:
belatuk_html_builder: ^5.1.0
copied to clipboard
Usage #
import 'package:belatuk_html_builder/belatuk_html_builder.dart';

void main() {
// Akin to React.createElement(...);
var $el = h('my-element', p: {}, c: []);

// Attributes can be plain Strings.
h('foo', p: {
'bar': 'baz'
});

// Null attributes do not appear.
h('foo', p: {
'does-not-appear': null
});

// If an attribute is a bool, then it will only appear if its value is true.
h('foo', p: {
'appears': true,
'does-not-appear': false
});

// Or, a String or Map.
h('foo', p: {
'style': 'background-color: white; color: red;'
});

h('foo', p: {
'style': {
'background-color': 'white',
'color': 'red'
}
});

// Or, a String or Iterable.
h('foo', p: {
'class': 'a b'
});

h('foo', p: {
'class': ['a', 'b']
});
}
copied to clipboard
Standard HTML5 elements:
import 'package:belatuk_html_builder/elements.dart';

void main() {
var $dom = html(lang: 'en', c: [
head(c: [
title(c: [text('Hello, world!')])
]),
body(c: [
h1(c: [text('Hello, world!')]),
p(c: [text('Ok')])
])
]);
}
copied to clipboard
Rendering to HTML:
String html = StringRenderer().render($dom);
copied to clipboard
Example implementation with the Angel3 backend framework,
which uses dedicated html_builder package:
import 'dart:io';
import 'package:belatuk_framework/belatuk_framework.dart';
import 'package:belatuk_html_builder/elements.dart';

configureViews(Angel app) async {
app.get('/foo/:id', (req, res) async {
var foo = await app.service('foo').read(req.params['id']);
return html(c: [
head(c: [
title(c: [text(foo.name)])
]),
body(c: [
h1(c: [text(foo.name)])
])
]);
});
}
copied to clipboard