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",[],[99],{"_104":172,"_95":173,"_154":174,"_156":-5,"_157":140,"_158":175,"_159":22,"_106":176,"_100":177,"_162":178,"_164":179,"_166":22,"_167":-5,"_168":180,"_98":181},"1cedfd80-4315-11f0-aee0-76b3cceeab13","demo-02","cfee2064-4314-11f0-a797-76b3cceeab13",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}",[],[173],{"_104":183,"_95":184,"_154":185,"_156":-5,"_157":140,"_158":186,"_159":22,"_106":187,"_100":188,"_162":178,"_164":189,"_166":22,"_167":-5,"_168":190,"_98":191},"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}",[],[184],{"_104":193,"_95":194,"_154":195,"_156":-5,"_157":140,"_158":196,"_159":197,"_106":198,"_100":199,"_162":200,"_164":201,"_166":22,"_167":-5,"_168":202,"_98":203},"5cc58c80-4314-11f0-b64f-76b3cceeab13","jsx-runtime","dda8b458-430a-11f0-828a-76b3cceeab13",84,true,["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}",[],[194],"files",[152,171,182,192],"counts",{"_208":32,"_209":210,"_211":32,"_212":213},"pulls","branches",2,"forks","envVars",{"_214":32,"_215":32},"count","emptyCount","contents",[],{"_104":153,"_95":99,"_154":155,"_156":-5,"_157":140,"_158":101,"_159":22,"_106":219,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":220},["D",1749242299125],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":229,"_150":234,"_204":247,"_163":248,"_216":250,"_251":-5,"_252":-5,"_253":-5,"_254":-5,"_255":256},{"_104":105,"_95":96,"_106":230,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":115,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":231,"_134":232,"_137":233,"_149":22},["D",1749237439587],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":43,"_104":140,"_141":105,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[235,238,241,244],{"_104":153,"_95":99,"_154":155,"_156":-5,"_157":140,"_158":101,"_159":22,"_106":160,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":236,"_98":237},[],[99],{"_104":172,"_95":173,"_154":174,"_156":-5,"_157":140,"_158":175,"_159":22,"_106":176,"_100":177,"_162":178,"_164":179,"_166":22,"_167":-5,"_168":239,"_98":240},[],[173],{"_104":183,"_95":184,"_154":185,"_156":-5,"_157":140,"_158":186,"_159":22,"_106":187,"_100":188,"_162":178,"_164":189,"_166":22,"_167":-5,"_168":242,"_98":243},[],[184],{"_104":193,"_95":194,"_154":195,"_156":-5,"_157":140,"_158":196,"_159":197,"_106":198,"_100":199,"_162":200,"_164":201,"_166":22,"_167":-5,"_168":245,"_98":246},[],[194],[235,238,241,244],{"_104":153,"_95":99,"_154":155,"_156":-5,"_157":140,"_158":101,"_159":22,"_106":219,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":249},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]