rewrite h -> jsx

Author: Lhcfl

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "format:stylus": "yarn stylus-supremacy format ./source/css/**/*.styl -r --options .supermacy.yml",
-        "format:pretty": "prettier --write ./{includes,languages,layout,scripts,source,src}/**/*.{pug,js,css,ts}",
+        "format:pretty": "prettier --write ./{includes,languages,layout,scripts,source,src}/**/*.{pug,js,css,ts,tsx,jsx}",
         "lint": "yarn eslint . --fix",
         "format": "yarn format:stylus && yarn format:pretty",
         "build": "yarn rollup -c ./rollup.config.mjs"

src/@types/tsx.d.ts

@@ -0,0 +1,3 @@
+declare module JSX {
+  type IntrinsicElements = Record<string, any>;
+}

src/components/search.ts src/components/search.tsx

@@ -124,24 +124,21 @@ export class AnatoloSearch extends Component {
   }
 
   makeSearchItem(icon: string | null, title: string | null, slug: string | null, preview: string | null, url: string) {
-    return h(
-      '.ins-selectable.ins-search-item',
-      {
-        data: { url },
-        event: {
-          click: (e) => {
-            this.gotoLink(url);
-          },
-        },
-      },
-      [
-        h('header', [
-          h(`i.fa.fa-${icon}`),
-          h('span.ins-title', title != null && title !== '' ? title : this.config.translation['untitled']),
-          slug ? h('span.ins-slug', slug) : null,
-        ]),
-        preview ? h('p.ins-search-preview', preview) : null,
-      ],
+    return (
+      <div
+        class="ins-selectable ins-search-item"
+        data-url={url}
+        onclick={() => {
+          this.gotoLink(url);
+        }}
+      >
+        <header>
+          <i class={`fa fa-${icon}`}></i>
+          <span class="ins-title">{title != null && title !== '' ? title : this.config.translation['untitled']}</span>
+          {slug ? <span class="ins-slug">{slug}</span> : null}
+        </header>
+        {preview ? <p class="ins-search-preview">{preview}</p> : null}
+      </div>
     );
   }
 
@@ -190,7 +187,12 @@ export class AnatoloSearch extends Component {
       return null;
     });
 
-    return h('section.ins-section', [h('header.ins-section-header', sectionTitle), searchItems]);
+    return (
+      <section class="ins-section">
+        <header class="ins-section-header">{sectionTitle}</header>
+        {searchItems}
+      </section>
+    );
   }
 
   async buildFuse() {

src/utils/friend-link.ts

@@ -0,0 +1,27 @@
+import { escapeHTML, h } from './main';
+
+export function make_friends_list() {
+  try {
+    const friendHTML = ({ avatar, href, title, description }: any) => (
+      <div class="friend-link-container">
+        <div class="friend-link-box">
+          <aside class="friend-link-avatar">
+            <img src={escapeHTML(avatar)} href={escapeHTML(href)} />
+          </aside>
+          <div class="friend-link-meta">
+            <div class="friend-link-title">
+              <a href={escapeHTML(href)}>{escapeHTML(title)}</a>
+            </div>
+            <div class="friend-link-description">{escapeHTML(description)}</div>
+          </div>
+        </div>
+      </div>
+    );
+
+    document.querySelectorAll('.friend-link').forEach((friend) => {
+      friend.replaceWith(friendHTML((friend as HTMLElement).dataset));
+    });
+  } catch (err) {
+    console.error(err);
+  }
+}

src/utils/friend-link.tsx

@@ -1,31 +1,23 @@
-type Attrs = {
-  data?: Record<string, string>;
-  event?: Partial<Record<keyof HTMLElementEventMap, (e: Event) => void>>;
-  class?: string;
-} & Record<string, any>;
+type Attrs = Record<string, any> | null;
 
 type ContentNode = string | HTMLElement | null | undefined;
 
 type Content = ContentNode | ContentNode[];
 
-function h3(ident: string, attrs: Attrs, content?: Content) {
+export function h(ident: string, attrs: Attrs, ...content: ContentNode[]) {
   let [tagName, ...classes] = ident.split('.');
   if (!tagName) tagName = 'div';
   const elem = document.createElement(tagName);
   elem.classList.add(...classes);
-  for (const key of Object.keys(attrs)) {
-    if (key === 'class' && attrs.class) {
-      elem.classList.add(...attrs.class.split(' '));
-    } else if (key === 'data') {
-      for (const [dataKey, dataVal] of Object.entries(attrs.data || {})) {
-        elem.dataset[dataKey] = dataVal as string;
+  if (attrs != null) {
+    for (const [key, val] of Object.entries(attrs)) {
+      if (key === 'class' && attrs.class) {
+        elem.classList.add(...attrs.class.split(' '));
+      } else if (key.startsWith('on')) {
+        elem.addEventListener(key.slice(2), val);
+      } else {
+        elem.setAttribute(key, val);
       }
-    } else if (key === 'event') {
-      for (const [eventName, fn] of Object.entries(attrs.event || {})) {
-        elem.addEventListener(eventName, fn);
-      }
-    } else {
-      elem.setAttribute(key, attrs[key]);
     }
   }
 
@@ -37,24 +29,9 @@ function h3(ident: string, attrs: Attrs, content?: Content) {
     }
   }
 
-  if (Array.isArray(content)) {
-    content.flat().forEach((c) => {
-      addContent(c);
-    });
-  } else {
-    addContent(content);
-  }
+  content.flat().forEach((c) => {
+    addContent(c);
+  });
 
   return elem;
 }
-
-export function h(ident: string, content?: Content): HTMLElement;
-export function h(ident: string, attrs: Attrs, content?: Content): HTMLElement;
-
-export function h(ident: string, attrs_or_content?: Attrs | Content, content?: Content) {
-  if (Array.isArray(attrs_or_content) || typeof attrs_or_content === 'string' || attrs_or_content == null) {
-    return h3(ident, {}, attrs_or_content);
-  } else {
-    return h3(ident, attrs_or_content, content);
-  }
-}

src/utils/html-helper.ts

@@ -13,10 +13,10 @@
     /* Language and Environment */
     "target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    "jsx": "react",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    "jsxFactory": "h",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
@@ -36,7 +36,7 @@
     // "rootDirs": [
     //   "./src",
     // ],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    "typeRoots": ["./src/@types"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": ["@types"],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */