don't use jsx syntax

pyi_hashes.json

@@ -3,13 +3,13 @@
   "reflex/components/__init__.pyi": "76ba0a12cd3a7ba5ab6341a3ae81551f",
   "reflex/components/base/__init__.pyi": "e9aaf47be1e1977eacee97b880c8f7de",
   "reflex/components/base/app_wrap.pyi": "387fc7a0c2da8760d9449e2893e44eec",
-  "reflex/components/base/body.pyi": "2cc870cec4b1c28081dd40467752c2b7",
+  "reflex/components/base/body.pyi": "2d16002f24c8ee0007b46ff2bf1f2c78",
   "reflex/components/base/document.pyi": "30377cdfb02b564f8de29b0473d2346c",
   "reflex/components/base/error_boundary.pyi": "c56b591d14a92b99a1e97e04afe167d7",
   "reflex/components/base/fragment.pyi": "603ee8e03af88d4a8ff6bc1fbce4e022",
   "reflex/components/base/head.pyi": "893047aa32da553711db8f1345adb6b0",
-  "reflex/components/base/link.pyi": "396488afa3b7a5b0d0e6c5e89159f857",
-  "reflex/components/base/meta.pyi": "bc4b4fda6f022a517de339ffdd667e3b",
+  "reflex/components/base/link.pyi": "e96179dc7823f354fb73a6c03e31028c",
+  "reflex/components/base/meta.pyi": "da52c3212fac6b50560863146a7afcc3",
   "reflex/components/base/script.pyi": "530cf8f47eb90082bf65942e8b5d745f",
   "reflex/components/base/strict_mode.pyi": "d972e0ff2a6f961e7df90fc27b8bb51b",
   "reflex/components/core/__init__.pyi": "44bcee7bc4e27e2f4f4707b843acf291",
@@ -26,21 +26,21 @@
   "reflex/components/datadisplay/dataeditor.pyi": "cb03d732e2fe771a8d46c7bcda671f92",
   "reflex/components/datadisplay/shiki_code_block.pyi": "87db7639bfa5cd53e1709e1363f93278",
   "reflex/components/el/__init__.pyi": "09042a2db5e0637e99b5173430600522",
-  "reflex/components/el/element.pyi": "06ac2213b062119323291fa66a1ac19e",
+  "reflex/components/el/element.pyi": "ea6b33a8545c2c845dc6c30ff1c872a4",
   "reflex/components/el/elements/__init__.pyi": "280ed457675f3720e34b560a3f617739",
   "reflex/components/el/elements/base.pyi": "6e533348b5e1a88cf62fbb5a38dbd795",
   "reflex/components/el/elements/forms.pyi": "161f1ef847e5da8755528a7977fdcf53",
   "reflex/components/el/elements/inline.pyi": "33d9d860e75dd8c4769825127ed363bb",
   "reflex/components/el/elements/media.pyi": "addd6872281d65d44a484358b895432f",
-  "reflex/components/el/elements/metadata.pyi": "974a86d9f0662f6fc15a5bb4b3a87862",
+  "reflex/components/el/elements/metadata.pyi": "a5b9b30c4649e88aa26a1a5609fc86ef",
   "reflex/components/el/elements/other.pyi": "995a4fbf10bfdb7f48808210dfe413bd",
   "reflex/components/el/elements/scripts.pyi": "cd5bd53c3a6b016fbb913aff36d63344",
   "reflex/components/el/elements/sectioning.pyi": "65aa53b1372598ec1785616cb7016032",
   "reflex/components/el/elements/tables.pyi": "e1282d8ddf4efa4c911ca104a907ee88",
   "reflex/components/el/elements/typography.pyi": "00088c9c1b68a14e5a41d837e8fdf542",
   "reflex/components/gridjs/datatable.pyi": "3db3f994640c19be5c3fa2983f71de56",
   "reflex/components/lucide/icon.pyi": "a5521a8baf8d2d7281e3fdfe6ce7073b",
-  "reflex/components/markdown/markdown.pyi": "6b268afa879e33abf651bda56be5065e",
+  "reflex/components/markdown/markdown.pyi": "1fc31d2652d3ff015c6da2c7cbab716a",
   "reflex/components/moment/moment.pyi": "6dd0c7cee5f0f29bc11d830c697d7f92",
   "reflex/components/next/base.pyi": "14aafd5b018a4bc9748a3c9980fcfe3e",
   "reflex/components/next/image.pyi": "3a0d1970e69144e9c6806e68ab99f181",
@@ -101,7 +101,7 @@
   "reflex/components/radix/themes/layout/container.pyi": "4020c3dca660027b84d11cc4198393c4",
   "reflex/components/radix/themes/layout/flex.pyi": "f814281a5635ad43dd1df23f8e356c66",
   "reflex/components/radix/themes/layout/grid.pyi": "6062188367a2c253f014f916197c963d",
-  "reflex/components/radix/themes/layout/list.pyi": "0e91d3f1c82c9094f328e5b8ecd2f60a",
+  "reflex/components/radix/themes/layout/list.pyi": "930009f82662686841e9ce97bfd4a1ea",
   "reflex/components/radix/themes/layout/section.pyi": "41895910072e023ed0fef6a8ad956046",
   "reflex/components/radix/themes/layout/spacer.pyi": "029eb0eaa731bcdff7c496e0437e22b1",
   "reflex/components/radix/themes/layout/stack.pyi": "3b0da99b00c826d087ed89fc67c595c1",

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -22,7 +22,7 @@ function AppWrap({children}) {
   {{ renderHooks(hooks) }}
 
   return (
-    {{utils.render(render, indent_width=0)}}
+    {{utils.render(render)}}
   )
 }
 
@@ -37,15 +37,15 @@ export default function MyApp({ Component, pageProps }) {
     window["__reflex"] = windowImports;
   }, []);
   return (
-    <ThemeProvider defaultTheme={ defaultColorMode } attribute="class">
-      <StateProvider>
-        <EventLoopProvider>
-            <AppWrap>
-              <Component {...pageProps} />
-            </AppWrap>
-        </EventLoopProvider>
-      </StateProvider>
-    </ThemeProvider>
+    jsx(ThemeProvider, {defaultTheme:defaultColorMode,attribute:"class"},
+      jsx(StateProvider, {},
+        jsx(EventLoopProvider, {}, 
+          jsx(AppWrap, {},
+            jsx(Component, pageProps)
+          )
+        )
+      )
+    )
   );
 }
 

reflex/.templates/jinja/web/pages/_document.js.jinja2

@@ -3,7 +3,7 @@
 {% block export %}
 export default function Document() {
   return (
-    {{utils.render(document, indent_width=0)}}
+    {{utils.render(document)}}
   )
 }
 {% endblock %}

reflex/.templates/jinja/web/pages/index.js.jinja2

@@ -12,7 +12,7 @@ export default function Component() {
     {{ renderHooks(hooks)}}
 
   return (
-    {{utils.render(render, indent_width=0)}}
+    {{utils.render(render)}}
   )
 }
 {% endblock %}

reflex/.templates/jinja/web/pages/stateful_component.js.jinja2

@@ -6,6 +6,6 @@ export function {{tag_name}} () {
   {{ renderHooksWithMemo(all_hooks, memo_trigger_hooks) }}
 
   return (
-    {{utils.render(component.render(), indent_width=0)}}
+    {{utils.render(component.render())}}
   )
 }

reflex/.templates/jinja/web/pages/utils.js.jinja2

@@ -1,116 +1,79 @@
 {# Rendering components recursively. #}
 {# Args: #}
 {#     component: component dictionary #}
-{#     indent_width: indent width #}
-{% macro render(component, indent_width=0) %}
-{% filter indent(width=indent_width) %}
-  {%- if component is not mapping %}
-    {{- component }}
-  {%- elif "iterable" in component %}
-    {{- render_iterable_tag(component) }}
-  {%- elif component.name == "match"%}
-    {{- render_match_tag(component) }}
-  {%- elif "cond" in component %}
-    {{- render_condition_tag(component) }}
-  {%- elif component.children|length %}
-    {{- render_tag(component) }}
-  {%- else %}
-    {{- render_self_close_tag(component) }}
-  {%- endif %}
-{% endfilter %}
+{% macro render(component) %}
+{%- if component is not mapping %}{{ component }}
+{%- elif "iterable" in component %}{{ render_iterable_tag(component) }}
+{%- elif component.name == "match"%}{{ render_match_tag(component) }}
+{%- elif "cond" in component %}{{ render_condition_tag(component) }}
+{%- elif component.children|length %}{{ render_tag(component) }}
+{%- else %}{{ render_self_close_tag(component) }}
+{%- endif %}
 {% endmacro %}
 
 {# Rendering self close tag. #}
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_self_close_tag(component) %}
-{%- if component.name|length %}
-<{{ component.name }} {{- render_props(component.props) }}{% if component.autofocus %} ref={focusRef} {% endif %}/>
-{%- else %}
-  {{- component.contents }}
-{%- endif %}
+{% if component.name|length %}
+jsx({{ component.name }},{{ render_props(component.props) }},{{ component.contents }})
+{% elif component.contents|length -%}{{ component.contents }}
+{% else %}""
+{% endif %}
 {% endmacro %}
 
 {# Rendering close tag with args and props. #}
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_tag(component) %}
-<{{component.name}} {{- render_props(component.props) }}>
-{{ component.contents }}
-{% for child in component.children %}
-{{ render(child) }}
-{% endfor %}
-</{{component.name}}>
+jsx(
+{% if component.name|length %}{{ component.name }}{% else %}Fragment{% endif %},
+{{ render_props(component.props) }},
+{% if component.contents|length %}{{ component.contents }},{% endif %}
+{% for child in component.children %}{% if child is mapping or child|length %}{{ render(child) }},{% endif %}{% endfor %}
+)
 {%- endmacro %}
 
 
 {# Rendering condition component. #}
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_condition_tag(component) %}
-{ {{- component.cond_state }} ? (
-  {{ render(component.true_value) }}
-) : (
-  {{ render(component.false_value) }}
-)}
+({{ component.cond_state }} ? ({{ render(component.true_value) }}) : ({{ render(component.false_value) }}))
 {%- endmacro %}
 
 
 {# Rendering iterable component. #}
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_iterable_tag(component) %}
-<>{ {{ component.iterable_state }}.map(({{ component.arg_name }}, {{ component.arg_index }}) => (
-  {% for child in component.children %}
-  {{ render(child) }}
-  {% endfor %}
-))}</>
+{{ component.iterable_state }}.map(({{ component.arg_name }},{{ component.arg_index }})=>({% for child in component.children %}{{ render(child) }}{% endfor %}))
 {%- endmacro %}
 
 
 {# Rendering props of a component. #}
 {# Args: #}
 {#     component: component dictionary #}
-{% macro render_props(props) %}
-{% if props|length %} {{ props|join(" ") }}{% endif %}
-{% endmacro %}
+{% macro render_props(props) %}{{ "{" }}{% if props|length %}{{ props|join(",") }}{% endif %}{{ "}" }}{% endmacro %}
 
 {# Rendering Match component. #}
 {# Args: #}
 {#     component: component dictionary #}
 {% macro render_match_tag(component) %}
-{
-    (() => {
-        switch (JSON.stringify({{ component.cond._js_expr }})) {
-        {% for case in component.match_cases %}
-            {% for condition in case[:-1] %}
-                case JSON.stringify({{ condition._js_expr }}):
-            {% endfor %}
-                return {{ render(case[-1]) }};
-                break;
-        {% endfor %}
-            default:
-                return {{ render(component.default) }};
-                break;
-        }
-    })()
-  }
-{%- endmacro %}
-
-
-{# Rendering content with args. #}
-{# Args: #}
-{#     component: component dictionary #}
-{% macro render_arg_content(component) %}
-{% filter indent(width=2) %}
-{# no string below for a line break #}
-
-{({ {{component.args|join(", ")}} }) => (
-  {% for child in component.children %}
-  {{ render(child) }}
+(() => {
+  switch (JSON.stringify({{ component.cond._js_expr }})) {
+  {% for case in component.match_cases %}
+    {% for condition in case[:-1] %}
+      case JSON.stringify({{ condition._js_expr }}):
+    {% endfor %}
+      return {{ render(case[-1]) }};
+      break;
   {% endfor %}
-)}
-{% endfilter %}
+    default:
+      return {{ render(component.default) }};
+      break;
+  }
+})()
 {% endmacro %}
 
 

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useReducer, useState } from "react"
+import { createContext, useContext, useMemo, useReducer, useState, createElement } from "react"
 import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "$/utils/state.js"
 
 {% if initial_state %}
@@ -77,11 +77,7 @@ export function UploadFilesProvider({ children }) {
     delete newFilesById[id]
     return newFilesById
   })
-  return (
-    <UploadFilesContext value={[filesById, setFilesById]}>
-      {children}
-    </UploadFilesContext>
-  )
+  return createElement(UploadFilesContext, {value:[filesById, setFilesById]}, children);
 }
 
 export function EventLoopProvider({ children }) {
@@ -91,11 +87,7 @@ export function EventLoopProvider({ children }) {
     initialEvents,
     clientStorage,
   )
-  return (
-    <EventLoopContext value={[addEvents, connectErrors]}>
-      {children}
-    </EventLoopContext>
-  )
+  return createElement(EventLoopContext, {value:[addEvents, connectErrors]}, children);
 }
 
 export function StateProvider({ children }) {
@@ -112,13 +104,9 @@ export function StateProvider({ children }) {
 
   return (
     {% for state_name in initial_state %}
-    <StateContexts.{{state_name|var_name}} value={ {{state_name|var_name}} }>
-    {% endfor %}
-      <DispatchContext value={dispatchers}>
-        {children}
-      </DispatchContext>
-    {% for state_name in initial_state|reverse %}
-    </StateContexts.{{state_name|var_name}}>
+    createElement(StateContexts.{{state_name|var_name}},{value: {{state_name|var_name}}},
     {% endfor %}
+    createElement(DispatchContext.Provider, {value: dispatchers}, children),
+    {% for state_name in initial_state|reverse %}){% endfor %}
   )
 }

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -1,5 +1,5 @@
 import { useTheme } from "next-themes";
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, createElement } from "react";
 import {
   ColorModeContext,
   defaultColorMode,
@@ -50,11 +50,11 @@ export default function RadixThemesColorModeProvider({ children }) {
     }
     setTheme(mode);
   };
-  return (
-    <ColorModeContext
-      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
-    >
-      {children}
-    </ColorModeContext>
+  return createElement(
+    ColorModeContext,
+    {
+      value: { rawColorMode, resolvedColorMode, toggleColorMode, setColorMode },
+    },
+    children,
   );
 }

reflex/.templates/web/components/shiki/code.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, createElement } from "react";
 import { codeToHtml } from "shiki";
 
 /**
@@ -33,7 +33,8 @@ export function Code({
     }
     fetchCode();
   }, [code, language, theme, transformers, decorations]);
-  return (
-    <div dangerouslySetInnerHTML={{ __html: codeResult }} {...divProps}></div>
-  );
+  return createElement("div", {
+    dangerouslySetInnerHTML: { __html: codeResult },
+    ...divProps,
+  });
 }