A cross-platform dart:html:
- Eases cross-platform development
- You can use this package in browsers, mobile, desktop, and server-side VM, and server-side Javascript (Node.JS, Cloud Functions, etc.).
- 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.
- Submit forms and more.
- EventSource streaming support
- Implements dart:html EventSource API.
The project is licensed under the Apache License 2.0. Some of the source code was adopted from the original dart:html, 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.0.8import "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
}- Document node classes
- DOM parsing
- Use element.innerHtml setter, DomParser, or package:universal_html/parsing.dart.
- HTML parsing uses package:html, CSS parsing uses package:csslib, and XML parsing uses our own parser.
- DOM printing
- Use element.innerHtml or element.outerHtml.
- DOM events
- For example, element.onClick.listen(...) receives invocation of element.click().
- CSS classes (CssStyleDeclaration, etc.)
- Most CSS queries
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 '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");
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent