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:htmlimports withpackage: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.
- 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.2.2import "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
}Use parseHtmlDocument:
import 'package:universal_html/parsing.dart';
void main() {
final htmlDocument = parseHtmlDocument('<html>...</html>');
}Use parseXmlDocument:
import 'package:universal_html/parsing.dart';
void main() {
final xmlDocument = parseXmlDocument('<xml>...</xml>');
}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 (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}');
}
}import 'package:universal_html/controller.dart';
import 'package:test/test.dart';
void main() {
setUp(() {
WindowController.instance = WindowController();
});
test('test #1', () {
// ...
});
test('test #2', () {
// ...
});
}