GitLocker: The Coding Marketplace

Description:

universal html

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.4
copied to clipboard
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
}
copied to clipboard
Examples #
Parsing HTML #
Use parseHtmlDocument:
import 'package:universal_html/parsing.dart';

void main() {
final htmlDocument = parseHtmlDocument('<html>...</html>');
}
copied to clipboard
Parsing XML #
Use parseXmlDocument:
import 'package:universal_html/parsing.dart';

void main() {
final xmlDocument = parseXmlDocument('<xml>...</xml>');
}
copied to clipboard
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");
}
copied to clipboard
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}');
}
}
copied to clipboard
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}');
}
}
copied to clipboard
Testing #
import 'package:universal_html/controller.dart';
import 'package:test/test.dart';

void main() {
setUp(() {
WindowController.instance = WindowController();
});

test('test #1', () {
// ...
});

test('test #2', () {
// ...
});
}
copied to clipboard