dom_builder

pub package Null Safety CI GitHub Tag New Commits Last Commits Pull Requests Code size License

Generate and manipulate DOM elements (virtual or real), DSX (like JSX) and HTML declarations (Web and Native support).

Usage

You can generate a DOM tree using HTML, Object Orientation or manipulating an already instantiated DOM tree.

Here's a simple usage example, that can work in any platform (Web or Native):

import 'package:dom_builder/dom_builder.dart';

void main() {

  var div = $divHTML('<div class="container"><span>Builder</span></div>')
      .insertAt( 0, $span( id: 's1', content: 'The ' ) )
      .insertAfter( '#s1' , $span( id: 's2', content: 'DOM ', style: 'font-weight: bold' ) )
  ;

  print( div.buildHTML( withIdent: true ) ) ;

  ////////////
  // Output //
  ////////////
  // <div class="container">
  //   <span id="s1">The </span>
  //   <span id="s2" style="font-weight: bold">DOM </span>
  //   <span>Builder</span>
  // </div>


  div.select('#s1').remove() ;
  print( div.buildHTML( withIdent: true ) ) ;

  ////////////
  // Output //
  ////////////
  // <div class="container">
  //   <span id="s2" style="font-weight: bold">DOM </span>
  //   <span>Builder</span>
  // </div>

}

Generating a real DOM Element (dart:html):

As example, let's create a Bootstrap navbar-toggler:

import 'dart:html' ;
import 'package:dom_builder/dom_builder.dart';

class BootstrapNavbarToggler {

  static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

  Element render() {
    var button = $button( type: 'button', classes: 'navbar-toggler', attributes: {'data-toggle': "collapse", 'data-target': "#navbarCollapse", 'aria-controls': "navbarCollapse", 'aria-expanded':"false", 'aria-label':"Toggle navigation"} ,
        content: $span( classes: 'navbar-toggler-icon')
    );

    return button.buildDOM(domGenerator) ;
  }

}

Mixing real DOM Element (dart:html) with virtual DOMElement:

import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

class TitleComponent {

  static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

  Element render() {
    var div = $divHTML('<div class="container"><span>The </span></div>') ;

    div.add( SpanElement()..text = 'DOM Builder' ) ;

    return div.buildDOM(domGenerator) ;
  }

}

DSX

Similar to JSX, DSX (Dart Syntax Extension) allows the declaration and construction of a DOM tree using plain HTML with an extended syntax:

import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

void main() {

  var button = $dsx('''
    <button onclick="${_btnClick.dsx()}">CLICK ME!</button>
  ''');
  
}

void _btnClick() {
  print('Button Clicked!');
}

Example of Bootstrap Cards and Table:

import 'dart:html' ;
import 'package:dom_builder/dom_builder_html.dart';

Element generateBSCards() {
  // ...

  var tableHeads = ['User', 'E-Mail'];
  var usersEntries = [ ['Joe', 'joe@mail.com'], ['Smith', 'smith@mail.com']];

  var content = $div(content: [
    $div(classes: 'card', content: [
      $div(classes: 'card-header', content: 'Activity Timeline:'),
      $div(id: 'timeline-chart')
    ]),

    $hr(),

    $div(classes: 'card', content: [
      $div(classes: 'card-header', content: "Users:"),
      $div(classes: 'card-body', content:
      $table(classes: 'table text-truncate', head: tableHeads, body: usersEntries)
        ..applyWhere('td , th', classes: 'd-inline text-truncate', style: 'max-width: 50vw')
      )
    ]),

  ]);

  // ...

  if (timelineChartSeries != null) {
    content.select('#timeline-chart').add(
            (parent) {
          // render Chart inside element parent...
        }
    );
  }
  else {
    content.select('#timeline-chart').add('No Timeline Data.');
  }

  // ...

  var domGenerator = DOMGenerator.dartHTML();
  return content.buildDOM(domGenerator);
}

See Also

See some related projects:

Features and bugs

Please file feature requests and bugs at the issue tracker.

Author

Graciliano M. Passos: gmpassos@GitHub.

License

Dart free & open-source license.

Libraries

dom_builder
dom_builder_dart_html