universal_html 2.0.7 copy "universal_html: ^2.0.7" to clipboard
universal_html: ^2.0.7 copied to clipboard

outdated

A 'dart:html' that works in all platforms, including Flutter and server-side. Eases cross-platform development and HTML / XML processing.

Pub Package Github Actions CI

Introduction #

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: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.
    • Submit forms and more.
  • EventSource streaming support

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.

Documentation #

Similar projects #

Getting started #

1. Add dependency #

In pubspec.yaml:

dependencies:
  universal_html: ^2.0.7

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
}

Implemented APIs #

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

Examples #

Parsing HTML #

Use parseHtmlDocument:

import 'package:universal_html/parsing.dart';

void main() {
  final htmlDocument = parseHtmlDocument('<html>...</html>');
}

Parsing XML #

Use parseXmlDocument:

import 'package:universal_html/parsing.dart';

void main() {
  final xmlDocument = parseXmlDocument('<xml>...</xml>');
}

Scraping a website #

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");
}
425
likes
0
pub points
99%
popularity

Publisher

verified publisherdint.dev

A 'dart:html' that works in all platforms, including Flutter and server-side. Eases cross-platform development and HTML / XML processing.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

async, charcode, collection, csslib, html, meta, source_span, typed_data, universal_io

More

Packages that depend on universal_html