Merge pull request #35 from felippe-regazio/create-element-improv

Improvements in tests and readability of createElement fn
aidenybai · Jun 19, 2021 · 092a151 · 092a151
2 parents de2e398 + c9af890
commit 092a151
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/src/__test__/createElement.spec.ts b/src/__test__/createElement.spec.ts
@@ -3,6 +3,8 @@ import { OLD_VNODE_FIELD } from '../constants';
 import { m } from '../m';
 import { VNode, VProps } from '../structs';
 
+const createManual = (tag: string, props: unknown) => Object.assign(document.createElement(tag), props);
+
 const h = (tag: string, props?: VProps, ...children: VNode[]) =>
   m(
     tag,
@@ -19,9 +21,7 @@ describe('.createElement', () => {
     expect(createElement(h('div'))).toEqual(document.createElement('div') as HTMLElement);
 
     const created = createElement(h('div', { id: 'app' }, 'foo'));
-    const manual = document.createElement('div') as HTMLElement;
-    manual.id = 'app';
-    manual.innerHTML = 'foo';
+    const manual = createManual('div', { id: 'app', innerHTML: 'foo' }) as HTMLElement;
 
     expect(created).toEqual(manual);
   });
@@ -30,13 +30,22 @@ describe('.createElement', () => {
     expect(createElement(h('div'))).toEqual(<HTMLElement>document.createElement('div'));
 
     const created = createElement(h('div', { id: 'app' }, 'foo'));
-    const manual = <HTMLElement>document.createElement('div');
-    manual.id = 'app';
-    manual.innerHTML = 'foo';
+    const manual = <HTMLElement>createManual('div', { id: 'app', innerHTML: 'foo' });
 
     expect(created).toEqual(manual);
   });
 
+  it('should create HTMLElement from vnode with VNode child', () => {
+    const child = h('section', { id: 'child' }, 'bar');
+    const created = createElement(h('div', { id: 'app' }, child));
+
+    const mCreated = <HTMLElement>createManual('div', { id: 'app' });
+    const mChild = <HTMLElement>createManual('section', { id: 'child', innerHTML: 'bar' });
+
+    mCreated.append(mChild);
+    expect(created).toEqual(mCreated);
+  });
+
   it('should create HTMLElement from vnode', () => {
     expect(createElement(h('div'), true)[OLD_VNODE_FIELD]).toEqual(h('div'));
     expect(createElement(h('div'), false)[OLD_VNODE_FIELD]).toBeUndefined();

diff --git a/src/createElement.ts b/src/createElement.ts
@@ -9,19 +9,11 @@ import { VNode } from './structs';
  */
 export const createElement = (vnode: VNode, attachField = true): HTMLElement | Text => {
   if (typeof vnode === 'string') return document.createTextNode(vnode);
-  const el = document.createElement(vnode.tag);
+  const el = Object.assign(document.createElement(vnode.tag), vnode.props);
 
-  if (vnode.props) {
-    for (const name of Object.keys(vnode.props)) {
-      el[name] = vnode.props[name];
-    }
-  }
-
-  if (vnode.children) {
-    for (let i = 0; i < vnode.children.length; ++i) {
-      el.appendChild(createElement(vnode.children[i]));
-    }
-  }
+  vnode.children && vnode.children.forEach(child => {
+    el.appendChild(createElement(child));
+  });
 
   if (attachField) el[OLD_VNODE_FIELD] = vnode;