https://github.com/donejs/vdom-streaming-serializer

A streaming serializing for virtual DOMs that look like a real DOM
https://github.com/donejs/vdom-streaming-serializer

Last synced: 3 months ago
JSON representation

A streaming serializing for virtual DOMs that look like a real DOM

• Host: GitHub
• URL: https://github.com/donejs/vdom-streaming-serializer
• Owner: donejs
• License: mit
• Created: 2017-02-22T13:10:33.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-05-23T12:15:40.000Z (about 5 years ago)
• Last Synced: 2024-12-31T22:28:54.866Z (5 months ago)
• Language: JavaScript
• Size: 53.7 KB
• Stars: 1
• Watchers: 8
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/donejs/vdom-streaming-serializer.png?branch=master)](https://travis-ci.org/donejs/vdom-streaming-serializer)

[![npm version](https://badge.fury.io/js/vdom-streaming-serializer.svg)](https://badge.fury.io/js/vdom-streaming-serializer)

# vdom-streaming-serializer

[![Greenkeeper badge](https://badges.greenkeeper.io/donejs/vdom-streaming-serializer.svg)](https://greenkeeper.io/)

The vdom-streaming-serializer is a library for serializing virtual DOM objects into chunks of strings that can be written into an HTTP response.

## Installation

```

npm install vdom-streaming-serializer

```

## Usage

A virtual dom has to be created and running the serialization will emit chunks of HTML.

### Example

This example creates a virtual dom and serializes it to emit streams of HTML elements in Chunks.

```js

var document = makeDocument();

var ul = document.createElement('ul');

document.body.appendChild(ul);

var li = document.createElement('li');

```

Making this `
` as asynchronous will force the serialize to wait.


```js

var ASYNC = Symbol.for('async-node');

li[ASYNC] = Promise.resolve();

ul.appendChild(li);

```

Once the element is serialized, it is then emitted in `data` event.

```js

var stream = serialize(document);

stream.setEncoding('utf8');

stream.on('data', function(html){

	console.log('Chunk', html);

});

```

The output from this demo should be:

```

Chunk 


Chunk 




```


From this, the `
` element is serialized asynchronously.


## API

The serialization process traverses and checks for html syntax and attributes to add to the buffer.

Upon noticing a child node, the serializer determines whether its child is asynchronous or not. If it is, the current buffer is flushed and the element begins serializing the asynchronous child.

### Asynchronization

It handles synchronous and asynchronous elements differently by resolving promise elements if we wish to wait before emitting.

## License

MIT