Refactored JSX factory and added typings

Makefile

@@ -46,7 +46,7 @@ lint:
 # Start development server
 start:
 	@ NODE_ENV=development ${BIN}/nodemon --quiet \
-		--watch src --ext html,scss,ts \
+		--watch src --ext html,scss,ts,tsx \
 		--exec make build
 
 # -----------------------------------------------------------------------------

package-lock.json

@@ -2166,11 +2166,6 @@
         "array-find-index": "^1.0.1"
       }
     },
-    "custom-event-polyfill": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
-      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
-    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -4747,11 +4742,6 @@
       "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
       "dev": true
     },
-    "js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "js-yaml": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
@@ -5704,6 +5694,16 @@
         "boolbase": "~1.0.0"
       }
     },
+    "null-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-3.0.0.tgz",
+      "integrity": "sha512-hf5sNLl8xdRho4UPBOOeoIwT3WhjYcMUQm0zj44EhD6UscMAz72o2udpoDFBgykucdEDGIcd6SXbc/G6zssbzw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^1.0.0"
+      }
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -6495,6 +6495,12 @@
       "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==",
       "dev": true
     },
+    "preact": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.1.1.tgz",
+      "integrity": "sha512-mKW7Cdn68XMhdes0FjyIbA8+IVPsj3aIuAEQlZVkj9E2VhujWcXZEfwirBoXK6qZYfj1djaTBDCFKjAu1sK93w==",
+      "dev": true
+    },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
@@ -9557,28 +9563,6 @@
         "errno": "~0.1.7"
       }
     },
-    "worker-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
-      "integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.0.0",
-        "schema-utils": "^0.4.0"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "0.4.7",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
-          "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        }
-      }
-    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

package.json

@@ -31,9 +31,7 @@
   },
   "dependencies": {
     "clipboard": "^2.0.0",
-    "custom-event-polyfill": "^1.0.7",
     "escape-html": "^1.0.3",
-    "js-cookie": "^2.2.1",
     "lunr": "^2.3.6",
     "lunr-languages": "^1.1.0",
     "lz-string": "^1.4.4",
@@ -56,7 +54,9 @@
     "modularscale-sass": "^3.0.10",
     "node-sass": "^4.12.0",
     "nodemon": "^1.19.2",
+    "null-loader": "^3.0.0",
     "postcss-cli": "^6.1.3",
+    "preact": "^10.1.1",
     "stylelint": "^11.0.0",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-order": "^3.1.1",

src/assets/javascripts/components/_/index.ts

@@ -55,7 +55,7 @@ export type ComponentMap = {
 }
 
 /* ----------------------------------------------------------------------------
- * Function types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**

src/assets/javascripts/components/header/offset/index.ts

@@ -32,7 +32,7 @@ import { ViewportOffset, ViewportSize } from "../../../utilities"
 import { Header } from "../_"
 
 /* ----------------------------------------------------------------------------
- * Function types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**

src/assets/javascripts/components/main/index.ts

@@ -45,7 +45,7 @@ export interface Main {
 }
 
 /* ----------------------------------------------------------------------------
- * Function types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**

src/assets/javascripts/components/sidebar/index.ts

@@ -59,7 +59,7 @@ export interface Sidebar {
 }
 
 /* ----------------------------------------------------------------------------
- * Function types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**

src/assets/javascripts/extensions/index.ts

@@ -20,4 +20,5 @@
  * IN THE SOFTWARE.
  */
 
+export * from "./jsx"
 export * from "./rxjs"

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

@@ -20,11 +20,52 @@
  * IN THE SOFTWARE.
  */
 
+import { JSX as JSXInternal } from "preact"
+import { keys } from "ramda"
+
 /* ----------------------------------------------------------------------------
- * Types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
+/**
+ * HTML attributes
+ */
+type Attributes =
+  & JSXInternal.HTMLAttributes
+  & JSXInternal.SVGAttributes
+  & Record<string, any>
 
+/**
+ * Child element
+ */
+type Child = Child[] | Element | Text | string | number
+
+/* ----------------------------------------------------------------------------
+ * Helper functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Append a child node to an element
+ *
+ * @param el - Element
+ * @param child - Child node
+ */
+function appendChild(el: Element, child: Child): void {
+
+  /* Handle primitive types */
+  if (typeof child === "string" || typeof child === "number") {
+    el.appendChild(new Text(child.toString()))
+
+  /* Handle nodes */
+  } else if (child instanceof Node) {
+    el.appendChild(child)
+
+  /* Handle nested children */
+  } else if (Array.isArray(child)) {
+    for (const node of child)
+      appendChild(el, node)
+  }
+}
 
 /* ----------------------------------------------------------------------------
  * Functions
@@ -33,52 +74,38 @@
 /**
  * JSX factory
  *
- * @param tag - Tag name
+ * @param tag - HTML tag
- * @param attributes - Properties
+ * @param attributes - HTML attributes
  * @param children - Child elements
  *
  * @return Element
  */
 export function h(
-  tag: string,
+  tag: string, attributes: Attributes | null,
-  attributes: Record<string, string | boolean> | null,
+  ...children: Array<Element | Text | string | number>
-  ...children: Array<Element | Text | string>
 ) {
-  console.log(tag, attributes, children)
+  const el = document.createElement(tag)
-  // const el = document.createElement(tag)
 
-  // /* Set all properties */
+  /* Set attributes, if any */
-  // if (attributes)
+  if (attributes)
-  //   Array.prototype.forEach.call(Object.keys(attributes), attr => {
+    for (const attr of keys(attributes))
-  //     el.setAttribute(attr, attributes[attr])
+      if (typeof attributes[attr] !== "boolean")
-  //   })
+        el.setAttribute(attr, attributes[attr])
+      else if (attributes[attr])
+        el.setAttribute(attr, "")
 
-  // /* Iterate child nodes */
+  /* Append child nodes */
-  // const iterateChildNodes = nodes => {
+  for (const child of children)
-  //   Array.prototype.forEach.call(nodes, node => {
+    appendChild(el, child)
 
-  //     /* Directly append text content */
+  /* Return element */
-  //     if (typeof node === "string" ||
+  return el
-  //         typeof node === "number") {
+}
-  //       el.textContent += node
+
-
+/* ----------------------------------------------------------------------------
-  //     /* Recurse, if we got an array */
+ * Namespace
-  //     } else if (Array.isArray(node)) {
+ * ------------------------------------------------------------------------- */
-  //       iterateChildNodes(node)
+
-
+export declare namespace h {
-  //     /* Append raw HTML */
+  export import JSX = JSXInternal
-  //     } else if (typeof node.__html !== "undefined") {
-  //       el.innerHTML += node.__html
-
-  //     /* Append regular nodes */
-  //     } else if (node instanceof Node) {
-  //       el.appendChild(node)
-  //     }
-  //   })
-  // }
-
-  // /* Iterate child nodes and return element */
-  // iterateChildNodes(children)
-  // return el
-  return { tag }
 }

src/assets/javascripts/utilities/agent/document/index.ts

@@ -34,7 +34,7 @@ import {
 } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
- * Function types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**

src/assets/javascripts/utilities/agent/worker/index.ts

@@ -36,7 +36,7 @@ export interface WorkerMessage {
 }
 
 /* ----------------------------------------------------------------------------
- * Function types
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**

src/base.html

@@ -272,8 +272,8 @@
       {% endif %}
 
       <!-- Main area -->
-      <main class="md-main" role="main">
+      <main class="md-main" data-md-component="main">
-        <div class="md-main__inner md-grid" data-md-component="main">
+        <div class="md-main__inner md-grid">
 
           <!-- Navigation -->
           {% block site_nav %}
@@ -443,7 +443,10 @@
       <script>
         app = initialize({
           base: "{{ base_url }}",
-          search: "{{ 'assets/javascripts/search.js' | url }}"
+          worker: {
+            search: "{{ 'assets/javascripts/search.js' | url }}",
+            packer: "{{ 'assets/javascripts/packer.js' | url }}"
+          }
         });
       </script>
 

tsconfig.json

@@ -6,7 +6,7 @@
     "declarationMap": false,
     "downlevelIteration": true,
     "jsx": "react",
-    "jsxFactory": "jsx.h",
+    "jsxFactory": "h",
     "lib": [
       "dom",
       "es2017",

webpack.config.ts

@@ -21,7 +21,7 @@
  */
 
 import * as path from "path"
-import { Configuration, ProvidePlugin } from "webpack"
+import { Configuration } from "webpack"
 
 /* ----------------------------------------------------------------------------
  * Helper functions
@@ -58,6 +58,12 @@ function config(args: Configuration): Configuration {
             }
           ],
           exclude: /\/node_modules\//
+        },
+
+        /* Preact is only used for its great JSX typings */
+        {
+          test: /\bpreact\b/,
+          use: "null-loader"
         }
       ]
     },
@@ -98,12 +104,7 @@ export default (_env: never, args: Configuration): Configuration[] => ([
       path: path.resolve(__dirname, "material/assets/javascripts"),
       filename: "bundle.js",
       libraryTarget: "window"
-    },
+    }
-    plugins: [
-      new ProvidePlugin({
-        jsx: "src/assets/javascripts/extensions/jsx"
-      })
-    ]
   },
 
   /* Search worker */