Live coding at Manchester Web Meetup #4
Clone or download
Latest commit b02a716 Dec 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src done Nov 21, 2018
.gitignore initial commit Nov 21, 2018
README.md Update README.md Dec 11, 2018
blog.md Create blog.md Nov 27, 2018
package-lock.json done Nov 21, 2018
package.json done Nov 21, 2018

README.md

Building a Simple Virtual DOM from Scratch

Please read the article about the talk here.

Codesandbox demo: https://codesandbox.io/s/github/ycmjason-talks/2018-11-21-manc-web-meetup-4

To run

> npm install
> npm run dev

The bug

The bug that we saw in the presentation was at src/vdom/diff.js line 40. We were doing this before:

  const childPatches = [];
  for (const [oldVChild, newVChild] of zip(oldVChildren, newVChildren)) {
    childPatches.push(diff(oldVChild, newVChild));
  }

The problem with this is we are not doing diff(newVChidlren, undefined). So diff(oldVChild, undefined) is never called. So we were missing some patches for removing the old children.

A quick fix is to replace the following lines with

  const childPatches = [];
  oldVChildren.forEach((oldVChild, i) => {
    childPatches.push(diff(oldVChild, newVChildren[i]));
  });

This make sure we loop through all oldVChildren and add patches for removing stuff.