universal_html 1.0.0

Supports a subset of 'dart:html' in all platforms (browser, VM, and Flutter).

Introduction

This package implements dart:html in all platforms (Flutter, VM, Node.JS, browser, etc.).

In browser, Dart2js toolchain will use 'dart:html' directly (thanks to our use of conditional imports). In other words, using 'package:universal_html' has zero cost (for build sizes, etc.).

Typical use cases include:

• Cross-platform DOM scraping
• Cross-platform DOM rendering

The project is licensed under the MIT license.

Issues?

• Please report issues at the Github issue tracker.
• Have a fix? Just create a pull request in Github.
  • Frequent contributors will be invited to become project administrators.

Getting started

In pubspec.yaml:

name: example
dependencies:
  universal_html: ^1.0.0

Now you can replace usage of "dart:html" with "package:universal_html/html.dart".

import "package:universal_html/html.dart";

void main() {
  // Create a DOM tree
  final divElement = new DivElement();
  divElement.append(new Element.tag("h1")
    ..classes.add("greeting")
    ..appendText("Hello world!"));

  // Print outer HTML
  print(divElement.outerHtml);
  // --> <div><h1>Hello world</h1></div>

  // Do a CSS query
  print(divElement.querySelector("div > .greeting").text);
  // --> Hello world
}

Controlling global variables and implementation details

• Library "package:universal_html/driver.dart" controls the HTML implementation.
• You can manipulate global variables like document, navigator and window:
  • Want to have zone-local values? Use HtmlIsolate.zoneLocal.
  • Want to reset the values to defaults (after a test)? Use HtmlIsolate.current.resetState().

Implemented APIs

In general:

• The implemented APIs should behave identically to dart:html code running in Chrome.
• In non-browser environment, non-implemented APIs either throw UnimplementedError or fail silently.

We have implemented:

• DOM classes
  • All the core classes (Node, Element, etc.)
  • Much of the element subclasses (CheckboxInputElement, ResetButtonElement, etc.)
  • Much of the CSS classes (CssStyleDeclaration, etc.)
• DOM parsing
  • DomParser
  • Uses package:html and package:csslib
• DOM printing
  • element.innerHtml
  • element.outerHtml
• DOM queries
  • element.querySelector(..), element.querySelectorAll(..), element.matchesSelector(..)
  • Selectors support include:
    • Element name (table)
    • Element ID (#id)
    • Element class (.classA.classB)
    • Combinators:
      • element.class#id
      • s0 s1 s2
      • s0 s1 s2
      • s0 > s1 > s2
      • s0 ~ s1 ~ s2
      • s0 + s1 + s2
    • Pseudoselectors:
      • :disabled
      • :first-child
      • :last-child
      • :not(x)
      • :nth-child(5)
      • :nth-child(even)
      • :nth-child(3n+1)
      • :only-child
      • :root
    • Attribute selectors:
      • [name]
      • [name=value]
      • [name~=value]
      • [name|=value]
      • [name^=value]
      • [name$=value]
      • [name*=value]
• DOM events
  • For example, element.onClick.listen(...) would receive invocation of element.click().
• Navigator
  • locale, userAgent, etc.
• Window
  • console
  • history
    • back(...), pushState(...), etc.
  • location
    • origin, href, etc.
  • localStorage / sessionStorage
    • The implementation stores data in memory.

We accept pull requests for more API implementations!