/** @jsxRuntime classic */
/** @jsx h */
/*
  sample-utf8.jsx: non-ASCII text in JSX, saved with a UTF-8 byte order
  mark (BOM) and Windows (CRLF) line endings.
  Free sample from 99helpers.com/file-types/jsx

  Run:  npx tsx sample-utf8.jsx    or    bun sample-utf8.jsx
  Every tool should print the same twelve lines. Garbled letters (é
  instead of é) mean a step read the file as something other than UTF-8.
*/

// A tiny JSX factory that returns HTML strings, so no React is needed.
const h = (tag, props, ...children) =>
  `<${tag}${Object.entries(props ?? {}).map(([k, v]) => ` ${k}="${v}"`).join("")}>${children.flat().join("")}</${tag}>`;

const lines = [
  <p lang="en">English: café, naïve, résumé</p>,
  <p lang="nl">Nederlands: één, coördinatie, Curaçao</p>,
  <p lang="de">Deutsch: Größe, Straße, Übung</p>,
  <p lang="pl">Polski: zażółć gęślą jaźń</p>,
  <p lang="el">Ελληνικά: Καλημέρα κόσμε</p>,
  <p lang="ru">Русский: Привет, мир</p>,
  <p lang="ar" dir="rtl">العربية: مرحبا بالعالم</p>,
  <p lang="he" dir="rtl">עברית: שלום עולם</p>,
  <p lang="zh">中文: 你好，世界</p>,
  <p lang="ja">日本語: こんにちは世界</p>,
  // JSX text understands HTML entities; JavaScript strings do not.
  <p>Entities: &euro;&nbsp;12 &copy; &larr; &rarr; &hearts;</p>,
  <p>Emoji: 👋 🌍 ✅ ☕</p>,
];

for (const line of lines) console.log(line);