A cross-platform replacement for dart:html (or package:web):
- Eases cross-platform development
- You can use this package in browsers, mobile, desktop, and server-side VM, and Node.JS.
- Just replace
dart:html/package:webimports withpackage:universal_html/universal_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.
- Cross-platform dart:html
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.
- API reference
- Github project
- We appreciate feedback, issue reports, and pull requests.
- universal_io (cross-platform dart:io)
- jsdom (DOM implementation in Javascript)
In pubspec.yaml:
dependencies:
universal_html: ^2.3.0import"package:universal_html/universal_html.dart";
voidmain() {
// Create a DOM treefinal div =DivElement();
div.append(Element.tag("h1")
..classes.add("greeting")
..appendText("Hello world!"));
// Print outer HTMLprint(div.outerHtml);
// --> <div><h1>Hello world</h1></div>// Do a CSS queryprint(div.querySelector("div > .greeting").text);
// --> Hello world
}Use parseHtmlDocument:
import'package:universal_html/parsing.dart';
voidmain() {
final htmlDocument =parseHtmlDocument('<html>...</html>');
}Use parseXmlDocument:
import'package:universal_html/parsing.dart';
voidmain() {
final xmlDocument =parseXmlDocument('<xml>...</xml>');
}Load a Window with WindowController:
import'dart:io'show Cookie;
import'package:universal_html/controller.dart';
Futuremain() 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 queryfinal titleElements = controller.document.querySelectorAll(".athing > .title");
final topStoryTitle = titleElements.first.text;
// Print resultprint("Top Hacker News story is: $topStoryTitle");
}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/universal_html.dart';
Future<void> main() async {
final eventSource =EventSource('http://example.com/events');
awaitfor (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 isEventSourceOutsideBrowser) {
eventSource.onHttpClientRequest = (eventSource, request) {
request.headers.set('Authorization', 'example');
request.cookies.add(Cookie('name', 'value'));
};
eventSource.onHttpClientResponse = (eventSource, request, response) {
// ...
};
}
awaitfor (var message in eventSource.onMessage) {
print('Event:');
print(' type: ${message.type}');
print(' data: ${message.data}');
}
}import'package:universal_html/controller.dart';
import'package:test/test.dart';
voidmain() {
setUp(() {
WindowController.instance =WindowController();
});
test('test #1', () {
// ...
});
test('test #2', () {
// ...
});
}