damaru / 2018-11-21-manc-web-meetup-4

Live coding at Manchester Web Meetup #4

Home Page:https://www.meetup.com/Manchester-Web-Meetup/events/256037115/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

ezoic increase your site revenue

About

Live coding at Manchester Web Meetup #4

https://www.meetup.com/Manchester-Web-Meetup/events/256037115/


Languages

Language:JavaScript 96.2%Language:HTML 3.8%