html_builder 1.0.5

  • Readme
  • Changelog
  • Installing
  • 31

html_builder #

Pub build status

Build HTML AST's and render them to HTML.

This can be used as an internal DSL, i.e. for a templating engine.

Installation #

In your pubspec.yaml:

dependencies:
  html_builder: ^1.0.0

Usage #

import 'package:html_builder/html_builder.dart';

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


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

i    // 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']
    });
}

Standard HTML5 elements:

import 'package:html_builder/elements.dart';

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')])
        ])
    ]);
}

Rendering to HTML:

String html = new StringRenderer().render($dom);

Example with the Angel server-side framework, which has dedicated html_builder support:

import 'dart:io';
import 'package:angel_framework/angel_framework.dart';
import 'package: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)])
            ])
        ]);
    });
}

1.0.4 #

  • Added rebuild, rebuildRecursive, and NodeBuilder.

1.0.3 #

  • Dart 2 ready!

1.0.2 #

Changed h and the Node constructor to take Iterables of children, instead of just Lists.

Use this package as a library

1. Depend on it

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


dependencies:
  html_builder: ^1.0.5

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:html_builder/html_builder.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
34
Health:
Code health derived from static analysis. [more]
12
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
53
Overall:
Weighted score of the above. [more]
31
Learn more about scoring.

We analyzed this package on Nov 8, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21

Platforms

Detected platforms: Flutter, web, other

No platform restriction found in primary library package:html_builder/html_builder.dart.

Health suggestions

Fix lib/elements.dart. (-86.93 points)

Analysis of lib/elements.dart reported 406 hints, including:

line 36 col 31: Use = to separate a named parameter from its default value.

line 37 col 47: Use = to separate a named parameter from its default value.

line 38 col 25: Use = to separate a named parameter from its default value.

line 39 col 44: Use = to separate a named parameter from its default value.

line 60 col 31: Use = to separate a named parameter from its default value.

Fix lib/src/renderer.dart. (-2.48 points)

Analysis of lib/src/renderer.dart reported 5 hints:

line 17 col 18: Use = to separate a named parameter from its default value.

line 18 col 20: Use = to separate a named parameter from its default value.

line 19 col 23: Use = to separate a named parameter from its default value.

line 20 col 26: Use = to separate a named parameter from its default value.

line 86 col 36: DO use curly braces for all flow control structures.

Fix lib/src/node_builder.dart. (-1.99 points)

Analysis of lib/src/node_builder.dart reported 4 hints:

line 11 col 23: Use = to separate a named parameter from its default value.

line 11 col 48: Use = to separate a named parameter from its default value.

line 22 col 31: Use = to separate a named parameter from its default value.

line 89 col 7: DO use curly braces for all flow control structures.

Fix lib/src/mutations.dart. (-0.50 points)

Analysis of lib/src/mutations.dart reported 1 hint:

line 6 col 22: Use = to separate a named parameter from its default value.

Format lib/html_builder.dart.

Run dartfmt to format lib/html_builder.dart.

Maintenance suggestions

Package is getting outdated. (-36.99 points)

The package was last published 71 weeks ago.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and html_builder.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
collection ^1.0.0 1.14.12
Dev dependencies
html ^0.13.1
test ^0.12.0