dom_builder 1.0.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

dom_builder #

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

Helpers to generate DOM elements or HTML (Web and Native support).

Usage #

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

A simple usage example:

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

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( classes: 'navbar-toggler', type: 'button', 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 Elements with Builder (dart:html): #

import 'dart:html' ;
import 'package:dom_builder/dom_builder.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) ;
  }

}

Example of Bootstrap Cards and Table: #


      // ...

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

      // ...

      return content.buildDOM(domGenerator) ;

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.

1.0.7 #

  • Added helpers for header and footer.

1.0.6 #

  • dartfmt.

1.0.5 #

  • Added API Documentation.
  • dartfmt.
  • swiss_knife: ^2.5.2

1.0.4 #

  • Fix README example and new examples.
  • Fix 'dartdoc' issues.

1.0.3 #

  • Better handling of selectors formats: .class, #id, tag
  • Table support.
  • Fix build HTML with ident.
  • Element helpers: $input, $textarea, $button, $label, $p, $br, $hr, $table, $thead, $tfoot, $tbody, $tr, $td, $th, $$divInline.

1.0.2 #

  • Added support for external elements.

1.0.1 #

  • Add generic DOMGenerator and support for dart:html.

1.0.0 #

  • Initial version, created by Stagehand

example/dom_builder_example.dart

import 'package:dom_builder/dom_builder.dart';

void main() {
  var div = $div(classes: 'container', content: [
    $span(id: 's1', content: 'The '),
    $span(id: 's2', style: 'font-weight: bold', content: 'DOM '),
    $span(content: 'Builder'),
    $table(head: [
      'Name',
      'Age'
    ], body: [
      ['Joe', 21],
      ['Smith', 30]
    ])
  ]);

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

  // Equivalent:

  var div2 = $divHTML('<div class="container"><span>Builder</span></div>')
      .insertAt(0, $span(id: 's1', content: 'The '))
      .insertAfter(
          '#s1', $span(id: 's2', style: 'font-weight: bold', content: 'DOM '))
      .add($tagHTML('''
        <table>
          <thead>
            <tr><th>Name</th><th>Age</th></tr>
          </thead>
          <tbody>
            <tr><td>Joe</td><td>21</td></tr>
            <tr><td>Smith</td><td>30</td></tr>
          </tbody>
        </table>
      '''));

  var eq = div.buildHTML() == div2.buildHTML();

  print('eq: $eq');
}

/*///////////
// OUTPUT: //
/////////////
===============
<div class="container">
  <span id="s1">The </span>
  <span id="s2" style="font-weight: bold">DOM </span>
  <span>Builder</span>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Joe</td>
        <td>21</td>
      </tr>
      <tr>
        <td>Smith</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>
===============
eq: true

 */

Use this package as a library

1. Depend on it

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


dependencies:
  dom_builder: ^1.0.7

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:dom_builder/dom_builder.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
47
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
73
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
html ^0.14.0+3 0.14.0+3
swiss_knife ^2.5.2 2.5.3
Transitive dependencies
charcode 1.1.3
collection 1.14.13 1.15.0-nullsafety
csslib 0.16.1
intl 0.16.1
meta 1.2.2 1.3.0-nullsafety
path 1.7.0
resource_portable 2.1.7
source_span 1.7.0
term_glyph 1.1.0
typed_data 1.2.0 1.3.0-nullsafety
Dev dependencies
pedantic ^1.8.0
test ^1.6.0