refactor: standardize Effect interface

aidenybai · Mar 14, 2022 · da2b782 · da2b782
1 parent 307563c
commit da2b782
Show file tree

Hide file tree

Showing 18 changed files with 309 additions and 190 deletions.
diff --git a/benchmarks/data.ts b/benchmarks/data.ts
@@ -2,13 +2,14 @@ import {
   Commit,
   createElement,
   DOMNode,
-  Mutation,
+  Effect,
   Driver,
   OLD_VNODE_FIELD,
   useChildren,
   VElement,
   VEntity,
   VNode,
+  EffectTypes,
 } from 'packages/million';
 
 const adjectives = [
@@ -92,11 +93,14 @@ const useNode = (drivers: Partial<Driver>[]) => {
     newVNode?: VNode,
     oldVNode?: VNode,
     commit: Commit = (work: () => void) => work(),
-    effects: Mutation[] = [],
+    effects: Effect[] = [],
   ): ReturnType<Driver> => {
     const finish = (element: DOMNode): ReturnType<Driver> => {
       if (!oldVNode) {
-        effects.push(() => (element[OLD_VNODE_FIELD] = newVNode));
+        effects.push({
+          type: EffectTypes.SET_PROP,
+          flush: () => (element[OLD_VNODE_FIELD] = newVNode),
+        });
       }
 
       return {
@@ -108,15 +112,21 @@ const useNode = (drivers: Partial<Driver>[]) => {
     };
 
     if (newVNode === undefined || newVNode === null) {
-      effects.push(() => el.remove());
+      effects.push({
+        type: EffectTypes.REMOVE,
+        flush: () => el.remove(),
+      });
       return finish(el);
     } else {
       let prevVNode: VNode | VEntity | undefined = oldVNode ?? el[OLD_VNODE_FIELD];
       const hasString = typeof prevVNode === 'string' || typeof newVNode === 'string';
 
       if (hasString && prevVNode !== newVNode) {
         const newEl = createElement(<string>newVNode, false);
-        effects.push(() => el.replaceWith(newEl));
+        effects.push({
+          type: EffectTypes.REPLACE,
+          flush: () => el.replaceWith(newEl),
+        });
 
         return finish(<DOMNode>newEl);
       }
@@ -130,7 +140,10 @@ const useNode = (drivers: Partial<Driver>[]) => {
         ) {
           if (oldVElement?.tag !== newVElement?.tag || el instanceof Text) {
             const newEl = createElement(newVElement, false);
-            effects.push(() => el.replaceWith(newEl));
+            effects.push({
+              type: EffectTypes.REPLACE,
+              flush: () => el.replaceWith(newEl),
+            });
             return finish(<DOMNode>newEl);
           }
 
@@ -159,7 +172,7 @@ export const diff = useNode([useChildren()]);
 export const patch = (el: DOMNode, newVNode: VNode, oldVNode?: VNode) => {
   const data = diff(el, newVNode, oldVNode);
   for (let i = 0; i < data.effects!.length; i++) {
-    data.effects![i]();
+    data.effects![i].flush();
   }
 
   return data.el;

diff --git a/benchmarks/suites/appendManyRowsToLargeTable.tsx b/benchmarks/suites/appendManyRowsToLargeTable.tsx
@@ -62,9 +62,11 @@ const suite = Suite('append many rows to large table (appending 1,000 to a table
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }) => {
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/createManyRows.tsx b/benchmarks/suites/createManyRows.tsx
@@ -60,9 +60,11 @@ const suite = Suite('create many rows (creating 10,000 rows)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }) => {
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/createRows.tsx b/benchmarks/suites/createRows.tsx
@@ -60,9 +60,11 @@ const suite = Suite('create rows (creating 1,000 rows)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }) => {
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/partialUpdate.tsx b/benchmarks/suites/partialUpdate.tsx
@@ -70,9 +70,11 @@ const suite = Suite('partial update (updating every 10th row for 1,000 rows)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }) => {
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/removeRow.tsx b/benchmarks/suites/removeRow.tsx
@@ -63,10 +63,12 @@ const suite = Suite('remove row (removing one row)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }, i) => {
       if (row === i) return;
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/replaceAllRows.tsx b/benchmarks/suites/replaceAllRows.tsx
@@ -69,9 +69,11 @@ const suite = Suite('replace all rows (updating all 1,000 rows)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }) => {
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/selectRow.tsx b/benchmarks/suites/selectRow.tsx
@@ -52,11 +52,12 @@ const suite = Suite('select row (highlighting a selected row)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }, i) => {
-      if (row === i)
-        element.innerHTML += `<tr style="background: red;"><td>${id}</td><td>${label}</td></tr>`;
-      else element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      if (row === i) html += `<tr style="background: red;"><td>${id}</td><td>${label}</td></tr>`;
+      else html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML = html;
   },
 });
 

diff --git a/benchmarks/suites/swapRows.tsx b/benchmarks/suites/swapRows.tsx
@@ -4,7 +4,7 @@
  */
 // @ts-nocheck
 
-import { createElement, Delta } from 'packages/million';
+import { createElement, Deltas } from 'packages/million';
 import * as simple_virtual_dom from 'simple-virtual-dom';
 import * as snabbdom from 'snabbdom';
 import * as hundred from 'hundred';
@@ -70,9 +70,11 @@ const suite = Suite('swap rows (swap 2 rows for table with 1,000 rows)', {
   },
   innerHTML: () => {
     const element = el();
+    let html = '';
     data.forEach(({ id, label }) => {
-      element.innerHTML += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
+      html += `<tr><td>${String(id)}</td><td>${label}</td></tr>`;
     });
+    element.innerHTML += html;
   },
 });
 

diff --git a/package.json b/package.json
@@ -105,18 +105,18 @@
     "@picocss/pico": "^1.5.0",
     "@types/benchmark": "^2.1.1",
     "@types/canvas-confetti": "^1.4.2",
-    "@types/lodash": "^4.14.179",
+    "@types/lodash": "^4.14.180",
     "@types/node": "^17.0.21",
     "@types/virtual-dom": "^2.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
     "@vitejs/plugin-legacy": "^1.7.1",
     "@vitest/ui": "^0.2.8",
     "benchmark": "^2.1.4",
     "c8": "^7.11.0",
     "canvas-confetti": "^1.5.1",
     "chart.js": "^3.7.1",
-    "esbuild": "^0.14.26",
+    "esbuild": "^0.14.27",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
     "export-size": "^0.5.2",