https://github.com/bradcypert/essence

A Virtual DOM implementation in Dart.
https://github.com/bradcypert/essence

dart dart-package hacktoberfest virtualdom

Last synced: 14 days ago
JSON representation

A Virtual DOM implementation in Dart.

• Host: GitHub
• URL: https://github.com/bradcypert/essence
• Owner: bradcypert
• License: mit
• Created: 2020-09-17T03:16:05.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-04T22:36:07.000Z (over 4 years ago)
• Last Synced: 2023-08-20T21:53:56.231Z (over 1 year ago)
• Topics: dart, dart-package, hacktoberfest, virtualdom
• Language: Dart
• Homepage:
• Size: 40 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
Essence


Essence is a super-simple Virtual DOM implementation in Dart.

Essence can parse DOM-Strings into Essence Nodes.

Essence can diff Essence Nodes and provide a list of actions on how to go from NodeList A to NodeList B.

[![Pub Version](https://img.shields.io/pub/v/essence?include_prereleases&style=for-the-badge)](https://pub.dev/packages/essence)

## Usage

A simple usage example:

```dart

import 'package:essence/essence.dart';

main() {

  var tree1 = TreeParser.parse("");

  var tree2 = TreeParser.parse("");

  TreeDiff.diff(tree1, tree2).forEach((action) => {

    print(action.node);

    print(action.selector);

  });

}

```

More interesting perhaps, you can leverage those actions to make updates to an actual DOM. It's worth mentioning that these CSS selectors are unbounded by default. You can pass in a `currentSelector` to `TreeDiff`'s `diff` function to scope them.

```dart

import 'dart:html';

import 'package:essence/essence.dart';

main() {

  // ideally, you'll generate these from dart:html's querySelector

  // but you can create them programatically, too!

  var element = Element.div();

  element.className = 'root';

  element.childNodes.add(Element.span());

  var element2 = Element.div();

  element.className = 'root';

  element2.childNodes.add(Element.article());

  var eleParsed = TreeParser.parseElement(element);

  var ele2Parsed = TreeParser.parseElement(element2);

  var actions =

      TreeDiff.diff(eleParsed, ele2Parsed, currentSelector: '.root');

  actions.forEach((action) {

    // ideally, do the action instead of just printing it, but Ill leave the code for that up to you :)

    print(

        '${action is NodeDeletion ? "Delete" : "Insert"} ${action.node.type} at selector ${action.selector}');

  });

}

```

For more examples, please see our tests.

## Features and bugs

Please file feature requests and bugs at the [issue tracker][tracker].

[tracker]: https://github.com/bradcypert/essence/issues