universal_html 1.2.3 
universal_html: ^1.2.3 copied to clipboard
dint.devA 'dart:html' that works in all platforms, including Flutter and server-side. Eases cross-platform development and other HTML / XML processing.
Introduction #
A cross-platform dart:html:
- Eases cross-platform development
- You can use this package in browsers, mobile, and server-side.
- Just replace
dart:htmlimports withpackage:universal_html/html.dart. In browsers, dart:html will be automatically used.
- Extensive support for handling HTML and XML documents
- Parse, manipulate, and print DOM nodes.
- Find DOM nodes with querySelectorAll and other CSS query methods.
- Submit forms and more.
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.
Links #
Used by #
- web_browser
- A small web browser written in Flutter.
Similar projects #
- universal_io (cross-platform dart:io)
- jsdom (DOM implementation in Javascript)
Getting started #
1. Add dependency #
In pubspec.yaml:
dependencies:
universal_html: ^1.2.1
2. Choose library #
Option A (recommended) #
import 'package:universal_html/html.dart';
This library exports dart:html by default.
You can also use import 'package:universal_html/prefer_sdk/html.dart';.
If you use this library, Dart tools may mistakenly think that your package is not compatible with VM/Flutter.
Option B #
import 'package:universal_html/prefer_universal/html.dart';
This library exports our implementation by default. The main advantage of this library is easier debugging. If you click "Go to declaration" in your IDE, you will see the implementation.
Getting warnings? In some cases, when you mix universal_io classes with dart:html classes, your IDE produces type warnings ("universal_html Element is not dart:html Element"). Your application should still compile (in browser, universal_html classes will be dart:html classes).
3. Use #
import "package:universal_html/html.dart";
void main() {
// Create a DOM tree
final div = new DivElement();
div.append(new 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
}
Implemented APIs #
List of differences #
DIFFERENCES.md contains a programmatically generated list of dart:html APIs missing from this package.
Summary #
- 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
- window.history
- Form submitting
- EventSource ("application/event-stream" client)
Additional helpers #
Parsing HTML / XML #
We recommend that you use package:universal_html/parsing.dart (instead of DomParser):
import 'package:universal_html/parsing.dart';
void main() {
// HTML
final htmlDocument = parseHtmlDocument('<html>...</html>');
// XML
final xmlDocument = parseXmlDocument('<xml>...</xml>');
}
Server-side rendering #
The package comes with ServerSideRenderer, which is a web server for rendering your web application in the server-side.
import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';
void main() {
final renderer = new ServerSideRenderer(webAppMain);
renderer.bind("localhost", 12345);
}
void webAppMain() {
document.body.appendText("Hello world!");
}
Browser simulators #
import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';
Future main() async {
// Construct a browser simulator.
final driver = new HtmlDriver();
// Open a web page.
await driver.setDocumentFromUri(Uri.parse("https://news.ycombinator.com/"));
// Select the top story using a CSS query
final topStoryTitle = driver.document.querySelectorAll(".athing > .title").first.text;
// Print result
print("Top Hacker News story is: ${topStoryTitle}");
}
Metadata
Publisher
Metadata
A 'dart:html' that works in all platforms, including Flutter and server-side. Eases cross-platform development and other HTML / XML processing.
Repository (GitHub)
View/report issues
License
unknown (license)
Dependencies
async, charcode, collection, csslib, html, meta, typed_data, universal_io, zone_local
