dom_builder

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

Package web

Starting with version 3.0.0, the dom_builder package relies on the web package, replacing the deprecated dart:html library (deprecated as of Dart 3.7.0+).

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 (package web):

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

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

class BootstrapNavbarToggler {

  static DOMGenerator domGenerator = DOMGenerator.web() ;

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

}

• NOTE: package dart:html is deprecated.

Mixing real DOM Element (package web) with virtual DOMElement:

import 'package:web/web.dart';
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 'package:web/web.dart';
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 'package:web/web.dart';
import 'package:dom_builder/dom_builder_html.dart';

Element generateBSCards() {
  // ...

  var tableHeads = ['User', 'E-Mail'];
  var usersEntries = [ ['Joe', '[e-mail]'], ['Smith', '[e-mail]']];

  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:

• Bones_UI: A simple and easy Web User Interface framework for Dart.
• Bones_UI_Bootstrap: Adds Bootstrap Bones_UI.
• Bootstrap: Build fast and responsive sites.
• web: Lightweight browser API bindings built around js_interop.

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 library.

dom_builder_dart_html

DOM Builder library, with a DOMGenerator over dart:html package.

dom_builder_web

DOM Builder library, with a DOMGenerator over web package.