Change JS formatters interface.

Now the application of formatters are centralized. It also allowed me to
easily suround stuff in try-catch, since I otherwise had problems with
formatters failing, and nothing showing up.

4 files changed, 30 insertions, 15 deletions

diff --git a/doc/ref/javascript/formatters.texi b/doc/ref/javascript/formatters.texi
index 71394b39..a3086aa9 100644
--- a/doc/ref/javascript/formatters.texi
+++ b/doc/ref/javascript/formatters.texi
@@ -4,6 +4,12 @@
 Formatting procedures used by some components.
 @c TODO can we have a backref of every node containing @ref{formatters-proc}?
 
+@deftypefun void format(targetElement:HTMLElement, data:VEvent, key:string)
+Checks if a specific formatter exists for the given key, and executes
+it.
+Defaults to 'default', and also runs that if the regular formatter throws.
+@end deftypefun
+
 @deftypevar {Map<string, (e:HTMLElement, d:VEvent, s:any) => void>} formatters
 @anchor{formatters-proc}
 
diff --git a/static/components/vevent-description.ts b/static/components/vevent-description.ts
index 463725f1..b44185e7 100644
--- a/static/components/vevent-description.ts
+++ b/static/components/vevent-description.ts
@@ -2,7 +2,7 @@ export { ComponentDescription }
 
 import { VEvent } from '../vevent'
 import { ComponentVEvent } from './vevent'
-import { formatters } from '../formatters'
+import { format } from '../formatters'
 
 /*
   <vevent-description />
@@ -23,14 +23,7 @@ class ComponentDescription extends ComponentVEvent {
 
         for (let el of body.querySelectorAll('[data-property]')) {
             if (!(el instanceof HTMLElement)) continue;
-            let p = el.dataset.property!;
-            let d;
-            if ((d = data.getProperty(p))) {
-                let key = p.toLowerCase();
-                let f = formatters.get(key);
-                if (f) f(el, data, d);
-                else window.formatters.get('default')!(el, data, d);
-            }
+            format(el, data, el.dataset.property!);
         }
 
         let repeating = body.getElementsByClassName('repeating')[0] as HTMLElement
diff --git a/static/formatters.ts b/static/formatters.ts
index 5605e051..e0018278 100644
--- a/static/formatters.ts
+++ b/static/formatters.ts
@@ -1,11 +1,11 @@
 export {
-    formatters,
+    format
 }
 
 import { makeElement } from './lib'
 import { VEvent } from './vevent'
 
-type formatter = (e: HTMLElement, d: VEvent, s: any) => void
+type formatter = (e: HTMLElement, d: VEvent, s: any) => Promise<void>
 
 declare global {
     interface Window {
@@ -16,8 +16,24 @@ declare global {
 let formatters: Map<string, formatter>;
 formatters = window.formatters = new Map();
 
+async function format(targetElement: HTMLElement, data: VEvent, key: string): Promise<void> {
+    let d = data.getProperty(key);
+    if (!d) return
+    let formatter = formatters.get(key.toLowerCase());
+    if (formatter) {
+        try {
+            await formatter(targetElement, data, d);
+        } catch (error) {
+            console.warn('Formatter failed')
+            console.warn(error);
+            formatters.get('default')!(targetElement, data, d);
+        }
+    } else {
+        formatters.get('default')!(targetElement, data, d);
+    }
+}
 
-formatters.set('categories', (el, _, d) => {
+formatters.set('categories', async (el, _, d) => {
     for (let item of d) {
         let q = encodeURIComponent(
             `(member "${item}" (or (prop event (quote CATEGORIES)) (quote ())))`)
@@ -28,7 +44,7 @@ formatters.set('categories', (el, _, d) => {
     }
 })
 
-function format_time_tag(el: HTMLElement, ev: VEvent, d: any): void {
+async function format_time_tag(el: HTMLElement, ev: VEvent, d: any): Promise<void> {
     if (el instanceof HTMLTimeElement) {
         if (d instanceof Date) {
             let fmt = '';
@@ -49,7 +65,7 @@ function format_time_tag(el: HTMLElement, ev: VEvent, d: any): void {
 formatters.set('dtstart', format_time_tag)
 formatters.set('dtend', format_time_tag)
 
-formatters.set('default', (el, _, d) => {
+formatters.set('default', async (el, _, d) => {
     let fmt;
     if ((fmt = el.dataset.fmt)) {
         el.textContent = d.format(fmt);
diff --git a/static/user/user-additions.js b/static/user/user-additions.js
index 7291f232..bfc0391d 100644
--- a/static/user/user-additions.js
+++ b/static/user/user-additions.js
@@ -1,4 +1,4 @@
-window.formatters.set('description', (el, ev, d) => {
+window.formatters.set('description', async (el, ev, d) => {
     if (ev.getProperty('X-MICROSOFT-SKYPETEAMSMEETINGURL')) {
         /* parse Microsoft Teams meeting entries */
         /* Replace lines with propper <hr> tags */