fix: port to typescript

.eslintrc.cjs

@@ -4,11 +4,11 @@ module.exports = {
   env: {
     browser: true
     // es2020: true,
-    // node: true
   },
   extends: [
     'eslint:recommended',
-    'semistandard',
+    'prettier:recommended',
+    'prettier:recat',
     'plugin:react/recommended'
   ],
   settings: {
@@ -17,6 +17,7 @@ module.exports = {
     }
   },
   rules: {
+    /*
     'brace-style': ['error', '1tbs'],
     'no-return-assign': 'off',
     'no-var': ['error'],
@@ -28,5 +29,6 @@ module.exports = {
     eqeqeq: 'off',
     'import/no-absolute-path': 'off',
     'react/prop-types': 'off' // TODO: Enable this
+    */
   }
 };

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "arrowParens" : "avoid",
+  "singleQuote" : true
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

index.html

@@ -53,7 +53,7 @@
 gtag('config', window.GA_TRACKING_ID);
 </script>
 
-<script type="module" src="/js/index.js"></script>
+<script type="module" src="/js/index.tsx"></script>
 <script>
 window.addEventListener('DOMContentLoaded', function() {
   // Detect load failure.  `indexLoaded` gets set by index.js if it loads properly

js/App.js → js/App.tsx

@@ -23,7 +23,7 @@ function Splitter({ onClick, isOpen }) {
 
 // Parse `q` query param from browser location
 function queryFromLocation() {
-  const q = new URL(location).searchParams.get('q');
+  const q = new URL(location.href).searchParams.get('q');
   return (q ?? '').split(',').map(v => v.trim()).filter(Boolean);
 }
 

js/Components.tsx

@@ -0,0 +1,95 @@
+import React, { HTMLAttributes } from 'react';
+import { LoadActivity } from './util';
+import '/css/Components.scss';
+
+export function Loader({
+  activity,
+  ...props
+}: { activity: LoadActivity } & HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className="loader">
+      <div className="bg" />
+      {activity.title} ...
+    </div>
+  );
+}
+
+export function Toggle({
+  checked = false,
+  value = true,
+  onChange,
+  style,
+  children,
+  ...props
+}: HTMLAttributes<HTMLInputElement>) {
+  return (
+    <label style={style} {...props}>
+      <div
+        onClick={() => onChange(checked ? false : value)}
+        style={{
+          display: 'inline-block',
+          width: '4em',
+          backgroundColor: '#ccc',
+          borderRadius: '.5em',
+          marginRight: '.5em',
+        }}
+      >
+        <div
+          style={{
+            width: '3em',
+            borderRadius: '.5em',
+            textAlign: 'center',
+            transition: '.15s',
+            marginLeft: checked ? '0' : '1em',
+            backgroundColor: checked ? '#090' : '#aaa',
+            color: '#fff',
+          }}
+        >
+          {checked ? 'On' : 'Off'}
+        </div>
+      </div>
+      {children}
+    </label>
+  );
+}
+
+export function Flash(o, bg = '#f80') {
+  const SPACE = 10;
+
+  const graph = document.querySelector('#graph') as HTMLDivElement;
+  const prev = document.querySelector('.flash:last-of-type') as HTMLElement;
+  const el = document.createElement('div');
+
+  if (o instanceof Error) {
+    el.classList.add('error');
+    el.innerText = o.message;
+  } else if (o instanceof Document) {
+    el.append.apply(el, o.querySelector('body').children);
+  } else if (o instanceof Element || o instanceof DocumentFragment) {
+    el.append(o);
+  } else if (typeof o == 'string') {
+    el.innerText = o;
+  } else {
+    el.innerText = JSON.stringify(o, null, 2);
+  }
+
+  document.body.appendChild(el);
+  el.classList.add('flash');
+  const prevBottom = prev ? prev.offsetTop + prev.offsetHeight : 0;
+
+  const top =
+    prevBottom < window.innerHeight - el.offsetHeight ? prevBottom : 0;
+  el.style.top = `${top + SPACE / 2}px`;
+  el.style.left = `${-el.offsetWidth - SPACE}px`;
+  el.style.maxWidth = graph ? `${graph.offsetWidth - SPACE}px` : '100%';
+  el.style.backgroundColor = bg;
+
+  setTimeout(() => {
+    el.style.left = `${SPACE}px`;
+
+    setTimeout(() => {
+      el.addEventListener('transitionend', () => el.remove());
+      el.style.left = `${-el.offsetWidth - SPACE}px`;
+    }, 5e3);
+  }, 0);
+}