Hello JSX

\n\n```tsx\n/** @jsxImportSource https://esm.town/v/jxnblk/jsx */\n```\n\n```tsx\n\n Hello\n\n```\n\n[Demo 01][]\n[Demo 02][]\n\n[demo 01]: https://jxnblk--cff194b6430e11f09e5e76b3cceeab13.web.val.run\n[demo 02]: https://jxnblk--cfee2064431411f0a79776b3cceeab13.web.val.run","deleted","label","children",[],[101],{"_106":182,"_97":183,"_164":120,"_166":-5,"_167":150,"_168":184,"_169":22,"_108":185,"_102":186,"_172":187,"_174":188,"_176":22,"_177":-5,"_178":189,"_100":190},"1cedfd80-4315-11f0-aee0-76b3cceeab13","demo-02",98,["D",1749241840711],7,"http","// @ts-nocheck: fiik\n/** @jsxImportSource https://esm.town/v/jxnblk/jsx */\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\n\nconst styles = {\n body: {\n margin: 0,\n },\n box: {\n fontFamily: \"system-ui, sans-serif\",\n padding: 32,\n backgroundColor: \"cyan\",\n color: \"blue\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: \"100vh\",\n transitionProperty: \"background-color, color\",\n transitionDuration: \"1s\",\n transitionTimingFunction: \"ease-in-out\",\n \"&:hover\": {\n backgroundColor: \"magenta\",\n color: \"cyan\",\n },\n },\n heading: {\n fontSize: 20,\n textTransform: \"uppercase\",\n letterSpacing: \"0.2em\",\n \"@media (min-width:40em)\": {\n fontSize: 32,\n },\n },\n};\n\nfunction App () {\n return (\n \n \n Hello JSX\n \n \n \n \n Hello sx prop\n \n \n \n \n )\n}\n\nexport default async function (req: Request): Promise {\n const html = renderToString();\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n })\n}",[],[183],{"_106":192,"_97":193,"_164":194,"_166":-5,"_167":150,"_168":195,"_169":22,"_108":196,"_102":197,"_172":187,"_174":198,"_176":22,"_177":-5,"_178":199,"_100":200},"be066c26-4314-11f0-a59b-76b3cceeab13","demo.tsx","cff194b6-430e-11f0-9e5e-76b3cceeab13",90,["D",1749241681489],45,"// @ts-nocheck: fiik\n/** @jsxImportSource https://esm.town/v/jxnblk/jsx */\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\n\nfunction App () {\n return (\n \n \n Hello JSX\n \n \n \n \n Hello sx prop\n \n \n \n \n )\n}\n\nexport default async function (req: Request): Promise {\n const html = renderToString();\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n })\n}",[],[193],{"_106":202,"_97":203,"_164":204,"_166":-5,"_167":150,"_168":205,"_169":122,"_108":206,"_102":207,"_172":208,"_174":209,"_176":22,"_177":-5,"_178":210,"_100":211},"5cc58c80-4314-11f0-b64f-76b3cceeab13","jsx-runtime","dda8b458-430a-11f0-828a-76b3cceeab13",84,["D",1749241518326],43,"script","import { jsx as reactJSX } from 'https://esm.sh/react@19/jsx-runtime';\nimport { Fragment } from \"https://esm.sh/react@19\";\nimport atomic from \"https://esm.town/v/jxnblk/tuna/atomic.tsx\";\nimport type { ElementType, JSX, ReactElement, Key } from \"https://esm.sh/react@19\";\n\nexport { Fragment } from \"https://esm.sh/react@19\";\n\n// fiik\nexport type { ComponentType, ElementType, ReactElement, Key, JSX } from \"https://esm.sh/react@19\";\n\ninterface SXProps {\n sx?: any;\n className?: string;\n [key: string]: any;\n}\n\nexport const jsx = (\n type: ElementType,\n props: SXProps|null,\n key?: Key): ReactElement => {\n if (props && props.sx) {\n const { sx, className, ...rest } = props;\n const result = atomic(sx);\n const merged = {\n ...rest,\n className: [result.className, className].filter(Boolean).join(\" \"),\n };\n // wrap jsx with fragment and result.css style tag\n return reactJSX(Fragment, {\n children: [\n reactJSX(\"style\", {\n key: key + \"sx\" + result.css,\n dangerouslySetInnerHTML: {\n __html: result.css,\n },\n }),\n reactJSX(type, merged, key)\n ]\n });\n }\n \n return reactJSX(type, props, key);\n}\n\nexport function jsxs (type: ElementType, props: SXProps|null, key?: Key) {\n return jsx(type, props, key);\n}",[],[203],"files",[162,181,191,201],"counts",{"_216":33,"_217":218,"_219":33,"_220":221,"_224":225},"pulls","branches",2,"forks","envVars",{"_222":33,"_223":33},"count","emptyCount","connections",{"_222":33,"_226":33},"unfilledCount","contents",[],{"_106":163,"_97":101,"_164":165,"_166":-5,"_167":150,"_168":103,"_169":22,"_108":230,"_102":171,"_172":173,"_174":175,"_176":22,"_177":-5,"_100":231},["D",1749242299125],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":240,"_160":245,"_212":258,"_173":259,"_227":261,"_262":-5,"_263":-5,"_264":-5,"_265":-5,"_266":267,"_220":-5},{"_106":107,"_97":98,"_108":241,"_110":-5,"_111":22,"_112":113,"_114":115,"_116":117,"_14":118,"_119":120,"_121":122,"_123":122,"_124":-5,"_125":33,"_16":126,"_127":-5,"_128":-5,"_129":-5,"_130":131,"_132":131,"_133":134,"_135":134,"_136":134,"_137":131,"_138":131,"_23":242,"_142":243,"_147":244,"_159":22},["D",1749237439587],{"_95":96,"_140":141},{"_95":96,"_144":141,"_14":118,"_145":146},{"_102":149,"_97":45,"_106":150,"_151":107,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":-5,"_157":98,"_158":96},[246,249,252,255],{"_106":163,"_97":101,"_164":165,"_166":-5,"_167":150,"_168":103,"_169":22,"_108":170,"_102":171,"_172":173,"_174":175,"_176":22,"_177":-5,"_178":247,"_100":248},[],[101],{"_106":182,"_97":183,"_164":120,"_166":-5,"_167":150,"_168":184,"_169":22,"_108":185,"_102":186,"_172":187,"_174":188,"_176":22,"_177":-5,"_178":250,"_100":251},[],[183],{"_106":192,"_97":193,"_164":194,"_166":-5,"_167":150,"_168":195,"_169":22,"_108":196,"_102":197,"_172":187,"_174":198,"_176":22,"_177":-5,"_178":253,"_100":254},[],[193],{"_106":202,"_97":203,"_164":204,"_166":-5,"_167":150,"_168":205,"_169":122,"_108":206,"_102":207,"_172":208,"_174":209,"_176":22,"_177":-5,"_178":256,"_100":257},[],[203],[246,249,252,255],{"_106":163,"_97":101,"_164":165,"_166":-5,"_167":150,"_168":103,"_169":22,"_108":230,"_102":171,"_172":173,"_174":175,"_176":22,"_177":-5,"_100":260},[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]