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 application 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.0

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', () {
    // ...
  });
}

universal_html 2.2.0
universal_html: ^2.2.0 copied to clipboard

Metadata

Introduction #

Documentation #

Similar projects #

Getting started #

1. Add dependency #

2. Use #

Examples #

Parsing HTML #

Parsing XML #

Scraping a website #

EventSource #

Testing #

← Metadata

Publisher

Metadata

License

Dependencies

More

universal_html 2.2.0 universal_html: ^2.2.0 copied to clipboard

Metadata

Introduction #

Documentation #

Similar projects #

Getting started #

1. Add dependency #

2. Use #

Examples #

Parsing HTML #

Parsing XML #

Scraping a website #

EventSource #

Testing #

← Metadata

Publisher

Metadata

License

Dependencies

More

universal_html 2.2.0
universal_html: ^2.2.0 copied to clipboard