refactor: consolidate types

aidenybai · Sep 27, 2021 · 9965094 · 9965094
1 parent cc50b06
commit 9965094
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 23 deletions.
diff --git a/src/createElement.ts b/src/createElement.ts
@@ -1,11 +1,11 @@
 import { propsDriver } from './drivers/props';
 import { flushWorkStack } from './patch';
-import { OLD_VNODE_FIELD, VNode } from './types';
+import { DOMNode, OLD_VNODE_FIELD, VNode } from './types';
 
 /**
  * Creates an Element from a VNode
  */
-export const createElement = (vnode: VNode, attachField = true): HTMLElement | Text => {
+export const createElement = (vnode: VNode, attachField = true): DOMNode => {
   if (typeof vnode === 'string') return document.createTextNode(vnode);
   const el = <HTMLElement>document.createElement(vnode.tag);
 

diff --git a/src/drivers/children.ts b/src/drivers/children.ts
@@ -1,6 +1,6 @@
 import { createElement } from '../createElement';
 import { patch } from '../patch';
-import { VDelta, VDeltaOperationTypes, VElement, VFlags, VNode, VTask } from '../types';
+import { DOMNode, VDelta, VDeltaOperationTypes, VElement, VFlags, VNode, VTask } from '../types';
 
 /**
  * Diffs two VNode children and modifies the DOM node based on the necessary changes
@@ -31,7 +31,7 @@ export const childrenDriver = (
           break;
         case VDeltaOperationTypes.UPDATE:
           patch(
-            <HTMLElement | Text>child,
+            <DOMNode>child,
             newVNodeChildren![deltaPosition],
             oldVNodeChildren[deltaPosition],
             workStack,
@@ -56,7 +56,7 @@ export const childrenDriver = (
     return workStack;
   }
   if (newVNode.flag === VFlags.ONLY_TEXT_CHILDREN) {
-    workStack.push(() => (el.textContent = <string>(<VElement>newVNode).children!.join('')));
+    workStack.push(() => (el.textContent = newVNode.children!.join('')));
     return workStack;
   }
   if (newVNode.flag === VFlags.ONLY_KEYED_CHILDREN) {
@@ -138,12 +138,7 @@ export const childrenDriver = (
     // Interates backwards, so in case a childNode is destroyed, it will not shift the nodes
     // and break accessing by index
     for (let i = oldVNodeChildren.length - 1; i >= 0; --i) {
-      patch(
-        <HTMLElement | Text>el.childNodes[i],
-        newVNodeChildren[i],
-        oldVNodeChildren[i],
-        workStack,
-      );
+      patch(<DOMNode>el.childNodes[i], newVNodeChildren[i], oldVNodeChildren[i], workStack);
     }
   }
 

diff --git a/src/patch.ts b/src/patch.ts
@@ -1,14 +1,14 @@
 import { createElement } from './createElement';
 import { childrenDriver } from './drivers/children';
 import { propsDriver } from './drivers/props';
-import { OLD_VNODE_FIELD, VDriver, VElement, VNode, VTask } from './types';
+import { DOMNode, OLD_VNODE_FIELD, VCommit, VDriver, VNode, VTask } from './types';
 
 /**
  * Passes all of the tasks in a given array to a given function sequentially.
  */
 export const flushWorkStack = (
   workStack: VTask[],
-  commit: (task: VTask) => void = (task: VTask): void => task(),
+  commit: VCommit = (task: VTask): void => task(),
 ): void => {
   for (let i = 0; i < workStack.length; ++i) {
     commit(workStack[i]);
@@ -21,13 +21,13 @@ export const flushWorkStack = (
 export const init =
   (drivers: VDriver[]) =>
   (
-    el: HTMLElement | Text,
+    el: DOMNode,
     newVNode: VNode,
     prevVNode?: VNode,
     workStack: VTask[] = [],
-    commit?: (task: VTask) => void,
-  ): HTMLElement | Text => {
-    const finish = (element: HTMLElement | Text): HTMLElement | Text => {
+    commit?: VCommit,
+  ): DOMNode => {
+    const finish = (element: DOMNode): DOMNode => {
       workStack.push(() => {
         if (!prevVNode) element[OLD_VNODE_FIELD] = newVNode;
       });
@@ -48,19 +48,16 @@ export const init =
         return finish(newEl);
       }
       if (!hasString) {
-        if (
-          (!(<VElement>oldVNode)?.key && !(<VElement>newVNode)?.key) ||
-          (<VElement>oldVNode)?.key !== (<VElement>newVNode)?.key
-        ) {
-          if ((<VElement>oldVNode)?.tag !== (<VElement>newVNode)?.tag || el instanceof Text) {
+        if ((!oldVNode?.key && !newVNode?.key) || oldVNode?.key !== newVNode?.key) {
+          if (oldVNode?.tag !== newVNode?.tag || el instanceof Text) {
             const newEl = createElement(newVNode);
             workStack.push(() => el.replaceWith(newEl));
             return finish(newEl);
           }
 
           if (drivers) {
             for (let i = 0; i < drivers.length; i++) {
-              drivers[i](el, <VElement>newVNode, <VElement | undefined>oldVNode, workStack);
+              drivers[i](el, newVNode, oldVNode, workStack);
             }
           }
         }

diff --git a/src/types.ts b/src/types.ts
@@ -3,10 +3,13 @@
  */
 export const OLD_VNODE_FIELD = '__m_old_vnode';
 export type VProps = Record<string, string | boolean | EventListener>;
+export type DOMNode = HTMLElement | Text;
 export type VNode = VElement | string;
 export type VDeltaOperation = [VDeltaOperationTypes, number];
 export type VDelta = VDeltaOperation[];
 export type VTask = () => void;
+export type VCommit = (task: VTask) => void;
+
 export type VDriver = (
   el: HTMLElement,
   newVNode: VElement,