From 78e45f3c805c8789268466c5afae8499044b5972 Mon Sep 17 00:00:00 2001
From: Artemy <artegoser@gmail.com>
Date: Mon, 13 May 2024 18:42:12 +0300
Subject: [PATCH] refactor(plugins): stackoverflow rewrite to jsx

---
 .../{questions.ts => questions.tsx}           | 36 ++++++++++++++-----
 .../stackoverflow/{users.ts => users.tsx}     | 23 +++++++++---
 packages/sdk/src/jsx.ts                       |  5 ++-
 3 files changed, 50 insertions(+), 14 deletions(-)
 rename packages/plugins/src/engines/stackoverflow/{questions.ts => questions.tsx} (69%)
 rename packages/plugins/src/engines/stackoverflow/{users.ts => users.tsx} (72%)

diff --git a/packages/plugins/src/engines/stackoverflow/questions.ts b/packages/plugins/src/engines/stackoverflow/questions.tsx
similarity index 69%
rename from packages/plugins/src/engines/stackoverflow/questions.ts
rename to packages/plugins/src/engines/stackoverflow/questions.tsx
index f80f378..2d8e322 100644
--- a/packages/plugins/src/engines/stackoverflow/questions.ts
+++ b/packages/plugins/src/engines/stackoverflow/questions.tsx
@@ -1,5 +1,5 @@
 import { HandlerInput, Route } from '@txtdot/sdk';
-import { parseHTML } from 'linkedom';
+import { JSX } from '@txtdot/sdk';
 
 async function questions(
   input: HandlerInput,
@@ -16,10 +16,15 @@ async function questions(
   const answers = allAnswers.map((a) => postParser(a));
 
   return {
-    content: `${question}<hr>${answers.length} answers <hr>${answers.join('<hr>')}`,
-    textContent: `${ro.q.id}/${ro.q.slug}\nText output not supported`, // TODO
+    content: (
+      <>
+        {question}
+        <hr />
+        {answers.length} answers <hr />
+        {answers.join(<hr />)}
+      </>
+    ),
     title,
-    lang: document.documentElement.lang,
   };
 }
 
@@ -36,12 +41,27 @@ function postParser(el: Element | null): string {
       (el.querySelector('.user-details a') as HTMLAnchorElement)?.href || '';
     const userTitle = el.querySelector('.user-action-time')?.textContent || '';
 
-    return `<h4>${userTitle}${
-      userUrl ? ` by <a href="${userUrl}">${userName}</a>` : ''
-    }</h4>`;
+    return (
+      <h4>
+        {userTitle}
+        {userUrl ? (
+          <>
+            by <a href={userUrl}>{userName}</a>
+          </>
+        ) : (
+          <></>
+        )}
+      </h4>
+    );
   });
 
-  return `<h3>${voteCount} votes</h3>${body}${footer.join('')}`;
+  return (
+    <>
+      <h3>{voteCount} votes</h3>
+      {body}
+      {footer.join('')}
+    </>
+  );
 }
 
 export default questions;
diff --git a/packages/plugins/src/engines/stackoverflow/users.ts b/packages/plugins/src/engines/stackoverflow/users.tsx
similarity index 72%
rename from packages/plugins/src/engines/stackoverflow/users.ts
rename to packages/plugins/src/engines/stackoverflow/users.tsx
index 180d313..e698ad7 100644
--- a/packages/plugins/src/engines/stackoverflow/users.ts
+++ b/packages/plugins/src/engines/stackoverflow/users.tsx
@@ -1,5 +1,5 @@
 import { HandlerInput, Route } from '@txtdot/sdk';
-import { parseHTML } from 'linkedom';
+import { JSX } from '@txtdot/sdk';
 
 async function users(
   input: HandlerInput,
@@ -22,15 +22,28 @@ async function users(
       const type =
         el.querySelector('.iconAnswer, .iconQuestion')?.textContent || '';
 
-      return `<strong>${type} (${votes}) </strong><a href="${url}">${title}</a>`;
+      return (
+        <>
+          <strong>
+            {type} ({votes}){' '}
+          </strong>
+          <a href={url}>{title}</a>
+        </>
+      );
     })
-    .join('<br/>');
+    .join(<br />);
 
   return {
-    content: `${userInfo}<hr><h3>Top Posts</h3>${topPosts}`,
+    content: (
+      <>
+        {userInfo}
+        <hr />
+        <h3>Top Posts</h3>
+        {topPosts}
+      </>
+    ),
     textContent: `${ro.q.id}/${ro.q.slug}\n`, // TODO
     title: document.querySelector('title')?.textContent || '',
-    lang: document.documentElement.lang,
   };
 }
 
diff --git a/packages/sdk/src/jsx.ts b/packages/sdk/src/jsx.ts
index 20b0285..5f3b579 100644
--- a/packages/sdk/src/jsx.ts
+++ b/packages/sdk/src/jsx.ts
@@ -23,7 +23,10 @@ export function createElement(
         else return `${key}=${value}`;
       })
       .join(' ');
-    return `<${name} ${propsstr}>${content.join('')}</${name}>`;
+
+    return content.length === 0
+      ? `<${name} ${propsstr}/>`
+      : `<${name} ${propsstr}>${content.join('')}</${name}>`;
   } else if (typeof name === 'function') {
     return name(props, ...content);
   } else {