completely remove jsx files and replace them with js files

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"
 
 {% if initial_state %}
@@ -77,11 +77,11 @@ export function UploadFilesProvider({ children }) {
     delete newFilesById[id]
     return newFilesById
   })
-  return (
-    <UploadFilesContext value={[filesById, setFilesById]}>
-      {children}
-    </UploadFilesContext>
-  )
+  return createElement(
+    UploadFilesContext.Provider,
+    { value: [filesById, setFilesById] },
+    children
+  );
 }
 
 export function EventLoopProvider({ children }) {
@@ -91,11 +91,11 @@ export function EventLoopProvider({ children }) {
     initialEvents,
     clientStorage,
   )
-  return (
-    <EventLoopContext value={[addEvents, connectErrors]}>
-      {children}
-    </EventLoopContext>
-  )
+  return createElement(
+    EventLoopContext.Provider,
+    { value: [addEvents, connectErrors] },
+    children
+  );
 }
 
 export function StateProvider({ children }) {
@@ -112,13 +112,17 @@ export function StateProvider({ children }) {
 
   return (
     {% for state_name in initial_state %}
-    <StateContexts.{{state_name|var_name}} value={ {{state_name|var_name}} }>
+    createElement(
+      StateContexts.{{state_name|var_name}},
+      { value: {{state_name|var_name}} },
     {% endfor %}
-      <DispatchContext value={dispatchers}>
-        {children}
-      </DispatchContext>
+    createElement(
+      DispatchContext,
+      { value: dispatchers },
+      children
+    )
     {% for state_name in initial_state|reverse %}
-    </StateContexts.{{state_name|var_name}}>
+    )
     {% endfor %}
   )
 }

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

@@ -1,5 +1,5 @@
 import { useTheme } from "$/utils/react-theme";
-import { useEffect, useState } from "react";
+import { useEffect, useState, createElement } from "react";
 import {
   ColorModeContext,
   defaultColorMode,
@@ -11,7 +11,7 @@ export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
   const [resolvedColorMode, setResolvedColorMode] = useState(
-    defaultColorMode === "dark" ? "dark" : "light",
+    defaultColorMode === "dark" ? "dark" : "light"
   );
 
   useEffect(() => {
@@ -36,17 +36,22 @@ export default function RadixThemesColorModeProvider({ children }) {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
       console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
       );
       mode = defaultColorMode;
     }
     setTheme(mode);
   };
-  return (
-    <ColorModeContext
-      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
-    >
-      {children}
-    </ColorModeContext>
+  return createElement(
+    ColorModeContext.Provider,
+    {
+      value: {
+        rawColorMode,
+        resolvedColorMode,
+        toggleColorMode,
+        setColorMode,
+      },
+    },
+    children
   );
 }

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { codeToHtml } from "shiki";
+import { jsx } from "@emotion/react";
 
 /**
  * Code component that uses Shiki to convert code to HTML and render it.
@@ -33,7 +34,8 @@ export function Code({
     }
     fetchCode();
   }, [code, language, theme, transformers, decorations]);
-  return (
-    <div dangerouslySetInnerHTML={{ __html: codeResult }} {...divProps}></div>
-  );
+  return jsx("div", {
+    dangerouslySetInnerHTML: { __html: codeResult },
+    ...divProps,
+  });
 }

reflex/.templates/web/utils/react-theme.jsx → reflex/.templates/web/utils/react-theme.js

@@ -1,4 +1,10 @@
-import { createContext, useContext, useState, useEffect } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  createElement,
+} from "react";
 
 const ThemeContext = createContext();
 
@@ -51,10 +57,10 @@ export function ThemeProvider({ children }) {
     localStorage.setItem("theme", theme);
   }, [theme]);
 
-  return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
+  return createElement(
+    ThemeContext.Provider,
+    { value: { theme, resolvedTheme, setTheme } },
+    children
   );
 }
 

reflex/compiler/utils.py

@@ -437,7 +437,7 @@ def get_context_path() -> str:
     Returns:
         The path of the context module.
     """
-    return str(get_web_dir() / (constants.Dirs.CONTEXTS_PATH + constants.Ext.JSX))
+    return str(get_web_dir() / (constants.Dirs.CONTEXTS_PATH + constants.Ext.JS))
 
 
 def get_components_path() -> str: