Introduction

A cross-platform dart:html:

Eases cross-platform development
- You can use this package in browsers, mobile, desktop, and server-side VM, and Node.JS.
- Just replace dart:html imports with package:universal_html/html.dart. Normal dart:html will continue to be used when applications run in browsers.
Extensive support for processing HTML and XML documents
- Parse, manipulate and print DOM nodes.
- Find DOM nodes with querySelectorAll and other CSS query methods.
EventSource streaming support
- Cross-platform dart:html EventSource (“application/event-stream”).
- If you want to customize EventSource HTTP headers outside browsers, see EventSourceOutsideBrowser.

The project is licensed under the Apache License 2.0. Some of the source code was adopted from the original dart:html in Dart SDK, which is documented in the relevant files.

Documentation

API reference
Github project
- We appreciate feedback, issue reports, and pull requests.

Similar projects

universal_io (cross-platform dart:io)
jsdom (DOM implementation in Javascript)

Getting started

1. Add dependency

In pubspec.yaml:

dependencies:
  universal_html: ^2.2.2

2. Use

import "package:universal_html/html.dart";

void main() {
  // Create a DOM tree
  final div = DivElement();
  div.append(Element.tag("h1")
    ..classes.add("greeting")
    ..appendText("Hello world!"));

  // Print outer HTML
  print(div.outerHtml);
  // --> <div><h1>Hello world</h1></div>

  // Do a CSS query
  print(div.querySelector("div > .greeting").text);
  // --> Hello world
}

Examples

Parsing HTML

Use parseHtmlDocument:

import 'package:universal_html/parsing.dart';

void main() {
  final htmlDocument = parseHtmlDocument('<html>...</html>');
}

Parsing XML

Use parseXmlDocument:

import 'package:universal_html/parsing.dart';

void main() {
  final xmlDocument = parseXmlDocument('<xml>...</xml>');
}

Scraping a website

Load a Window with WindowController:

import 'dart:io' show Cookie;
import 'package:universal_html/controller.dart';

Future main() async {
  // Load a document.
  final controller = WindowController();
  controller.defaultHttpClient.userAgent = 'My Hacker News client';
  await controller.openHttp(
    method: 'GET',
    uri: Uri.parse("https://news.ycombinator.com/"),
    onRequest: (HttpClientRequest request) {
      // Add custom headers
      request.headers.set('Authorization', 'headerValue');
      request.cookies.add(Cookie('cookieName', 'cookieValue'));
    },
    onResponse: (HttpClientResponse response) {
      print('Status code: ${response.statusCode}');
    },
  );

  // Select the top story using a CSS query
  final titleElements = controller.document.querySelectorAll(".athing > .title");
  final topStoryTitle = titleElements.first.text;

  // Print result
  print("Top Hacker News story is: $topStoryTitle");
}

EventSource

EventSource (see mozilla.org) is a browser API for reading “application/event-stream” streams. It has been supported by browsers for a long time.

import 'package:universal_html/html.dart';

Future<void> main() async {
  final eventSource = EventSource('http://example.com/events');
  await for (var message in event.onMessage) {
    print('Event type: ${message.type}');
    print('Event data: ${message.data}');
  }
}

EventSource requests from real browsers are typically authenticated using cookies. If you want to add cookies or customize other HTTP headers, you need to use EventSourceOutsideBrowser:

import 'package:universal_html/universal_html.dart';
import 'dart:io' show Cookie;

Future<void> main() async {
  final eventSource = EventSource('http://example.com/events');
  
  // The following block will NOT be executed in browsers.
  // Because compiler can infer instances of EventSourceOutsideBrowser are never constructed,
  // it will not appear in Javascript either.
  if (eventSource is EventSourceOutsideBrowser) {
    eventSource.onHttpClientRequest = (eventSource, request) {
      request.headers.set('Authorization', 'example');
      request.cookies.add(Cookie('name', 'value'));
    };
    eventSource.onHttpClientResponse = (eventSource, request, response) {
      // ...
    };
  }
  
  await for (var message in eventSource.onMessage) {
    print('Event:');
    print('  type: ${message.type}');
    print('  data: ${message.data}');
  }
}

Testing

import 'package:universal_html/controller.dart';
import 'package:test/test.dart';

void main() {
  setUp(() {
    WindowController.instance = WindowController();
  });
  
  test('test #1', () {
    // ...
  });
  
  test('test #2', () {
    // ...
  });
}