kof/diff-renderer

Smart innerHTML for your views.

diff-renderer's Issues

SVG Support

I'm unable to update an element with an SVG and get it to actually render. Using the Inspector, the DOM shows an svg element, but it is never rendered to screen.

Example:

Go to the playground and add a basic svg element to the "New html" input and click "Render diff".

Here is the svg I added: <svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> </svg>

https://s3.amazonaws.com/zwss/DiffRenderer_playground._2020-09-02_14-58-40.png

urls in style tags break

When I update element containing style urls I get weird results, for example:

<style>
  div {
    background-image: url(http://some.image.jpg)
  }
</style>

becomes:

<style>
  div {
    background-image: url(http:</style>

Am I missing something?

Usage examples

• basic examples
• jquery integration example
• famo.us integration example
• todo app of backbone example
• some real time impressing example

Port more tests for html parser

f.e. use tests from sax-js

Allow nested DiffRenderer instances

Ensure every dom node has always just one virtual node so that changes are always applied just once.

• global Nodes map
• add node id to every Node and to dom Node
• when creating Node instance check if already exist in global map and return it
• when remove Node, remove it from global map

Create bench for dom serializer

Its usefull when dom has changed from external lib.

Optimize inserts

When insert a node at the beginning, it causes modifications to all downstream nodes. This needs to be optimized.

• add hash to snapshot nodes
• save hashes in Node instance and use in toJSON
• reorder nodes based on hashes so that untouched nodes get into the new place and docdiff doesn't thing everything has changed.

Support .update method to accept json

Think about to switch to the diff format of Object.observe

• investigate if we can use an implementation from any Object.observe shim
• create diffing benchmarks

Make createNode/removeNode using a pool

• remove node will not really remove it, it wil just cleanup node and put it into the pool
• create node will only create a node if there is no free node of proper type in the pool

Put html parser into separate repo

• html is not the fastest format
• make clear whats the fastest

When should I create multiple Renderer instances and nest them?

Hello there!

I am wondering situations when to create more instances manually.
If there's no possible benefits from making more than one instance, I will definitely render all of my things with new DiffRenderer(document.body).

What do you think?

Make playground nicer