uix 0.7.2

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 5

uix

Build Status [![Join the chat at https://gitter.im/localvoid/uix](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/localvoid/uix?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Library to build Web User Interfaces in Dart inspired by React.

Virtual DOM

Virtual DOM simplifies the way to manage DOM mutations, just describe how your Component should look at any point in time.

uix library has a highly optimized virtual dom implementation, see benchmarks below.

Scheduler

Scheduler is responsible for running tasks that update visual representation of the Components, and business logic of web app services.

Misc

  • Automatic management of Dart streams with addSubscription(StreamSubscription s), addTransientSubscription(StreamSubscription s) methods. Transient subscriptions simplifies the way to manage subscriptions the same way virtual dom simplifies DOM mutations, just describe which dependencies should be active at any point in time.
// Code from TodoMVC[Observable] example

$Entry() => new Entry();
class Entry extends Component<int> {
  updateState() {
    _entry = entryStore.get(data);

    // each time Component is invalidated, old subscription will be
    // automatically canceled, so we just register a new one when
    // something is changed.
    addTransientSubscription(_entry.onChange.listen(invalidate));

    return true;
  }
  ...
}
  • revisioned nodes for fast "dirty checking" of mutable data structures. Just update revision when data is changed and check if view has an older revision, for example:
class LineView extends Component<RichLine> {
  List<VNode> _fragments;

  set data(RichLine newData) {
    if (identical(data, newData)) {
      if (data.isNewer(this)) {
        invalidate();
      }
    } else {
      data_ = newData;
      invalidate();
    }
  }
  ...
}
  • Lifecycle control of children virtual nodes to implement complex animations. For example: CssTransitionContainer

  • Mount on top of existing html document. Mount example

  • Moving html nodes and components between different parents and preserving internal state with Virtual DOM api using Anchor objects. Anchor example

Quick Start

Requirements:

  • Dart SDK 1.9.1 or greater

1. Create a new Dart Web Project

2. Add uix library in pubspec.yaml file:

dependencies:
  uix: any

3. Install dependencies

$ pub get

4. Create web/index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello uix</title>
  </head>
  <body>
    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

5. Create web/main.dart file:

library main;

import 'dart:html' as html;
import 'package:uix/uix.dart';

// Function to create new Box instances, it is used as an argument for
// virtual nodes that represent components.
// In the future, when metaclasses will be implemented in Dart, it
// won't be necessary to create this functions. Right now it is just a
// convention that will make it easier to migrate in the future by
// removing '$' prefix in all 'vComponent' invocations.
$Box() => new Box();

// Component<T> type parameter is used to specify type of the input data
// (props in React terms).
class Box extends Component<String> {
  // Tag name of the root element for this Component. Default tag 'div'.
  final tag = 'span';

  // Each time when Component is invalidated (new data is passed,
  // or invalidate() method is called), it will be updated during
  // writeDom phase.
  //
  // API is designed this way intentionally to improve developer
  // experience and get better stack traces when something is
  // failing, that is why there is no method like render() in
  // React.
  updateView() {
    // updateRoot method is used to update internal representation
    // using Virtual DOM API.
    //
    // vRoot node is used to represent root element.
    //
    // Call operator is overloaded for all virtual nodes and is used
    // to assign children, it accepts Lists, Iterables, VNodes and
    // Strings.
    updateRoot(vRoot()(
      vElement('span')(data)
    ));
  }
}

class Main extends Component<String> {
  updateView() {
    updateRoot(vRoot()([
      vElement('span')('Hello '),
      vComponent($Box, data: data)
    ]));
  }
}

main() {
  // Initialize uix library.
  initUix();

  final component = new Main()..data = 'uix';

  // Inject component into document body.
  injectComponent(component, html.document.body);
}

Examples

VDom Benchmark

<a name="benchmarks"></a>

DBMonster Benchmark

Server-Side rendering

uix library with simple tweaks is fully capable to render components on the server and mounting on top of the existing html tree. Unfortunately Dart doesn't support any usable way to build uix Components this way. There are several proposals for Configured Imports 1 2 3 that will solve some problems, but it is still not enough to provide a good developer experience for users of this library. Conditional compilation will be way much better to write "isomorphic" Components.

0.7.2

  • Fixed issue with strong mode.

0.7.1

  • Fixed issue in updating implicit children.

0.7.0

  • Added support for namespaced attributes.
  • Changed interface to specify attributes for virtual nodes. vElement('div', attrs: {Attr.id: 'myId'}). Attr class contains all attributes.
  • Added customAttrs property to virtual nodes to specify custom attributes like data-myattr.
  • Changed interface to specify styles for virtual nodes. vElement('div', style: {Style.top: '10px'}). Style class contains all styles.
  • EXPERIMENTAL support for moving html nodes and Components between different parents with Anchor objects.
  • Added props property to virtual nodes to specify element properties. Prop class contains all properties.
  • Adjacent text nodes separated by comments <----> when rendered to string. And comment nodes ignored when virtual nodes mounted on top of existing html.

0.6.0

0.5.2

  • Attributes in VNodes can accept num and bool types for values and will be automatically converted to Strings. bool type will work as html boolean attribute.
  • Attributes and styles in VNodes can accept null values. Attributes and styles with null value will be removed from the dom element.

0.5.1

  • Virtual Nodes for Components are no longer responsible for calling Component.update() method, and now they're just creating components and passing new data.
  • inject* helper methods are no longer calling Component.update() method.
  • If Component.invalidate() method is called when Scheduler is running tasks for the currentFrame, Component is registered to the currentFrame write task queue, otherwise to the nextFrame.
  • Component.invalidate() will register Component in the Scheduler only when it has shouldUpdateViewFlags.
  • When Component is attached to the document, component will be invalidated.
  • Added new stream onNextFrame to the Scheduler.

0.5.0

  • Fixed wrong sort order for Scheduler write tasks.
  • Fixed bug with clearing wrong flag for nextTick tasks.
  • Removed build step: ComponentGenerator and source_gen dependency.

0.4.0

  • createClassName and vClassName auto-generated functions removed. Creating Components is now possible with simple new ClassName() and to create virtual nodes that represent components vComponent($ClassName, ...). When metaclasses are implemented in Dart, build step will be completely removed, and it will be possible to create virtual nodes with vComponent(ClassName, ...). And it will be quite easy to migrate existing codebase just by removing $ prefix in all vComponent calls.
  • resetTransientSubscriptions, resetSubscriptions renamed to cancelTransientSubscriptions and cancelSubscriptions.
  • Added type property check when looking for similar virtual nodes.

Use this package as a library

1. Depend on it

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


dependencies:
  uix: ^0.7.2

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:uix/uix.dart';
  
Version Uploaded Documentation Archive
0.7.2 May 16, 2017 Go to the documentation of uix 0.7.2 Download uix 0.7.2 archive
0.7.1 Mar 28, 2017 Go to the documentation of uix 0.7.1 Download uix 0.7.1 archive
0.7.0 Sep 3, 2015 Go to the documentation of uix 0.7.0 Download uix 0.7.0 archive
0.6.0 May 7, 2015 Go to the documentation of uix 0.6.0 Download uix 0.6.0 archive
0.5.2 May 7, 2015 Go to the documentation of uix 0.5.2 Download uix 0.5.2 archive
0.5.0 Apr 6, 2015 Go to the documentation of uix 0.5.0 Download uix 0.5.0 archive
0.4.0 Apr 4, 2015 Go to the documentation of uix 0.4.0 Download uix 0.4.0 archive
0.3.1+1 Mar 31, 2015 Go to the documentation of uix 0.3.1+1 Download uix 0.3.1+1 archive
0.3.1 Mar 31, 2015 Go to the documentation of uix 0.3.1 Download uix 0.3.1 archive
0.3.0 Mar 29, 2015 Go to the documentation of uix 0.3.0 Download uix 0.3.0 archive

All 17 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
8
Health:
Code health derived from static analysis. [more]
3
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
0
Overall:
Weighted score of the above. [more]
5
Learn more about scoring.

We analyzed this package on Aug 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.11.8

Platforms

Detected platforms: web

Primary library: package:uix/uix.dart with components: html.

Issues and suggestions

Fix lib/src/vdom/vnode.dart.

Analysis of lib/src/vdom/vnode.dart failed with 7 errors, 6 warnings, 1 hint, including:

line 47 col 26: Expected a class member.

line 47 col 26: Expected to find '>'.

line 47 col 26: Unexpected text '|'.

line 47 col 48: The name '' is already defined.

line 47 col 48: Expected a class member.

Fix lib/src/scheduler.dart.

Analysis of lib/src/scheduler.dart failed with 2 errors:

line 65 col 3: Invalid override. The type of '_WriteGroup.compareTo' ('(_WriteGroup) → int') isn't a subtype of 'Comparable<dynamic>.compareTo' ('(dynamic) → int').

line 213 col 12: The getter 'ROOT' isn't defined for the class 'Zone'.

Fix additional 6 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/vdom/prop.dart (2 errors)
  • lib/src/assert.dart (Run dartfmt to format lib/src/assert.dart.)
  • lib/src/component.dart (1 hint)
  • lib/src/data/node.dart (Run dartfmt to format lib/src/data/node.dart.)
  • lib/src/utils.dart (Run dartfmt to format lib/src/utils.dart.)
  • lib/src/vdom/attr.dart (Run dartfmt to format lib/src/vdom/attr.dart.)

Package is getting outdated.

The package was released 64 weeks ago.

The description is too short.

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Package is pre-v1 release.

While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction of the API.

Maintain an example.

None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use uix.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.9.1
collection ^1.1.0 1.14.11
Dev dependencies
browser any
test ^0.12.0