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}
${answers.length} answers
${answers.join('
')}`, - textContent: `${ro.q.id}/${ro.q.slug}\nText output not supported`, // TODO + content: ( + <> + {question} +
+ {answers.length} answers
+ {answers.join(
)} + + ), 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 `

${userTitle}${ - userUrl ? ` by ${userName}` : '' - }

`; + return ( +

+ {userTitle} + {userUrl ? ( + <> + by {userName} + + ) : ( + <> + )} +

+ ); }); - return `

${voteCount} votes

${body}${footer.join('')}`; + return ( + <> +

{voteCount} votes

+ {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 `${type} (${votes}) ${title}`; + return ( + <> + + {type} ({votes}){' '} + + {title} + + ); }) - .join('
'); + .join(
); return { - content: `${userInfo}

Top Posts

${topPosts}`, + content: ( + <> + {userInfo} +
+

Top Posts

+ {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('')}`; + + return content.length === 0 + ? `<${name} ${propsstr}/>` + : `<${name} ${propsstr}>${content.join('')}`; } else if (typeof name === 'function') { return name(props, ...content); } else {