Hello JSX

","deleted","label","children",[],[154],{"_104":174,"_95":175,"_155":176,"_157":-5,"_158":140,"_159":177,"_161":22,"_106":178,"_100":179,"_164":180,"_166":181,"_168":22,"_169":-5,"_170":182,"_98":183},"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}",[],[175],{"_104":185,"_95":99,"_155":186,"_157":-5,"_158":140,"_159":101,"_161":22,"_106":187,"_100":188,"_164":180,"_166":189,"_168":22,"_169":-5,"_170":190,"_98":191},"72684378-4bb8-11f0-9b2c-76b3cceeab13","25b90c38-4bb8-11f0-baf9-76b3cceeab13",["D",1750191601390],4,"// @ts-nocheck: fiik\n/** @jsxImportSource https://esm.town/v/jxnblk/jsx */\nimport { renderToString } from \"https://esm.sh/react-dom@19/server\";\nimport { styles } from \"./styles.tsx?hi\";\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}",[],[99],{"_104":193,"_95":194,"_155":195,"_157":-5,"_158":140,"_159":196,"_161":197,"_106":198,"_100":199,"_164":180,"_166":200,"_168":22,"_169":-5,"_170":201,"_98":202},"aa2e3c1e-4bb2-11f0-ba6d-76b3cceeab13","demo.tsx","cff194b6-430e-11f0-9e5e-76b3cceeab13",119,true,["D",1750189117979],48,"// @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}",[],[194],{"_104":204,"_95":205,"_155":206,"_157":-5,"_158":140,"_159":207,"_161":197,"_106":208,"_100":209,"_164":210,"_166":211,"_168":22,"_169":-5,"_170":212,"_98":213},"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}",[],[205],{"_104":215,"_95":216,"_155":217,"_157":-5,"_158":140,"_159":218,"_161":197,"_106":219,"_100":220,"_164":210,"_166":221,"_168":22,"_169":-5,"_170":222,"_98":223},"63d18a04-4bb8-11f0-bcde-76b3cceeab13","styles.tsx","55229bf6-4bb8-11f0-9871-76b3cceeab13",125,["D",1750191576913],2,"export const 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 },\n heading: {\n fontSize: 20,\n textTransform: \"uppercase\",\n letterSpacing: \"0.2em\",\n \"@media (min-width:40em)\": {\n fontSize: 32,\n },\n },\n};",[],[216],"files",[152,173,184,192,203,214],"counts",{"_228":32,"_229":220,"_230":32,"_231":232},"pulls","branches","forks","envVars",{"_233":32,"_234":32},"count","emptyCount","contents",[],{"_104":185,"_95":99,"_155":186,"_157":-5,"_158":140,"_159":101,"_161":22,"_106":238,"_100":188,"_164":180,"_166":189,"_168":22,"_169":-5,"_98":239},["D",1750191601390],[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":248,"_150":253,"_224":272,"_165":273,"_235":275,"_276":-5,"_277":-5,"_278":-5,"_279":-5,"_280":281},{"_104":105,"_95":96,"_106":249,"_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":250,"_134":251,"_137":252,"_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},[254,257,260,263,266,269],{"_104":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":22,"_106":162,"_100":163,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":255,"_98":256},[],[154],{"_104":174,"_95":175,"_155":176,"_157":-5,"_158":140,"_159":177,"_161":22,"_106":178,"_100":179,"_164":180,"_166":181,"_168":22,"_169":-5,"_170":258,"_98":259},[],[175],{"_104":185,"_95":99,"_155":186,"_157":-5,"_158":140,"_159":101,"_161":22,"_106":187,"_100":188,"_164":180,"_166":189,"_168":22,"_169":-5,"_170":261,"_98":262},[],[99],{"_104":193,"_95":194,"_155":195,"_157":-5,"_158":140,"_159":196,"_161":197,"_106":198,"_100":199,"_164":180,"_166":200,"_168":22,"_169":-5,"_170":264,"_98":265},[],[194],{"_104":204,"_95":205,"_155":206,"_157":-5,"_158":140,"_159":207,"_161":197,"_106":208,"_100":209,"_164":210,"_166":211,"_168":22,"_169":-5,"_170":267,"_98":268},[],[205],{"_104":215,"_95":216,"_155":217,"_157":-5,"_158":140,"_159":218,"_161":197,"_106":219,"_100":220,"_164":210,"_166":221,"_168":22,"_169":-5,"_170":270,"_98":271},[],[216],[254,257,260,263,266,269],{"_104":185,"_95":99,"_155":186,"_157":-5,"_158":140,"_159":101,"_161":22,"_106":238,"_100":188,"_164":180,"_166":189,"_168":22,"_169":-5,"_98":274},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]