Refactor

src/page/background/background.ts

@@ -1,4 +1,3 @@
-import { createElement } from '../../helper/create-element';
 import { getHeight } from '../../helper/get-height';
 import { mix } from '../../helper/mix';
 import { Random } from '../../helper/random';
@@ -27,7 +26,7 @@ export class Background extends PageElement {
     private readonly topOffsetElementCount: number,
     private readonly bottomOffsetElementCount: number
   ) {
-    super(createElement(generate()));
+    super(generate());
   }
 
   protected initialize() {

src/page/header/header.ts

@@ -1,4 +1,3 @@
-import { createElement } from '../../helper/create-element';
 import { ResponsiveImage } from '../../types/responsive-image';
 import { Image } from '../image-viewer/image/image.html';
 import { PageElement } from '../page-element';
@@ -18,16 +17,14 @@ export class Header extends PageElement {
     about: Array<string>;
   }) {
     super(
-      createElement(
-        generate({
-          name,
-          about,
-          photo: Image({
-            image,
-            alt: imageAltText,
-          }),
-        })
-      )
+      generate({
+        name,
+        about,
+        photo: Image({
+          image,
+          alt: imageAltText,
+        }),
+      })
     );
     this.attachElement(new ThemeSwitcher());
   }

src/page/header/theme-switcher/theme-switcher.ts

@@ -1,4 +1,3 @@
-import { createElement } from '../../../helper/create-element';
 import { PageElement } from '../../page-element';
 import { generate } from './theme-switcher.html';
 
@@ -6,7 +5,7 @@ export class ThemeSwitcher extends PageElement {
   private static readonly localStorageKey = 'dark-mode';
 
   public constructor() {
-    super(createElement(generate()));
+    super(generate());
 
     const storedIsDark = ThemeSwitcher.loadFromLocalStorage();
     const isDark = storedIsDark ?? isSystemLevelDarkModeEnabled();

src/page/image-viewer/image-viewer.ts

@@ -1,10 +1,9 @@
-import { createElement } from '../../helper/create-element';
 import { PageElement } from '../page-element';
 import { generate } from './image-viewer.html';
 
 export class ImageViewer extends PageElement {
   public constructor() {
-    super(createElement(generate()));
+    super(generate());
 
     document.body.addEventListener('click', (event: MouseEvent) => {
       const element = event.target as HTMLElement;

src/page/main/main.ts

@@ -1,13 +1,13 @@
-import { createElement } from '../../helper/create-element';
 import { PageElement } from '../page-element';
 import { generate } from './main.html';
 
 export class Main extends PageElement {
   constructor(...children: Array<PageElement | string>) {
     const actualChildren = children.map((c) =>
-      c instanceof PageElement ? c : new PageElement(createElement(c))
+      c instanceof PageElement ? c : new PageElement(c)
     );
-    super(createElement(generate()), actualChildren);
+
+    super(generate(), actualChildren);
     actualChildren.forEach((c) => this.attachElement(c));
   }
 }

src/page/page-element.ts

@@ -1,8 +1,11 @@
+import { html } from '../types/html';
+
 export class PageElement {
-  public constructor(
-    public readonly htmlRoot: HTMLElement,
-    protected children: Array<PageElement> = []
-  ) {}
+  public readonly htmlRoot: HTMLElement;
+
+  public constructor(content: html, protected children: Array<PageElement> = []) {
+    this.htmlRoot = PageElement.createElement(content);
+  }
 
   public attachToDOM(target: HTMLElement) {
     target.appendChild(this.htmlRoot);
@@ -27,4 +30,11 @@ export class PageElement {
     old.parentElement!.replaceChild(element.htmlRoot, old);
     this.children.push(element);
   }
+
+  private static createElement(from: html): HTMLElement {
+    // won't work for all elements, eg.: <td>
+    const element: HTMLElement = document.createElement('div');
+    element.innerHTML = from;
+    return element.firstElementChild as HTMLElement;
+  }
 }

src/page/preview/preview.ts

@@ -1,11 +1,10 @@
-import { createElement } from '../../helper/create-element';
 import { ResponsiveImage } from '../../types/responsive-image';
 import { PageElement } from '../page-element';
 import { generate } from './preview.html';
 
 export class Preview extends PageElement {
   public constructor(poster: ResponsiveImage, private readonly url: string, alt: string) {
-    super(createElement(generate({ poster, alt })));
+    super(generate({ poster, alt }));
     this.url += '?portfolioView';
     this.query('.start-button').addEventListener('click', this.loadContent.bind(this));
   }

src/page/timeline-element/timeline-element.ts

@@ -1,4 +1,3 @@
-import { createElement } from '../../helper/create-element';
 import { titleToFragment } from '../../helper/title-to-fragment';
 import { PageElement } from '../page-element';
 import { TimelineElementParameters } from './timeline-element-parameters';
@@ -13,7 +12,7 @@ export class TimelineElement extends PageElement {
     private readonly showMore: string,
     private readonly showLess: string
   ) {
-    super(createElement(generate(timelineElement, showMore)));
+    super(generate(timelineElement, showMore));
     this.more = this.query('.more');
     addEventListener('resize', this.handleResize.bind(this));
 
@@ -23,7 +22,7 @@ export class TimelineElement extends PageElement {
       '.figure',
       timelineElement.figure instanceof PageElement
         ? timelineElement.figure
-        : new PageElement(createElement(timelineElement.figure))
+        : new PageElement(timelineElement.figure)
     );
   }
 

src/page/video/video.ts

@@ -1,11 +1,10 @@
-import { createElement } from '../../helper/create-element';
 import { PageElement } from '../page-element';
 import { VideoParameters } from './video-parameters';
 import { generate } from './video.html';
 
 export class Video extends PageElement {
   public constructor(options: VideoParameters) {
-    super(createElement(generate(options)));
+    super(generate(options));
 
     this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
   }