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), replace normal [EventSource] with UniversalEventSource.

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.1.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 'package:universal_html/controller.dart';

Future main() async {
  // Load a document.
  final controller = WindowController();
  await controller.openHttp(
    uri: Uri.parse("https://news.ycombinator.com/"),
  );

  // Select the top story using a CSS query
  final topStoryTitle = controller.document.querySelectorAll(".athing > .title").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 UniversalEventSource:

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.1.0
universal_html: ^2.1.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.1.0 universal_html: ^2.1.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.1.0
universal_html: ^2.1.0 copied to clipboard