donejs / donejs/vdom-streaming-serializer

Implement the serializer

Open
#5 1 comment 0 reactions 1 assignee Claimed by @indiragp View on GitHub
Dominant language
JavaScript
Stars
1
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Referring to the [API issue](https://github.com/donejs/vdom-streaming-serializer/issues/3) you can see that the serializer module should be used like so:

```js
var stream = serialize(element);
stream.pipe(response);
```

This means our **serialize** function needs to return a stream. The type of stream we will create is a [Readable](https://nodejs.org/api/stream.html#stream_class_stream_readable) stream.

# Make the module return a stream

Update `src/vdom-streaming-serializer.js` to look like this:

```js
var Readable = require('stream').Readable;

module.exports = function(element){
var stream = new Readable();
stream._read = function(){
// This is where we start doing stuff
};
return stream;
};
```

This makes our module implement the API it is supposed to... it just doesn't do anything yet. We'll do that later.

# Update the demo script

Back in the [demo script you created](https://github.com/donejs/vdom-streaming-serializer/issues/6) earlier, update it to read from the stream:

```js
var stream = serialize(document.documentElement);

stream.on('data', function(chunk){
// This is a chunk of HTML!
console.log(chunk);
});

stream.on('end', function(){
// All HTML has been written
});
```

Now you've created a stream, it just never fires events. The next step is to do the hard work of implementing the streaming serializer.

# Making the serializer work

Keys here are:

1. We want to create HTML strings so we need:
* The tag name (`element.localName`)
* Its attributes (which you can loop over with `element.attributes`)
* Its children (which you can loop over with `element.childNodes`)
2. When you come to a Node (either an attribute, element, or text) that is marked as `Symbol.for('async-node')` you need to stop.
3. Flush the current html string parts when you hit an async node.
4. When the async node results, continue where you left off.
5. The async node might have been replaced, so keep a reference to the parent and the position that your node sits.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.