fix(patch): not working if oldVNode is not present

scripts/build.sh

@@ -4,7 +4,9 @@ source $(dirname "$0")/helpers.sh
 
 rm -rf dist
 rollup -c
-mv dist/types/million.min.d.ts dist/million.d.ts
+mv dist/types/million.esm.d.ts dist/million.d.ts
 rm -rf dist/types
 
+sed -i '' 's/export type/export/g' dist/million.d.ts
+
 info "Dist: `ls -xm -d dist/*`"

src/__test__/m.spec.ts

@@ -1,5 +1,5 @@
-import { className, m, ns, svg, style } from '../m';
-import { VNode, VProps } from '../structs';
+import { className, m, ns, svg, style, INSERT, DELETE, UPDATE } from '../m';
+import { VNode, VProps, VDeltaOperationTypes } from '../structs';
 
 const h = (tag: string, props?: VProps, ...children: VNode[]) =>
   m(
@@ -208,4 +208,13 @@ describe('.m', () => {
       key: 'foo',
     });
   });
+
+  it('should return delta operation when operation helper is used', () => {
+    expect(INSERT()).toEqual([VDeltaOperationTypes.INSERT, 0]);
+    expect(INSERT(5)).toEqual([VDeltaOperationTypes.INSERT, 5]);
+    expect(UPDATE()).toEqual([VDeltaOperationTypes.UPDATE, 0]);
+    expect(UPDATE(5)).toEqual([VDeltaOperationTypes.UPDATE, 5]);
+    expect(DELETE()).toEqual([VDeltaOperationTypes.DELETE, 0]);
+    expect(DELETE(5)).toEqual([VDeltaOperationTypes.DELETE, 5]);
+  });
 });

src/__test__/patch.spec.ts

@@ -1,7 +1,7 @@
 import { createElement } from '../createElement';
-import { m } from '../m';
+import { m, INSERT, UPDATE, DELETE } from '../m';
 import { patch, patchChildren, patchProps } from '../patch';
-import { VNode, VProps } from '../structs';
+import { VFlags, VNode, VProps } from '../structs';
 
 const h = (tag: string, props?: VProps, ...children: VNode[]) =>
   m(
@@ -107,4 +107,75 @@ describe('.patch', () => {
 
     expect([...el.childNodes]).toEqual(virtualArrayToDOMNodes(['foo', m('div'), 'baz']));
   });
+
+  // Deltas are behaving weird because they are "delayed" patching
+  it('should execute INSERT deltas', () => {
+    const el = document.createElement('div');
+    const children: string[] = [];
+    const createVNode = () => m('div', undefined, [...children], undefined, [INSERT(0)]);
+
+    children.unshift('foo');
+    patch(el, createVNode());
+    expect(el.childNodes.length).toEqual(1);
+
+    children.unshift('bar');
+    patch(el, createVNode());
+    expect(el.childNodes.length).toEqual(2);
+
+    children.unshift('baz');
+    patch(el, createVNode());
+    expect(el.childNodes.length).toEqual(3);
+  });
+
+  it('should execute UPDATE deltas', () => {
+    const el = document.createElement('div');
+    el.textContent = 'foo';
+    const children: string[] = ['foo'];
+    const createVNode = () => m('div', undefined, [...children], undefined, [UPDATE(0)]);
+
+    children[0] = 'bar';
+    patch(el, createVNode());
+    expect(el.textContent).toEqual('bar');
+
+    children[0] = 'baz';
+    patch(el, createVNode());
+    expect(el.textContent).toEqual('baz');
+  });
+
+  it('should execute INSERT deltas', () => {
+    const el = document.createElement('div');
+    const children: string[] = [];
+    const createVNode = () => m('div', undefined, [...children], undefined, [INSERT(0)]);
+
+    children.unshift('bar');
+    patch(el, createVNode());
+    expect(el.childNodes.length).toEqual(1);
+
+    children.unshift('baz');
+    patch(el, createVNode());
+    expect(el.childNodes.length).toEqual(2);
+  });
+
+  it('should execute DELETE deltas', () => {
+    const el = document.createElement('div');
+    el.appendChild(document.createTextNode('foo'));
+    el.appendChild(document.createTextNode('bar'));
+    el.appendChild(document.createTextNode('baz'));
+    const children: string[] = ['foo', 'bar', 'baz'];
+    const createVNode = () => m('div', undefined, [...children], undefined, [DELETE(0)]);
+
+    children.splice(0, 1);
+    patch(el, createVNode());
+    expect(el.firstChild!.nodeValue).toEqual('bar');
+
+    children.splice(0, 1);
+    patch(el, createVNode());
+    expect(el.firstChild!.nodeValue).toEqual('baz');
+  });
+
+  it('should shortcut if flags are present', () => {
+    const el = document.createElement('div');
+    patch(el, m('div', undefined, ['foo'], VFlags.ONLY_TEXT_CHILDREN));
+    expect(el.textContent).toEqual('foo');
+  });
 });

src/createElement.ts

@@ -8,7 +8,7 @@ import { OLD_VNODE_FIELD, VNode } from './structs';
  */
 export const createElement = (vnode: VNode, attachField = true): HTMLElement | Text => {
   if (typeof vnode === 'string') return document.createTextNode(vnode);
-  const el = Object.assign(document.createElement(vnode.tag), vnode.props);
+  const el = <HTMLElement>Object.assign(document.createElement(vnode.tag), vnode.props);
 
   if (vnode.children) {
     vnode.children.forEach((child) => {

src/index.ts

@@ -1,4 +1,5 @@
-export { OLD_VNODE_FIELD, VElement, VFlags, VNode, VProps } from './structs';
+export type { VElement, VFlags, VNode, VProps } from './structs';
+export { OLD_VNODE_FIELD } from './structs';
 export { createElement } from './createElement';
 export { className, DELETE, INSERT, m, style, svg, UPDATE } from './m';
 export { patch, patchChildren, patchProps } from './patch';

src/patch.ts

@@ -54,7 +54,7 @@ export const patchChildren = (
         case VDeltaOperationTypes.INSERT: {
           el.insertBefore(
             createElement(newVNodeChildren[deltaPosition]),
-            el.childNodes[deltaPosition + 1],
+            el.childNodes[deltaPosition],
           );
           break;
         }
@@ -131,23 +131,29 @@ export const patch = (
         // remove props/children
         return replaceElementWithVNode(el, newVNode);
       }
-      if (oldVNode && !(el instanceof Text)) {
-        patchProps(el, (<VElement>oldVNode).props || {}, (<VElement>newVNode).props || {});
+      if (!(el instanceof Text)) {
+        patchProps(el, (<VElement>oldVNode)?.props || {}, (<VElement>newVNode).props || {});
 
+        // Flags allow for greater optimizability by reducing condition branches.
+        // Generally, you should use a compiler to generate these flags, but
+        // hand-writing them is also possible
         switch (<VFlags>(<VElement>newVNode).flag) {
           case VFlags.NO_CHILDREN: {
             el.textContent = '';
             break;
           }
           case VFlags.ONLY_TEXT_CHILDREN: {
+            // Joining is faster than setting textContent to an array
             el.textContent = <string>(<VElement>newVNode).children!.join('');
             break;
           }
           default: {
             patchChildren(
               el,
-              (<VElement>oldVNode).children || [],
+              (<VElement>oldVNode)?.children || [],
               (<VElement>newVNode).children!,
+              // We need to pass delta here because this function does not have
+              // a reference to the actual vnode.
               (<VElement>newVNode).delta,
             );
             break;

src/structs.ts

@@ -3,7 +3,8 @@
  */
 export const OLD_VNODE_FIELD = '__m_old_vnode';
 
-export type VProps = Record<string, string | unknown | (() => void)>;
+// Props can contain a standard value or a callback function (for events)
+export type VProps = Record<string, string | boolean | (() => void)>;
 export type VNode = VElement | string;
 export type VDeltaOperation = [VDeltaOperationTypes, number];
 export type VDelta = VDeltaOperation[];