universal_html 1.0.10

Pub Package

Introduction #

Cross-platform dart:html that works in browser, Flutter, Dart VM, and Node.JS.

The project is licensed under the MIT license.

Issues? #

Similar projects #

Getting started #

1. Add dependency #

In pubspec.yaml:

dependencies:
  universal_html: '>=1.0.10 <2.0.0'

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

2. Choose library #

Option 1 #

import 'package:universal_html/html.dart';

This library exports our implementation by default. The library exports dart:html only in browsers.

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 Dart2js, universal_html classes will be dart:html classes). You can eliminate these warnings by using Option 2 (below).

Option 2 #

import 'package:universal_html/browser/html.dart';

This library exports dart:html by default. The library exports our implementation only when dart:io is available.

If you use this library, your package will not compile in Node.JS. Dart tools may also mistakenly think that your package is not compatible with VM/Flutter.

3. That's it! #

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
}

Manual #

Server-side rendering #

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!");
}

Creating and using browser simulators #

import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';

Future main() async {
  // Construct a driver
  final driver = new HtmlDriver(userAgent:"My Hacker News bot");
  
  // Load a document.
  await driver.setDocumentFromUri(Uri.parse("https://news.ycombinator.com/"));
  
  // Select top story
  final topStoryTitle = driver.document.querySelectorAll(".athing > .title").first.text;
  print("Top Hacker News story is: ${topStoryTitle}");
}

Implemented APIs #

Principles #

  • Our goal is that the implemented APIs behave identically to dart:html code running in Chrome.
  • Non-implemented APIs either throw UnimplementedError or fail silently.
  • We accept pull requests for more API implementations!

An incomplete list #

  • Document nodes
    • All the core classes (Node, Element, etc.)
    • Much of the element subclasses (CheckboxInputElement, ResetButtonElement, etc.)
    • Much of the CSS classes (CssStyleDeclaration, etc.)
  • DOM parsing
  • DOM printing
    • element.innerHtml
    • element.outerHtml
  • DOM events
    • For example, element.onClick.listen(...) would receive invocation of element.click().
  • CSS selectors
    • Methods element.querySelector(..), element.querySelectorAll(..), element.matchesSelector(..)
    • 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]
  • Navigator
    • locale, userAgent, etc.
  • Window
    • console
    • history
      • back(...), pushState(...), etc.
    • location
      • origin, href, etc.
    • localStorage / sessionStorage
      • Stores values in the heap.
  • HttpRequest
    • Does not implement same-origin security policies that browsers have.
  • Related libraries (dart:js, dart:svg, etc.).
    • Just API declarations. Any attempt to use APIs will throw UnimplementedException.
    • Available in:
      • "package:universal_html/indexed_db.dart"
      • "package:universal_html/js.dart"
      • "package:universal_html/js_util.dart"
      • "package:universal_html/svg.dart"

1.0.10 #

  • Eliminated the following error that Dart build system threw in some cases: Unsupported conditional import of dart:html found in universal_html|lib/html.dart

1.0.9 #

  • Fixed bugs related to XML handling.

1.0.8 #

  • Fixed various bugs.

1.0.7 #

  • Fixed various bugs.

1.0.6 #

  • Fixed various bugs.
  • Added browser/html.dart and related documentation.
  • Added ServerSideRenderer.

1.0.5 #

  • Fixed a dependency.

1.0.4 #

  • Fixed various bugs and added dart:html APIs.

1.0.3 #

  • Fixed various bugs.

1.0.2 #

  • Added dart:html APIs (HttpRequest, etc.) and new libraries (js.dart, js_util.dart, etc.).

1.0.1 #

  • Fixed various bugs and added dart:html APIs.

0.0.1 #

  • Initial release

example/example.dart

import "package:universal_html/html.dart";

void main() {
  // Create a DOM tree
  final divElement = DivElement();
  divElement.append(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
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  universal_html: ^1.0.10

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:universal_html/browser/html.dart';
import 'package:universal_html/browser/indexed_db.dart';
import 'package:universal_html/browser/js.dart';
import 'package:universal_html/browser/js_util.dart';
import 'package:universal_html/browser/svg.dart';
import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';
import 'package:universal_html/indexed_db.dart';
import 'package:universal_html/js.dart';
import 'package:universal_html/js_util.dart';
import 'package:universal_html/svg.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
56
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
78
Learn more about scoring.

We analyzed this package on Jul 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19

Platforms

Detected platforms: web

Platform components identified in package: html, js.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
async ^2.2.0 2.3.0
charcode ^1.1.2 1.1.2
collection ^1.14.11 1.14.11
csslib ^0.16.0 0.16.1
html ^0.14.0 0.14.0+2
meta ^1.1.7 1.1.7
universal_io >=0.4.0 <2.0.0 0.7.3
xml ^3.5.0 3.5.0
zone_local ^0.1.1 0.1.1
Transitive dependencies
convert 2.1.1
path 1.6.2
petitparser 2.4.0
source_span 1.5.5
term_glyph 1.1.0
typed_data 1.1.6
Dev dependencies
pedantic >=1.8.0 <2.0.0
test ^1.6.3

Admin