refactor(plugins): stackoverflow rewrite to jsx

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;

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,
   };
 }
 

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 {