Removed SVG factories to further reduce size

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.6f400298.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.4fb8c892.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.6f400298.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4fb8c892.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.e3b5b4d0.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.e3b5b4d0.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2693be28.min.js",

material/base.html

@@ -173,7 +173,7 @@
     </div>
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.e3b5b4d0.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.6f400298.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.4fb8c892.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/templates/clipboard/index.tsx

@@ -22,17 +22,6 @@
 
 import { h, translate } from "utilities"
 
-/* ----------------------------------------------------------------------------
- * Data
- * ------------------------------------------------------------------------- */
-
-/**
- * CSS classes
- */
-const css = {
-  container: "md-clipboard md-icon"
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -44,12 +33,10 @@ const css = {
  *
  * @return Element
  */
-export function renderClipboardButton(
+export function renderClipboardButton(id: string) {
-  id: string
-) {
   return (
     <button
-      class={css.container}
+      class="md-clipboard md-icon"
       title={translate("clipboard.copy")}
       data-clipboard-target={`#${id} > code`}
     ></button>

src/assets/javascripts/templates/search/index.tsx

@@ -27,24 +27,6 @@ import {
 } from "integrations/search"
 import { h, translate, truncate } from "utilities"
 
-/* ----------------------------------------------------------------------------
- * Data
- * ------------------------------------------------------------------------- */
-
-/**
- * CSS classes
- */
-const css = {
-  item:    "md-search-result__item",
-  link:    "md-search-result__link",
-  more:    "md-search-result__more",
-  article: "md-search-result__article md-search-result__article--document",
-  section: "md-search-result__article",
-  title:   "md-search-result__title",
-  teaser:  "md-search-result__teaser",
-  terms:   "md-search-result__terms"
-}
-
 /* ----------------------------------------------------------------------------
  * Helper function
  * ------------------------------------------------------------------------- */
@@ -67,15 +49,18 @@ function renderArticleDocument(
       ...list, ...!terms[key] ? [<del>{key}</del>, " "] : []
     ], [])
   return (
-    <a href={location.toString().replace(/%20/g, "+")} class={css.link} tabIndex={-1}>
+    <a href={location.toString().replace(/%20/g, "+")} class="md-search-result__link" tabIndex={-1}>
-      <article class={css.article} data-md-score={score.toFixed(2)}>
+      <article
+        class="md-search-result__article md-search-result__article--document"
+        data-md-score={score.toFixed(2)}
+      >
         <div class="md-search-result__icon md-icon"></div>
-        <h1 class={css.title}>{title}</h1>
+        <h1 class="md-search-result__title">{title}</h1>
         {teaser && text.length > 0 &&
-          <p class={css.teaser}>{truncate(text, 320)}</p>
+          <p class="md-search-result__teaser">{truncate(text, 320)}</p>
         }
         {teaser && miss.length > 0 &&
-          <p class={css.terms}>
+          <p class="md-search-result__terms">
             {translate("search.result.term.missing")}: {...miss.slice(0, -1)}
           </p>
         }
@@ -100,14 +85,14 @@ function renderSection(
       ...list, ...!terms[key] ? [<del>{key}</del>, " "] : []
     ], [])
   return (
-    <a href={location.toString().replace(/%20/g, "+")} class={css.link} tabIndex={-1}>
+    <a href={location.toString().replace(/%20/g, "+")} class="md-search-result__link" tabIndex={-1}>
-      <article class={css.section} data-md-score={score.toFixed(2)}>
+      <article class="md-search-result__article" data-md-score={score.toFixed(2)}>
-        <h1 class={css.title}>{title}</h1>
+        <h1 class="md-search-result__title">{title}</h1>
         {text.length > 0 &&
-          <p class={css.teaser}>{truncate(text, 320)}</p>
+          <p class="md-search-result__teaser">{truncate(text, 320)}</p>
         }
         {miss.length > 0 &&
-          <p class={css.terms}>
+          <p class="md-search-result__terms">
             {translate("search.result.term.missing")}: {...miss.slice(0, -1)}
           </p>
         }
@@ -150,7 +135,7 @@ export function renderSearchResult(
     renderArticleDocument(article, !parent && index === 0),
     ...best.map(renderSection),
     ...more.length ? [
-      <details class={css.more}>
+      <details class="md-search-result__more">
         <summary tabIndex={-1}>
           {more.length > 0 && more.length === 1
             ? translate("search.result.more.one")
@@ -164,7 +149,7 @@ export function renderSearchResult(
 
   /* Render search result */
   return (
-    <li class={css.item}>
+    <li class="md-search-result__item">
       {children}
     </li>
   )

src/assets/javascripts/templates/source/index.tsx

@@ -23,18 +23,6 @@
 import { SourceFacts } from "patches/source"
 import { h } from "utilities"
 
-/* ----------------------------------------------------------------------------
- * Data
- * ------------------------------------------------------------------------- */
-
-/**
- * CSS classes
- */
-const css = {
-  facts: "md-source__facts",
-  fact:  "md-source__fact"
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -49,12 +37,11 @@ const css = {
 export function renderSource(
   facts: SourceFacts
 ) {
-  const children = facts.map(fact => (
-    <li class={css.fact}>{fact}</li>
-  ))
   return (
-    <ul class={css.facts}>
+    <ul class="md-source__facts">
-      {children}
+      {facts.map(fact => (
+        <li class="md-source__fact">{fact}</li>
+      ))}
     </ul>
   )
 }

src/assets/javascripts/templates/table/index.tsx

@@ -22,18 +22,6 @@
 
 import { h } from "utilities"
 
-/* ----------------------------------------------------------------------------
- * Data
- * ------------------------------------------------------------------------- */
-
-/**
- * CSS classes
- */
-const css = {
-  wrapper: "md-typeset__scrollwrap",
-  table:   "md-typeset__table"
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -49,8 +37,8 @@ export function renderTable(
   table: HTMLTableElement
 ) {
   return (
-    <div class={css.wrapper}>
+    <div class="md-typeset__scrollwrap">
-      <div class={css.table}>
+      <div class="md-typeset__table">
         {table}
       </div>
     </div>

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

@@ -29,7 +29,7 @@ import { JSX as JSXInternal } from "preact"
  * ------------------------------------------------------------------------- */
 
 /**
- * HTML and SVG attributes
+ * HTML attributes
  */
 type Attributes =
   & JSXInternal.HTMLAttributes
@@ -41,7 +41,6 @@ type Attributes =
  */
 type Child =
   | HTMLElement
-  | SVGElement
   | Text
   | string
   | number
@@ -50,69 +49,13 @@ type Child =
  * Helper functions
  * ------------------------------------------------------------------------- */
 
-/**
- * Create an element
- *
- * @param tagName - HTML or SVG tag
- *
- * @return Element
- */
-function createElement(tagName: string): HTMLElement | SVGElement {
-  switch (tagName) {
-
-    /* SVG elements */
-    case "svg":
-    case "path":
-      return document.createElementNS("http://www.w3.org/2000/svg", tagName)
-
-    /* HTML elements */
-    default:
-      return document.createElement(tagName)
-  }
-}
-
-/**
- * Set an attribute
- *
- * @param el - Element
- * @param name - Attribute name
- * @param value - Attribute value
- */
-function setAttribute(
-  el: HTMLElement | SVGElement, name: string, value: string) {
-  switch (name) {
-
-    /* Attributes to be ignored */
-    case "xmlns":
-      break
-
-    /* Attributes of SVG elements */
-    case "viewBox":
-    case "d":
-      if (typeof value !== "boolean")
-        el.setAttributeNS(null, name, value)
-      else if (value)
-        el.setAttributeNS(null, name, "")
-      break
-
-    /* Attributes of HTML elements */
-    default:
-      if (typeof value !== "boolean")
-        el.setAttribute(name, value)
-      else if (value)
-        el.setAttribute(name, "")
-  }
-}
-
 /**
  * Append a child node to an element
  *
  * @param el - Element
  * @param child - Child node(s)
  */
-function appendChild(
+function appendChild(el: HTMLElement, child: Child | Child[]): void {
-  el: HTMLElement | SVGElement, child: Child | Child[]
-): void {
 
   /* Handle primitive types (including raw HTML) */
   if (typeof child === "string" || typeof child === "number") {
@@ -136,21 +79,24 @@ function appendChild(
 /**
  * JSX factory
  *
- * @param tagName - HTML or SVG tag
+ * @param tag - HTML tag
  * @param attributes - HTML attributes
  * @param children - Child elements
  *
  * @return Element
  */
 export function h(
-  tagName: string, attributes: Attributes | null, ...children: Child[]
+  tag: string, attributes: Attributes | null, ...children: Child[]
-): HTMLElement | SVGElement {
+): HTMLElement {
-  const el = createElement(tagName)
+  const el = document.createElement(tag)
 
   /* Set attributes, if any */
   if (attributes)
     for (const attr of Object.keys(attributes))
-      setAttribute(el, attr, attributes[attr])
+      if (typeof attributes[attr] !== "boolean")
+        el.setAttribute(attr, attributes[attr])
+      else if (attributes[attr])
+        el.setAttribute(attr, "")
 
   /* Append child nodes */
   for (const child of children)
@@ -166,7 +112,7 @@ export function h(
 
 export declare namespace h {
   namespace JSX {
-    type Element = HTMLElement | SVGElement
+    type Element = HTMLElement
     type IntrinsicElements = JSXInternal.IntrinsicElements
   }
 }