Refactored element creation (now centralized)

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.d8f7c943.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.f34104ec.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.d8f7c943.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f34104ec.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.c1fcc1cc.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.c1fcc1cc.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3bc815f0.min.js",

material/base.html

@@ -179,7 +179,7 @@
     </div>
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.c1fcc1cc.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.d8f7c943.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f34104ec.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/browser/element/_/index.ts

@@ -90,6 +90,21 @@ export function getElements<T extends HTMLElement>(
 
 /* ------------------------------------------------------------------------- */
 
+/**
+ * Create an element
+ *
+ * @template T - Tag name type
+ *
+ * @param tagName - Tag name
+ *
+ * @return Element
+ */
+export function createElement<
+  T extends keyof HTMLElementTagNameMap
+>(tagName: T): HTMLElementTagNameMap[T] {
+  return document.createElement(tagName)
+}
+
 /**
  * Replace an element with another element
  *

src/assets/javascripts/browser/location/hash/index.ts

@@ -23,6 +23,8 @@
 import { Observable, fromEvent } from "rxjs"
 import { filter, map, share, startWith } from "rxjs/operators"
 
+import { createElement } from "browser"
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -47,7 +49,7 @@ export function getLocationHash(): string {
  * @param hash - Location hash
  */
 export function setLocationHash(hash: string): void {
-  const el = document.createElement("a")
+  const el = createElement("a")
   el.href = hash
   el.addEventListener("click", ev => ev.stopPropagation())
   el.click()

src/assets/javascripts/integrations/dialog/index.ts

@@ -29,6 +29,8 @@ import {
   tap
 } from "rxjs/operators"
 
+import { createElement } from "browser"
+
 /* ----------------------------------------------------------------------------
  * Types
  * ------------------------------------------------------------------------- */
@@ -57,7 +59,7 @@ export function setupDialog(
   const dialog$ = new Subject<string>()
 
   /* Create dialog */
-  const dialog = document.createElement("div")                                  // TODO: improve scoping
+  const dialog = createElement("div")                                           // TODO: improve scoping
   dialog.classList.add("md-dialog", "md-typeset")
 
   /* Display dialog */

src/assets/javascripts/patches/script/index.ts

@@ -23,7 +23,11 @@
 import { Observable } from "rxjs"
 import { map, skip, withLatestFrom } from "rxjs/operators"
 
-import { getElements } from "browser"
+import {
+  createElement,
+  getElements,
+  replaceElement
+} from "browser"
 import { useComponent } from "components"
 
 /* ----------------------------------------------------------------------------
@@ -63,10 +67,10 @@ export function patchScripts(
   els$.subscribe(els => {
     for (const el of els) {
       if (el.src || /(^|\/javascript)$/i.test(el.type)) {
-        const script = document.createElement("script")
+        const script = createElement("script")
         const key = el.src ? "src" : "textContent"
         script[key] = el[key]!
-        el.replaceWith(script)
+        replaceElement(el, script)
       }
     }
   })

src/assets/javascripts/patches/table/index.ts

@@ -23,7 +23,11 @@
 import { Observable } from "rxjs"
 import { map } from "rxjs/operators"
 
-import { getElements } from "browser"
+import {
+  createElement,
+  getElements,
+  replaceElement
+} from "browser"
 import { renderTable } from "templates"
 
 /* ----------------------------------------------------------------------------
@@ -52,15 +56,15 @@ interface MountOptions {
 export function patchTables(
   { document$ }: MountOptions
 ): void {
-  const sentinel = document.createElement("table")
+  const sentinel = createElement("table")
   document$
     .pipe(
       map(() => getElements<HTMLTableElement>("table:not([class])"))
     )
       .subscribe(els => {
         for (const el of els) {
-          el.replaceWith(sentinel)
+          replaceElement(el, sentinel)
-          sentinel.replaceWith(renderTable(el))
+          replaceElement(sentinel, renderTable(el))
         }
       })
 }

src/assets/javascripts/utilities/jsx/index.ts

@@ -54,21 +54,21 @@ type Child =
 /**
  * Create an element
  *
- * @param tag - HTML or SVG tag
+ * @param tagName - HTML or SVG tag
  *
  * @return Element
  */
-function createElement(tag: string): HTMLElement | SVGElement {
+function createElement(tagName: string): HTMLElement | SVGElement {
-  switch (tag) {
+  switch (tagName) {
 
     /* SVG elements */
     case "svg":
     case "path":
-      return document.createElementNS("http://www.w3.org/2000/svg", tag)
+      return document.createElementNS("http://www.w3.org/2000/svg", tagName)
 
     /* HTML elements */
     default:
-      return document.createElement(tag)
+      return document.createElement(tagName)
   }
 }
 
@@ -137,16 +137,16 @@ function appendChild(
 /**
  * JSX factory
  *
- * @param tag - HTML or SVG tag
+ * @param tagName - HTML or SVG tag
  * @param attributes - HTML attributes
  * @param children - Child elements
  *
  * @return Element
  */
 export function h(
-  tag: string, attributes: Attributes | null, ...children: Child[]
+  tagName: string, attributes: Attributes | null, ...children: Child[]
 ): HTMLElement | SVGElement {
-  const el = createElement(tag)
+  const el = createElement(tagName)
 
   /* Set attributes, if any */
   if (attributes)