diff --git a/src/br-demo.tsx b/src/br-demo.tsx new file mode 100644 index 0000000..c4251a4 --- /dev/null +++ b/src/br-demo.tsx @@ -0,0 +1,44 @@ +/// +import React from 'react'; +import { createContainer } from './reconciler'; + +// Demo showcasing
tag support +const BrDemo: React.FC = () => { + return ( + <> + Line Break Demo +
+
+ This demonstrates the new <br /> tag support. +
+
+ Benefits: +
+ • Cleaner JSX syntax +
+ • More intuitive for React developers +
+ • No more {'\\n'} strings +
+
+ Example Usage: +
+ 
{`Title
+

+Subtitle
+

+

+Content here...`}
+ + ); +}; + +// Create container and render +const { render, container } = createContainer(); +render(); + +// Log the output +setTimeout(() => { + console.log('Line break demo output:'); + console.log(JSON.stringify(container.root, null, 2)); +}, 0); \ No newline at end of file diff --git a/src/example-bot.tsx b/src/example-bot.tsx index 473a3da..ea820ea 100644 --- a/src/example-bot.tsx +++ b/src/example-bot.tsx @@ -9,9 +9,11 @@ const CounterApp = () => { return ( <> 🔢 Counter Bot - {'\n\n'} +
+
Current count: {count} - {'\n\n'} +
+
@@ -30,18 +32,19 @@ const TodoApp = () => { return ( <> 📝 Todo List - {'\n\n'} +
+
{todos.length === 0 ? ( No todos yet! ) : ( todos.map((todo, i) => ( {showCompleted ? {todo} : todo} - {'\n'} +
)) )} - {'\n'} +
@@ -101,7 +106,8 @@ const HelpApp = () => { return ( <> Bot Features - {'\n\n'} +
+
This bot demonstrates a React-based Telegram bot using a custom reconciler. @@ -112,7 +118,7 @@ const HelpApp = () => { • Custom emoji support • Dynamic content updates
- {'\n'} +
Links: GitHub | Contact {'\n\n'} @@ -125,17 +131,20 @@ const HelpApp = () => { return ( <> 🤖 React Telegram Bot - {'\n\n'} +
+
Welcome! This bot is powered by React ⚛️ - {'\n\n'} +
+
Available commands: - {'\n'} +
/counter - Interactive counter - {'\n'} +
/todo - Todo list manager - {'\n'} +
/help - This help message - {'\n\n'} +
+
diff --git a/src/example.tsx b/src/example.tsx index c87fd17..a18e346 100644 --- a/src/example.tsx +++ b/src/example.tsx @@ -14,6 +14,7 @@ const App = () => { return ( <> Welcome to Telegram React! +
Current count: {count} diff --git a/src/examples/input-autodelete-demo.tsx b/src/examples/input-autodelete-demo.tsx index d0effcd..49588ef 100644 --- a/src/examples/input-autodelete-demo.tsx +++ b/src/examples/input-autodelete-demo.tsx @@ -22,38 +22,38 @@ const AutoDeleteDemo: React.FC = () => { return ( <> Input Auto-Delete Demo - {'\n\n'} - +

Current mode: {mode === 'normal' ? '📝 Normal Mode' : '🤫 Secret Mode'} - {'\n\n'} +

{mode === 'normal' ? ( <> Send any message - it will stay in the chat. - {'\n'} +
) : ( <> Send a secret message - it will be deleted automatically! - {'\n'} +
)} - {'\n\n'} +
+
{messages.length > 0 && ( <> Received Messages: - {'\n'} +
{messages.map((msg, idx) => ( • {msg} - {'\n'} +
))} - {'\n'} +
)} diff --git a/src/examples/quiz-bot.tsx b/src/examples/quiz-bot.tsx index ca94772..7a85d45 100644 --- a/src/examples/quiz-bot.tsx +++ b/src/examples/quiz-bot.tsx @@ -51,16 +51,19 @@ const QuizBot: React.FC = () => { return ( <> 🎉 Quiz Complete! - {'\n\n'} +
+
Your final score: {score}/{questions.length} - {'\n\n'} +
+
{score === questions.length ? "Perfect score! Well done! 🌟" : score >= questions.length / 2 ? "Good job! 👍" : "Better luck next time! 📚" } - {'\n\n'} +
+
@@ -73,33 +76,36 @@ const QuizBot: React.FC = () => { return ( <> Quiz Bot 🤖 - {'\n'} +
Question {currentQuestion + 1} of {questions.length} - {'\n'} +
Score: {score}/{currentQuestion} - {'\n\n'} +
+
{currentQ?.question} - {'\n\n'} +
+
{lastAnswer !== null && ( <> Your answer: {lastAnswer} - {'\n'} +
{lastAnswer.toLowerCase().trim() === currentQ?.answer ? "✅ Correct!" : `❌ Wrong! The answer was: ${currentQ?.answer}` } - {'\n\n'} +
+
{currentQuestion < questions.length - 1 && "Next question coming up..."} - {'\n'} +
)} {waitingForAnswer && !lastAnswer && ( <> Reply to this message with your answer! - {'\n'} +
)} diff --git a/src/input-example.tsx b/src/input-example.tsx index 5f629eb..17ff5b9 100644 --- a/src/input-example.tsx +++ b/src/input-example.tsx @@ -19,28 +19,31 @@ const InputExample: React.FC = () => { return ( <> Input Example - {'\n\n'} +
+
{messages.length === 0 ? ( <> Reply to this message to send text! - {'\n\n'} +
+
The bot will echo whatever you type. ) : ( <> Message History: - {'\n'} +
{messages.map((msg, idx) => ( {msg} - {'\n'} +
))} )} - {'\n\n'} +
+
{/* Input handler - will process any reply to this message */} {waitingForInput && } diff --git a/src/jsx.d.ts b/src/jsx.d.ts index 450290e..9d73cc1 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -60,6 +60,9 @@ declare module 'react' { onSubmit?: (text: string) => void; autoDelete?: boolean; }; + + // Line break + br: {}; } } } diff --git a/src/reconciler.ts b/src/reconciler.ts index 984af1d..b479a7e 100644 --- a/src/reconciler.ts +++ b/src/reconciler.ts @@ -114,6 +114,8 @@ const hostConfig: ReactReconciler.HostConfig< return { type: 'row', children: [] }; case 'input': return { type: 'input', onSubmit: props.onSubmit, autoDelete: props.autoDelete }; + case 'br': + return { type: 'text', content: '\n' }; default: return { type: 'formatted', format: 'bold', children: [] }; } diff --git a/src/typed-example.tsx b/src/typed-example.tsx index c59227a..25c4776 100644 --- a/src/typed-example.tsx +++ b/src/typed-example.tsx @@ -11,9 +11,10 @@ const TypedApp: React.FC = () => { return ( <> TypeScript Example - {'\n'} +
All custom elements are properly typed! - {'\n\n'} +
+
{/* Text formatting */} Underlined text @@ -21,7 +22,8 @@ const TypedApp: React.FC = () => { Strikethrough {' '} inline code - {'\n\n'} +
+
{/* Spoiler */} {showSpoiler ? ( @@ -29,17 +31,20 @@ const TypedApp: React.FC = () => { ) : ( Hidden content )} - {'\n\n'} +
+
{/* Links */} Telegram Website {' | '} User mention - {'\n\n'} +
+
{/* Emoji */} 👍 - {'\n\n'} +
+
{/* Code block */} 
@@ -48,14 +53,15 @@ const TypedApp: React.FC = () => {
 console.log(message);`}
- {'\n'} +
{/* Blockquote */}
This is an expandable quote. It can contain multiple lines.
- {'\n\n'} +
+
{/* Interactive buttons */}